Отзывчивый текст и значок на кнопке

Question

Я попытался добавить текст и значок на кнопки, используя "android: text" и "android: drawableTop", но полученный результат не совсем корректен. Текст и значок не центрированы, и если я попробую приложение в альбомной ориентации или изменим размер экрана, текст исчезнет, ​​и значок немного выйдет из кнопки.

Это макет без "android: text" и "android: drawableTop":

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/redButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#FF0000"
        app:layout_constraintBottom_toTopOf="@+id/blueButton"
        app:layout_constraintEnd_toStartOf="@+id/yellowButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/greenButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#00FF00"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/blueButton"
        app:layout_constraintTop_toBottomOf="@+id/yellowButton" />

    <Button
        android:id="@+id/blueButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#0000FF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/greenButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/redButton" />

    <Button
        android:id="@+id/yellowButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#FFFF00"
        app:layout_constraintBottom_toTopOf="@+id/greenButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/redButton"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Интересно, есть ли способ сделать текст и значки отзывчивыми, потому что я также пытался использовать значки SVG, но они не показывались.

В результате я получаю:

Портрет и Пейзаж

Любая помощь будет оценена, спасибо.

Answer 1

Drawables и текст на изображениях по центру по горизонтали правильно.
Очевидно, что выбранный вами объект рисования очень большой, поэтому в альбомной ориентации места для текста нет, а в альбомной ориентации текст помещается внизу.
Попробуйте с другим меньшим рисунком, и вы увидите текст и рисунок.
Вы можете установить:

android:padding="8dp"

таким образом, рисование находится не совсем у верхнего края кнопки.

Answer 2

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="4"
        android:orientation="vertical">
         <Button
            android:id="@+id/btnRed"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:background="@color/colorAccent"
            android:textAllCaps="false"
            android:drawableLeft="@drawable/ic_action_mywallet"
            android:layout_weight="1"
            android:text="Red Button"/>
          <Button
            android:id="@+id/btnGreen"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:background="@color/colorAccent"
            android:textAllCaps="false"
            android:drawableLeft="@drawable/ic_action_mywallet"
            android:layout_weight="1"
            android:text="Green Button"/>
          <Button
            android:id="@+id/btnBlue"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:background="@color/colorAccent"
            android:textAllCaps="false"
            android:drawableLeft="@drawable/ic_action_mywallet"
            android:layout_weight="1"
            android:text="Blue Button"/>
          <Button
            android:id="@+id/btnYellow"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:background="@color/colorAccent"
            android:textAllCaps="false"
            android:drawableLeft="@drawable/ic_action_mywallet"
            android:layout_weight="1"
            android:text="Yellow Button"/>

 </LinearLayout>

Answer 3

Настройка кнопок может быть очень неприятной в Android. Я предлагаю вам взглянуть на эту популярную библиотеку для Android под названием FancyButton. Он предлагает вам широкий выбор вариантов создания нужной кнопки, просто используя простые свойства XML в макете.

Например, с этим битом кода:

<mehdi.sakout.fancybuttons.FancyButton
    android:id="@+id/btn_spotify"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="10dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="10dp"
    fancy:fb_borderColor="#FFFFFF"
    fancy:fb_borderWidth="1dp"
    fancy:fb_defaultColor="#7ab800"
    fancy:fb_focusColor="#9bd823"
    fancy:fb_fontIconResource="&#xf04b;"
    fancy:fb_iconPosition="left"
    fancy:fb_radius="30dp"
    fancy:fb_text="SHUFFLE PLAY"
    fancy:fb_textColor="#FFFFFF" />

Вы можете получить эту кнопку с текстом и значком по центру: