java - How can I develop this kind of Button

Question

This button has outer white rong and an inner grey background.
The inner background contains an image (tickmark) and a text (Apply).

I am able to make a shape like this (below).

I am using a shape in drawable (button.xml):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <size android:height="85dp"
            android:width="90dp"/>
        <solid android:color="@color/grey"/>
        <stroke android:color="@color/white" android:width="4dp"></stroke>
    </shape>
</item>
<item
    android:drawable="@drawable/checkmark_filled"
    android:bottom="20dp"
    android:left="20dp"
    android:right="20dp"
    android:top="20dp"/>
</layer-list>

and using an ImageView to use the shape

<ImageView
    android:id="@+id/button_apply"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button"/>

But I am not able to make a text in shape.
Am I missing something or is there any way possible?

Answer 1

What I would do is something like this:

1 - Separate your LayerList into 2 distinct drawables

circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
        <size android:height="85dp" android:width="90dp" />
        <solid android:color="@color/grey" />
        <stroke android:color="@color/white" android:width="4dp" />
</shape>

I assume you already have this bitmap: drawable/checkmark_filled

2 - Use a TextView, instead of an ImageView:

<TextView
    android:id="@+id/button_apply"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgound="@drawable/button"
    android:drawableTop="drawable/checkmark_filled"
    android:text="APPLY"
    android:clickable="true"
/>

Adjust the gravity and the paddings as needed.
Also set some other properties as needed.

Note that you can (and should) use a string resource, instead of a hard-coded text.

---

Brief explanation:

• I'm using the oval shape as the TextView brackground.
• I'm using the checkmark bitmap as a compound drawable.
• I'm using the TextView's text to write something.
• I set the TextView as clickable, so you can use it as if it was a Button.