Как показать процент прогресса в кнопке

Question

У меня есть приложение для опроса. макет выглядит следующим образом:

После того, как пользователь выбрал параметры, он должен показать, как каждый параметр был выбран в основном. Я хочу, чтобы это выглядело так: как показать этот процентный прогресс в фоновом режиме. Не обязательно использовать его в виде кнопок. Я не жду готовых ответов, просто покажите, как я могу сделать что-то подобное? что мне использовать и где искать.

PSS Извините за мой английский sh)

Моя карта xml выглядит так:

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="12dp"
    app:cardUseCompatPadding="true"
    app:cardPreventCornerOverlap="false"
    app:cardCornerRadius="8dp"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/poll_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:visibility="gone"
            android:scaleType="centerCrop"
            app:image="@{poll.pic}"
            tools:background="@mipmap/ic_launcher"
            android:contentDescription="@string/word_picture" />

        <LinearLayout
            android:orientation="vertical"
            android:padding="12dp"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/poll_id"
                android:text="@{poll.id}"
                android:visibility="invisible"
                android:layout_width="0dp"
                android:layout_height="0dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif"
                android:gravity="center"
                android:text="@{poll.question}"
                android:textColor="@android:color/black"
                android:textSize="24sp"
                tools:text="@string/tt_question" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:text="@{poll.desc}"
                android:textColor="@android:color/black"
                android:textSize="16sp"
                tools:text="@string/tt_description" />

            <Button
                android:id="@+id/option1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@{poll.option1}"
                android:textAllCaps="false"
                tools:text="Вариант 1" />

            <Button
                android:id="@+id/option2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone"
                app:text="@{poll.option2}"
                android:textAllCaps="false"
                tools:text="Вариант 2" />

            <Button
                android:id="@+id/next_poll"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"
                android:textAllCaps="false"
                android:text="@string/app_next_poll" />

        </LinearLayout>

    </LinearLayout>


</androidx.cardview.widget.CardView>

Answer 1

Вы можете создать собственное представление , которое содержит как ProgressBar, так и кнопку, например:

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="64dp">

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <ProgressBar
            android:id="@+id/progress"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone" />

</FrameLayout>

Создать составное представление:

class ProgressButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {

    init {
        inflate(context, R.layout.YOUR_LAYOUT_XML, this)
    }
}

И после кнопки щелкните, вы устанавливаете progress на ProgressBar, делаете его видимым и отключаете кнопку.

button.isEnabled = false
with(progress) {
    max = 100
    progress = ... // Your percent value

    // Set your colors to progress bar
    if (correctAnswer) {
        progressTintList = ColorStateList.valueOf(....)
        progressBackgroundTintList = ColorStateList.valueOf(....)
    } else {
        progressTintList = ColorStateList.valueOf(....)
        progressBackgroundTintList = ColorStateList.valueOf(....)
    }
    visibility = View.VISIBLE
}

И вы можете позже использовать это составное представление в своем макете вместо Button