Clickable layout with inner views behavior issue

Question

I am testing creating a compound view, so I started with a Linear Layout containing a ImageView and a TextView. These LinearLayout will represent a view similar to a partial list, and I made it clickable. The inner Views of the layout have selectors as its color (TextView) and image (ImageView). In the API 19 (KitKat), the click behavior is ok (screenshot 1) but on API 15 and API 10 (screenshot 2), the click didn't changed the selector state.

The code of each 'list item' is:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/listitem_login"
    android:clickable="true"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="15dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:src="@drawable/signin_signup_icon_facebook" />

    <TextView
        style="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Facebook"
        android:textColor="@color/option_text_color" />
 </LinearLayout>

API 19

API 15

EDIT: I used the touch listener approach. If someday I find a best solution (without Java code), I edit here. My approach, based on the answers (adding the a View.OnTouchListener to the LinearLayouts):

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    ViewGroup container = (ViewGroup) view;
    boolean pressed;
    if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) pressed = true;
    else if (motionEvent.getAction() == MotionEvent.ACTION_UP) pressed = false;
    else return false;

    for (int i = 0; i < container.getChildCount(); i++) {
        container.getChildAt(i).setPressed(pressed);
    }

    return false;
}

In an old 2.3 Android the code runs a bit slowly but works too.

It isn't a list. It's a LinearLayout with inner LinearLayouts — Rafael Toledo, Apr 29 '14 at 04:37

Ginsan · Accepted Answer · 2014-04-29T05:01:10.237

3

I tried in different APIs and have the same problem with you. I think the old API may not have this feature which allows inner view's appearance to respond to it's parent view's click method.

You can change the inner view's appearance in your code by using touchListenr or you can try not using LinearLayout but just a TextView with a picture in it , use android:drawableLeft, then you can change both image and text and background at the same time.

EDIT: using onTouchListener like this:

@Override
public boolean onTouch(View v, MotionEvent event) {

if (event.getAction() == MotionEvent.ACTION_DOWN) {
    imageView.setPressed(true);
    textView.setPressed(true);
}
else if (event.getAction() == MotionEvent.ACTION_UP) {
    imageView.setPressed(false);
    textView.setPressed(false);
}
return false;
}

Hope it mey help you.

edited Apr 29 '14 at 05:01

answered Apr 29 '14 at 04:50

Ginsan

344
2
8

The reason that I didn't used a compound drawable is that, if I used wrap_content in TextView, the background didn't filled all the width, and, if I use match_parent, the image always aligned the left side of the screen... – Rafael Toledo Apr 29 '14 at 05:15
Yes…it has that problem. Just make it in Java code, anaway, it's not so much complex. ps. if you find a solution without Java please tell me ^_^ @Rafael – Ginsan Apr 29 '14 at 07:25

score 1 · Answer 2 · edited May 23 '17 at 12:19

1

you should not use 4 layouts for same kind of layout it, better approach would be use listview.But this can also be solved like this:

set ontouchlistner for linear layout

case MotionEvent.ACTION_DOWN:
//change image view (white image) and text color(white) and linear layout background color(Red) here
  break;
case MotionEvent.ACTION_UP:
//change image view (red image) and text color(red) and linear layout background color(white) here
  break;

this will solve your problem, and surely it will work like charm or you can use linear layout to work like button and set selector for layout like this: Making a LinearLayout act like an Button

edited May 23 '17 at 12:19

Community

1
1

answered Apr 29 '14 at 04:42

Hamad

5,096
13
37
65

The reason to use the LinearLayouts is that the list may not scroll. And the recommendation for no scrollable lists is to use LinearLayout, isn't it? – Rafael Toledo Apr 29 '14 at 05:22
hmm! ok! does my solution helped you? – Hamad Apr 29 '14 at 05:29

score 0 · Answer 3 · edited May 23 '17 at 12:07

Try Some like that:

Your Xml file

    <LinearLayout
    android:id="@+id/linearLaout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/listitem_login"
    android:clickable="true"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="15dp">

    <ImageView
        android:id="@+id/iamge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:src="@drawable/signin_signup_icon_facebook" />

    <TextView
        android:id="@+id/textView"
        style="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Facebook"
        android:textColor="@color/option_text_color" />
 </LinearLayout>

simply Which click change the background of linear Layout Color and also change the background on image view and also chnage the color of text view. and others remain same.

Check that link use like that selector totatly Android LinearLayout Selector background color

There's no Java code. I only inflated from XML in a Fragment — Rafael Toledo, Apr 29 '14 at 05:39

Clickable layout with inner views behavior issue

3 Answers3