Circular Button with Icon and Text in Android

Rounded android button can be used for many purposes to make awesome application. We can see many applications that have used circle button or rounded corner. In this tutorial, I am going to show how to make circular android button and to add icons/images and text in the same button.

To make circular button in android app, you don’t need any java code, this can be done by using only XML. Rounded button can also be created by using java code but it is time consuming and need to have advance knowledge of java programming.

Here you will learn to make circular/rounded corner button using XML only.

Related:
Android Button with Icon and Text
Adding Badge (Item Count) to Android Button
Android Switch Button Example

Android Example: How to Create Circular Button with Icon and Text in Android

First you have to create a new XML file in drawable folder to make rounded button. In this file I have made a rectangle and gave border radius to make circular and fill the background and border color. Following is the complete content of XML drawable file.

res/drawable/ circle.xml

	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<corners android:radius="1000dp" />
	<solid android:color="#41ba7a" />
	<stroke
	android:width="2dip"
	android:color="#03ae3c" />
	<padding
	android:bottom="4dp"
	android:left="4dp"
	android:right="4dp"
	android:top="4dp" />
	</shape>

view rawcircle.xml hosted with ❤ by GitHub

XML Layout File

This is the XML layout file where I have added different buttons with image and text together and set background to the drawable file that we have created above. Following is the complete content of XML layout file.

res/layout/circular_button_with_image_and_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:gravity="center_horizontal"
	android:orientation="vertical"
	android:padding="16dp">
	<LinearLayout
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:orientation="horizontal">
	<Button
	android:layout_width="100dp"
	android:layout_height="100dp"
	android:background="@drawable/circle"
	android:drawableTop="@android:drawable/ic_dialog_email"
	android:paddingTop="20dp"
	android:text="Contact"
	android:textColor="#fff" />
	<Button
	android:layout_width="100dp"
	android:layout_height="100dp"
	android:layout_marginLeft="10dp"
	android:background="@drawable/circle"
	android:drawableTop="@android:drawable/ic_dialog_map"
	android:paddingTop="20dp"
	android:text="Map"
	android:textColor="#fff" />
	<Button
	android:layout_width="100dp"
	android:layout_height="100dp"
	android:layout_marginLeft="10dp"
	android:background="@drawable/circle"
	android:drawableTop="@android:drawable/ic_dialog_info"
	android:paddingTop="20dp"
	android:text="Info"
	android:textColor="#fff" />
	</LinearLayout>
	</LinearLayout>

view rawcircular_button_with_image_and_text.xml hosted with ❤ by GitHub

Java Activity File

Following is the default code of java activity file.

src/ RoundedAndroidButton.java

	package viralandroid.com.androidxmluserinterfacetutorial;
	import android.os.Bundle;
	import android.support.v7.app.AppCompatActivity;
	public class RoundedAndroidButton extends AppCompatActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.circular_button_with_image_and_text);
	}
	}

view rawRoundedAndroidButton.java hosted with ❤ by GitHub

Strings.xml File

res/values/strings.xml

	<resources>
	<string name="app_name">Circular Button with Icon and Text</string>
	</resources>

view rawstrings.xml hosted with ❤ by GitHub

Now, run your Circular Button with Icon and Text in Android application which will look like above screenshot. If you have any question please mention in the comment box below.