Wednesday 20 February 2013

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;
    }

}

3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Pl. provide more learning stuff for the beginner.

    ReplyDelete
  3. nice one suggestion from myself to post more customizations in android like this one.

    ReplyDelete