Adding Icons

You can add icons (and text) to your buttons and menus using the existing Android Icons and xml attributes. You can copy the Android 1.5 icons from here and place them into the three drawable folders res/drawable-hdpi, res/drawable-ldpi, and res/drawable-mdpi. OR you can navigate to android-sdk-mac_86/platforms/android-8/data/res/drawable!

You can add one of the added icons into a button in the appropriate xml file by setting the android:drawableXXXX attributes as in:

<TableRow>

<Button android:text="@string/send_sms"

android:id="@+id/ButtonSendSMS"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawableRight="@drawable/sym_call_outgoing">

</Button>

</TableRow>

In this example, the drawable appears on the right. Other positions include drawableTop, drawableBottom and drawableLeft.

You can also add icons to a menu using the android:icon attribute as in:

<?xml version="1.0" encoding="utf-8"?>

<menu

  xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:id="@+id/manage_password"

          android:title="@string/manage_password"

          android:icon="@drawable/ic_input_add"/>

  <item android:id="@+id/options"

          android:title="@string/options"

          android:icon="@drawable/ic_menu_more"/>

  <item android:id="@+id/about"

          android:title="@string/about"

          android:icon= "@drawable/ic_menu_info_details"/>

</menu>

For some strange reason, I cannot get the ic_menu_preferences.png to display properly.

ImageView vs ImageButton

It is also possible to create a clickable and touchable image using ImageView or ImageButton. One difference is that the default style of an ImageButton is clickable and focusable by default. If you use an ImageButton you may want to  set the background to "@null". Here is the xml for a clickable, focusable ImageButton.

<ImageButton android:background="@null" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/buttonDisplaySmaller01" android:src="@drawable/btn_zoom_down_normal" ></ImageButton>

Here is the same effect using an ImageView with android:focusable  and android:clickable set to true.

<ImageView android:focusable="true" android:layout_height="wrap_content" android:layout_width="wrap_content" android:clickable="true" android:id="@+id/buttonDisplaySmaller01" android:src="@drawable/btn_zoom_down_normal" ></ImageView>

You will want to handle onClick and onFocusChange. Handling onTouch allows you to change the image using setImageResource on ACTION_DOWN and then again on ACTION_UP, providing a better user experience. Here is a set of ImageViews in action.

   

Cool!

JAL