progress bar - State progressbar android -

progress bar - State progressbar android -

i'm looking smooth way implement "state" progressbar in android shown in 3 examples below. i'm not fan of reinventing wheel i'd inquire if there library available don't know about.

i looked , couldn't find lib guess need implement myself. easiest solution so? should extend progressbar or should scratch? have suggestions or tutorials build on?

update

please see this sample project, gif attached give overview.

you can customize next requirement.

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; /** * max progress, default 100 */ private int mmax = 100; /** * current progress, can not exceed max progress. */ private int mprogress = 0; /** * progress area bar color */ private int mreachedbarcolor; /** * bar unreached area color. */ private int munreachedbarcolor; /** * progress text color. */ private int mtextcolor; /** * progress text size */ private float mtextsize; /** * height of reached area */ private float mreachedbarheight; /** * height of unreached area */ private float munreachedbarheight; /** * suffix of number. */ private string msuffix = "%"; /** * 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; /** * save , 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; /** * width of text drawn */ private float mdrawtextwidth; /** * drawn text start */ private float mdrawtextstart; /** *the drawn text end */ private float mdrawtextend; /** * text drawn in ondraw() */ private string mcurrentdrawtext; /** * paint of reached area. */ private paint mreachedbarpaint; /** * painter of unreached area. */ private paint munreachedbarpaint; /** * painter of progress text. */ private paint mtextpaint; /** * unreached bar area draw rect. */ private rectf munreachedrectf = new rectf(0,0,0,0); /** * reached bar area rect. */ private rectf mreachedrectf = new rectf(0,0,0,0); /** * progress text offset. */ private float moffset; /** * determine if need 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() { homecoming (int)mtextsize; } @override protected int getsuggestedminimumheight() { homecoming 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); } } } homecoming 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; } } /** * progress text color * @return progress text color */ public int gettextcolor() { homecoming mtextcolor; } /** * progress text size * @return progress text size */ public float getprogresstextsize() { homecoming mtextsize; } public int getunreachedbarcolor() { homecoming munreachedbarcolor; } public int getreachedbarcolor() { homecoming mreachedbarcolor; } public int getprogress() { homecoming mprogress; } public int getmax() { homecoming mmax; } public float getreachedbarheight(){ homecoming mreachedbarheight; } public float getunreachedbarheight(){ homecoming 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(){ homecoming msuffix; } public void setprefix(string prefix){ if(prefix == null) mprefix = ""; else{ mprefix = prefix; } } public string getprefix(){ homecoming 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()); homecoming 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; homecoming dp * scale + 0.5f; } public float sp2px(float sp){ final float scale = getresources().getdisplaymetrics().scaleddensity; homecoming sp * scale; } public void setprogresstextvisibility(progresstextvisibility visibility){ mifdrawtext = visibility == progresstextvisibility.visible; invalidate(); } public boolean getprogresstextvisibility() { homecoming mifdrawtext; } }

link 1

link 2

link 3

link 4

link 5

link 6

you can linear layout. have done simple example, 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 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()]; (int = 0; < 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); }

android progress-bar android-custom-view