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.

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://pkrkinth.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>

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://pkrkinth.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>

Java Activity File

Following is the default code of java activity file.

src/ RoundedAndroidButton.java

package pkrkinth.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);

}

}

Strings.xml File

res/values/strings.xml

<resources>

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

</resources>

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.