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

aemxn commented Oct 25, 2015

Copy link
Copy Markdown

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