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.
- 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.
- 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"
- 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.
- Below is this example demo video ( android button with image and text example ).
2. Example Project Files.
- 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 - This example has three important files.
- MainActivity.java
- activity_main.xml
- 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 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.
- 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>