CardView background color status not enforced

Question

In short:

How can we determine the color states of the CardView cardBackgroundColor property (in this case, in the ListView layout)?

(I use RC1 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 the CardView layout, we set the corner radius and background color of the CardView through cardCornerRadius and cardBackgroundColor.

However, the background color does not reflect the selected states, for example, if a list item is pressed, for example.

If in the CardView internal view you specify the background color and the associated states that are respected, however, it will be displayed at the angles you define in CardView.

So, how can we ensure state matching in CardView cardBackgroundColor?

Here is the color used for cardBackgroundColor, color_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 CardView uses:

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

Answer 1

Although this is not ideal, since the edges are not rounded, you can add touch feedback to CardView as follows:

 <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 CardView to CardView .

It also has a negative side effect in that the android:clickable attribute overrides any clickListener, and therefore these clickListeners functions do not start.

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 further research, I came up with a good solution for CardViews in all versions of the API, including pre-Lollipop.

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

Answer 2

Sometimes you can have CardView visual feedback. The android:foreground="?android:attr/selectableItemBackground" solution is perfect for this.

However, you can use drawSelectorOnTop(true) in your ListView. This will not require changes to your CardView at all.

Let me know if further clarification is required.

Answer 3

Here is my way to solve your problem.

First create a custom class called CustomCardView extends CardView

Then override the drawableStateChanged() method, change the background color of the map by calling setCardBackgroundColor() when the state of the map click has changed.

Finally, replace CardView with this CustomCardView in your layout file.

The only drawback of this solution is that cardview cannot display the ripple effect on Android 5.0 and higher.

here is my code:

 public class CustomCardView extends CardView { public CustomCardView(Context context) { super(context); // TODO Auto-generated constructor stub } public CustomCardView(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub } public CustomCardView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // TODO Auto-generated constructor stub } @Override protected void drawableStateChanged() { super.drawableStateChanged(); if (isPressed()) { this.setCardBackgroundColor(getContext().getResources().getColor(R.color.card_view_pressed)); } else { this.setCardBackgroundColor(getContext().getResources().getColor(R.color.card_view_normal)); } } 

}

Answer 4

One of the methods I used was to make programmatic changes to the user interface by overriding the View.OnTouchListener OnTouch () event handler in my custom ViewHolder.

 @Override public boolean onTouch (View v, MotionEvent event) { int action = event.getActionMasked(); if (action == MotionEvent.ACTION_DOWN) { mCardView.setCardBackgroundColor(STATE_PRESSED_COLOR); } else if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_CANCEL) { mCardView.setCardBackgroundColor(DEFAULT_COLOR); } return false; } 

Answer 5

** Just add the lines inside the map view **

  android:clickable="true" android:focusableInTouchMode="true" android:foreground="?android:attr/selectableItemBackground" 

Answer 6

I used a rectangular shape with the same angular radius as the map. And then used xml drawable as a background for the internal look of the map. The background does not appear in the corner of the map, although I still get a small addition between the map and its internal view.

Answer 7

If you look at the definition of the carBackgroundColor property, at least in the android support library:

 <resources> <declare-styleable name="CardView"> <!-- Background color for CardView. --> <attr name="cardBackgroundColor" format="color" /> </declare-styleable> </resource> 

It says that only color is required for cardBackgroundValue. I assume this means that the selector is not respected, but falls to the default value, i.e. color at the bottom of the selector.

Answer 8

Use android:foreground instead of android:background in <CardView/> . The following is a sample CardView code.

  <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="true" android:foreground="?android:attr/selectableItemBackground" app:cardCornerRadius="2dp" app:cardElevation="2dp"> // others view component </android.support.v7.widget.CardView>