How to Combine Text and Image on Button in Android using XML

This simple code snippet illustrate how to combine text and image on a button in android using XML.

This can be achieved by using drawable attribute of android button.

The drawable has the following positions

android:drawableStart
android:drawableEnd
android:drawableTop
android:drawableBottom

 

activity_text_icon_button.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@color/colorAccent"
        android:drawableStart="@drawable/ic_video"
        android:drawableTint="#ffffff"
        android:paddingLeft="20dp"
        android:text="Video Call"
        android:textColor="#ffffff"
        android:textSize="15sp"
        android:textStyle="bold" />

</RelativeLayout>

 

android button drawable

If you have any questions or suggestions kindly use the comment box or you can contact us directly through our contact page below.

 

Add a Comment