Changing Cardview Shadow Color

June 16, 2024 Post a Comment

This question was asked on SO many times, but still I didn't find a good solution for this problem. Why do I need this to do? Well because project me and my team develops has iOS s

Solution 1:

Consider this thread in twitter, where Nick Butcher talks about how to implement the feature:

See outlineAmbientShadowColor, outlineSpotShadowColor, spotShadowAlpha and ambientShadowAlpha attributes for details. Unfortunately, that's possible from API 28 onwards.

For lower APIs Nick has shared a gist. Here's the result:

This technique isn't directly connected to CardView, it can be applied to any View.

Solution 2:

You Can Implement this without having a cardview, and can also have all the properties of cardview

You have to Do:

Copy the two classes
Wrap your required view with the Custom View as in the example, you don't have to do much changes in your layout or anywhere else!

The below class will create a custom view, this will be wrapping your layout/View to be displayed in cardview with custom shadow color

Create a class:

import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.LinearLayout;

import com.qzion.nfscrew.R;


publicclassRoundLinerLayoutNormalextendsLinearLayout {
    publicRoundLinerLayoutNormal(Context context) {
        super(context);
        initBackground();
    }

    publicRoundLinerLayoutNormal(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initBackground();
    }

    publicRoundLinerLayoutNormal(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initBackground();
    }

    privatevoidinitBackground() {
        setBackground(ViewUtils.generateBackgroundWithShadow(this,R.color.white,
                R.dimen.radius_corner,R.color.colorPrimaryDark,R.dimen.elevation, Gravity.BOTTOM));
    }
}

Also create the class for the Shadow Settings, ViewUtils.java

import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RoundRectShape;
import android.support.annotation.ColorRes;
import android.support.annotation.DimenRes;
import android.support.v4.content.ContextCompat;
import android.view.Gravity;
import android.view.View;

importstatic android.support.v4.view.ViewCompat.LAYER_TYPE_SOFTWARE;


publicclassViewUtils {

    publicstatic Drawable generateBackgroundWithShadow(View view, @ColorResint backgroundColor,
                                                        @DimenResint cornerRadius,
                                                        @ColorResint shadowColor,
                                                        @DimenResint elevation,
                                                        int shadowGravity) {
        floatcornerRadiusValue= view.getContext().getResources().getDimension(cornerRadius);
        intelevationValue= (int) view.getContext().getResources().getDimension(elevation);
        intshadowColorValue= ContextCompat.getColor(view.getContext(),shadowColor);
        intbackgroundColorValue= ContextCompat.getColor(view.getContext(),backgroundColor);

        float[] outerRadius = {cornerRadiusValue, cornerRadiusValue, cornerRadiusValue,
                cornerRadiusValue, cornerRadiusValue, cornerRadiusValue, cornerRadiusValue,
                cornerRadiusValue};

        PaintbackgroundPaint=newPaint();
        backgroundPaint.setStyle(Paint.Style.FILL);
        backgroundPaint.setShadowLayer(cornerRadiusValue, 0, 0, 0);

        RectshapeDrawablePadding=newRect();
        shapeDrawablePadding.left = elevationValue;
        shapeDrawablePadding.right = elevationValue;

        int DY;
        switch (shadowGravity) {
            case Gravity.CENTER:
                shapeDrawablePadding.top = elevationValue;
                shapeDrawablePadding.bottom = elevationValue;
                DY = 0;
                break;
            case Gravity.TOP:
                shapeDrawablePadding.top = elevationValue*2;
                shapeDrawablePadding.bottom = elevationValue;
                DY = -1*elevationValue/3;
                break;
            default:
            case Gravity.BOTTOM:
                shapeDrawablePadding.top = elevationValue;
                shapeDrawablePadding.bottom = elevationValue*2;
                DY = elevationValue/3;
                break;
        }

        ShapeDrawableshapeDrawable=newShapeDrawable();
        shapeDrawable.setPadding(shapeDrawablePadding);

        shapeDrawable.getPaint().setColor(backgroundColorValue);
        shapeDrawable.getPaint().setShadowLayer(cornerRadiusValue/3, 0, DY, shadowColorValue);

        view.setLayerType(LAYER_TYPE_SOFTWARE, shapeDrawable.getPaint());

        shapeDrawable.setShape(newRoundRectShape(outerRadius, null, null));

        LayerDrawabledrawable=newLayerDrawable(newDrawable[]{shapeDrawable});
        drawable.setLayerInset(0, elevationValue, elevationValue*2, elevationValue, elevationValue*2);

        return drawable;

    }
}

and finally your XML, where you have the views required to have shadow.

<com.qzion.nfscrew.utils.RoundLinerLayoutNormalandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="This view will have shadow"/></com.qzion.nfscrew.utils.RoundLinerLayoutNormal>

Solution 3:

Well I think of an easy solution without using a Java or Some Libraries. You should make a Drawable shape and put it in the drawable folder and then adjust the gradient to be like a shadow.

For example, in my solution I have added two colors:

<colorname="yellow_middle">#ffee58</color><colorname="yellow_end">#7ae7de83</color>

Then I made a file and put it in drawable folder drawable\card_view_shape.xml

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><sizeandroid:width="10dp"android:height="10dp" /><cornersandroid:radius="6dp" /><strokeandroid:width="2dp"android:color="@color/yellow_end" /><gradientandroid:angle="-90"android:centerColor="@color/yellow_middle"android:endColor="@color/yellow_end"android:startColor="#fff" /></shape>

Then from there you need to wrap a your view(that would have been inside CardView) in a container like LinearLayout then apply as the background to the container that you want to be seen like a cardview. To solve it well add some padding (Thats your shadow) to the Container itself. For instance check mine:

Baca Juga

<?xml version="1.0" encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.xenolion.ritetrends.MainActivity"><LinearLayoutandroid:layout_width="200dp"android:layout_height="200dp"android:layout_gravity="center"android:background="@drawable/card_view_shape"android:orientation="vertical"android:paddingBottom="10dp"android:paddingLeft="3dp"android:paddingRight="3dp"android:paddingTop="3dp"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#fff"android:gravity="center"android:text="I love StackOverflow"android:textColor="#000"android:textSize="18sp" /></LinearLayout></FrameLayout>

Then the results looks like this:

Adjusting the bottom padding it will look like this:

COMMENT Since I am not of an artist but if you play with it you may make the whole thing look exactly like CardView check some hints:

Putting multiple gradients in the shape
Adjust the end colors of gradients to appear more greyish
The end colours must also be a little transparent
Adjust your View's padding to appear like a shadow and coloured but greyish
The main View's background also matters to bring the reality From there redesign the shape to look even more realistic like a CardView.

Solution 4:

Use Fake Shadow.

Well, it is not possible to change the color of the shadow of cardview before API 28 but we can add a custom shadow behind a layout. You need to use a drawable background (shadow.xml) in the parent layout which is looking like a shadow.

shadow.xml -

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><item><shape><paddingandroid:bottom="2dp"android:left="2dp"android:right="2dp"android:top="2dp" /><solidandroid:color="#05FF46A9" /><cornersandroid:radius="15dp" /></shape></item><item><shape><paddingandroid:bottom="2dp"android:left="2dp"android:right="2dp"android:top="2dp" /><solidandroid:color="#10FF46A9" /><cornersandroid:radius="15dp" /></shape></item><item><shape><paddingandroid:bottom="2dp"android:left="2dp"android:right="2dp"android:top="2dp" /><solidandroid:color="#15FF46A9" /><cornersandroid:radius="15dp" /></shape></item><item><shape><paddingandroid:bottom="2dp"android:left="2dp"android:right="2dp"android:top="2dp" /><solidandroid:color="#20FF46A9" /><cornersandroid:radius="15dp" /></shape></item><item><shape><paddingandroid:bottom="2dp"android:left="2dp"android:right="2dp"android:top="2dp" /><solidandroid:color="#25FF46A9" /><cornersandroid:radius="15dp" /></shape></item></layer-list>

Now use the following code -

<FrameLayoutandroid:layout_width="match_parent"android:background="@drawable/shadow"android:layout_height="200dp"><CardViewandroid:layout_width="match_parent"android:layout_height="match_parent"app:cardCornerRadius="15dp"app:cardElevation="0dp"><!--  your code here  --></CardView></FrameLayout>

You can replace FF46A9 in shadow.xml to change the color of shadow. Also android:backgroundTint="@color/colorShadow" works but you have to adjust colors alpha in shadow.xml.

Adjust the <corners android:radius="15dp"/> as app:cardCornerRadius="15dp".

Solution 5:

display shadow >= 28 or >= P for above Sdk level 28

use below code in your CardView

with xml

android:outlineAmbientShadowColor="<yourCoolor>"android:outlineSpotShadowColor="<yourCoolor>"

with java and kt file

mCardView.setOutlineAmbientShadowColor(ContextCompat.getColor(getContext(), R.color.color_new_yellow));
mCardView.setOutlineSpotShadowColor(ContextCompat.getColor(getContext(), R.color.color_new_yellow));

display like this

Android Coder