How to Center Icon and Text in a Android Button with Width Set to "Fill Parent"

How to have Image and Text Center within a Button

You can fake it by making a more complex layout, but I'm not sure whether it's worth it. Here's something I hacked together:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
<Button
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:layout_alignTop="@+id/foreground"
    android:layout_alignBottom="@id/foreground"
    android:layout_alignRight="@id/foreground"
    android:layout_alignLeft="@id/foreground"
    android:onClick="clickedMe" />
   <RelativeLayout
        android:id="@id/foreground"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    <TextView  
        android:id="@+id/button_text"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" 
        android:text="@string/hello" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/button_text"
        android:paddingTop="10dip"
        android:paddingBottom="10dip"
        android:src="@drawable/icon" />
</RelativeLayout>
</RelativeLayout>

There might be a more concise way to do it. I tend to struggle getting RelativeLayout to do what I want sometimes. Note that you need to pay attention to the z-order (Button needs to appear first in the top level RelativeLayout) and you might need to adjust padding to get it to look the way you want.

On a button, text and drawable are too far away when centered

Use the MaterialButton with app:iconGravity="start" and defining the padding between the icon and the text with the app:iconPadding attribute.

Something like:

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/...."
        app:iconGravity="start"
        app:iconPadding="..."

This value can be negative.

Otherwise you can use app:iconGravity="textStart".

Here the difference of using start and textStart as iconGravity.

How to center a button and that its width is a percentage of the container?

@MishaAkopov's answer is good but I will offer a separate solution using Linear Layout.

By setting the weightsum of the layout to 10 and the weight of the button to 6 the button will be 60% of the layouts width. In addition you need to set the gravity of the LinearLayout to center or center_horizontal to ensure the button is centered.

<LinearLayout
          android:orientation="horizontal"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:gravity="center_horizontal"
          android:weightSum="10">

     <Button
         android:layout_width="0dp"
         android:layout_height="40dp"
         android:layout_weight="6"
         android:text="My Button"/>

</LinearLayout>

Is it possible to edit the sizes of images/icons inside a button with a text below in xml android studio?

If i understood well, you want to put an image inside a button with text, with the text under the image.

If so, You can put an image and a text inside a vertical linear layout, this way you can edit the image and text separatly

---

Related Topics