Android में सर्कुलर कस्टम प्रोग्रेस बार बनाना

Android में Layer-List और Rotate ड्रॉएबल का उपयोग करके सर्कुलर प्रोग्रेस बार

यह उदाहरण दर्शाता है कि XML ड्रॉएबल (layer-list, shape, rotate) का उपयोग करके एक कस्टम सर्कुलर/रिंग प्रोग्रेस बार कैसे बनाया जाए, और कोड से प्रोग्रेस अपडेट कैसे करें।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio में File → New Project चुनें और प्रोजेक्ट बनाएं।

चरण 2: लेआउट - ProgressBar और TextView ओवरले

res/layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/circularProgressbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_centerInParent="true"
        android:indeterminate="false"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="100" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="25%"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="24sp" />

</RelativeLayout>

चरण 3: ड्रॉएबल - circularprogressbar.xml

res/drawable/circularprogressbar.xml बनाएं:

<layer-list xmlns:android="https://schemas.android.com/apk/res/android">
    
    <!-- बैकग्राउंड रिंग (सेकेंडरी प्रोग्रेस) -->
    <item android:id="@android:id/secondaryProgress">
        <shape
            android:innerRadiusRatio="6"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true">
            <gradient
                android:centerColor="#999999"
                android:endColor="#999999"
                android:startColor="#999999"
                android:type="sweep" />
        </shape>
    </item>

    <!-- प्रोग्रेस रिंग (मुख्य प्रोग्रेस) -->
    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="270">
            <shape
                android:innerRadiusRatio="6"
                android:shape="ring"
                android:thicknessRatio="20.0"
                android:useLevel="true">
                <gradient
                    android:centerColor="#00FF00"
                    android:endColor="#00FF00"
                    android:startColor="#00FF00"
                    android:type="sweep" />
                <rotate
                    android:fromDegrees="0"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="360" />
            </shape>
        </rotate>
    </item>

    <!-- अतिरिक्त बैकग्राउंड लेयर (वैकल्पिक) -->
    <item android:id="@android:id/secondaryProgress">
        <shape
            android:innerRadiusRatio="6"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true">
            <gradient
                android:centerColor="#999999"
                android:endColor="#999999"
                android:startColor="#999999"
                android:type="sweep" />
        </shape>
    </item>

</layer-list>

चरण 4: MainActivity.java - प्रोग्रेस एनिमेशन

import androidx.appcompat.app.AppCompatActivity;
import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Handler;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    int status = 0;
    private Handler handler = new Handler();
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        Resources resources = getResources();
        Drawable drawable = resources.getDrawable(R.drawable.circularprogressbar);
        
        final ProgressBar progressBar = findViewById(R.id.circularProgressbar);
        progressBar.setProgress(0);
        progressBar.setSecondaryProgress(100);
        progressBar.setMax(100);
        progressBar.setProgressDrawable(drawable);
        
        textView = findViewById(R.id.textView);
        
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (status < 100) {
                    status += 1;
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            progressBar.setProgress(status);
                            textView.setText(String.format("%d%%", status));
                        }
                    });
                    try {
                        Thread.sleep(16); // ~60 FPS
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}

चरण 5: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">
    
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        
    </application>
</manifest>

मुख्य XML एट्रिब्यूट्स समझाए गए

रंग अनुकूलन

<!-- ग्रेडिएंट के बजाय सॉलिड कलर -->
<solid android:color="#4CAF50" />

<!-- मल्टी-कलर ग्रेडिएंट -->
<gradient
    android:startColor="#FF0000"
    android:centerColor="#FFFF00"
    android:endColor="#00FF00"
    android:type="sweep" />

आधुनिक विकल्प: Material Components

<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:indeterminate="false"
    android:progress="50"
    app:indicatorColor="@color/primary"
    app:trackColor="@color/primary_light"
    app:trackThickness="12dp" />

ऐप चलाएं

डिवाइस कनेक्ट करें, Run पर क्लिक करें। हरा सर्कुलर प्रोग्रेस बार 0% से 100% तक एनिमेट होगा, सेंटर में प्रतिशत टेक्स्ट के साथ।