Ripple effect is not going above the ImageView

Question

I have a CustomListView where I'm showing some text and getting an image displayed using Picasso's library. I created a xml file inside the drawable folder and for drawable-21 folder for the Ripple Effect but for some reason the effect is not going above the ImageView.

Here's my files:

drawable: listview_item_background.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle" >
            <solid
                android:color="#ffdadada"/>
        </shape>
    </item>
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle" >
            <solid
                android:color="#ffffff"/>
        </shape>
    </item>
</selector>

drawable-v21: listview_item_background.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ffdadada">
    <item android:drawable="@android:color/white"/>
</ripple>

activity_main:

<?xml version="1.0"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleMarginStart="20dp"
            app:expandedTitleMarginEnd="20dp"
            app:contentScrim="@color/colorPrimary"
            android:background="@color/colorPrimary">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:gravity="start|bottom"
                app:layout_collapseMode="parallax"
                android:background="@color/colorPrimary"
                android:orientation="vertical">

                ... 

            </LinearLayout>

            <android.support.v7.widget.Toolbar
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                app:theme="@style/ToolbarTheme"
                android:background="@android:color/transparent"
                android:id="@+id/main_toolbar">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="start"
                    android:id="@+id/toolbar_title"
                    android:textSize="20sp"
                    android:textColor="#ffffff"/>

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="#eeeeee">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                tools:ignore="UselessParent">

                <packagename.NestedListView
                    android:id="@android:id/list"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="4dp"
                    android:divider="#eeeeee"
                    android:drawSelectorOnTop="true"/>

            </LinearLayout>

        </FrameLayout>

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

NestedListView:

public class NestedListView extends ListView implements View.OnTouchListener, AbsListView.OnScrollListener {

private int listViewTouchAction;
private static final int MAXIMUM_LIST_ITEMS_VIEWABLE = 99;

public NestedListView(Context context, AttributeSet attrs) {
    super(context, attrs);
    listViewTouchAction = -1;
    setOnScrollListener(this);
    setOnTouchListener(this);
}

@Override
public void onScroll(AbsListView view, int firstVisibleItem,
                     int visibleItemCount, int totalItemCount) {
    if (getAdapter() != null && getAdapter().getCount() > MAXIMUM_LIST_ITEMS_VIEWABLE) {
        if (listViewTouchAction == MotionEvent.ACTION_MOVE) {
            scrollBy(0, -1);
        }
    }
}

@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}

@SuppressLint("DrawAllocation")
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int newHeight = 0;
    final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    if (heightMode != MeasureSpec.EXACTLY) {
        ListAdapter listAdapter = getAdapter();
        if (listAdapter != null && !listAdapter.isEmpty()) {
            int listPosition;
            for (listPosition = 0; listPosition < listAdapter.getCount()
                    && listPosition < MAXIMUM_LIST_ITEMS_VIEWABLE; listPosition++) {
                View listItem = listAdapter.getView(listPosition, null, this);
                //now it will not throw a NPE if listItem is a ViewGroup instance
                if (listItem instanceof ViewGroup) {
                    listItem.setLayoutParams(new LayoutParams(
                            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                }
                listItem.measure(widthMeasureSpec, heightMeasureSpec);
                newHeight += listItem.getMeasuredHeight();
            }
            newHeight += getDividerHeight() * listPosition;
        }
        if ((heightMode == View.MeasureSpec.AT_MOST) && (newHeight > heightSize)) {
            if (newHeight > heightSize) {
                newHeight = heightSize;
            }
        }
    } else {
        newHeight = getMeasuredHeight();
    }
    setMeasuredDimension(getMeasuredWidth(), newHeight);
}

@Override
public boolean onTouch(View v, MotionEvent event) {
    if (getAdapter() != null && getAdapter().getCount() > MAXIMUM_LIST_ITEMS_VIEWABLE) {
        if (listViewTouchAction == MotionEvent.ACTION_MOVE) {
            scrollBy(0, 1);
        }
    }
    return false;
}

MainActivity:

NestedListView list = (NestedListView)findViewById(android.R.id.list);
            CustomList adapter = new CustomList(MainActivity.this, myRssFeed.getList());
            adapter.addAll();
            list.setAdapter(adapter);

custom_listview_item:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="2dp"
        app:cardElevation="2dp"
        android:layout_marginBottom="@dimen/cardMarginVertical"
        android:layout_marginLeft="@dimen/cardMarginHorizontal"
        android:layout_marginRight="@dimen/cardMarginHorizontal"
        android:layout_marginTop="@dimen/cardMarginVertical"
        app:cardPreventCornerOverlap="false"
        app:contentPadding="0dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="@drawable/listview_item_background"
            android:id="@+id/ln">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="170dp"
                android:background="#d6d6d6"
                android:contentDescription="@null"
                android:id="@+id/image"
                android:scaleType="centerCrop" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingRight="16dp"
                android:paddingLeft="16dp"
                android:layout_marginBottom="8dp"
                android:textSize="18sp"
                android:fontFamily="sans-serif"
                tools:ignore="HardcodedText,UnusedAttribute"
                android:id="@+id/title"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="36dp"
                android:layout_marginTop="16dp"
                android:paddingEnd="6dp"
                android:paddingRight="6dp"
                android:background="@drawable/listview_item_background"
                android:text="@string/condividi"
                android:textStyle="bold"
                android:textSize="16sp"
                android:textColor="@color/material_text_dialogs"
                android:gravity="center|center_vertical|center_horizontal"
                android:stateListAnimator="@null"
                tools:ignore="RtlHardcoded,RtlSymmetry,UnusedAttribute"
                android:id="@+id/condividi"/>

        </LinearLayout>

    </android.support.v7.widget.CardView>

</FrameLayout>

CustomList class:

public class CustomList extends ArrayAdapter<RSSItem> {

private static Activity context = null;
private final List<RSSItem> web;

public CustomList(Activity context, List<RSSItem> web) {
    super(context, R.layout.new_listview, web);
    CustomList.context = context;
    this.web = web;
}

@Override
public View getView(final int position, View view, ViewGroup parent) {
    LayoutInflater inflater = context.getLayoutInflater();
    @SuppressLint({"ViewHolder", "InflateParams"}) final View rowView = inflater.inflate(R.layout.new_listview, null, true);

    ImageView imageView = (ImageView)rowView.findViewById(R.id.image);
    Picasso.with(context).load(web.get(position).getImage()).into(imageView);

    TextView textView = (TextView)rowView.findViewById(R.id.title);
    textView.setText(Html.fromHtml(web.get(position).getTitle()));

      LinearLayout linearLayout = (LinearLayout)rowView.findViewById(R.id.notizia);
      linearLayout.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {

              String url = web.get(position).getLink();
              if (!url.startsWith("http://") && !url.startsWith("https://"))
                  url = "http://" + url;
              Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
              String title = "Completa azione usando:";
              Intent chooser = Intent.createChooser(browserIntent, title);
              context.startActivity(chooser);

          }
      });


      Button button = (Button)rowView.findViewById(R.id.condividi);
      button.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
          }
      });

      return rowView;

  }
}

That's how I display the ImageView.

Could you help me please?

Doucet

Does imageview take focus when you click on LinearLayout – Edessa

Nope, the ripple effect just goes under the image, but if I click one the image I see the ripple effect extended on the rest of the LinearLayout (where I have the TextView) – Doucet

Post your Adapter code as well plz. – Konya

@Konya check the edit – Doucet

Answer 1

Few days back I was also facing same issue. I solved my issue by wrapping ImageView inside FrameLayout and applying android:foreground property on FrameLayout. You also have to set android:clickable property of FrameLayout to true or should set onClickListener to FrameLayout.

Please check my answer in following thread in following link.

Let me know if it helps.

Ardis

I did like this: <FrameLayout> <CardView> <LinearLayout> <FrameLayout android:foreground="@drawable/listview_item_background" android:clickable="true"> <LinearLayout> ...content... </LinearLayout> </FrameLayout> </LinearLayout> </CardView> </FrameLayout> – Doucet

Answer 2

I managed to fix the issue without an extra layout in my case.:

    <CardView ...>
       <RelativeLayout
           ...
           android:clickable="true"
           android:focusable="true"
           android:foreground="?attr/selectableItemBackground">

           <ImageView .../>
        </RelativeLayout>
     </CardView>

Mcnully