Android Widget Text Background

Question

I have an app with a widget but I am having some difficulty with the layout of the widget.

The basic idea if the widget should look like an icon and have a little text tag under it like any other icon on the desktop.

I found one example which uses an android:background for the TextView and uses a drawable XML:

<shape xmlns:android="http://schemas.android.com/apk/res/android"&gt;
<solid android:color="#AA111111"/>
<padding android:left="5dp" 
  android:right="5dp"
  android:bottom="1dp" 
  android:top="1dp" />
<corners android:radius="8dp" />
</shape>

However this does not work brilliantly, the text just isn't the same as the other icons on the desktop and when you rotate the phone part of the text is chopped off!

The next problem is selecting the widget, I use an ImageButton as the icon - with the android:background set to a transparent image. I have been using another drawable xml file which allows me to change the image when the widget is selected. However I would prefer the default action of an icon, where the square around the icon turns orange.

How would I achive these two effect - I know it is possible somehow as the app "sms unread count" achives exactly what I want to happen!

Answer 1

I would do something like:

<LinearLayout>
    <ImageView/>
    <TextView/>
</LinearLayout>

LinearLayout's background would be a <selector> aka StateListDrawable. The selector would specify a transparent background, that changes to orange when selected.

LinearLayout would also be the View you would set your PendingIntent on so that the user can click anywhere in the view and it will register as an onClick event.

As for your layout issues, you are just going to have to play with the layout to get the image and text to look like other icons on the home screen. I would think it wouldn't be that difficult to get a horizontally centered ImageView with a horizontally centered TextView below it, then just tweak the image dimensions and the text size till they look just like other icons on the home screen.

As for the problem you are seeing when you switch to Landscape view on your home screen, you will need to provide a landscape version of your layout XML file tweaked to display correctly in landscape mode. See my answer to this question for the method of doing that. When I make app widgets I usually get the portrait view looking perfect, then copy that layout file to the layout-land directory and start making tweaks until it looks like I want it to in landscape as well.