Monday, 19 June 2017

Custom ProgressBar with progressDrawable


To implement our custom ProgressBar, create a drawable xml under /res/drawable/.

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="10dip" />
<gradient
android:startColor="#000000"
android:centerColor="#FF0000"
android:centerY="1.0"
android:endColor="#B0B0B0"
android:angle="180"
/>
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="10dip" />
<gradient
android:startColor="#101010"
android:centerColor="#808080"
android:centerY="1.0"
android:endColor="#F0F0F0"
android:angle="270"
/>
</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:progress="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:progress="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() {
myProgressBar.setVisibility(View.VISIBLE);
myProgressBar.setProgress(0);
progressBar.setVisibility(View.VISIBLE);
progressBar.setProgress(0);
}

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

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

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


Next:
ProgressBar with SecondaryProgress
Custom ProgressBar with SecondaryProgress


No comments:

Post a Comment