如何在按钮周围实现循环进度指示器？

Question

我尝试了很多方法来实现下面的示例，但我无法使其在所有情况下都正常工作。

我已经完成了以下屏幕的构建。我已经将其右对齐和垂直居中，并加入了一些边距。

我的问题是我必须为此添加onpressed状态，并且我需要添加一个类似下面截图的圆形进度条。

我不知道如何在那个特定位置实现该圆形进度条。我尝试从左边中心垂直方向实现进度，并给出了一些边距来固定它。但是当我在大屏幕上安装时，对齐会出现问题。所以我尝试从右边中心垂直方向实现，然后给到该圆圈的边距。但即使这样也没有效果。

请有人帮我解决这个问题:(

我卡在这里已经一个多星期了:(

编辑： XML代码：

<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" />

- praveen kumar

---

请展示您的XML布局文件。 - Elemental

你能不能将按钮和进度条放在一个相对布局中，并将它们都设置为居中于其父布局，这样它们的中心就会始终对齐呢？ - brianestey

嗨@brianestey，谢谢您的回复。我上传的第一张图片是一个单一的图片。我需要分开它吗？如果需要，我应该如何分开？我已经将加载和第一条带放在相对布局中。 - praveen kumar

我添加了一个概述我所描述的答案。如果有帮助，请接受它作为答案。 - brianestey

Answer 1

我已经尝试过使用示例XML布局来实现您要寻找的类似效果。请查看此屏幕截图和代码。

以下是用于实现页面布局的 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="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>

- brianestey