How can I give a series of buttons with background colors a focus?

Question

I made a layout that is just simply a textview that says "What do you want?", followed by a series of buttons underneath it.

All of the buttons can be clicked/touched, but when I scroll with the trackball, none of them become highlighted. I noticed, however, then when I disable the background colors on the buttons, I can see the orange box that shows that button's focus.

Is there any way I can visibly see the focus while still being able to have a background color on the buttons?

EDIT: Found the solution! This helped A LOT. Standard Android Button with a different color

score 1 · Answer 1 · answered Jul 15 '11 at 18:06

Create a "selector" resource in your res/drawable. It can look something like this:

  <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item 
    android:state_selected="false"
    android:state_pressed="false"
    android:drawable="@color/white" />
  <item 
    android:state_pressed="true"
    android:drawable="@color/orange" />
  <item
    android:state_selected="true"
    android:state_pressed="false"
    android:drawable="@color/blue" />
</selector>

Then set the background of your button to be:

android:background="@drawable/your_selector"

score 0 · Accepted Answer · answered Jul 15 '11 at 18:04

Rather than applying a simple background color to buttons, try applying a ColorStateList instead.

To do so, define a new XML file at

/res/color/buttonstate.xml

and use code such as the following:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="# FOCUSED COLOR HERE"
          android:state_focused="true" />
    <item android:drawable="# DEFAULT COLOR HERE" />
</selector>

Notes:

You can definitely add more colors for more states, such as pressed, enabled, and certain other factors.
In the layout or code just reference R.color.buttonstate or @color/buttonstate (the XML's filename).
Make sure the default color is last. This is because it goes down the list and finds the first item that has all of the states the same as it. If you don't provide android:state_focused="false" for the default item and put it first, it will always display.
You can do a similar thing with drawables and nine-patch drawables to make your own custom button styles.

score 0 · Answer 3 · edited Oct 20 '11 at 18:15

Rather than just change the background color, consider using a 9-patch style. This is more work to begin, but you'll have much more control over your app's appearance.

Modify your Button layout to look something like this (the style line is the kicker):

<Button
        style="@style/PushButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

Your styles.xml resource file then should contain a style similar to this:

<style name="PushButton">
    <item name="android:background">@drawable/btn</item>
</style>

Then the btn.xml (put in in res/drawable) contents should look something like this:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/btn_pressed" 
    android:state_pressed="true" />
<item android:drawable="@drawable/btn_focused"
    android:state_pressed="false"
    android:state_focused="true" />
<item android:drawable="@drawable/btn_default"
    android:state_focused="false"
    android:state_pressed="false" />

You would then use some image editor to create files named btn_pressed.9.png, btn_focused.9.png, and btn_default.9.png. Drop these files in your res/drawable.

A good starting point is the Google IO app (I lifted the code examples from it). Just grab the png files and modify them to match your desired style.

Keep in mind you can put all sorts of stuff in the style now, like text size, height and width.

How can I give a series of buttons with background colors a focus?

3 Answers3