Skip to content

Instantly share code, notes, and snippets.

@MarsVard
Last active November 3, 2022 19:19
Show Gist options
  • Select an option

  • Save MarsVard/8297976 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown

aemxn commented Oct 25, 2015

Thanks

@hirenkapuria
Copy link
Copy Markdown

Thank you so much

@ahujakaran24
Copy link
Copy Markdown

Wowo thumbs up +1

@dbarwacz
Copy link
Copy Markdown

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

@mrmodise
Copy link
Copy Markdown

Very much appreciated

@RaviDhoriya
Copy link
Copy Markdown

That's perfect!! (y)

@emanuelthedude
Copy link
Copy Markdown

i like :)

@cooliscool
Copy link
Copy Markdown

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
Copy Markdown

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

@lovebdsobuj
Copy link
Copy Markdown

How to add click effect color?

@ade-akinyede
Copy link
Copy Markdown

Thank you for this :)

@kunalpat25
Copy link
Copy Markdown

Thank you so much!

@jiahaoliuliu
Copy link
Copy Markdown

Good job!

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