Android Button With Image And Text Example

We all know that you can set text on android.widget.Button. But you can add image in it also. You can even specify the location of the image relative to the text, such as at top, bottom, left and right to the text. This article will show you an example about how to add image and text both in android button.

1. Set Image And Text Both In Button Example.

To add both image and text in android button, you should use button property android:drawableTop, android:drawableBottom, android:drawableLeft or android:drawableRight. The property value is just a drawable object id exist in the android project. Below example will set the settings icon image at the top of the button text.

android:drawableTop="@drawable/settings_icon"

This example demonstrate four button with image and text. When you click the first two buttons, it will open android settings dialog. When you click the last two buttons, it will open android telephone dial dialog.

2. Example Project Files.

android button image text example project files

This example has three important files.

  1. MainActivity.java
  2. activity_main.xml
  3. AndroidManifest.xml

2.1 Main Activity Java File.

MainActivity.java

package com.dev2qa.buttonimagetext;

import android.content.Intent;
import android.net.Uri;
import android.provider.Settings;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

/* This activity implements View.OnClickListener so should implement onClick method. */
public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    // Below request code is used for start settings and telephone dial activity.
    private int REQ_CODE_OPEN_SETTINGS = 1;

    private int REQ_CODE_OPEN_PHONE = 2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setTitle("dev2qa.com - Android Button With Image And Text Example");

        // Get four button instance.
        Button openSettingsButton = (Button)findViewById(R.id.openSettingsActivity);
        Button openSettingsButton1 = (Button)findViewById(R.id.openSettingsActivity1);
        Button openPhoneCallButton = (Button)findViewById(R.id.openPhoneCall);
        Button openPhoneCallButton1 = (Button)findViewById(R.id.openPhoneCall1);

        // Register four buttons's onclicklistener to this activity because this activity implements View.OnClickListener interface.
        openSettingsButton.setOnClickListener(this);
        openSettingsButton1.setOnClickListener(this);
        openPhoneCallButton.setOnClickListener(this);
        openPhoneCallButton1.setOnClickListener(this);
    }

    /* This method is invoked when user click any ui portion of this activity. */
    @Override
    public void onClick(View view) {

        // Get the view id.
        int viewId = view.getId();


        if(viewId == R.id.openSettingsActivity || viewId == R.id.openSettingsActivity1)
        {
            // Create a settings intent.
            Intent intent = new Intent(Settings.ACTION_SETTINGS);

            // Open settings activity.
            startActivityForResult(intent, REQ_CODE_OPEN_SETTINGS);

        }else if(viewId == R.id.openPhoneCall || viewId == R.id.openPhoneCall1)
        {
            // Create a telephone dial intent.
            Intent intent = new Intent(Intent.ACTION_DIAL);

            // Set phone uri, please note the uir string should start with tel:.
            Uri phoneUri = Uri.parse("tel:0108888999");
            intent.setData(phoneUri);

            // Start the telephone dial activity.
            startActivityForResult(intent, REQ_CODE_OPEN_PHONE);
        }
    }
}

2.2 Main Activity Layout Xml File.

app / res / layout / activity_main.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <Button
            android:id="@+id/openSettingsActivity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/settings_icon"
            android:text="Settings"/>

        <Button
            android:id="@+id/openSettingsActivity1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableBottom="@drawable/settings_icon"
            android:text="Settings"/>

    </LinearLayout>

    <Button
        android:id="@+id/openPhoneCall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/phone_icon"
        android:text="A phone call is comming on."/>

    <Button
        android:id="@+id/openPhoneCall1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/phone_icon"
        android:text="Click to make a phone call."/>
</LinearLayout>

2.3 Android Manifest File.

app / manifests / AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.dev2qa.buttonimagetext">

    <!-- Open telephone dial activity need below permission -->
    <uses-permission android:name="android.permission.CALL_PHONE" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
(Visited 2,917 times, 2 visits today)
READ :   Use OkHttp3 To Upload And Download Json File Example

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.