Android Button with text and Images Part-1

In this blog i will show you how to show text with image inside button.
There are two way to achieve this.
1) ImageButton
2) Button

Download Source Code click Here

Today i will use Button to achieve this.


layout/activity_main

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="50dp"
        android:text="@string/hello_world"
        android:textSize="16sp" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal"
        android:padding="10dp" >

        <!-- For Image to the left of the text use android:drawableLeft tag -->

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/menu"
            android:drawableLeft="@drawable/down_arrow"
            android:drawablePadding="5dp"
            android:text="@string/leftimage" />
        <!-- For Image to the Right of the text use android:drawableRight tag -->

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/menu"
            android:drawablePadding="5dp"
            android:drawableRight="@drawable/down_arrow"
            android:text="@string/righttimage" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal"
        android:padding="10dp" >

        <!-- For Image to the Top of the text use android:drawableTop tag -->

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/menu"
            android:drawablePadding="5dp"
            android:drawableTop="@drawable/down_arrow"
            android:text="@string/toptimage" />
        <!-- For Image to the Bottom of the text use android:drawableBottom tag -->

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:background="@drawable/menu"
            android:drawableBottom="@drawable/down_arrow"
            android:text="@string/bottomtimage" />
    </LinearLayout>

</LinearLayout>

 2) src/com.amit.button

MainActivity.java

package com.amit.button;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

}