Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CardView background color states not being respected

In brief:

How can we define color states of CardView's cardBackgroundColor property (in a ListView layout, in this case)?

(I am using RC1 of Android L developer preview, on a phone with 4.4 installed, and "com.android.support:cardview-v7:21.0.0-rc1" in build.gradle)

Longer:

In CardView layout, we set the corner radius and background color of the CardView via cardCornerRadius and cardBackgroundColor.

However, the background color doesn't repect selected states, i.e. if the list item is pressed, for example.

If, in the inner view of the CardView, you set a background colour, and associated states, which are respected, however, it will display over the corners you defined in the CardView.

So, how can we ensure the states in CardView's cardBackgroundColor are respected?

Here's the color used for the cardBackgroundColor, colour_with_states.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:state_focused="true"  android:state_enabled="false" android:state_pressed="true" android:color="@android:color/holo_green_dark" />     <item android:state_focused="true"  android:state_enabled="false"                              android:color="@android:color/holo_green_dark" />     <item android:state_focused="true"                                android:state_pressed="true" android:color="@android:color/holo_green_dark" />     <item android:state_focused="false"                               android:state_pressed="true" android:color="@android:color/holo_green_dark" />     <item android:state_focused="true"                                                             android:color="@android:color/holo_green_dark" />     <!-- Only this below is seen in the cardview dispaly -->     <item android:color="@android:color/holo_blue_bright" /> </selector> 

And the layout that uses the CardView:

<android.support.v7.widget.CardView     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:cardview="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="wrap_content"     cardview:cardCornerRadius="10dp"     cardview:cardBackgroundColor="@color/colour_with_states"     >  <!-- If we set a background color below, it will overwrite our radius defined above --> <TextView     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     tools:text="Lorem ipsum"     android:id="@android:id/text1"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:textAppearance="?android:attr/textAppearanceListItem"     android:background="@null"     android:gravity="center_vertical"     android:paddingTop="8dip"     android:paddingBottom="8dip"     android:paddingStart="8dip"     android:paddingEnd="8dip"     />  </android.support.v7.widget.CardView> 
like image 509
mmm111mmm Avatar asked Aug 17 '14 19:08

mmm111mmm


People also ask

How do you put a background color on CardView?

card_view:cardBackgroundColor="@android:color/white" check with this.

Which XML attribute is used to set the background color of a CardView?

The CardView has an attribute card_view:cardBackgroundColor to define the background color. This attribute works fine.


1 Answers

Though this is not ideal, since the edges are not rounded, you can add touch feedback to a CardView like this :

<android.support.v7.widget.CardView     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"     app:cardCornerRadius="4dp"     android:clickable="true"     android:foreground="?android:attr/selectableItemBackground">      //Nested View ...  </android.support.v7.widget.CardView> 

Adding the android:foreground and android:clickable attributes to the CardView.

Also this has a negative side effect in that the android:clickable attribute overrides any clickListener, and therefore those clickListeners don't get triggered.

Update

I have some examples of CardView implementations

Loop (https://github.com/lawloretienne/Loop) - https://github.com/lawloretienne/Loop/blob/master/app/src/main/res/layout/category_card.xml

QuickReturn (https://github.com/lawloretienne/QuickReturn) - https://github.com/lawloretienne/QuickReturn/blob/master/sample/src/main/res/layout/activity_quick_return.xml

Update 2

After more research I have come up with a good solution for CardViews on all API versions including pre-Lollipop.

https://medium.com/@etiennelawlor/layout-tips-for-pre-and-post-lollipop-bcb2e4cdd6b2#.9h0v1gmaw

like image 191
Etienne Lawlor Avatar answered Sep 24 '22 08:09

Etienne Lawlor