androidxml

Static background for ProgressBar

I want to have a ProgressBar with a static grey circle behind. Please check screenshot attached. enter image description here

My current code looks like this:

main_layout.xml

    <View
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:background="@drawable/progress_bar_background"
        android:layout_marginBottom="-48dp" />

    <ProgressBar
        android:id="@+id/process_loading_circle"
        style="?android:attr/progressBarStyle"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:indeterminateTint="@color/limeGreen" />

progress_bar_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
    <solid android:color="@color/grey" />
    <size android:width="48dp" android:height="48dp" />
    <stroke android:thickness="4dp" android:thicknessRatio="2" />
</shape>

Just out of curiosity, I checked all of the shapes (line,ring,rectangle,oval) and it only works with oval and rectangle... ring is not being displayed at all.

Solution

  • Use CircularProgressIndicator from the material library:

    <com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

    Configure the track color and thickness with trackColor and trackThickness attributes.