androidandroid-cardviewmaterialcardview

android - how to put shadow on just the top edge of rounded cardview?


[![my image][1]][1]

As. you can see from the image i have a rounded corner shape ..but i want to have a shadow just on the top (there is no where else for it anyway since its covered on the other ends). How can i place a shadow just at the top of this cardView ? here is what i have so far and i've tried using two framelayouts earlier.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/viewRoot"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

    <com.google.android.material.card.MaterialCardView
        android:theme="@style/Theme.MaterialComponents.Light"
        android:id="@+id/greenCardView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:cardCornerRadius="16dp"
        app:cardElevation="0dp"
        android:clipToOutline="true"
        android:clipToPadding="true"
        android:clipChildren="true"
        app:cardPreventCornerOverlap="true"
        app:cardBackgroundColor="@color/green">
    
          <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/contentContainer"
            android:layout_width="match_parent"
            android:background="@color/transparent"
            android:layout_height="54dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

i also need the shadow to have no background under it ..so it should not be on a white background, i just want the shadow on top alone on a transparent background.

update: after i udated to 70dp elevation the shadow is only appearing on the bottom :

[![enter image description here][2]][2]

notice the shadow is only appearing at the bottom . how can i make shadow just at the top [1]: https://i.sstatic.net/8XC6l.png [2]: https://i.sstatic.net/egRoB.png


Solution

  • it was how i was attaching the scrollview to the cardview ..i used a space view to attach it a bit lower and it works great now (since i dont have access to negative margins) ..thanks

    what i learned is that when you have a scrollview attached to a cardview then you should attach the scrollview a few pixels away from the top so that it does not look cut off when it scrolls.