Question

I am trying to create a dashboard layout. It is different from the google i/o’s dashboard in the sense that the background of the image icon and the text below the icon is different.

In other words, the icon(image only) has a StateListDrawable for its background while the text has a transparent background. One way of doing this is to put this combination of the image and text in a LinearLayout and use it in the dashboard layout for each of the item which seems not-so-simple. Is this the only way I could do it? or is there a better and simple solution?

Update : You can take the project setup from here and experiment.

• The layout file dashboard2.xml is using the google’s DashboardLayout class. In the main activity I’m just setting the contents of the view to be dashboard2

• In that project you will find a statelist drawable in the drawable folder by the name dashboard_icon_bg_selector.xml. I want the background of all the dashboard icons to be this statelist drawable.

Any suggestion is appreciated.

Answer 1

One possible solution I can think of is to use a LayerDrawable as your TextView’s topDrawable. I’ll outline the idea, enumerate some details and attach a link to the modified example project below.

Code for a Button (in the layout file):

<Button android:id="@+id/home_btn_schedule"
    style="@style/DPDashBoardButton"
    android:text="button 1"
    android:drawableTop="@drawable/dashboard_icon_bg_selector" />

Two LayerDrawables, one for the ‘pressed/focussed/selected’ state and one for every other state (rest):

dashboard_icon_layer_background_selected.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/dashboard_icon_background_selected" />
    <item android:bottom="14dip">
        <bitmap android:src="@drawable/btn_star_big_on_pressed"
            android:gravity="center" />
    </item>
</layer-list>

dashboard_icon_layer_background_rest.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/dashboard_icon_background_rest" />
    <item android:bottom="14dip">
        <bitmap android:src="@drawable/btn_star_big_on_rest"
            android:gravity="center" />
    </item>
</layer-list>

Some particularities for this specific example:

• The reason why the star images are referenced as a bitmap is to prevent Android from scaling them to the container’s full width and height. The bottom distance is added to actually center the star with respect to the background image (textSize=12, plus 2 for padding), which, to be honest, is quite ugly to hardcode like this. Without this offset, the centered gravity will put the star image inside the center of the whole container, so including the space the text adds.
• As such, replacing the item with the bitmap by <item android:drawable="@drawable/btn_star_big_on_rest" />, will result in the star image being scaled up. Just try it once to understand the effect.
• This phenomenon is quite unfortunate, since we could potentially reference another xml drawable with above, taking advantage of all it’s already defined states! That’s why I actually had to copy over two of the star images from the Android repository: you cannot reference an xml drawable as a bitmap source and the actual images cannot be publicly referenced either. Try replacing the bitmap definition with <item android:drawable="@android:drawable/btn_star" /> to see the image getting scaled up, but keep the predefined states intact.
• You could potentially workaround the scaling issue by creating 9patches out of the star images, making a StateListDrawable for the different states and reference the resulting xml drawable in a layer item. Although Android will still stretch the whole image to the container’s full size, the 9patches can make sure only transparent pixels are getting scaled.
• // Edit: I realised there’s another limitation to this approach, as tapping the text will not make the state of the icon change. This might be what you’re after, but personally I’d say that from a user perspective it would make sense to have the whole thing respond to touch events…

Hope this makes sense! Just to show you the result: left is all in rest state, right is topleft button being pressed.

Zipped project here.