State Progress Android

Question

I am looking for a smooth way to implement “state progress” in Android , as shown in the three examples below. Since I'm not a fan of reinventing the wheel, I would like to ask if there is any library that I don't know about.

I was looking for it and could not find any lib, so I think I need to implement it myself. What would be the easiest solution? Should I extend the ProgressBar, or should I do it from scratch? Do you have any suggestions or tutorials that I could create?

Answer 1

Update

Please review this sample project as well as GIF to give an overview.

You can customize the following according to your requirements.

import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.os.Bundle; import android.os.Parcelable; import android.util.AttributeSet; import android.view.View; public class NumberProgressBar extends View { private Context mContext; /** * The max progress, default is 100 */ private int mMax = 100; /** * current progress, can not exceed the max progress. */ private int mProgress = 0; /** * the progress area bar color */ private int mReachedBarColor; /** * the bar unreached area color. */ private int mUnreachedBarColor; /** * the progress text color. */ private int mTextColor; /** * the progress text size */ private float mTextSize; /** * the height of the reached area */ private float mReachedBarHeight; /** * the height of the unreached area */ private float mUnreachedBarHeight; /** * the suffix of the number. */ private String mSuffix = "%"; /** * the prefix. */ private String mPrefix = ""; private final int default_text_color = Color.rgb(66, 145, 241); private final int default_reached_color = Color.rgb(66,145,241); private final int default_unreached_color = Color.rgb(204, 204, 204); private final float default_progress_text_offset; private final float default_text_size; private final float default_reached_bar_height; private final float default_unreached_bar_height; /** * for save and restore instance of progressbar. */ private static final String INSTANCE_STATE = "saved_instance"; private static final String INSTANCE_TEXT_COLOR = "text_color"; private static final String INSTANCE_TEXT_SIZE = "text_size"; private static final String INSTANCE_REACHED_BAR_HEIGHT = "reached_bar_height"; private static final String INSTANCE_REACHED_BAR_COLOR = "reached_bar_color"; private static final String INSTANCE_UNREACHED_BAR_HEIGHT = "unreached_bar_height"; private static final String INSTANCE_UNREACHED_BAR_COLOR = "unreached_bar_color"; private static final String INSTANCE_MAX = "max"; private static final String INSTANCE_PROGRESS = "progress"; private static final String INSTANCE_SUFFIX = "suffix"; private static final String INSTANCE_PREFIX = "prefix"; private static final String INSTANCE_TEXT_VISBILITY = "text_visibility"; private static final int PROGRESS_TEXT_VISIBLE = 0; private static final int PROGRESS_TEXT_INVISIBLE = 1; /** * the width of the text that to be drawn */ private float mDrawTextWidth; /** * the drawn text start */ private float mDrawTextStart; /** *the drawn text end */ private float mDrawTextEnd; /** * the text that to be drawn in onDraw() */ private String mCurrentDrawText; /** * the Paint of the reached area. */ private Paint mReachedBarPaint; /** * the Painter of the unreached area. */ private Paint mUnreachedBarPaint; /** * the Painter of the progress text. */ private Paint mTextPaint; /** * Unreached Bar area to draw rect. */ private RectF mUnreachedRectF = new RectF(0,0,0,0); /** * reached bar area rect. */ private RectF mReachedRectF = new RectF(0,0,0,0); /** * the progress text offset. */ private float mOffset; /** * determine if need to draw unreached area */ private boolean mDrawUnreachedBar = true; private boolean mDrawReachedBar = true; private boolean mIfDrawText = true; public enum ProgressTextVisibility{ Visible,Invisible }; public NumberProgressBar(Context context) { this(context, null); } public NumberProgressBar(Context context, AttributeSet attrs) { this(context, attrs, R.attr.numberProgressBarStyle); } public NumberProgressBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mContext = context; default_reached_bar_height = dp2px(1.5f); default_unreached_bar_height = dp2px(1.0f); default_text_size = sp2px(10); default_progress_text_offset = dp2px(3.0f); //load styled attributes. final TypedArray attributes = context.getTheme().obtainStyledAttributes(attrs, R.styleable.NumberProgressBar, defStyleAttr, 0); mReachedBarColor = attributes.getColor(R.styleable.NumberProgressBar_progress_reached_color, default_reached_color); mUnreachedBarColor = attributes.getColor(R.styleable.NumberProgressBar_progress_unreached_color,default_unreached_color); mTextColor = attributes.getColor(R.styleable.NumberProgressBar_progress_text_color,default_text_color); mTextSize = attributes.getDimension(R.styleable.NumberProgressBar_progress_text_size, default_text_size); mReachedBarHeight = attributes.getDimension(R.styleable.NumberProgressBar_progress_reached_bar_height,default_reached_bar_height); mUnreachedBarHeight = attributes.getDimension(R.styleable.NumberProgressBar_progress_unreached_bar_height,default_unreached_bar_height); mOffset = attributes.getDimension(R.styleable.NumberProgressBar_progress_text_offset,default_progress_text_offset); int textVisible = attributes.getInt(R.styleable.NumberProgressBar_progress_text_visibility,PROGRESS_TEXT_VISIBLE); if(textVisible != PROGRESS_TEXT_VISIBLE){ mIfDrawText = false; } setProgress(attributes.getInt(R.styleable.NumberProgressBar_progress,0)); setMax(attributes.getInt(R.styleable.NumberProgressBar_max, 100)); // attributes.recycle(); initializePainters(); } @Override protected int getSuggestedMinimumWidth() { return (int)mTextSize; } @Override protected int getSuggestedMinimumHeight() { return Math.max((int)mTextSize,Math.max((int)mReachedBarHeight,(int)mUnreachedBarHeight)); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(measure(widthMeasureSpec,true), measure(heightMeasureSpec,false)); } private int measure(int measureSpec,boolean isWidth){ int result; int mode = MeasureSpec.getMode(measureSpec); int size = MeasureSpec.getSize(measureSpec); int padding = isWidth?getPaddingLeft()+getPaddingRight():getPaddingTop()+getPaddingBottom(); if(mode == MeasureSpec.EXACTLY){ result = size; }else{ result = isWidth ? getSuggestedMinimumWidth() : getSuggestedMinimumHeight(); result += padding; if(mode == MeasureSpec.AT_MOST){ if(isWidth) { result = Math.max(result, size); } else{ result = Math.min(result, size); } } } return result; } @Override protected void onDraw(Canvas canvas) { if(mIfDrawText){ calculateDrawRectF(); }else{ calculateDrawRectFWithoutProgressText(); } if(mDrawReachedBar){ canvas.drawRect(mReachedRectF,mReachedBarPaint); } if(mDrawUnreachedBar) { canvas.drawRect(mUnreachedRectF, mUnreachedBarPaint); } if(mIfDrawText) canvas.drawText(mCurrentDrawText,mDrawTextStart,mDrawTextEnd,mTextPaint); } private void initializePainters(){ mReachedBarPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mReachedBarPaint.setColor(mReachedBarColor); mUnreachedBarPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mUnreachedBarPaint.setColor(mUnreachedBarColor); mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mTextPaint.setColor(mTextColor); mTextPaint.setTextSize(mTextSize); } private void calculateDrawRectFWithoutProgressText(){ mReachedRectF.left = getPaddingLeft(); mReachedRectF.top = getHeight()/2.0f - mReachedBarHeight / 2.0f; mReachedRectF.right = (getWidth() - getPaddingLeft() - getPaddingRight() )/(getMax()*1.0f) * getProgress() + getPaddingLeft(); mReachedRectF.bottom = getHeight()/2.0f + mReachedBarHeight / 2.0f; mUnreachedRectF.left = mReachedRectF.right; mUnreachedRectF.right = getWidth() - getPaddingRight(); mUnreachedRectF.top = getHeight()/2.0f + - mUnreachedBarHeight / 2.0f; mUnreachedRectF.bottom = getHeight()/2.0f + mUnreachedBarHeight / 2.0f; } private void calculateDrawRectF(){ mCurrentDrawText = String.format("%d" ,getProgress()*100/getMax()); mCurrentDrawText = mPrefix + mCurrentDrawText + mSuffix; mDrawTextWidth = mTextPaint.measureText(mCurrentDrawText); if(getProgress() == 0){ mDrawReachedBar = false; mDrawTextStart = getPaddingLeft(); }else{ mDrawReachedBar = true; mReachedRectF.left = getPaddingLeft(); mReachedRectF.top = getHeight()/2.0f - mReachedBarHeight / 2.0f; mReachedRectF.right = (getWidth() - getPaddingLeft() - getPaddingRight() )/(getMax()*1.0f) * getProgress() - mOffset + getPaddingLeft(); mReachedRectF.bottom = getHeight()/2.0f + mReachedBarHeight / 2.0f; mDrawTextStart = (mReachedRectF.right + mOffset); } mDrawTextEnd = (int) ((getHeight() / 2.0f) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2.0f)) ; if((mDrawTextStart + mDrawTextWidth )>= getWidth() - getPaddingRight()){ mDrawTextStart = getWidth() - getPaddingRight() - mDrawTextWidth; mReachedRectF.right = mDrawTextStart - mOffset; } float unreachedBarStart = mDrawTextStart + mDrawTextWidth + mOffset; if(unreachedBarStart >= getWidth() - getPaddingRight()){ mDrawUnreachedBar = false; }else{ mDrawUnreachedBar = true; mUnreachedRectF.left = unreachedBarStart; mUnreachedRectF.right = getWidth() - getPaddingRight(); mUnreachedRectF.top = getHeight()/2.0f + - mUnreachedBarHeight / 2.0f; mUnreachedRectF.bottom = getHeight()/2.0f + mUnreachedBarHeight / 2.0f; } } /** * get progress text color * @return progress text color */ public int getTextColor() { return mTextColor; } /** * get progress text size * @return progress text size */ public float getProgressTextSize() { return mTextSize; } public int getUnreachedBarColor() { return mUnreachedBarColor; } public int getReachedBarColor() { return mReachedBarColor; } public int getProgress() { return mProgress; } public int getMax() { return mMax; } public float getReachedBarHeight(){ return mReachedBarHeight; } public float getUnreachedBarHeight(){ return mUnreachedBarHeight; } public void setProgressTextSize(float TextSize) { this.mTextSize = TextSize; mTextPaint.setTextSize(mTextSize); invalidate(); } public void setProgressTextColor(int TextColor) { this.mTextColor = TextColor; mTextPaint.setColor(mTextColor); invalidate(); } public void setUnreachedBarColor(int BarColor) { this.mUnreachedBarColor = BarColor; mUnreachedBarPaint.setColor(mReachedBarColor); invalidate(); } public void setReachedBarColor(int ProgressColor) { this.mReachedBarColor = ProgressColor; mReachedBarPaint.setColor(mReachedBarColor); invalidate(); } public void setReachedBarHeight(float height){ mReachedBarHeight = height; } public void setUnreachedBarHeight(float height){ mUnreachedBarHeight = height; } public void setMax(int Max) { if(Max > 0){ this.mMax = Max; invalidate(); } } public void setSuffix(String suffix){ if(suffix == null){ mSuffix = ""; }else{ mSuffix = suffix; } } public String getSuffix(){ return mSuffix; } public void setPrefix(String prefix){ if(prefix == null) mPrefix = ""; else{ mPrefix = prefix; } } public String getPrefix(){ return mPrefix; } public void incrementProgressBy(int by){ if(by > 0){ setProgress(getProgress() + by); } } public void setProgress(int Progress) { if(Progress <= getMax() && Progress >= 0){ this.mProgress = Progress; invalidate(); } } @Override protected Parcelable onSaveInstanceState() { final Bundle bundle = new Bundle(); bundle.putParcelable(INSTANCE_STATE,super.onSaveInstanceState()); bundle.putInt(INSTANCE_TEXT_COLOR,getTextColor()); bundle.putFloat(INSTANCE_TEXT_SIZE, getProgressTextSize()); bundle.putFloat(INSTANCE_REACHED_BAR_HEIGHT,getReachedBarHeight()); bundle.putFloat(INSTANCE_UNREACHED_BAR_HEIGHT,getUnreachedBarHeight()); bundle.putInt(INSTANCE_REACHED_BAR_COLOR,getReachedBarColor()); bundle.putInt(INSTANCE_UNREACHED_BAR_COLOR,getUnreachedBarColor()); bundle.putInt(INSTANCE_MAX,getMax()); bundle.putInt(INSTANCE_PROGRESS,getProgress()); bundle.putString(INSTANCE_SUFFIX,getSuffix()); bundle.putString(INSTANCE_PREFIX,getPrefix()); bundle.putBoolean(INSTANCE_TEXT_VISBILITY, getProgressTextVisibility()); return bundle; } @Override protected void onRestoreInstanceState(Parcelable state) { if(state instanceof Bundle){ final Bundle bundle = (Bundle)state; mTextColor = bundle.getInt(INSTANCE_TEXT_COLOR); mTextSize = bundle.getFloat(INSTANCE_TEXT_SIZE); mReachedBarHeight = bundle.getFloat(INSTANCE_REACHED_BAR_HEIGHT); mUnreachedBarHeight = bundle.getFloat(INSTANCE_UNREACHED_BAR_HEIGHT); mReachedBarColor = bundle.getInt(INSTANCE_REACHED_BAR_COLOR); mUnreachedBarColor = bundle.getInt(INSTANCE_UNREACHED_BAR_COLOR); initializePainters(); setMax(bundle.getInt(INSTANCE_MAX)); setProgress(bundle.getInt(INSTANCE_PROGRESS)); setPrefix(bundle.getString(INSTANCE_PREFIX)); setSuffix(bundle.getString(INSTANCE_SUFFIX)); setProgressTextVisibility(bundle.getBoolean(INSTANCE_TEXT_VISBILITY) ? ProgressTextVisibility.Visible : ProgressTextVisibility.Invisible); super.onRestoreInstanceState(bundle.getParcelable(INSTANCE_STATE)); return; } super.onRestoreInstanceState(state); } public float dp2px(float dp) { final float scale = getResources().getDisplayMetrics().density; return dp * scale + 0.5f; } public float sp2px(float sp){ final float scale = getResources().getDisplayMetrics().scaledDensity; return sp * scale; } public void setProgressTextVisibility(ProgressTextVisibility visibility){ mIfDrawText = visibility == ProgressTextVisibility.Visible; invalidate(); } public boolean getProgressTextVisibility() { return mIfDrawText; } } 

Link 1

Link 2

Link 3

Link 4

Link 5

Link 6

You can also do this with a linear layout. I made a simple example, just a simple example.

 <RelativeLayout 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" > <LinearLayout android:id="@+id/ll_progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:background="@drawable/layout" > <ImageView android:id="@+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="14dp" android:src="@drawable/bg_1" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="38dp" android:layout_marginTop="14dp" android:src="@drawable/bg_1" /> <ImageView android:id="@+id/imageView12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="35dp" android:layout_marginTop="14dp" android:src="@drawable/bg_1" /> </LinearLayout> </RelativeLayout> 

MainActivity.java

 import java.util.concurrent.TimeUnit; import android.app.Activity; import android.graphics.BitmapFactory; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.graphics.drawable.TransitionDrawable; import android.os.Bundle; import android.os.Handler; import android.widget.ImageView; import android.widget.LinearLayout; public class MainActivity extends Activity { LinearLayout llProgress; Handler handler; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); llProgress = (LinearLayout) findViewById(R.id.ll_progress); handler = new Handler(getMainLooper()); startTransition(); } int prevChild = 0; private void startTransition() { // create the transition layers Drawable[] layers = new Drawable[2]; layers[0] = new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.bg)); layers[1] = new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.bg_1)); final TransitionDrawable[] transitionDrawable = new TransitionDrawable[llProgress.getChildCount()]; for (int i = 0; i < llProgress.getChildCount(); i++) { transitionDrawable[i] = new TransitionDrawable(layers); ((ImageView) llProgress.getChildAt(i)).setImageDrawable(transitionDrawable[i]); } handler.postDelayed(new Runnable() { @Override public void run() { transitionDrawable[prevChild++].startTransition(1000); if(prevChild > llProgress.getChildCount() - 1){ prevChild = 0; } handler.postDelayed(this, 1000 * 3); } }, 1000 * 3); } 

Answer 2

The ProgressBar widget delegates a drawing of its progress so that it Drawable progress, setting it to the appropriate level. By default ^* progress Drawable is a layer-list ^** which contains three levels: background, progress and secondary progress. The last two are wrapped in clip or scale containers, which are automatically cropped or scaled to their percentage depending on their levels. They are also assigned special identifiers that the ProgressBar looks for and processes specifically instead of the whole Drawable , if Drawable is a layer-list .

In your case, since progress increments are not all equal, you can use the level-list drawable container as the progress level and provide assets for all your progress increments. Alternatively, if you want to make it dynamic, you can create your own Drawable subclass with the appropriate drawing logic based on this level.

Here is an example XML for a Drawable progress resource using level-list :

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background" android:drawable="@drawable/progress_bg" /> <item android:id="@android:id/progress"> <level-list> <item android:drawable="@android:color/transparent" /> <item android:drawable="@drawable/progress_1" /> <item android:drawable="@drawable/progress_2" /> <item android:drawable="@drawable/progress_3" /> </level-list> </item> </layer-list> 

^{* You can find the original non-Holo here , and the Holo here and here .
** You can find a list of the standard Drawable structure that can be defined in XML here .}