How to do it using selector instead of changing background?
if(isSelected) {
binding.cvStainMaster.setBcackgroundResource(R.drawable.boarder_blue_corner);
binding.btnStart.setBackgroundResource(R.drawable.bg_button_primary);
isSelected = false;
}else{
binding.cvStainMaster.setBackgroundColor(Color.WHITE);
binding.btnStart.setBackgroundResource(R.drawable.button_background_with_corner);
isSelected = true;
}
I have done it by changing background. but I want it to do using selector
Using the androidx.cardview.widget.CardView
there is no any property to change the border/stroke colour but you can achieve it using the com.google.android.material.card.MaterialCardView
from Material Design Library which is a subclass of androidx.cardview.widget.CardView
(MaterialCardView extends CardView
).
To add the MaterialCardView
in your project first you have to add the grandle depedency of Material Design Library pointing to the latest version like: implementation 'com.google.android.material:material:1.5.0'
and your app Theme must inherit from Theme.MaterialComponents.*
.
Now with MaterialCardView
you can use the app:strokeColor
attribute to set the stroke/border color pointing to a color selector to change the border color based on the card checked/unchecked state and the app:strokeWidth
to set the stroke width. To activate the android:state_checked=true/false
states you have to add also the attribute android:checkable="true"
and with app:checkedIconSize="0dp"
you can remove the default checked-stated icon. Below is an example usage:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.card.MaterialCardView
android:id="@+id/materialCardView"
android:layout_width="80dp"
android:layout_height="100dp"
android:checkable="true"
app:cardBackgroundColor="@android:color/holo_green_light"
app:cardForegroundColor="@android:color/transparent"
app:checkedIconSize="0dp"
app:cardCornerRadius="10dp"
app:cardElevation="2dp"
app:strokeWidth="4dp"
app:strokeColor="@color/card_border_selector"/>
</RelativeLayout>
where the @color/card_border_selector
is defined in the res/color/card_border_selector.xml
like the below:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/holo_orange_light" android:state_checked="true"/>
<item android:color="@android:color/holo_blue_light" android:state_checked="false"/>
</selector>
And programmatically every time you click on the MaterialCardView
you have to change the state using the materialCardView.setChecked()
function like the below example:
MaterialCardView materialCardView = findViewById(R.id.materialCardView);
materialCardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
materialCardView.setChecked(!materialCardView.isChecked());
}
});
Result for android:state_checked=false
:
Result for android:state_checked=true
: