Android Button with Icon and Text

In this tutorial, you will learn to add icon and text in a button. Adding icon in android button is very easy. You can add icons in android button using XML attributes android:drawableLeft, android:drawableRight, android:drawableTop and android:drawableBottom. 

If you want to display image in the left side of button text use drawableLeft property, if you want to display image in right side of button text use drawableRight properties, similarly if you want to display icon/image in top of text i.e. text below icon uses drawableTop and to display icon in below text uses drawableButtom property.

Here, you will learn to display image in four sides of android button left, right, top and button using relative layout / linear layout.

Related:
Android ImageButton Example
Android EditText Example
How to Set Android Button and TextView Border Color

Android Example: How to Use Icon and Text Together in Android Button

Following is the XML layout file where I have added different buttons to display image/icon in different side of button with text.

res/layout/android_button_with_icon_text.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	android:padding="16dp">
	<LinearLayout
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:gravity="center_horizontal"
	android:orientation="horizontal">
	<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:background="#d9a950"
	android:drawableTop="@drawable/setting_icon"
	android:paddingBottom="5dp"
	android:paddingLeft="16dp"
	android:paddingRight="16dp"
	android:paddingTop="8dp"
	android:text="\nButton"
	android:textColor="#e8e9e9" />
	<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginLeft="16dp"
	android:layout_marginRight="16dp"
	android:background="#d9a950"
	android:drawableTop="@drawable/comment_ic"
	android:paddingBottom="5dp"
	android:paddingLeft="16dp"
	android:paddingRight="16dp"
	android:paddingTop="8dp"
	android:text="\nButton"
	android:textColor="#e8e9e9" />
	<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:background="#d9a950"
	android:drawableTop="@drawable/sync_refresh_icon"
	android:paddingBottom="5dp"
	android:paddingLeft="16dp"
	android:paddingRight="16dp"
	android:paddingTop="8dp"
	android:text="\nButton"
	android:textColor="#e8e9e9" />
	</LinearLayout>
	<Button
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="26dp"
	android:background="#b2b419"
	android:drawableRight="@android:drawable/sym_call_outgoing"
	android:paddingBottom="16dp"
	android:paddingLeft="16dp"
	android:paddingRight="36dp"
	android:paddingTop="10dp"
	android:text="\nButton with Right Icon"
	android:textColor="#e8e9e9" />
	<Button
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:background="#b2b419"
	android:drawableLeft="@android:drawable/sym_call_outgoing"
	android:paddingBottom="16dp"
	android:paddingLeft="16dp"
	android:paddingRight="36dp"
	android:paddingTop="10dp"
	android:text="\nButton with Left Icon"
	android:textColor="#e8e9e9" />
	</LinearLayout>

view rawandroid_button_with_icon_text.xml hosted with ❤ by GitHub

Following is the default java code of activity file.

src/ AndroidButtonWithIconAndText.java

	//Android Combining text & image on a Button or ImageButton or TextView in RelativeLayout
	package viralandroid.com.androidxmluserinterfacetutorial;
	import android.os.Bundle;
	import android.support.v7.app.AppCompatActivity;
	public class AndroidButtonWithIconAndText extends AppCompatActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.android_button_with_icon_text);
	}
	}

view rawAndroidButtonWithIconAndText.java hosted with ❤ by GitHub

Following is the content of strings.xml file

res/values/strings.xml

	<resources>
	<string name="app_name">Android Button With Icon And Text</string>
	</resources>

view rawstrings.xml hosted with ❤ by GitHub

Now, run your Android Button with Icon and Text application, you will see the five buttons with icon and text.