I want to add image and text in center like in button

Question

Below is what I tried to do both icon and text in the center of a button but icon gets top of the image. I want them to be in the center.

 <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#fff"
                    android:layout_weight="1"
                    android:gravity="center"
                   >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/baseline_home_24"
                    />
                    <TextView
                        android:id="@+id/btnCleaner"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Cleaner"/>
                </RelativeLayout>

https://stackoverflow.com/questions/4817449/how-to-have-image-and-text-center-within-a-button — Tejashwi Kalp Taru, Sep 06 '18 at 12:56

score 1 · Accepted Answer · answered Sep 06 '18 at 12:56

Try this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:layout_weight="1"
    android:gravity="center"
    >
    <ImageView
        android:id="@+id/image" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/baseline_home_24"
        />
    <TextView
        android:id="@+id/btnCleaner"
        android:layout_toRightOf="@id/image"
        android:layout_marginLeft="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cleaner"/>
</RelativeLayout>

I just align the textView in the right of imageView. That's it. — Faysal Ahmed, Sep 06 '18 at 13:03

score 0 · Answer 2 · edited Sep 06 '18 at 12:49

Do Simply like this:-

 <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#fff">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/baseline_home_24"
                        android:layout_centerInParent="true"  />
                    <TextView
                        android:id="@+id/btnCleaner"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
/>

Hope this will help.

please add these properties in the TextView I forget to add. "android:marginLeft="10dp" — Rahul Kushwaha, Sep 07 '18 at 04:23

score 0 · Answer 3 · answered Sep 06 '18 at 13:02

What about this one?

<FrameLayout style="?android:attr/buttonStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView
        style="?android:attr/buttonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@null"
        android:clickable="false"
        android:drawableLeft="@android:drawable/ic_delete"
        android:focusable="false"
        android:gravity="center"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="Button Challenge" />
</FrameLayout>

Output:

score 0 · Answer 4 · answered Sep 06 '18 at 13:04

Try this it's relevant to your requirement:

<?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/grey_back"
    android:clickable="true"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="10dp">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:text="Do stuff" />
</LinearLayout>

If my answer helps you then please mark as a right my answer from tick mark otherwise i'm gonna remove this answer brother : https://www.google.com/search?q=right+mark+as+an+answer+stackoverflow&sxsrf=ACYBGNQVsfXj9VeT9WRKWerxeSRoAMe2uQ:1579936139192&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiQk-DimJ7nAhWBc30KHdm9CGAQ_AUoAXoECAwQAw&biw=1517&bih=730#imgrc=9_JN49MpzDykBM: — InsaneCat, Jan 25 '20 at 07:48

score 0 · Answer 5 · answered Sep 06 '18 at 13:11

You can do this using only Textview like below:

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:gravity="center">
           <TextView
            android:id="@+id/btnCleaner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cleaner"
            android:layout_centerInParent="true"
            android:drawableLeft="@drawable/yourDrawable" // your image 
            android:drawablePadding="3dp"/>
</RelativeLayout>

if you want image at left of text then use drawableLeft & if at right of text then use drawableRight. Also you can give padding to image from text by drawablePadding.

drawableleft will locate the icon on starting left not in center — Hassan Rana, Sep 06 '18 at 17:32
@HassanRana if you put set your textview layout centerInParent true then left drawable automatically comes to center with text — Rishav Singla, Sep 07 '18 at 04:44

score 0 · Answer 6 · answered Sep 06 '18 at 13:25

This can be achieved with the new MaterialButton class, found in Google's Material Components

For example:

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_icon_button"
    style="@style/Widget.MaterialComponents.Button.Icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icon_button_label_enabled"
    app:icon="@drawable/icon_24px"
    app:iconPadding="8dp"/>

Would display a button with an icon that has padding

The source code of this button and the rest of these components can be found on the project's Github here

score 0 · Answer 7 · answered Sep 30 '19 at 06:24

You can use the MaterialButton provided by the official Material Components Library.

You have to apply the app:iconGravity="textStart" attribute.
Something like:

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/..."
        app:iconGravity="textStart"
        android:text="@string/..."/>

Also you can change the padding between the icon and the text with the attribute app:iconPadding="xxdp".

I want to add image and text in center like in button

7 Answers7