Create Android Button with Icon and Text Programmatically

In my android tips section, I usually write about common issues beginners android developers face and the solution to it. Today we are going to learn how to combine icon and text in android button.

Android buttons with icon and text create a visually appealing UI in our application and sometimes, the combination of icon and text on a button clearly pass the message the button intended to pass.

There are different ways to achieve this but we will focus on using only XML code.

It is also possible to create a button in a graphic software like Photoshop with icon and text or by creating a custom Button View which extends from the default android button.

Since we are going to focus on using XML code to achieve this, lets start.

Before we dive into more details, it is important for us to understand what we are planning to achieve. Below is the screen-shot of the application we will be creating.

android button icon

Lets start to soil our hands in code. Start up your IDE. For this tutorial, I am using the following tools and environment, feel free to use what works for you.

Windows 7

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 23

To create a new android application project, follow the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidButtonIconAndText

Package: com.inducesmile.androidbuttoniconandtext

Select Blank Activity

Name your activity : MainActivity

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

Strings.xml

We are going to update our project strings.xml file located in the values folder inside the res folder. Open the file and add the code below to it.

<string name="app_name">Button With Icon and Text</string>
<resources>
    <string name="app_name">Button With Icon and Text</string>
    <string name="button_name">Icon and text</string>
</resources>

Colors.xml

Open the colors.xml file in the same location as the strings.xml file and add the code below to the file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorDivider">#727272</color>
</resources>

Drawable Resource

Since our buttons will have a round corners, we are going to create a drawable resource file. Name this file rounded_corner.xml inside the drawable folder.

Rounded_Corner.xml

Open this resource file once you have created it and add the below code to the file.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="3dip"
        android:color="@color/colorDivider" />
    <corners android:radius="10dip" />
    <padding
        android:bottom="10dip"
        android:left="10dip"
        android:right="10dip"
        android:top="10dip" />
</shape>

Icon Image

One more thing to do inside the drawable folder, place the image you will like to use in the button inside this folder. Remember you can also use the android built-in icon if you wish. In that case you do not need to add any image in your drawable folder.

Activity_main.xml

In our main layout file – activity_main.xml, we are going to use two different methods to achieve the android button with icon and text. Feel free to use the one that you prefer the most.

The first example will use android button View with property android:drawableLeft=”@drawable/icontwo”. This will take the attached image and place it in the left side of the button.

The second example will make use of a LinearLayout which will wrap an ImageView and a Button View in a horizontal orientation.

Open your activity_main.xml file and add the code below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.inducesmile.androidbuttonwithiconandtext.MainActivity">
    <Button
        android:id="@+id/button_with_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawablePadding="15dp"
        android:padding="16dp"
        android:layout_marginTop="48dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:drawableLeft="@drawable/icontwo"
        android:drawableStart="@drawable/icontwo"
        android:background="@drawable/rounded_corner"
        android:textStyle="bold"
        android:textSize="18sp"
        android:textColor="@color/colorPrimary"
        android:text="@string/button_name" />
    <LinearLayout
        android:id="@+id/layout_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/button_with_icon"
        android:gravity="center"
        android:layout_marginTop="48dp"
        android:background="@drawable/rounded_corner"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/icontwo" />
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:background="@color/colorDivider" />
        <Button
            android:id="@+id/button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_weight="1"
            android:textStyle="bold"
            android:textSize="18sp"
            android:textColor="@color/colorPrimary"
            android:background="@android:color/transparent"
            android:text="@string/button_name" />
    </LinearLayout>
</RelativeLayout>

MainActivity.java

Since our focus is on XML design, the MainActivity class will retain its default code as shown below.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

You can see that the layout file is very simple. Also notice that we have set the background properties of the Views to the dash line drawable resources we created above.

This brings us to the end of this tutorial. I hope that you have learn something. Run your app to see for yourself.

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email address so that you will be among the first to receive my new android blog post once it is published.

Please if you love this tutorial, kindly download my android app – Complete Mathematics – in Google Play Store and let me know what you think about it.

OTHER INTERESTING POSTS:

Add a Comment