How to make a pill in the shape of an android?
I'm not sure what to call this ... maybe pills. Googling for rounded corners brings up a lot of posts from people who want a rectangular button with rounded corners. It's a little different, but more like 2 circles and a rectangle that I was trying to draw as.
I would like to make a button look like something like the first image below, but with text and an icon image in it, with a highlighted xml background on android:
I've tried this, which looks okay, but if the length of the button varies, it doesn't scale and you end up with a rectangle and some other weird stuff.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="40dp" android:top="0dp" android:bottom="0dp">
<shape android:shape="oval" >
<solid android:color="#666666"/>
<size android:width="40dp" android:height="40dp"></size>
</shape>
</item>
<item android:left="20dp" android:right="20dp">
<shape android:shape="rectangle" >
<solid android:color="#666666"/>
<size android:width="20dp" android:height="20dp"></size>
</shape>
</item>
<item android:right="40dp">
<shape android:shape="oval" >
<solid android:color="#666666"/>
<size android:width="40dp" android:height="40dp"></size>
</shape>
</item>
</layer-list>
I also tried to create my xml drawable like so:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#666666" />
<corners android:radius="20dp"/>
<size android:height="20dp" android:width="60dp"></size>
</shape>
which looks like this:
I've looked at this example for people , but when I do what it does, my results aren't fully rounded at the corners. They look more like the second image above.
source to share
You can try to keep the following code in a drawable (like pill_bg.xml):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle">
<corners android:radius="120dp" />
<solid android:color="@color/white" />
<stroke
android:width="1dp"
android:color="#efefef" />
<size
android:width="300dp"
android:height="120dp" />
</shape>
Take a look at the size and radius. Then apply a selection to your view, for example:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="250dp"
android:layout_height="60dp"
android:background="@drawable/pill_bg" />
As you can see, your view can be of different sizes, the background will scale.
source to share
This resizes correctly for any background image.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="@android:color/holo_red_dark" />
<size
android:width="1dp"
android:height="1dp" />
</shape>
source to share