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">

What kind of focus do you want to display? I don't think a linearlayout shows anything when it gets focused. — Falmarri, Dec 26 '10 at 09:31
I just want after one touches the layout on screen it to highlight just like a button would indicate it has been clicked — M2Gd, Dec 27 '10 at 15:43
if somebody wants to get full solution, check this repository: https://github.com/shamanland/AndroidLayoutSelector there is custom clickable/checkable ```LinearLayout``` like a ```ToggleButton``` — Oleksii K., Oct 17 '13 at 12:23

J Wang · Answer 1 · 2015-05-12T09:42:46.780

19

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">

edited May 12 '15 at 09:42

answered May 12 '15 at 09:29

J Wang

2,075
1
20
26

Good answer. However, if your project targets an API level that is lower that 11, you have to change the attribute to "?attr/selectableItemBackground". – Gian Segato Jul 13 '15 at 08:28
Thank you. That's very useful and simple as well – ajinkya gaurkar Feb 20 '16 at 06:45
how to add a custom color background and still maintain the material design animation? – Vinicius Lima Jun 22 '16 at 00:36

bigstones · Accepted Answer · 2010-12-27T18:39:13.493

16

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.

edited Dec 27 '10 at 18:39

answered Dec 26 '10 at 14:09

bigstones

15,087
7
65
82

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 – M2Gd Dec 27 '10 at 15:46
@M2Gd you choose which linear layouts will work like buttons by setting on them your state list drawable as a background. – bigstones Dec 27 '10 at 16:43
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 – M2Gd Dec 27 '10 at 18:11
@M2Gd i added some explanations - oh, the drawables for each state can also be just colors, like: android:drawable="#FF4422" - see http://developer.android.com/guide/topics/resources/more-resources.html#Color – bigstones Dec 27 '10 at 18:41
i tried that and got error messages in that tab. This is my xml thanks in advance – M2Gd Dec 27 '10 at 20:22
@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. – bigstones Dec 27 '10 at 20:42
[this solution](http://stackoverflow.com/a/30186838/1255482) by @jennifer-wang will apply the default material style. – Josh Jun 01 '15 at 15:14

score 4 · Answer 3 · answered Aug 22 '13 at 19:46

4

@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.

answered Aug 22 '13 at 19:46

divdroid

43
3

score 2 · Answer 4 · answered Dec 26 '10 at 09:30

Try to bring that layout to front in code:

public void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);

    View mainView = this.findViewById(R.id.mainView);
    this.setContentView(mainView);

    LinearLayout linear_tv_layout = (LinearLayout)mainView.findViewById(R.id.linear_tv_layout);
    linear_tv_layout.bringToFront();
    // or: mainView.bringChildToFront(linear_tv_layout);
}

If that does not work, check if there is one or more view overlapped over that LinearLayout.

score 0 · Answer 5 · answered Jun 16 '13 at 09:31

A simple way is by setting this attribute: android:background="@android:drawable/btn_default"

<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:drawable/btn_default"
  >

score 0 · Answer 6 · answered Dec 27 '10 at 19:28

Heres a sample layout may be this can give you some idea:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
  android:background="@android:drawable/btn_default"
  android:clickable="true"
  android:focusable="true"
  android:layout_width="fill_parent"
  android:layout_height="0dip"
  android:layout_weight="1"
  >

  <ImageView
    android:id="@+id/image"
    android:src="@android:drawable/star_big_on"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

</LinearLayout>

<LinearLayout
  android:background="@android:drawable/btn_default"
  android:clickable="true"
  android:focusable="true"
  android:layout_width="fill_parent"
  android:layout_height="0dip"
  android:layout_weight="1"
  >

  <ImageView
    android:id="@+id/image"
    android:src="@android:drawable/star_big_on"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

</LinearLayout>
</LinearLayout>

i tried that, now im getting error within that tab. This is what i had in my drable xml can you show me your btn_default xml — M2Gd, Dec 27 '10 at 20:14

Android clickable layout

6 Answers6

Linked