How to make match the progress bar circle to the background?

27 Views Asked by At

I'd like to create a progress bar with a white background, and I've (I think) found the solution by creating a drawable in the shape of a circle for the parent containing the progress bar. However, I'd like the two circles to match perfectly, and this for any screen type (so no dp). my page with the progress bar smaller than the white background

Try as I might, I just can't seem to get rid of this problem. I've tried having the progress bar at 110% of its size to try and fix the problem, but it doesn't work. I've also tried changing the drawable, but again it doesn't work...

fragment_calendar.xml :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/calendar"
    tools:context=".CalendarFragment">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottieAnimationView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/plant_bg"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="-162dp" />

    <TextView
        android:id="@+id/welcomeBackTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/default_welcome_calendar"
        android:textSize="32sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintVertical_bias="0.100"
        app:layout_constraintHorizontal_bias="0.15"
        />

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@drawable/circle_white_bg"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.9"
        app:layout_constraintDimensionRatio="1:1"
        >
        <ProgressBar
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:indeterminate="false"
            android:max="10"
            android:progress="10"
            android:rotation="160"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            android:background="@drawable/gray_progressbar_bg"
            android:progressDrawable="@drawable/gradient_progressbar_bg"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">
            <TextView
                android:id="@+id/currentTaskTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/current_task_calendar_title"
                android:textSize="30sp"
                android:textAlignment="center"
                android:layout_gravity="center"/>
            <TextView
                android:id="@+id/currentTaskName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="NAME OF THE CURRENT TASK"
                android:textColor="@color/dark_blue"
                android:textAlignment="center"
                android:layout_marginHorizontal="40dp"
                android:textSize="24sp" />
            <TextView
                android:id="@+id/currentTaskTimer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/default_current_task_time"
                android:layout_marginTop="20dp"
                android:textAlignment="center"
                android:textColor="@color/dark_blue"
                android:textSize="24sp" />
        </LinearLayout>
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

circle_white_bg.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="50dp" android:height="50dp" />
    <solid
        android:color="@color/white"/>
</shape>

gradient_progress_bar.xml :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="ring"
        android:innerRadiusRatio="2.5"
        android:thicknessRatio="30.0"
        android:useLevel="true">
        <gradient
            android:startColor="@color/dark_blue"
            android:centerColor="@color/dark_blue_lighter"
            android:endColor="@color/sky_blue"/>
    </shape>
</item>
</layer-list>

thank you for your reply!

0

There are 0 best solutions below