how to implement circular progress indicator around a button?

Question

I have tried many ways implementing the below example, but I could not make it work universally.

I have already completed building the below screen. I have aligned right and center vertical. and given some margin.

My problem is I have to add the onpressed state for this and I need to add a circular progress like below screenshot.

I don't know how to implement that circular progress in that particular place. I tried implementing the progress from left center vertical and gave some margin and fixed it. but when I install it in large screens the alignment goes wrong. So I tried implemented it from right center vertical and gave margin for that till that circle. But even that didn't work.

pls someone help me out, how to fix this issue :(

I'm struck with this for more than a week :(

EDIT: The XML code:

<ProgressBar
        android:id="@+id/ProgressBar01"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@drawable/circular_progress"
        android:layout_marginRight="185dp"
        android:progress="50" />

    <ImageButton
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@null"
        android:src="@drawable/tap_to_capture" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="@string/tap_to_cap"
        android:textSize="12sp"
        android:textColor="#006666"
        android:layout_marginRight="25dp"
        android:textAppearance="?android:attr/textAppearanceSmall" />

Answer 1

I've played around with a sample XML layout to get a similar effect that you are looking for. Take a look at this screenshot and code.

The XML to achieve the layout is pasted below. Obviously you can style it however you like.

<?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="wrap_content">

    <RelativeLayout
        android:id="@+id/RelativeLayoutLeftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ProgressBar
            android:id="@+id/progressBar1"
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_play" />
    </RelativeLayout>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/RelativeLayoutLeftButton"
        android:text="Click Here"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#006666"
        android:textSize="12sp" />

</RelativeLayout>