Develop Reference

Android - How to apply selectableItemBackground to entire ListView item?

I am new to Android, writing my first app right now. I've got a ListView rendering a series of items, each item having multiple TextViews. I want each item in the ListView to be click-able, and to animate the click. The animation is what I am struggling with.
I have the selectableItemBackground attribute, and it works perfectly on a TextView-by-TextView basis. However, that means that the click animation only appears over that particular TextView, whereas I want it to appear over the entire list item itself.
Here is my Android view. I know that this behavior is caused by me putting the selectableItemBackground attribute on the TextView elements, I just can't figure out where else to put it to achieve the effect I'm going for.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:id="#+id/past_game_update_timestamp"
android:foreground="?android:attr/selectableItemBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:clickable="true"
android:padding="#dimen/small_padding"
android:textSize="#dimen/small_font_size" />
<TextView
android:id="#+id/past_game_start_timestamp"
android:foreground="?android:attr/selectableItemBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:clickable="true"
android:padding="#dimen/small_padding"
android:textSize="#dimen/small_font_size" />
</LinearLayout>

As part of what I understood from your question. Is that you want your whole view to be having an onClick animation.
For this you have two options :
In most cases, you should apply this functionality in your view XML by specifying the view background as:
?android:attr/selectableItemBackground for a bounded ripple.
?android:attr/selectableItemBackgroundBorderless for a ripple that
extends beyond the view. It will be drawn upon and bounded by, the nearest parent
of the view with a non-null background.
Note: selectableItemBackgroundBorderless is a new attribute introduced
in API level 21.
Please check with option 2.

Ok, after I commented on the above answer, I figured out the rest of it. I needed to make the LinearLayout clickable & focusable, and I needed to disable clickable/focusable on the TextViews. I also needed to set them to duplicateParentState. All of that allows the selectableItemBackground to work on the LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:foreground="?android:attr/selectableItemBackground"
android:focusable="true"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/small_padding">
<TextView
android:id="#+id/past_game_update_timestamp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:duplicateParentState="true"
android:focusable="false"
android:clickable="false"
android:textSize="#dimen/small_font_size" />
<TextView
android:id="#+id/past_game_start_timestamp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:duplicateParentState="true"
android:focusable="false"
android:clickable="false"
android:textSize="#dimen/small_font_size" />
</LinearLayout>

you can move ?android:attr/selectableItemBackground into the root view of your item layout.
Like this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center"
android:focusable="true"
android:clickable="true"
android:background="?android:attr/selectableItemBackground">
<TextView
android:id="#+id/past_game_update_timestamp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/small_padding"
android:textSize="#dimen/small_font_size" />
<TextView
android:id="#+id/past_game_start_timestamp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/small_padding"
android:textSize="#dimen/small_font_size" />
</LinearLayout>
don't forget to add android:focusable="true" and android:clickable="true"

Rounded corners in a card view won't work at the bottom of image with a text view

I am trying to get a card view so that I get a rounded corners image with a text under it but the thing is, when I add the text, since they are both inside of the rounded corners card view, the image is not rounded at the bottom (which is what I need). How would I accomplish that?
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_news"
android:layout_width="300dp"
android:layout_height="200dp"
android:src="#drawable/background_shape"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/news_title"
android:textColor="#color/black"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textAlignment="center"
android:layout_marginTop="5dp"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
The image (I need the bottom corners of the image also rounded):

Try to put this code in your "#drawable/background_shape". Just tried it and it all working fine.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp"/>
</shape>

The problem is the TextView is overlaying the card radius. To fix that add padding to the text view or to the card and that should solve it.
The answer marked as correct, is not clean: Adds an unnecessary drawable, the card view already has a corner radius property, making the child implement round corners as well defeat the purpose of such attribute.
Also, try to use material card view: <com.google.android.material.card.MaterialCardView/>. You might not needed it now but it has more customizations.

If you only need a circular image in that case you need to add only ImageView inside CardView, and which looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.cardview.widget.CardView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius="16dp">
<ImageView
android:id="#+id/iv_news"
android:layout_width="300dp"
android:layout_height="200dp"
android:src="#drawable/background_shape"
android:scaleType="centerCrop" />
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/news_title"
android:textColor="#color/black"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textAlignment="center"
android:layout_marginTop="5dp"/>
</LinearLayout>

How can i create vertical line with radius in cardview?

I have a card view with app:cardCornerRadius="20dp"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_margin="10dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless"
app:cardCornerRadius="20dp">
</android.support.v7.widget.CardView>
</LinearLayout>
Now I want add two vertical solid line to right of this.
like this:
enter image description here
Also vertical line must be have radius.
EDIT:
I write this:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_margin="10dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless"
app:cardCornerRadius="50dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="5dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="#color/colorBlack" />
</RelativeLayout>
</android.support.v7.widget.CardView>
And get this result:
enter image description here
I need radius for line

You can add as many as you want by adding view, like this :
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_margin="#dimen/medium_margin"
android:background="#color/darkGray" />

You could use a View within your cardview xml, this will give you the vertical lines you require as xml.
see this post for ref: vertical line

You just need a 9-patch with two lines. That's it. Something like this:
If you target API 21+, then you don't even need to care about rounded corners. Background will be cut to CardView's outline anyway. If you target older Android versions, then you need to add these rounded corners to background drawable, but that doesn't change much.

How to Make GridLayout Background Transparent?

I am implementing GridLayout in a recycler view with Images loading from the drawable folder.
Image Link here
So as you can see , the background is white and I want to make it Transparent,
My XML code for this layout is
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000"
android:id="#+id/card"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="Abcd"
android:textSize="18dp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#ffffff"
android:layout_marginTop="140dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
I have tried a lot of things that such as :-
Making Recycler View's alpha as 0
Card View's Alpha as 0
Setting Card Background Color to Transparent and setting Max Elevation to 0 so as to reduce the shadow
Still, I am not able to get the transparent Background. Can anyone suggest a new way?
Also , the Images used are Vector Images with transparent background.
UPDATE
It works now ,Thanks to #Adley
I just had to remove the card layout that i was using and cast into a normal relative layout

Edited:
Try adding card_view:cardBackgroundColor="#android:color/transparent"
to your root view (CardView).

CardView goes on top of FrameLayout, but declared first

I have simple FrameLayout with support CardView as first item, and TextView as second, so TextView must be on top of inflated view. This works on pre-Lolipop but on 21+ card takes toppest place in layout, why that's so and how to fix this? Same thing with RelativeLayout.
Layout:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>

In case someone gets here and the solution for setting elevation doesn't work for them (like in my case, where I needed to draw an image above the CardView and having a shadow on it was not acceptable), you can solve the issue by wrapping the CardView inside another FrameLayout. In the example provided, it would look something like this:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- This is the added FrameLayout -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>

I might be joining the discussion a bit late, but if you can afford giving up the CardView's elevation, you can just set the cardElevation property of the CardView in your XML layout to 0dp.
Like so:
app:cardElevation="0dp"

Just add your text view inside the card view, far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last.
This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop.

This worked for me!
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Add this layout as parent of CardView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false" />
</LinearLayout>
<!--Close parent layout-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#0000ff"
android:gravity="center"
android:text="i am top view!"
android:textAllCaps="true"
android:textColor="#00ff00"
android:textSize="30sp" />
</FrameLayout>