CODEWITHSUNDEEP
androidandroid-studioandroid-layoutandroid-progressbar
Newbie
Newbie

Reputation: 163

Draw partial circle as progress bar in android studio

SUMMARY :

Use picture 1 for reference.

I need to keep the grey part under the green part, so that when green decreases, grey becomes visible. But I also want the uncovered part (just grey to not be there). Resulting in a 2/3rd overlapping circle.

I am trying to create 2/3rd circle (with rounded corners) as a progress bar in android studio. I am not able to do it. I was hoping to get your help.

Current circle: (PICTURE 1)

enter image description here

Circle I need :

enter image description here

Shape:

<?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:useLevel="false"
            android:thicknessRatio="12">
            <solid android:color="#DDD"/>
     </shape>
    </item>
    <item>
        <shape android:shape="ring" android:innerRadiusRatio="2.5" android:useLevel="true"
            android:thicknessRatio="12">
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
</layer-list>

Layout:

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

    <ProgressBar
        android:id="@+id/timerProgressBar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1"
        android:indeterminateOnly="false"
        android:progressDrawable="@drawable/circle"
        android:rotation="-90"
        app:layout_constraintBottom_toTopOf="@+id/guidelineBottom"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guidelineTop"
        android:progress="10"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineBottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.1" />

 
</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 7

Views: 3674

Answers (4)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363895

You can use the CircularProgressIndicator provided by the Material Components library.

Something like:

        <com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progress"
            app:growMode="bidirectional"
            app:trackThickness="8dp"
            app:indicatorColor="@color/green"
            app:trackColor="@color/grey"
            app:indicatorSize="100dp"
            app:trackCornerRadius="8dp"
            android:progress="75"
            android:rotation="225"
            .../>

Use these attributes:

  • trackColor you can change the color of the grey/uncovered part. Use the parent background color to hide it.
  • trackCornerRadius to change the rounded corners of the indicator.

You have to apply a rotation depending by the progress value.

progress.rotation = 180+((1-value/100)/2*360)

enter image description here enter image description here

Note: it requires at least the version 1.3.0-alpha04.

enter image description here

Upvotes: 4

skywall
skywall

Reputation: 4005

If you don't want to draw a bar on your own, you can use https://github.com/futuredapp/donut. It is highly customizable so you can achieve the requested behavior easily.

donuts_preview

Upvotes: 5

Akanshi Srivastava
Akanshi Srivastava

Reputation: 1500

I think you can solve your problem by using Lottie. There are multiple LottieFiles available or you can use your own SVG and load them using Lottie in your app.

For example. If you use this one https://assets9.lottiefiles.com/datafiles/cOSizCzzp3gv6Qv/data.json, You can set the view dimensions to show 2/3rd of the circle and you can set the duration of your animation. You can also set start frame and end frame of animation.

There are multiple customization options available. You can find more lottie files here: https://lottiefiles.com/ and the implementation here: https://github.com/airbnb/lottie-android

Hope this helps, good luck!

Upvotes: 0

AmrDeveloper
AmrDeveloper

Reputation: 4702

You need to replace from #DDD color to transparent and can put your text above it, It will give you the same design that you want

<?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:useLevel="false"
            android:thicknessRatio="12">
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>
    <item>
        <shape android:shape="ring" android:innerRadiusRatio="2.5" android:useLevel="true"
            android:thicknessRatio="12">
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
</layer-list>

Upvotes: 0

Related Questions