Shapes with Navigation Drawer in android

Question

I have implemented Navigation Drawer for my App. This works just fine. I am setting a counter for an item in the menu. Which would show a number.

For which I am trying out the shapes (ring). I would like to show a circle with the number inside it. The Red color ring shape shows up on my Nexus 5 but doesn't show in Galaxy Nexus or Samsung S3.

I also wanted to have a solid color for the ring but couldn't get this too.

Here is what I am trying:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring" >

<solid android:color="@color/text_bg"></solid>
//#ffffff

<padding
    android:right="7dp"
    android:left="7dp" >
</padding>

<!-- Here is the corner radius -->
<corners android:radius="7dp" >
</corners>

</shape>

How to make it work on all the phones.

Here are the results in S3, GN and Nexus 5. I am not really sure how to fix this up?

Nexus 5: With the red circle:

Galaxy Nexus

Sasung S3 Screenshot:

Can somebody help me with the two issues...

Thanks!

Answer 1

You can do like this...

inside.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#50000000" />
</shape>

outside.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval" >
<solid android:color="#99009900" />
</shape>

Create one layer list like this.

background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/outside">
</item>
<item
android:bottom="5dp"
android:drawable="@drawable/inside"
android:left="5dp"
android:right="5dp"
android:top="5dp">
</item>
</layer-list>

finally set this background to textview.