Skip to content

Instantly share code, notes, and snippets.

@MarsVard
Last active November 3, 2022 19:19
Show Gist options
  • Star 72 You must be signed in to star a gist
  • Fork 13 You must be signed in to fork a gist
  • Save MarsVard/8297976 to your computer and use it in GitHub Desktop.
Save MarsVard/8297976 to your computer and use it in GitHub Desktop.
android drawable to imitate google cards.
put card.xml in your drawables directory, put colors.xml in your values directory or add the colors to your colors.xml file.
set the background of a view to card,
as you can see in card.xml the drawable handles the card margin, so you don't have to add a margin to your view
``` xml
<View
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/card"
/>
```
(here is a screenshot of what the cards look like)[http://i.imgur.com/XFbovuI.png]
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:top="10dp" android:right="10dp" android:bottom="5dp" android:left="10dp" />
<solid android:color="@color/transparent" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<solid android:color="@color/card_shadow_1" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<solid android:color="@color/card_shadow_2" />
<corners android:radius="2dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape >
<solid android:color="@color/card_background" />
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="transparent">#00000000</color>
<!-- card colors -->
<color name="card_background">#ffffff</color>
<color name="card_shadow_1">#d4d4d4</color>
<color name="card_shadow_2">#dddddd</color>
<color name="card_detailing">#eee</color>
</resources>
@aemxn
Copy link

aemxn commented Oct 25, 2015

Thanks

@hirenkapuria
Copy link

Thank you so much

@ahujakaran24
Copy link

Wowo thumbs up +1

@dbarwacz
Copy link

You could as well use system parameter: "@android:color/transparent"

@mrmodise
Copy link

Very much appreciated

@RaviDhoriya
Copy link

That's perfect!! (y)

@emanuelthedude
Copy link

i like :)

@cooliscool
Copy link

Really cool ! Thanks :)
A short question :
Is there a better way to design drawables other than looking at the preview in android studio ?

@shashanthk
Copy link

This is awesome. Thank you and +1 for the work...

@lovebdsobuj
Copy link

How to add click effect color?

@ade-akinyede
Copy link

Thank you for this :)

@kunalpat25
Copy link

Thank you so much!

@jiahaoliuliu
Copy link

Good job!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment