Android clickable layout

Question

I've got a linear layout that i have set true to be clikable + focus, But the problem is there is no focus displayed when clicked. How can i get the focus to be displayed.

Heres my code

<LinearLayout
  android:id="@+id/linear_tv_layout"
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:layout_weight="1"
  android:clickable="true"
  android:focusable="true"
  android:paddingBottom="7px">

Solution 1

I think you need to set as background for the clickable view (the layout) a state list drawable , it's a drawable resource for which you can specify different drawables for different states or combinations of states, there's one for selection, one for pression and so on. Also, the state of a layout propagates to all its children.

---

CLARIFICATIONS - this is the example from the previously linked docs:

res/drawable/button.xml : (it's the state list drawable)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

button_pressed, button_focused and button_normal are normal drawables representing the button in those states, probably png's (so pressed could be inset, focused highlighted in orange).

if you set this resource as background to your "linear layout button":

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button">
    ...
</LinearLayout>

now focusing the layout will automatically set its background image to @drawable/button_focused, and so on.

of course, all the drawables you use must already be resources in res/drawable/, together with button.xml.

Solution 2

To apply material design's button press animation to any element, set the element's android background attribute to:

android:background="?android:attr/selectableItemBackground"

In your case:

<LinearLayout
  android:id="@+id/linear_tv_layout"
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:layout_weight="1"
  android:clickable="true"
  android:focusable="true"
  android:paddingBottom="7px"
  android:background="?android:attr/selectableItemBackground">

Solution 3

@danLeon: Instead of android:background="@android:drawable/btn_default"

you should use
android:background="@android:drawable/list_selector_background"

former will modify the UI as well, which is not required.

Comments

[M2Gd]

im a bit confused with the state list, would i have to change all the linear layouts i have used or is it just for the ones i choose

[bigstones]

@M2Gd you choose which linear layouts will work like buttons by setting on them your state list drawable as a background.

[M2Gd]

i dont really understand what the state list drawable is, im new to android... i just want the background colour to change when the state pressed is true

[bigstones]

@M2Gd i added some explanations - oh, the drawables for each state can also be just colors, like: android:drawable="#FF4422" - see developer.android.com/guide/topics/resources/…

[M2Gd]

i tried that, now im getting error within that tab. This is what i had in my drable xml <selector xmlns:android="schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:background="#313CDD" /> <item android:state_focused="true" android:background="#313CDD" /> </selector> can you show me your btn_default xml

[M2Gd]

i tried that and got error messages in that tab. This is my xml <item android:state_pressed="true" android:background="#313CDD" /> <item android:state_focused="true" android:background="#313CDD" /> </selector> thanks in advance

[bigstones]

@M2Gd when you define the state list drawable you must respect the format. you have to put android:drawable, not background. android:background is for the layout.

[Josh]

this solution by @jennifer-wang will apply the default material style.

[Gian Segato]

Good answer. However, if your project targets an API level that is lower that 11, you have to change the attribute to "?attr/selectableItemBackground".

[ajinkya gaurkar]

Thank you. That's very useful and simple as well

[Vinicius Lima]

how to add a custom color background and still maintain the material design animation?