Android Snippet: How to combine Text and Image on a Button

Android Snippet: How to combine Text and Image on a Button

In this android code snippet, we are going to learn how to combine a text and image on a button. This can come in handy when you want to create a fancy button for your application.

We will achieve this programmatically and through XML interface file. We will start with the programmatic solution and thereafter we will proceed with the XML code.

Before we start, the first thing I will do is to list the environment and tools I used in this android code snippet but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Samsung Galaxy Fame Lite

Min SDK 14

Target SDK 19

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

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: TextAndImageOnButton

Package: com.inducesmile.textandimageonbutton

Keep other default selections.

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

Once you are done with creating your project, copy and paste the following code snippet to your project. Replace the code in your MainActivity.java file with the following code.

Make sure you change the package name if you did not use the same package.

package textandimageonbutton.inducesmile.com;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;

public class MainActivity extends ActionBarActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Button textAnaImageOnButton = (Button)findViewById(R.id.button);

textAnaImageOnButton.setBackgroundResource(R.drawable.button);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_settings) {

return true;

}
return super.onOptionsItemSelected(item);

}

}

A Button view was added to the interface xml file. In MainActivity.java, the instance of the button object was obtained through the Activity class method findViewById(id).

The button object calls its setBackgroundResource method and the resource id of the button that was used was passed to it.

The XML file content is shown below.

<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:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/text_image"

android:id="@+id/button"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:layout_marginTop="197dp" />

</RelativeLayout>

In addition, you can add image icon, background image and text using the XML file. This is handy when you want to separate UI codes from the business code in your application. The code snippet below shows how all this objects can be added to a button.

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/button_ground"

android:drawableTop="@drawable/button_icon"

android:textColor="#000000"

android:id="@+id/draw_button"

android:paddingTop="32sp"

android:drawablePadding="-15dp"

android:text="@string/add_to_button">

</Button>

Save the file and run your project.

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 so that you will be among the first to receive our new post once it is published

Add a Comment