How to draw complex button with inset circle in xml?

Question

How to draw button like below image in xml? Basically, it has two different buttons. One is for I. another one is for Pick Up. Thanks.

Answer 1

Try this. Example image is shown.

Note: you will have to fix the path to make the image perfect.

button_circle.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/darker_gray" />
</shape>

button_rectangle.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="720dp"
    android:height="576dp"
    android:viewportWidth="720"
    android:viewportHeight="576">

    <path
        android:fillColor="@android:color/darker_gray"
        android:pathData="M700.461,426.359c0,51.164-7.764,92.641-17.336,92.641H76.369
c-9.575,0,17.191-101.692,17.191-152.855l-1.444-173.699c0-51.164-25.321-136.646-15.747-136.646h606.756
c9.572,0,17.336,41.476,17.336,92.64V426.359z" />
</vector>

You will have to fix the vector to make the shape perfect. but this a good example for u.

my_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:background="@drawable/button_rectangle"/>

    <Button
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:background="@drawable/button_circle"/>
</RelativeLayout>

Hope this helps!

Answer 2

Try this:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@drawable/bg_btn_coner"
            android:gravity="center"
            android:text="Pickup"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/bg_btn_coner"
            android:gravity="center"
            android:text="i"
            android:textColor="@android:color/white"
            android:textSize="20sp" />


    </RelativeLayout>

and bg_btn_coner.xml

<solid android:color="#737373" />

<stroke
    android:width="3dp"
    android:color="@android:color/white"></stroke>

<corners android:radius="50dp"></corners>

Result: