Android - CardView elevation shadow make darker

Question

I am using 'com.android.support:cardview-v7:23.4.0' and I see the shadow but is not a dark grey shadow, and I would like to get a darker elevation shadow, but I do not see any attribute to get it, any ideas?

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginBottom="8dp"
        app:cardElevation="8dp"
        app:cardPreventCornerOverlap="false"
        app:cardCornerRadius="1dp"
        app:cardUseCompatPadding="false">
        <include layout="@layout/any_layout"/>
    </android.support.v7.widget.CardView>

Efrem

Try app:cardUseCompatPadding = "true" – Dianetics

Thx but that is not going to get a darker shadow. – Efrem

u got solution ? – Fellmonger

Answer 1

I believe that the shadow intensity is defined by the underlying theme that the app uses. So for API level more than 21, you can override the intensity of shadows. In your styles.xml add these two extra lines of ambientShadowAlpha and spotShadowAlpha. Please note that these values range from 0 to 1, with 0 being completely transparent and 1 being completely opaque(almost black) :

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:fontFamily">@font/barlow_family</item>
    <item name="android:ambientShadowAlpha">1</item>
    <item name="android:spotShadowAlpha">1</item>

    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:statusBarColor">@android:color/background_light</item>
</style>

Largehearted

This is awesome! – Clinic

Thanks a lot. That made my day – Winston

this works, but it would affect a lot of the other components in your app – Disappear

is there any way to only change these values for a particular view? – Burden

@shubhamvashisht Yes, in that case, you just have to create a new theme, with the parent theme as shown in the code here, and then apply that theme explicitly to that view. <LinearLayout style="@style/DarkTheme"> ... – Largehearted

@Disappear Agreed, which is why its recommended to apply the theme explicitly to a particular layout/activity/fragment. – Largehearted

@Atharva Kulkarni Unfortunately, it doesn't work for a single view (BottomNavigationView in my case) when I apply it the way you advised. – Staphylo

Thanks for styling! In my case wrong theme was applied to BottomSheetDialogFragment. – Overunder

Answer 2

   <androidx.cardview.widget.CardView app:cardCornerRadius="10dp"
        app:cardUseCompatPadding="true"
        android:elevation="10dp"
        android:outlineSpotShadowColor="@color/black"
        android:outlineAmbientShadowColor="@color/grey"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

 app:cardUseCompatPadding="true"

try this

Thorncombe

applicable for api 28+ only – Stick

Answer 3

You can't change cardView shadow color but to make it darker you can use app:cardElevation="15dp" like

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    app:cardElevation="15dp"
    > </android.support.v7.widget.CardView>

Bozuwa

Answer 4

there is no way to change color of official CardView elevation, look at this Carbon

Mayflower

Thanks, but it requires upgrade my Android Studio and it does not have an easy integration, no import by gradle dependency. – Efrem

Technically i do not want to change the color, but the alfa shadow – Efrem

Answer 5

Try using this solution. Wrap your cardview in a RelativeLayout and give a background to it.

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:background="#FFE7E2E4">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true"/>
</RelativeLayout>

Dianetics