Responsive text and icon on button

Question

I tried adding some text and an icon on buttons by using "android:text" and "android:drawableTop" but the result I get isn't really correct. The text and icon aren't centered and if I try the app in landscape or change the screen size the text disappears and the icon goes out of the button a bit.

This is the layout without both "android:text" and "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>

I wonder if there is a way to make texts and icons responsive because I also tried to use svg icons but they weren't showing.

The result I get:

Portrait & Landscape

Any help would be appreciated, thanks.

please post a screenshot how is it coming and how do you want it to be? — nimi0112, Dec 04 '18 at 10:43
did u check [this](https://stackoverflow.com/questions/3634191/how-to-center-icon-and-text-in-a-android-button-with-width-set-to-fill-parent) — Rajen Raiyarela, Dec 04 '18 at 10:45

score 0 · Answer 1 · answered Dec 04 '18 at 11:07

Customizing buttons can be very frustrating in Android. I suggest you take a look to this popular library for Android called FancyButton. It offers you a wide variety of options to create the button you want by just using simple XML properties in your layout.

For example, with this bit of code:

<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" />

You can get this button with text and icon centered:

score 0 · Answer 2 · answered Dec 04 '18 at 11:09

  <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>

score 0 · Answer 3 · answered Dec 04 '18 at 11:17

Drawables and text in the images are centered horizontally correctly.
Obviously the drawable you chose is very large, so in landscape there is no space for the text and in landscape the text is pushed at the bottom.
Try with another smaller drawable and you will see both text and drawable.
You can set:

android:padding="8dp"

so the drawable is not exactly at the top edge of the button.

Responsive text and icon on button

3 Answers3