Android Button With Image And Text Example

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

1. Set Image And Text Both In Button Example.

  1. To add both image and text to the android button, you should use the button property android:drawableTop, android:drawableBottom, android:drawableLeft, or android:drawableRight.
  2. The property value is just a drawable object id that exists in the android project. The below example will set the settings icon image on the top of the button text.
    android:drawableTop="@drawable/settings_icon"
  3. This example demonstrates four buttons with images and text. When you click the first two buttons, it will open the android settings dialog. When you click the last two buttons, it will open the android telephone dial dialog.
  4. Below is this example demo video ( android button with image and text example ).

2. Example Project Files.

  1. Below is the example project source files list.
    C:\WORKSPACE\WORK\DEV2QA.COM-EXAMPLE-CODE\ANDROIDEXAMPLEPROJECT\BUTTONIMAGETEXT
    │   .gitignore
    │   build.gradle
    │   gradle.properties
    │   gradlew
    │   gradlew.bat
    │   settings.gradle
    │
    ├───.idea
    │       gradle.xml
    │       misc.xml
    │       modules.xml
    │       runConfigurations.xml
    │
    ├───app
    │   │   .gitignore
    │   │   build.gradle
    │   │   proguard-rules.pro
    │   │
    │   └───src
    │       ├───androidTest
    │       │   └───java
    │       │       └───com
    │       │           └───dev2qa
    │       │               └───buttonimagetext
    │       │                       ExampleInstrumentedTest.java
    │       │
    │       ├───main
    │       │   │   AndroidManifest.xml
    │       │   │
    │       │   ├───java
    │       │   │   └───com
    │       │   │       └───dev2qa
    │       │   │           └───buttonimagetext
    │       │   │                   MainActivity.java
    │       │   │
    │       │   └───res
    │       │       ├───drawable
    │       │       │       ic_launcher_background.xml
    │       │       │       phone_icon.png
    │       │       │       settings_icon.png
    │       │       │
    │       │       ├───drawable-v24
    │       │       │       ic_launcher_foreground.xml
    │       │       │
    │       │       ├───layout
    │       │       │       activity_main.xml
    │       │       │
    │       │       ├───mipmap-anydpi-v26
    │       │       │       ic_launcher.xml
    │       │       │       ic_launcher_round.xml
    │       │       │
    │       │       ├───mipmap-hdpi
    │       │       │       ic_launcher.png
    │       │       │       ic_launcher_round.png
    │       │       │
    │       │       ├───mipmap-mdpi
    │       │       │       ic_launcher.png
    │       │       │       ic_launcher_round.png
    │       │       │
    │       │       ├───mipmap-xhdpi
    │       │       │       ic_launcher.png
    │       │       │       ic_launcher_round.png
    │       │       │
    │       │       ├───mipmap-xxhdpi
    │       │       │       ic_launcher.png
    │       │       │       ic_launcher_round.png
    │       │       │
    │       │       ├───mipmap-xxxhdpi
    │       │       │       ic_launcher.png
    │       │       │       ic_launcher_round.png
    │       │       │
    │       │       └───values
    │       │               colors.xml
    │       │               strings.xml
    │       │               styles.xml
    │       │
    │       └───test
    │           └───java
    │               └───com
    │                   └───dev2qa
    │                       └───buttonimagetext
    │                               ExampleUnitTest.java
    │
    └───gradle
        └───wrapper
                gradle-wrapper.jar
                gradle-wrapper.properties
  2. This example has three important files.
  3. MainActivity.java
  4. activity_main.xml
  5. AndroidManifest.xml

2.1 Main Activity Java File.

  1. 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 the 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 the user clicks 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.

  1. 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.

  1. 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>

Leave a Comment

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.