Skip to main content

Posts

Showing posts with the label Android Basic Tutorial 9 - How to Display Images on Buttons | Image Button

Android Basic Tutorial 8 - Button Left | Right | Top | Bottom Image

To display text along with text on a button, you have to use the
android:drawableLeft, android:drawableRight, android:drawableTop,  or android:drawableBottomattribute
within a Button View. This enables you to display an image at the left, right, top, or bottom of  the button. You can also combine all these attributes, like this:

< Button android:id="@+id/imageTextButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/ic_launcher" android:drawableBottom="@drawable/ic_launcher" android:drawableLeft="@drawable/ic_launcher" android:drawableRight="@drawable/ic_launcher" android:text="Android"/>


Android Basic Tutorial 9 - How to Display Images on Buttons | Image Button

As the saying goes, a picture is worth a thousand words. Hence, sometimes it would be more intuitive and descriptive to display a picture on top of a button rather than words. 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" >
<ImageButtonandroid:id="@+id/imageButton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/ic_launcher"android:onClick="onToggle" />
<Button android:id="@+id/imageTextButton1" android:layout_width="wrap_content" android:layout_height="wrap_content"android:drawableTop="@drawable/ic_launcher"android:text="Android"/>
<Button android:id="@+id/imageTextButton2" android:layout_width="wrap_content" android:layout_height="wr…