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;
}
}
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;
}
}
This comment has been removed by the author.
ReplyDeletePl. provide more learning stuff for the beginner.
ReplyDeletenice one suggestion from myself to post more customizations in android like this one.
ReplyDelete