Skip to content

Instantly share code, notes, and snippets.

@damianpetla

damianpetla/card_background.xml

Last active April 6, 2023 19:05
Show Gist options
  • Save damianpetla/371d2f19548bd1fe5db1 to your computer and use it in GitHub Desktop.
Save damianpetla/371d2f19548bd1fe5db1 to your computer and use it in GitHub Desktop.
Download ZIP
Android drawable used as background with shadows. Support elevation on API 21+
Raw
card_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#00CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#10CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#20CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#30CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#50CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="@color/card_background_pressed" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list>
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#00CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#10CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#20CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#30CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#50CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="@color/card_background_normal" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Raw
card_background_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"/>
<solid android:color="#00CCCCCC" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp"/>
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"/>
<solid android:color="#10CCCCCC" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"/>
<solid android:color="#20CCCCCC" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"/>
<solid android:color="#30CCCCCC" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp" />
<solid android:color="#50CCCCCC" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="@color/card_background_pressed" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list>
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"/>
<solid android:color="#00CCCCCC" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp"/>
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"/>
<solid android:color="#10CCCCCC" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"/>
<solid android:color="#20CCCCCC" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"/>
<solid android:color="#30CCCCCC" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp" />
<solid android:color="#50CCCCCC" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="@color/card_background_normal" />
<corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Raw
card_background_bottom_v21.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/card_background_pressed"
tools:targetApi="lollipop">
<item>
<shape>
<size
android:width="1dp"
android:height="1dp" />
<corners
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp" />
<solid android:color="@color/card_background_normal" />
</shape>
</item>
</ripple>
Raw
card_background_center.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding
android:left="1dp"
android:right="1dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:left="1dp"
android:right="1dp"
/>
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:left="1dp"
android:right="1dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:left="1dp"
android:right="1dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:left="1dp"
android:right="1dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="@color/card_background_pressed" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list>
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding
android:left="1dp"
android:right="1dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:left="1dp"
android:right="1dp"
/>
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:left="1dp"
android:right="1dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:left="1dp"
android:right="1dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:left="1dp"
android:right="1dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="@color/card_background_normal" />
</shape>
</item>
</layer-list>
</item>
</selector>
Raw
card_background_center_v21.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/card_background_pressed"
tools:targetApi="lollipop">
<item>
<shape>
<size
android:width="1dp"
android:height="1dp" />
<solid android:color="@color/card_background_normal" />
</shape>
</item>
</ripple>
Raw
card_background_top.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:left="1dp" android:right="1dp" android:top="1dp" />
<solid android:color="#00CCCCCC" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:left="1dp" android:right="1dp" android:top="1dp" />
<solid android:color="#10CCCCCC" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:left="1dp" android:right="1dp" android:top="1dp" />
<solid android:color="#20CCCCCC" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:left="1dp" android:right="1dp" android:top="1dp" />
<solid android:color="#30CCCCCC" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:left="1dp" android:right="1dp" android:top="1dp" />
<solid android:color="#50CCCCCC" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="@color/card_background_pressed" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list>
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:left="1dp" android:right="1dp" android:top="1dp" />
<solid android:color="#00CCCCCC" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:left="1dp" android:right="1dp" android:top="1dp" />
<solid android:color="#10CCCCCC" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:left="1dp" android:right="1dp" android:top="1dp" />
<solid android:color="#20CCCCCC" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:left="1dp" android:right="1dp" android:top="1dp" />
<solid android:color="#30CCCCCC" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:left="1dp" android:right="1dp" android:top="1dp" />
<solid android:color="#50CCCCCC" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="@color/card_background_normal" />
<corners android:topLeftRadius="4dp" android:topRightRadius="4dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Raw
card_background_top_v21.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/card_background_pressed"
tools:targetApi="lollipop">
<item>
<shape>
<size
android:width="1dp"
android:height="1dp" />
<corners
android:topLeftRadius="4dp"
android:topRightRadius="4dp" />
<solid android:color="@color/card_background_normal" />
</shape>
</item>
</ripple>
Raw
card_background_v21.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/card_background_pressed"
tools:targetApi="lollipop">
<item>
<shape>
<size
android:width="1dp"
android:height="1dp" />
<corners android:radius="4dp" />
<solid android:color="@color/card_background_normal" />
</shape>
</item>
</ripple>
Raw
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="card_background_normal">@android:color/white</color>
<color name="card_background_pressed">#1f000000</color>
</resources>
Raw
colors_v21.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="card_background_pressed">?attr/colorControlHighlight</color>
</resources>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment