Thursday, June 22, 2017

Custom ProgressBar with SecondaryProgress

The former post show how to implement "Custom ProgressBar with progressDrawable" and "ProgressBar with SecondaryProgress". This example show how to Custom ProgressBar with SecondaryProgress.


Create a custom drawable xml res/drawable/myprogressbar.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:angle="180"
                android:centerY="1.0"
                android:startColor="#E8E8E8"
                android:centerColor="#F0F0F0"
                android:endColor="#F8F8F8" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:angle="270"
                    android:centerY="1.0"
                    android:startColor="#6000F000"
                    android:centerColor="#60008080"
                    android:endColor="#600000F0" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:angle="270"
                    android:centerY="1.0"
                    android:startColor="#E000F000"
                    android:centerColor="#E0008080"
                    android:endColor="#E00000F0" />
            </shape>
        </clip>
    </item>
</layer-list>

Edit the layout to add android:progressDrawable
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_margin="20dp"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidprogressbar.MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/startprogress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Start ProgressBar"/>

    <ProgressBar
        android:id="@+id/progressbar"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:max="10"
        android:progress="0"
        android:secondaryProgress="0"
        android:visibility="gone"/>
    <ProgressBar
        android:id="@+id/myprogressbar"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:max="10"
        android:progress="0"
        android:secondaryProgress="0"
        android:visibility="gone"
        android:progressDrawable="@drawable/myprogressbar"/>

</LinearLayout>



MainActivity.java
package com.blogspot.android_er.androidprogressbar;

import android.os.AsyncTask;
import android.os.Bundle;
import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    Button btnStartProgress;
    ProgressBar progressBar, myProgressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnStartProgress = (Button)findViewById(R.id.startprogress);
        progressBar = (ProgressBar)findViewById(R.id.progressbar);
        myProgressBar = (ProgressBar)findViewById(R.id.myprogressbar);

        btnStartProgress.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                btnStartProgress.setEnabled(false);
                MyAsyncTask myAsyncTask = new MyAsyncTask();
                myAsyncTask.execute();
            }
        });
    }

    public class MyAsyncTask extends AsyncTask<Void, Integer, Void> {

        @Override
        protected void onPreExecute() {
            progressBar.setVisibility(View.VISIBLE);
            myProgressBar.setVisibility(View.VISIBLE);
            progressBar.setProgress(0);
            progressBar.setSecondaryProgress(0);
            myProgressBar.setProgress(0);
            myProgressBar.setSecondaryProgress(0);
        }

        @Override
        protected Void doInBackground(Void... voids) {
            for(int i=0; i<10; i++){
                for(int j=0; j<10; j++){
                    publishProgress(i, j);
                    SystemClock.sleep(100);
                }
            }
            return null;
        }

        @Override
        protected void onProgressUpdate(Integer... values) {
            progressBar.setProgress(values[0]);
            progressBar.setSecondaryProgress(values[1]);
            myProgressBar.setProgress(values[0]);
            myProgressBar.setSecondaryProgress(values[1]);
        }

        @Override
        protected void onPostExecute(Void aVoid) {
            progressBar.setVisibility(View.GONE);
            myProgressBar.setVisibility(View.GONE);
            btnStartProgress.setEnabled(true);
        }
    }
}


~ More examples of ProgressBar

No comments:

Post a Comment