How To Make Circle Custom Progress Bar in Android - android

i want to custom progress bar in circle shape like same as download blazer app in google play shop.i am expected like below screen shot:
any one help me how to do that?

The best two libraries I found on the net are on github:
https://github.com/Todd-Davies/ProgressWheel
https://github.com/f2prateek/progressbutton?source=c
Hope that will help you

I've encountered same problem and not found any appropriate solution for my case, so I decided to go another way. I've created custom drawable class. Within this class I've created 2 Paints for progress line and background line (with some bigger stroke). First of all set startAngle and sweepAngle in constructor:
mSweepAngle = 0;
mStartAngle = 270;
Here is onDraw method of this class:
#Override
public void draw(Canvas canvas) {
// draw background line
canvas.drawArc(mRectF, 0, 360, false, mPaintBackground);
// draw progress line
canvas.drawArc(mRectF, mStartAngle, mSweepAngle, false, mPaintProgress);
}
So now all you need to do is set this drawable as a backgorund of the view, in background thread change sweepAngle:
mSweepAngle += 360 / totalTimerTime // this is mStep
and directly call InvalidateSelf() with some interval (e.g every 1 second or more often if you want smooth progress changes) on the view that have this drawable as a background. Thats it!
P.S. I know, I know...of course you want some more code. So here it is all flow:
Create XML view :
<View
android:id="#+id/timer"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Create and configure Custom Drawable class (as I described above). Don't forget to setup Paints for lines. Here paint for progress line:
mPaintProgress = new Paint();
mPaintProgress.setAntiAlias(true);
mPaintProgress.setStyle(Paint.Style.STROKE);
mPaintProgress.setStrokeWidth(widthProgress);
mPaintProgress.setStrokeCap(Paint.Cap.ROUND);
mPaintProgress.setColor(colorThatYouWant);
Same for backgroung paint (set width little more if you want)
In drawable class create method for updating (Step calculation described above)
public void update() {
mSweepAngle += mStep;
invalidateSelf();
}
Set this drawable class to YourTimerView (I did it in runtime) - view with #+id/timer from xml above:
OurSuperDrawableClass superDrawable = new OurSuperDrawableClass();
YourTimerView.setBackgroundDrawable(superDrawable);
Create background thread with runnable and update view:
YourTimerView.post(new Runnable() {
#Override
public void run() {
// update progress view
superDrawable.update();
}
});
Thats it ! Enjoy your cool progress bar. Here screenshot of result if you're too bored of this amount of text.

for more information on How to create Circle Android Custom Progress Bar view this link
Step 01
You should create an xml file on drawable file for configure the appearance of progress bar . So Im creating my xml file as circular_progress_bar.xml.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="120"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="140">
<item android:id="#android:id/background">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:useLevel="false"
android:angle="0"
android:type="sweep"
android:thicknessRatio="50.0">
<solid android:color="#000000"/>
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="120"
android:toDegrees="120">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:angle="0"
android:type="sweep"
android:thicknessRatio="50.0">
<solid android:color="#ffffff"/>
</shape>
</rotate>
</item>
</layer-list>
Step 02
Then create progress bar on your xml file
Then give the name of xml file on your drawable folder as the parth of android:progressDrawable
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginLeft="0dp"
android:layout_centerHorizontal="true"
android:indeterminate="false"
android:max="100"
android:progressDrawable="#drawable/circular_progress_bar" />
Step 03
Visual the progress bar using thread
package com.example.progress;
import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.view.Menu;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ProgressBar;
import android.widget.TextView;
public class MainActivity extends Activity {
private ProgressBar progBar;
private TextView text;
private Handler mHandler = new Handler();
private int mProgressStatus=0;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
progBar= (ProgressBar)findViewById(R.id.progressBar);
text = (TextView)findViewById(R.id.textView1);
dosomething();
}
public void dosomething() {
new Thread(new Runnable() {
public void run() {
final int presentage=0;
while (mProgressStatus < 63) {
mProgressStatus += 1;
// Update the progress bar
mHandler.post(new Runnable() {
public void run() {
progBar.setProgress(mProgressStatus);
text.setText(""+mProgressStatus+"%");
}
});
try {
Thread.sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
}

A very useful lib for custom progress bar in android.
In your layout file
<com.lylc.widget.circularprogressbar.example.CircularProgressBar
android:id="#+id/mycustom_progressbar"
.
.
.
/>
and Java file
CircularProgressBar progressBar = (CircularProgressBar) findViewById(R.id.mycustom_progressbar);
progressBar.setTitle("Circular Progress Bar");

Try this piece of code to create circular progress bar(pie chart). pass it integer value to draw how many percent of filling area. :)
private void circularImageBar(ImageView iv2, int i) {
Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(b);
Paint paint = new Paint();
paint.setColor(Color.parseColor("#c4c4c4"));
paint.setStrokeWidth(10);
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(150, 150, 140, paint);
paint.setColor(Color.parseColor("#FFDB4C"));
paint.setStrokeWidth(10);
paint.setStyle(Paint.Style.FILL);
final RectF oval = new RectF();
paint.setStyle(Paint.Style.STROKE);
oval.set(10,10,290,290);
canvas.drawArc(oval, 270, ((i*360)/100), false, paint);
paint.setStrokeWidth(0);
paint.setTextAlign(Align.CENTER);
paint.setColor(Color.parseColor("#8E8E93"));
paint.setTextSize(140);
canvas.drawText(""+i, 150, 150+(paint.getTextSize()/3), paint);
iv2.setImageBitmap(b);
}

I have solved this cool custom progress bar by creating the custom view. I have overriden the onDraw() method to draw the circles, filled arc and text on the canvas.
following is the custom progress bar
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import com.investorfinder.utils.UiUtils;
public class CustomProgressBar extends View {
private int max = 100;
private int progress;
private Path path = new Path();
int color = 0xff44C8E5;
private Paint paint;
private Paint mPaintProgress;
private RectF mRectF;
private Paint textPaint;
private String text = "0%";
private final Rect textBounds = new Rect();
private int centerY;
private int centerX;
private int swipeAndgle = 0;
public CustomProgressBar(Context context) {
super(context);
initUI();
}
public CustomProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
initUI();
}
public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initUI();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
initUI();
}
private void initUI() {
paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeWidth(UiUtils.dpToPx(getContext(), 1));
paint.setStyle(Paint.Style.STROKE);
paint.setColor(color);
mPaintProgress = new Paint();
mPaintProgress.setAntiAlias(true);
mPaintProgress.setStyle(Paint.Style.STROKE);
mPaintProgress.setStrokeWidth(UiUtils.dpToPx(getContext(), 9));
mPaintProgress.setColor(color);
textPaint = new Paint();
textPaint.setAntiAlias(true);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setColor(color);
textPaint.setStrokeWidth(2);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int viewWidth = MeasureSpec.getSize(widthMeasureSpec);
int viewHeight = MeasureSpec.getSize(heightMeasureSpec);
int radius = (Math.min(viewWidth, viewHeight) - UiUtils.dpToPx(getContext(), 2)) / 2;
path.reset();
centerX = viewWidth / 2;
centerY = viewHeight / 2;
path.addCircle(centerX, centerY, radius, Path.Direction.CW);
int smallCirclRadius = radius - UiUtils.dpToPx(getContext(), 7);
path.addCircle(centerX, centerY, smallCirclRadius, Path.Direction.CW);
smallCirclRadius += UiUtils.dpToPx(getContext(), 4);
mRectF = new RectF(centerX - smallCirclRadius, centerY - smallCirclRadius, centerX + smallCirclRadius, centerY + smallCirclRadius);
textPaint.setTextSize(radius * 0.5f);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(path, paint);
canvas.drawArc(mRectF, 270, swipeAndgle, false, mPaintProgress);
drawTextCentred(canvas);
}
public void drawTextCentred(Canvas canvas) {
textPaint.getTextBounds(text, 0, text.length(), textBounds);
canvas.drawText(text, centerX - textBounds.exactCenterX(), centerY - textBounds.exactCenterY(), textPaint);
}
public void setMax(int max) {
this.max = max;
}
public void setProgress(int progress) {
this.progress = progress;
int percentage = progress * 100 / max;
swipeAndgle = percentage * 360 / 100;
text = percentage + "%";
invalidate();
}
public void setColor(int color) {
this.color = color;
}
}
In layout XML
<com.your.package.name.CustomProgressBar
android:id="#+id/progress_bar"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentRight="true"
android:layout_below="#+id/txt_title"
android:layout_marginRight="15dp" />
in activity
CustomProgressBar progressBar = (CustomProgressBar)findViewById(R.id.progress_bar);
progressBar.setMax(9);
progressBar.setProgress(5);

I'd make a new view class and derive from the existing ProgressBar. Then override the onDraw function. You're going to need to make direct draw calls to the canvas for this, since its so custom- a combination of drawText, drawArc, and drawOval should do it- an oval for the outer ring and empty portions, and an arc for the colored in parts. You may end up needing to override onMeasure and onLayout as well. Then in your xml, reference this view by class name like this when you want to use it.

I did a simple class which u can use to make custom ProgressBar dialog.
Actually it has 2 default layouts:
- First dialog with no panel with progress bar and animated text centered over it
- Second normal dialog with panel, progress bar, title and msg
It is just a class, so not a customizable library which u can import in your project, so you need to copy it and change it how you want.
It is a DialogFragment class, but you can use it inside an activity as a normal fragment just like you do with classic fragment by using FragmentManager.
Code of the dialog class:
public class ProgressBarDialog extends DialogFragment {
private static final String TAG = ProgressBarDialog.class.getSimpleName();
private static final String KEY = TAG.concat(".key");
// Argument Keys
private static final String KEY_DIALOG_TYPE = KEY.concat(".dialogType");
private static final String KEY_TITLE = KEY.concat(".title");
private static final String KEY_PROGRESS_TEXT = KEY.concat(".progressText");
private static final String KEY_CUSTOM_LAYOUT_BUILDER = KEY.concat(".customLayoutBuilder");
// Class Names
private static final String CLASS_GRADIENT_STATE = "GradientState";
// Field Names
private static final String FIELD_THICKNESS = "mThickness";
private static final String FIELD_INNER_RADIUS = "mInnerRadius";
/** Dialog Types **/
private static final int TYPE_PROGRESS_BAR_ONLY_NO_ANIM = 0x0;
private static final int TYPE_PROGRESS_BAR_ONLY_ROTATE_ANIM = 0x1;
private static final int TYPE_PROGRESS_BAR_ONLY_FADE_ANIM = 0x2;
private static final int TYPE_PROGRESS_BAR_AND_MSG = 0xF;
/** Animations Values **/
private static final long CENTER_TEXT_VIEWS_ANIMATION_DURATION = 250L;
private static final long CENTER_TEXT_VIEWS_START_OFFSET_MULTIPLIER = 250L;
private MaterialProgressBar mProgressBar;
private LinearLayout mllTextContainer;
private TextView mtvTitle;
private TextView mtvProgressText;
private List<TextView> mCenterTextViews;
private int mDialogType;
private String mTitle;
private String mProgressText;
private CustomLayoutBuilder mCustomLayoutBuilder;
/** Public Static Factory Methods **/
public static ProgressBarDialog initLayoutProgressBarOnlyNoAnim(String text, CustomLayoutBuilder builder){
return initLayoutProgressBarOnly(TYPE_PROGRESS_BAR_ONLY_NO_ANIM, text, builder);
}
public static ProgressBarDialog initLayoutProgressBarOnlyRotateAnim(String text, CustomLayoutBuilder builder){
return initLayoutProgressBarOnly(TYPE_PROGRESS_BAR_ONLY_ROTATE_ANIM, text, builder);
}
public static ProgressBarDialog initLayoutProgressBarOnlyFadeAnim(String text, CustomLayoutBuilder builder){
return initLayoutProgressBarOnly(TYPE_PROGRESS_BAR_ONLY_FADE_ANIM, text, builder);
}
public static ProgressBarDialog initLayoutProgressBarAndMsg(String title, String text, CustomLayoutBuilder builder){
ProgressBarDialog mInstance = new ProgressBarDialog();
Bundle args = new Bundle();
args.putInt(KEY_DIALOG_TYPE, TYPE_PROGRESS_BAR_AND_MSG);
args.putString(KEY_TITLE, title);
args.putString(KEY_PROGRESS_TEXT, text);
args.putParcelable(KEY_CUSTOM_LAYOUT_BUILDER, builder);
mInstance.setArguments(args);
return mInstance;
}
/** Private Static Factory Methods **/
private static ProgressBarDialog initLayoutProgressBarOnly(int animation, String text, CustomLayoutBuilder builder){
ProgressBarDialog mInstance = new ProgressBarDialog();
Bundle args = new Bundle();
args.putInt(KEY_DIALOG_TYPE, animation);
args.putString(KEY_PROGRESS_TEXT, text);
args.putParcelable(KEY_CUSTOM_LAYOUT_BUILDER, builder);
mInstance.setArguments(args);
return mInstance;
}
/** Override Lifecycle Methods **/
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initData();
}
#Override #Nullable
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View view = inflater.inflate(R.layout.dialog_progress_bar, container, false);
initViews(view);
if(getContext() != null && mCustomLayoutBuilder != null) {
mProgressBar.setIndeterminateDrawable(getResources().getDrawable(mCustomLayoutBuilder.getLayoutResID()));
initShapes();
}
return view;
}
private void initShapes(){
if(mProgressBar.getIndeterminateDrawable() instanceof LayerDrawable) {
LayerDrawable layerDrawable = (LayerDrawable) mProgressBar.getIndeterminateDrawable();
for (int i = 0; i < layerDrawable.getNumberOfLayers(); i++) {
if(layerDrawable.getDrawable(i) instanceof RotateDrawable) {
RotateDrawable rotateDrawable = (RotateDrawable) layerDrawable.getDrawable(i);
int[] fromToDeg = mCustomLayoutBuilder.getDegreesMatrixRow(i);
if(fromToDeg.length > 0){
rotateDrawable.setFromDegrees(fromToDeg[CustomLayoutBuilder.INDEX_FROM_DEGREES]);
rotateDrawable.setToDegrees(fromToDeg[CustomLayoutBuilder.INDEX_TO_DEGREES]);
}
if(rotateDrawable.getDrawable() instanceof GradientDrawable){
GradientDrawable gradientDrawable = (GradientDrawable) rotateDrawable.getDrawable();
int innerRadius = getResources().getDimensionPixelSize(mCustomLayoutBuilder.getInnerRadius(i));
if(mDialogType == TYPE_PROGRESS_BAR_AND_MSG){
innerRadius /= 3;
}
int thickness = getResources().getDimensionPixelSize(mCustomLayoutBuilder.getThickness(i));
int[] colors = mCustomLayoutBuilder.getColorsMatrixRow(i);
if(colors.length > 0x0){
gradientDrawable.setColors(DataUtils.resourcesIDsToColors(this.getContext(), colors));
}
if(innerRadius != -0x1){
DataUtils.setSubClassFieldIntValue(gradientDrawable.getConstantState(), gradientDrawable.getClass(), CLASS_GRADIENT_STATE, FIELD_INNER_RADIUS, innerRadius);
}
if(thickness != -0x1){
DataUtils.setSubClassFieldIntValue(gradientDrawable.getConstantState(), gradientDrawable.getClass(), CLASS_GRADIENT_STATE, FIELD_THICKNESS, thickness);
}
}
}
}
}
}
#Override
public void onStart() {
super.onStart();
setWindowSize();
startAnimation();
}
/** Public Methods **/
public void changeTextViews(String progressText){
mProgressText = progressText;
initTextViews();
startAnimation();
}
public String getProgressText(){
return mProgressText;
}
/** Private Methods **//** Init Methods **/
private void initData(){
if(getArguments() != null) {
if (getArguments().containsKey(KEY_DIALOG_TYPE)) {
mDialogType = getArguments().getInt(KEY_DIALOG_TYPE);
}
if(getArguments().containsKey(KEY_TITLE)){
mTitle = getArguments().getString(KEY_TITLE);
}
if (getArguments().containsKey(KEY_PROGRESS_TEXT)) {
mProgressText = getArguments().getString(KEY_PROGRESS_TEXT);
}
if (getArguments().containsKey(KEY_CUSTOM_LAYOUT_BUILDER)){
mCustomLayoutBuilder = getArguments().getParcelable(KEY_CUSTOM_LAYOUT_BUILDER);
}
}
mCenterTextViews = new ArrayList<>();
}
private void initViews(View layout){
if(layout != null){
switch(mDialogType){
case TYPE_PROGRESS_BAR_ONLY_NO_ANIM:
case TYPE_PROGRESS_BAR_ONLY_ROTATE_ANIM:
case TYPE_PROGRESS_BAR_ONLY_FADE_ANIM:
if(getDialog() != null && getDialog().getWindow() != null) {
getDialog().getWindow().setBackgroundDrawableResource(android.R.color.transparent);
}
LinearLayout mLayoutProgressBarOnly = layout.findViewById(R.id.layout_progress_bar_only);
mLayoutProgressBarOnly.setVisibility(LinearLayout.VISIBLE);
mProgressBar = layout.findViewById(R.id.dpb_progress_bar);
if(mCustomLayoutBuilder.getProgressBarWidthDimen() != -0x1){
ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) mProgressBar.getLayoutParams();
lp.width = getResources().getDimensionPixelSize(mCustomLayoutBuilder.getProgressBarWidthDimen());
lp.height = getResources().getDimensionPixelSize(mCustomLayoutBuilder.getProgressBarHeightDimen());
mProgressBar.setLayoutParams(lp);
}
mllTextContainer = layout.findViewById(R.id.dpb_text_container);
initTextViews();
break;
case TYPE_PROGRESS_BAR_AND_MSG:
LinearLayout mLayoutProgressBarAndMsg = layout.findViewById(R.id.layout_progress_bar_and_msg);
mLayoutProgressBarAndMsg.setVisibility(LinearLayout.VISIBLE);
mProgressBar = layout.findViewById(R.id.dpb_progress_bar_and_msg);
mtvTitle = layout.findViewById(R.id.pbd_title);
mtvProgressText = layout.findViewById(R.id.dpb_progress_msg);
initProgressMsg();
break;
}
}
}
private void initTextViews(){
if(!TextUtils.isEmpty(mProgressText)){
clearTextContainer();
for(char digit : mProgressText.toCharArray()){
TextView tv = new TextView(getContext(), null, 0x0, R.style.PBDCenterTextStyleWhite);
if(mCustomLayoutBuilder.getProgressMsgColor() != CustomLayoutBuilder.DEFAULT_COLOR && getContext() != null){
tv.setTextColor(ActivityCompat.getColor(getContext(), mCustomLayoutBuilder.getProgressMsgColor()));
}
if(mCustomLayoutBuilder.getProgressMsgDimen() != CustomLayoutBuilder.DEFAULT_DIMEN){
tv.setTextSize(getResources().getDimension(mCustomLayoutBuilder.getProgressMsgDimen()));
}
tv.setText(String.valueOf(digit));
mCenterTextViews.add(tv);
mllTextContainer.addView(tv);
}
}
}
private void initProgressMsg(){
mtvTitle.setText(mTitle);
mtvProgressText.setText(mProgressText);
if(mCustomLayoutBuilder.getProgressMsgColor() != CustomLayoutBuilder.DEFAULT_COLOR){
mtvProgressText.setTextColor(mCustomLayoutBuilder.getProgressMsgColor());
}
if(mCustomLayoutBuilder.getProgressMsgDimen() != CustomLayoutBuilder.DEFAULT_DIMEN){
mtvProgressText.setTextSize(getResources().getDimension(mCustomLayoutBuilder.getProgressMsgDimen()));
}
}
private void clearTextContainer(){
if(mllTextContainer.getChildCount() >= 0x0){
for(int i=0; i < mllTextContainer.getChildCount(); i++){
View v = mllTextContainer.getChildAt(i);
if(v instanceof TextView){
TextView tv = (TextView) v;
if(tv.getAnimation() != null){
tv.clearAnimation();
}
}
}
}
mllTextContainer.removeAllViews();
}
private void setWindowSize(){
Dialog dialog = getDialog();
if(dialog != null && dialog.getWindow() != null){
int width = 0x0, height = 0x0;
switch(mDialogType){
case TYPE_PROGRESS_BAR_ONLY_NO_ANIM:
case TYPE_PROGRESS_BAR_ONLY_ROTATE_ANIM:
case TYPE_PROGRESS_BAR_ONLY_FADE_ANIM:
width = ViewGroup.LayoutParams.WRAP_CONTENT; //getResources().getDimensionPixelSize(R.dimen.pbd_window_width);
height = ViewGroup.LayoutParams.WRAP_CONTENT; //getResources().getDimensionPixelSize(R.dimen.pbd_window_height);
break;
case TYPE_PROGRESS_BAR_AND_MSG:
width = ViewGroup.LayoutParams.MATCH_PARENT;
height = ViewGroup.LayoutParams.WRAP_CONTENT; //getResources().getDimensionPixelSize(R.dimen.pbd_textual_window_height);
break;
}
dialog.getWindow().setLayout(width, height);
}
}
/** Animation Methods **/
private void startAnimation(){
switch(mDialogType){
case TYPE_PROGRESS_BAR_ONLY_ROTATE_ANIM:
startRotateAnimations();
break;
case TYPE_PROGRESS_BAR_ONLY_FADE_ANIM:
startFadeInAnimations();
break;
}
}
private void startRotateAnimations(){
for(TextView tv : mCenterTextViews){
if(tv != null && tv.getText() != null && !TextUtils.isEmpty(tv.getText().toString().trim())) {
int i = mCenterTextViews.indexOf(tv);
RotateAnimation anim = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
anim.setDuration(CENTER_TEXT_VIEWS_ANIMATION_DURATION);
anim.setFillAfter(true);
anim.setStartOffset(CENTER_TEXT_VIEWS_START_OFFSET_MULTIPLIER * i);
if (i == (mCenterTextViews.size() - 0x1)) {
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
startRotateAnimations();
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
tv.startAnimation(anim);
}
}
}
private void startFadeInAnimations(){
for(TextView tv : mCenterTextViews){
if(tv != null && tv.getText() != null && !TextUtils.isEmpty(tv.getText().toString().trim())) {
int i = mCenterTextViews.indexOf(tv);
AlphaAnimation anim = new AlphaAnimation(0x1, 0x0);
anim.setDuration(CENTER_TEXT_VIEWS_ANIMATION_DURATION);
anim.setFillAfter(true);
anim.setStartOffset(CENTER_TEXT_VIEWS_START_OFFSET_MULTIPLIER * i);
if (i == (mCenterTextViews.size() - 0x1)) {
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
startFadeOutAnimations();
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
tv.startAnimation(anim);
}
}
}
private void startFadeOutAnimations(){
for(TextView tv : mCenterTextViews){
int i = mCenterTextViews.indexOf(tv);
AlphaAnimation anim = new AlphaAnimation(0x0, 0x1);
anim.setDuration(CENTER_TEXT_VIEWS_ANIMATION_DURATION);
anim.setFillAfter(true);
anim.setStartOffset(CENTER_TEXT_VIEWS_START_OFFSET_MULTIPLIER * i);
if(i == (mCenterTextViews.size() - 0x1)){
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
startFadeInAnimations();
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
tv.startAnimation(anim);
}
}
/** Progress Bar Custom Layout Builder Class **/
public static class CustomLayoutBuilder implements Parcelable {
/** Shapes **/
private static final int RING = GradientDrawable.RING;
/** Colors **/
private static final int[][] COLORS_MATRIX_RYGB = new int[][]{
new int[]{ R.color.transparent, R.color.transparent, R.color.material_red_A700 },
new int[]{ R.color.transparent, R.color.transparent, R.color.material_amber_A700 },
new int[]{ R.color.transparent, R.color.transparent, R.color.material_light_green_A700 },
new int[]{ R.color.transparent, R.color.transparent, R.color.material_blue_A700 }
};
private static final int DEFAULT_COLOR = -0x1;
/** Dimens **/
private static final int DEFAULT_DIMEN = -0x1;
private static final int[] DEFAULT_PROGRESS_BAR_DIMEN = new int[]{};
/** Indexes **/
private static final int INDEX_PROGRESS_BAR_WIDTH = 0x0;
private static final int INDEX_PROGRESS_BAR_HEIGHT = 0x1;
private static final int INDEX_FROM_DEGREES = 0x0;
private static final int INDEX_TO_DEGREES = 0x1;
/** Arrays Sizes **/
private static final int SIZE_PROGRESS_BAR_DIMENS_ARRAY = 0x2;
/** Matrix Columns Number **/
private static final int NUM_COLUMNS_DEGREES_MATRIX = 0x2; /* Degrees Matrix Index -> degrees[3] = { fromDegrees, toDegrees } */
private static final int NUM_COLUMNS_COLORS_MATRIX = 0x3; /* GradientDrawable Colors Matrix Index -> colors[3] = { startColor, centerColor, endColor } */
/** Drawables Layout Resource IDs **/
private static final int LAYOUT_RES_PROGRESS_BAR_RINGS = R.drawable.progress_bar_rings;
/** Layout Data: Four Rings Overlaid **/
private static final int RINGS_OVERLAID_LAYERS = 0x4;
private static final int[][] RINGS_OVERLAID_DEGREES = new int[][]{ new int[]{ 300, 660 }, new int[]{ 210, 570 }, new int[]{ 120, 480 }, new int[]{ 30, 390 } };
private static final int[] RINGS_OVERLAID_SHAPES = new int[]{ RING, RING, RING, RING };
private static final int[] RINGS_OVERLAID_INNER_RADIUS = new int[]{ R.dimen.pbd_inner_radius_60dp, R.dimen.pbd_inner_radius_60dp, R.dimen.pbd_inner_radius_60dp, R.dimen.pbd_inner_radius_60dp};
private static final int[] RINGS_OVERLAID_THICKNESS = new int[]{ R.dimen.pbd_thickness_40dp, R.dimen.pbd_thickness_30dp, R.dimen.pbd_thickness_20dp, R.dimen.pbd_thickness_10dp };
/** Layout Data: Four Rings Spaced **/
private static final int RINGS_SPACED_LAYERS = 0x4;
private static final int[][] RINGS_SPACED_DEGREES = new int[][]{ new int[]{ 180, 540 }, new int[]{ 0, 360 }, new int[]{ 90, 450 }, new int[]{ 270, 630 } };
private static final int[] RINGS_SPACED_SHAPES = new int[]{ RING, RING, RING, RING };
private static final int[] RINGS_SPACED_INNER_RADIUS = new int[]{ R.dimen.pbd_inner_radius_30dp, R.dimen.pbd_inner_radius_60dp, R.dimen.pbd_inner_radius_90dp, R.dimen.pbd_inner_radius_120dp };
private static final int[] RINGS_SPACED_THICKNESS = new int[]{ R.dimen.pbd_thickness_10dp, R.dimen.pbd_thickness_15dp, R.dimen.pbd_thickness_20dp, R.dimen.pbd_thickness_25dp };
private int mLayoutResID;
private int[] mProgressBarDimens;
private int mNumLayers;
private int[][] mRotateDegrees;
private int[] mShapes;
private int[] mInnerRadius;
private int[] mThickness;
private int[][] mColors;
private int mProgressMsgColor;
private int mProgressMsgDimen;
public static Parcelable.Creator CREATOR = new CreatorCustomLayoutBuilder();
/** Constructors **/
private CustomLayoutBuilder(int layoutResID, int[] progressBarDimens, int numLayers, int[][] degreesMatrix, int[] shapes, int[] innerRadius, int[] thickness,
int[][] colorsMatrix, int msgColor, int progressMsgDimen){
mLayoutResID = layoutResID;
mProgressBarDimens = progressBarDimens;
mNumLayers = numLayers;
mRotateDegrees = degreesMatrix;
mShapes = shapes;
mInnerRadius = innerRadius;
mThickness = thickness;
mColors = colorsMatrix;
mProgressMsgColor = msgColor;
mProgressMsgDimen = progressMsgDimen;
}
private CustomLayoutBuilder(Parcel in){
mLayoutResID = in.readInt();
mProgressBarDimens = new int[SIZE_PROGRESS_BAR_DIMENS_ARRAY];
in.readIntArray(mProgressBarDimens);
mNumLayers = in.readInt();
int[] tempArray = new int[NUM_COLUMNS_DEGREES_MATRIX * mNumLayers];
in.readIntArray(tempArray);
mRotateDegrees = DataUtils.arrayToMatrix(tempArray, NUM_COLUMNS_DEGREES_MATRIX);
mShapes = new int[mNumLayers];
in.readIntArray(mShapes);
mInnerRadius = new int[mNumLayers];
in.readIntArray(mInnerRadius);
mThickness = new int[mNumLayers];
in.readIntArray(mThickness);
tempArray = new int[NUM_COLUMNS_COLORS_MATRIX * mNumLayers];
in.readIntArray(tempArray);
mColors = DataUtils.arrayToMatrix(tempArray, NUM_COLUMNS_COLORS_MATRIX);
mProgressMsgColor = in.readInt();
mProgressMsgDimen = in.readInt();
}
/** Public Static Factory Methods **/
public static CustomLayoutBuilder initLayoutRingsOverlaid(){
return new CustomLayoutBuilder(LAYOUT_RES_PROGRESS_BAR_RINGS, DEFAULT_PROGRESS_BAR_DIMEN, RINGS_OVERLAID_LAYERS, RINGS_OVERLAID_DEGREES, RINGS_OVERLAID_SHAPES,
RINGS_OVERLAID_INNER_RADIUS, RINGS_OVERLAID_THICKNESS, COLORS_MATRIX_RYGB, R.color.material_white, DEFAULT_DIMEN);
}
public static CustomLayoutBuilder initLayoutRingsOverlaid(int[] resProgBarDimens, int resProgMsgColor, int resProgMsgDimen){
return new CustomLayoutBuilder(LAYOUT_RES_PROGRESS_BAR_RINGS, resProgBarDimens, RINGS_OVERLAID_LAYERS, RINGS_OVERLAID_DEGREES, RINGS_OVERLAID_SHAPES,
RINGS_OVERLAID_INNER_RADIUS, RINGS_OVERLAID_THICKNESS, COLORS_MATRIX_RYGB, resProgMsgColor, resProgMsgDimen);
}
public static CustomLayoutBuilder initLayoutRingsSpaced(){
return new CustomLayoutBuilder(LAYOUT_RES_PROGRESS_BAR_RINGS, DEFAULT_PROGRESS_BAR_DIMEN, RINGS_SPACED_LAYERS, RINGS_SPACED_DEGREES, RINGS_SPACED_SHAPES,
RINGS_SPACED_INNER_RADIUS, RINGS_SPACED_THICKNESS, COLORS_MATRIX_RYGB, DEFAULT_COLOR, DEFAULT_DIMEN);
}
/** Override Parcelable Methods **/
#Override
public int describeContents() {
return 0;
}
#Override
public void writeToParcel(Parcel out, int flags) {
out.writeInt(mLayoutResID);
out.writeIntArray(mProgressBarDimens);
out.writeInt(mNumLayers);
out.writeIntArray(DataUtils.matrixToArray(mRotateDegrees));
out.writeIntArray(mShapes);
out.writeIntArray(mInnerRadius);
out.writeIntArray(mThickness);
out.writeIntArray(DataUtils.matrixToArray(mColors));
out.writeInt(mProgressMsgColor);
out.writeInt(mProgressMsgDimen);
}
/** Getter & Setter Methods **/
private int getLayoutResID() {
return mLayoutResID;
}
private void setLayoutResID(int layoutResID) {
this.mLayoutResID = layoutResID;
}
private int[] getProgressBarDimens() {
return mProgressBarDimens;
}
private void setProgressBarDimens(int[] progressBarDimens) {
this.mProgressBarDimens = progressBarDimens;
}
private int getProgressBarWidthDimen(){ // Used to check if 'mProgressBarDimens' array is set.
if(mProgressBarDimens != null && mProgressBarDimens.length == SIZE_PROGRESS_BAR_DIMENS_ARRAY){
return mProgressBarDimens[INDEX_PROGRESS_BAR_WIDTH];
} else {
return -0x1;
}
}
private int getProgressBarHeightDimen(){
return mProgressBarDimens[INDEX_PROGRESS_BAR_HEIGHT];
}
private int getNumLayers() {
return mNumLayers;
}
private void setNumLayers(int numLayers) {
this.mNumLayers = numLayers;
}
private int[][] getRotateDegrees() {
return mRotateDegrees;
}
private void setRotateDegrees(int[][] rotateDegrees) {
this.mRotateDegrees = rotateDegrees;
}
private int[] getShapes() {
return mShapes;
}
private void setShapes(int[] shapes) {
this.mShapes = shapes;
}
private int[] getInnerRadius() {
return mInnerRadius;
}
private void setInnerRadius(int[] innerRadius) {
this.mInnerRadius = innerRadius;
}
private int[] getThickness() {
return mThickness;
}
private void setThickness(int[] thickness) {
this.mThickness = thickness;
}
private int[][] getColorsMatrix() {
return mColors;
}
private void setColorsMatrix(int[][] colorsMatrix) {
this.mColors = colorsMatrix;
}
private int getProgressMsgColor() {
return mProgressMsgColor;
}
private void setProgressMsgColor(int progressMsgColor) {
this.mProgressMsgColor = progressMsgColor;
}
private int getProgressMsgDimen() {
return mProgressMsgDimen;
}
private void setProgressMsgDimen(int progressMsgDimen) {
this.mProgressMsgDimen = progressMsgDimen;
}
/** Public Methods **/
private int[] getDegreesMatrixRow(int numRow){
if(mRotateDegrees != null && mRotateDegrees.length > numRow) {
return mRotateDegrees[numRow];
} else {
return new int[]{};
}
}
private int getShape(int position){
if(mShapes != null && mShapes.length > position){
return mShapes[position];
} else {
return -0x1;
}
}
private int getInnerRadius(int position){
if(mInnerRadius != null && mInnerRadius.length > position){
return mInnerRadius[position];
} else {
return -0x1;
}
}
private int getThickness(int position){
if(mThickness != null && mThickness.length > position){
return mThickness[position];
} else {
return -0x1;
}
}
private int[] getColorsMatrixRow(int numRow) {
if(mColors != null && mColors.length > numRow){
return mColors[numRow];
} else {
return new int[]{};
}
}
/** Private Static Class Parcelable Creator **/
private static class CreatorCustomLayoutBuilder implements Parcelable.Creator<CustomLayoutBuilder> {
#Override
public CustomLayoutBuilder createFromParcel(Parcel in) {
return new CustomLayoutBuilder(in);
}
#Override
public CustomLayoutBuilder[] newArray(int size) {
return new CustomLayoutBuilder[size];
}
}
}
}
The class has a progress bar with no dialog and custom text over it.
The text can have 2 animations:
Fade In -> Fade Out animation: digits will fade out like a sequentially from left to right. At end of text will restart from left.
Rotate Animation: same sequential behavior but the digits rotate on themself one by one instead of fading out.
Other way is a Progress Bar with a dialog (Title + Message)

Rest of code
Code of utils methods:
public static int[] resourcesIDsToColors(Context context, int[] resIDs){
int[] colors = new int[resIDs.length];
for(int i=0; i < resIDs.length; i++){
colors[i] = ActivityCompat.getColor(context, resIDs[i]);
}
return colors;
}
public static void setSubClassFieldIntValue(Object objField, Class<?> superClass, String subName, String fieldName, int fieldValue){
Class<?> subClass = getSubClass(superClass, subName);
if(subClass != null) {
Field field = getClassField(subClass, fieldName);
if (field != null) {
setFieldValue(objField, field, fieldValue);
}
}
}
public static Class<?> getSubClass(Class<?> superClass, String subName){
Class<?>[] classes = superClass.getDeclaredClasses();
if(classes != null && classes.length > 0){
for(Class<?> clss : classes){
if(clss.getSimpleName().equals(subName)){
return clss;
}
}
}
return null;
}
public static Field getClassField(Class<?> clss, String fieldName){
try {
Field field = clss.getDeclaredField(fieldName);
field.setAccessible(true);
return field;
} catch (NoSuchFieldException nsfE) {
Log.e(TAG, nsfE.getMessage());
} catch (SecurityException sE){
Log.e(TAG, sE.getMessage());
} catch (Exception e){
Log.e(TAG, e.getMessage());
}
return null;
}
public static int[][] arrayToMatrix(int[] array, int numColumns){
int numRows = array.length / numColumns;
int[][] matrix = new int[numRows][numColumns];
int nElemens = array.length;
for(int i=0; i < nElemens; i++){
matrix[i / numColumns][i % numColumns] = array[i];
}
return matrix;
}
public static int[] matrixToArray(int[][] matrix){
/** [+] Square matrix of order n -> A matrix with n rows and n columns, same number of rows and columns.
* [+] Matrix rows & columns number annotations:
* matrix[rows][columns] matrix (rows x columns) matrix rows, columns rows by columns matrix
* **/
int numRows = matrix.length;
int[] arr = new int[]{};
for(int i=0; i < numRows; i++){
int numColumns = matrix[i].length;
int[] row = new int[numColumns];
for(int j=0; j < numColumns; j++){
row[j] = matrix[i][j];
}
arr = ArrayUtils.addAll(arr, row);
}
return arr;
}
Code of default layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/transparent">
<LinearLayout
android:id="#+id/layout_progress_bar_only"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
<android.support.constraint.ConstraintLayout
android:id="#+id/dpb_constraint_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:id="#+id/dpb_progress_bar"
android:layout_width="#dimen/pbd_progressbar_width_2"
android:layout_height="#dimen/pbd_progressbar_height_2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"/>
<LinearLayout
android:id="#+id/dpb_text_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"/>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout_progress_bar_and_msg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"
style="#style/PBDTextualMainLayoutStyle">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="#dimen/pbd_textual_card_elevation">
<TextView
android:id="#+id/pbd_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/PBDTextualTitle"/>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/pbd_textual_main_layout_height"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="#dimen/pbd_textual_progressbar_width"
android:layout_height="#dimen/pbd_textual_progressbar_height">
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:id="#+id/dpb_progress_bar_and_msg"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/PBDProgressBarStyle"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="#dimen/pbd_textual_msg_container_height">
<TextView
android:id="#+id/dpb_progress_msg"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/PBDTextualProgressMsgStyle"/>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Progress Bar Rings:
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="300"
android:toDegrees="660">
<shape
android:shape="ring"
android:useLevel="false">
<gradient
android:type="sweep"/>
</shape>
</rotate>
</item>
<item>
<rotate
android:fromDegrees="210"
android:toDegrees="570">
<shape
android:shape="ring"
android:useLevel="false">
<gradient
android:type="sweep"/>
</shape>
</rotate>
</item>
<item>
<rotate
android:fromDegrees="120"
android:toDegrees="480">
<shape
android:shape="ring"
android:useLevel="false">
<gradient
android:type="sweep"
android:startColor="#00000000"
android:centerColor="#00000000"/>
</shape>
</rotate>
</item>
<item>
<rotate
android:fromDegrees="30"
android:toDegrees="390">
<shape
android:shape="ring"
android:useLevel="false">
<solid android:color="#000000"/>
<gradient
android:type="sweep"/>
</shape>
</rotate>
</item>
</layer-list>
Dimens Resources:
<!-- ProgressBarDialog Dimens (Normal & Textual Versions) -->
<dimen name="pbd_window_width">250dp</dimen>
<dimen name="pbd_window_height">250dp</dimen>
<dimen name="pbd_progressbar_width_1">250dp</dimen>
<dimen name="pbd_progressbar_height_1">250dp</dimen>
<dimen name="pbd_progressbar_width_2">400dp</dimen>
<dimen name="pbd_progressbar_height_2">400dp</dimen>
<dimen name="pbd_textual_window_height">170dp</dimen>
<dimen name="pbd_textual_main_layout_height">150dp</dimen>
<dimen name="pbd_textual_progressbar_width">150dp</dimen>
<dimen name="pbd_textual_progressbar_height">150dp</dimen>
<dimen name="pbd_textual_msg_container_height">150dp</dimen>
<dimen name="pbd_textual_main_layout_margin_horizontal">50dp</dimen>
<dimen name="pbd_textual_main_layout_padding_horizontal">5dp</dimen>
<dimen name="pbd_textual_main_layout_padding_bottom">15dp</dimen>
<dimen name="pbd_textual_title_padding">4dp</dimen>
<dimen name="pbd_textual_msg_container_margin">3dp</dimen>
<dimen name="pbd_textual_msg_container_padding">3dp</dimen>
<dimen name="pbd_textual_card_elevation">15dp</dimen>
<dimen name="pbd_textual_progressmsg_padding_start">10dp</dimen>
<dimen name="pbd_inner_radius_30dp">30dp</dimen>
<dimen name="pbd_inner_radius_60dp">60dp</dimen>
<dimen name="pbd_inner_radius_90dp">90dp</dimen>
<dimen name="pbd_inner_radius_120dp">120dp</dimen>
<dimen name="pbd_thickness_40dp">40dp</dimen>
<dimen name="pbd_thickness_30dp">30dp</dimen>
<dimen name="pbd_thickness_25dp">25dp</dimen>
<dimen name="pbd_thickness_20dp">20dp</dimen>
<dimen name="pbd_thickness_15dp">15dp</dimen>
<dimen name="pbd_thickness_10dp">10dp</dimen>
Styles Resources:
<!-- PROGRESS BAR DIALOG STYLES -->
<style name="PBDCenterTextStyleWhite">
<item name="android:textAlignment">center</item>
<item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
<item name="android:textStyle">bold|italic</item>
<item name="android:textColor">#color/material_white</item>
<item name="android:layout_gravity">center</item>
<item name="android:gravity">center</item>
</style>
<style name="PBDTextualTitle">
<item name="android:textAlignment">viewStart</item>
<item name="android:textAppearance">?android:attr/textAppearanceLargeInverse</item>
<item name="android:textStyle">bold|italic</item>
<item name="android:textColor">#color/colorAccent</item>
<item name="android:padding">#dimen/pbd_textual_title_padding</item>
<item name="android:layout_gravity">start</item>
<item name="android:gravity">center_vertical|start</item>
<item name="android:background">#color/colorPrimaryDark</item>
</style>
<style name="PBDTextualProgressMsgStyle">
<item name="android:textAlignment">viewStart</item>
<item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
<item name="android:textColor">#color/material_black</item>
<item name="android:textStyle">normal|italic</item>
<item name="android:paddingStart">#dimen/pbd_textual_progressmsg_padding_start</item>
<item name="android:layout_gravity">start</item>
<item name="android:gravity">center_vertical|start</item>
<item name="android:background">#color/material_yellow_A100</item>
</style>
<style name="PBDTextualMainLayoutStyle">
<item name="android:paddingLeft">#dimen/pbd_textual_main_layout_padding_horizontal</item>
<item name="android:paddingRight">#dimen/pbd_textual_main_layout_padding_horizontal</item>
<item name="android:paddingBottom">#dimen/pbd_textual_main_layout_padding_bottom</item>
<item name="android:background">#color/colorPrimaryDark</item>
</style>
<style name="PBDProgressBarStyle">
<item name="android:layout_gravity">center</item>
<item name="android:gravity">center</item>
</style>

Related

Constant ripple effect in android

What I'm trying to do is to have a constant ripple effect on the background of a LinearLayout. Why? Basically, this LinearLayout indicates live users watching this item. So I want the background to have a constant ripple animation similar to some apps that have a live indicator with a ripple effect on the background of that indicator. I hope my question was clear.
Example:
I want this effect to be happing constantly
Hi i tried to code something like this and below is what i come close to. You can always tweek numbers to slow down the animation and other things.
1) Create a ripple drawable background in your res/drawable named temp_ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorPrimary"
>
<item android:id="#android:id/mask"
android:drawable="#android:color/holo_green_dark"
>
</item>
<item
android:drawable="#android:color/holo_orange_dark">
</item>
</ripple>
2) assign the background to possible view candidate like below, here AppCompatButton to android:background="#drawable/temp_ripple"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btnLive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:background="#drawable/temp_ripple"
android:foreground="?selectableItemBackground"
android:text="12.5k Live"
android:textColor="#android:color/white" />
</RelativeLayout>
3) Get the ripple drawable from the view and create a runnable running after 2 sec to repeat the animation by setting the states of the ripple drawable in click listener of the button
package com.example.android.treasureHunt
import android.content.res.ColorStateList
import android.graphics.drawable.RippleDrawable
import android.os.Build
import android.os.Bundle
import android.os.Handler
import android.util.Log
import android.view.MotionEvent
import android.view.View
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.temp_activity.*
class TempActivity : AppCompatActivity(R.layout.temp_activity) {
val handler = Handler()
lateinit var runnable: Runnable
var count = 0
lateinit var rippleDrawable: RippleDrawable
#RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
rippleDrawable = btnLive.background as RippleDrawable
setLiveCountListener()
btnLive.setOnClickListener {
Log.d("TAG++", "button clicked")
rippleDrawable.state = intArrayOf(
android.R.attr.state_pressed,
android.R.attr.state_enabled
)
}
}
private fun setLiveCountListener() {
runnable = Runnable {
rippleDrawable.state = intArrayOf()
btnLive.performClick()
//to perform another runnable after some time creating a race condition
handler.postDelayed(runnable, 2000)
//condition to breakout from loop
if (count == 10) {
handler.removeCallbacks(runnable)
}
Log.d("TAG++", "Loop running")
}
//trigger the start of the ui thread
handler.postDelayed(runnable, 2000)
}
}
After taking many hours I have created custom class for infinite ripple view as per you want using this lib with customisation.
InfiniteRippleLayout
public class InfiniteRippleLayout extends FrameLayout {
/**
* Author:Hardik Talaviya
* Date: 2020.02.15 1:30 PM
* Describe:
*/
private static final int DEFAULT_DURATION = 350;
private static final int DEFAULT_FADE_DURATION = 75;
private static final float DEFAULT_ALPHA = 0.2f;
private static final int DEFAULT_COLOR = Color.BLACK;
private static final int DEFAULT_BACKGROUND = Color.TRANSPARENT;
private static final boolean DEFAULT_DELAY_CLICK = true;
private static final boolean DEFAULT_PERSISTENT = false;
private static final boolean DEFAULT_SEARCH_ADAPTER = false;
private static final boolean DEFAULT_RIPPLE_OVERLAY = false;
private static final int DEFAULT_ROUNDED_CORNERS = 0;
private static final int FADE_EXTRA_DELAY = 50;
private final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private final Rect bounds = new Rect();
private int rippleColor;
private boolean rippleOverlay;
private int rippleDuration;
private int rippleAlpha;
private boolean rippleDelayClick;
private int rippleFadeDuration;
private boolean ripplePersistent;
private Drawable rippleBackground;
private boolean rippleInAdapter;
private float rippleRoundedCorners;
private float radius;
private AdapterView parentAdapter;
private View childView;
private AnimatorSet rippleAnimator;
private Point currentCoords = new Point();
private int layerType;
private int positionInAdapter;
/*
* Animations
*/
private Property<InfiniteRippleLayout, Float> radiusProperty
= new Property<InfiniteRippleLayout, Float>(Float.class, "radius") {
#Override
public Float get(InfiniteRippleLayout object) {
return object.getRadius();
}
#Override
public void set(InfiniteRippleLayout object, Float value) {
object.setRadius(value);
}
};
private Property<InfiniteRippleLayout, Integer> circleAlphaProperty
= new Property<InfiniteRippleLayout, Integer>(Integer.class, "rippleAlpha") {
#Override
public Integer get(InfiniteRippleLayout object) {
return object.getRippleAlpha();
}
#Override
public void set(InfiniteRippleLayout object, Integer value) {
object.setRippleAlpha(value);
}
};
public InfiniteRippleLayout(Context context) {
this(context, null, 0);
}
public InfiniteRippleLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public InfiniteRippleLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setWillNotDraw(false);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.InfiniteRippleLayout);
rippleColor = a.getColor(R.styleable.InfiniteRippleLayout_mrl_rippleColor, DEFAULT_COLOR);
rippleOverlay = a.getBoolean(R.styleable.InfiniteRippleLayout_mrl_rippleOverlay, DEFAULT_RIPPLE_OVERLAY);
rippleDuration = a.getInt(R.styleable.InfiniteRippleLayout_mrl_rippleDuration, DEFAULT_DURATION);
rippleAlpha = (int) (255 * a.getFloat(R.styleable.InfiniteRippleLayout_mrl_rippleAlpha, DEFAULT_ALPHA));
rippleDelayClick = a.getBoolean(R.styleable.InfiniteRippleLayout_mrl_rippleDelayClick, DEFAULT_DELAY_CLICK);
rippleFadeDuration = a.getInteger(R.styleable.InfiniteRippleLayout_mrl_rippleFadeDuration, DEFAULT_FADE_DURATION);
rippleBackground = new ColorDrawable(a.getColor(R.styleable.InfiniteRippleLayout_mrl_rippleBackground, DEFAULT_BACKGROUND));
ripplePersistent = a.getBoolean(R.styleable.InfiniteRippleLayout_mrl_ripplePersistent, DEFAULT_PERSISTENT);
rippleInAdapter = a.getBoolean(R.styleable.InfiniteRippleLayout_mrl_rippleInAdapter, DEFAULT_SEARCH_ADAPTER);
rippleRoundedCorners = a.getDimensionPixelSize(R.styleable.InfiniteRippleLayout_mrl_rippleRoundedCorners, DEFAULT_ROUNDED_CORNERS);
a.recycle();
paint.setColor(rippleColor);
paint.setAlpha(rippleAlpha);
enableClipPathSupportIfNecessary();
startRipple();
}
#Override
public final void addView(View child, int index, ViewGroup.LayoutParams params) {
if (getChildCount() > 0) {
throw new IllegalStateException("MaterialRippleLayout can host only one child");
}
//noinspection unchecked
childView = child;
super.addView(child, index, params);
}
#Override
public void setOnClickListener(OnClickListener onClickListener) {
if (childView == null) {
throw new IllegalStateException("MaterialRippleLayout must have a child view to handle clicks");
}
childView.setOnClickListener(onClickListener);
}
#Override
public void setOnLongClickListener(OnLongClickListener onClickListener) {
if (childView == null) {
throw new IllegalStateException("MaterialRippleLayout must have a child view to handle clicks");
}
childView.setOnLongClickListener(onClickListener);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
return !findClickableViewInChild(childView, (int) event.getX(), (int) event.getY());
}
private void startRipple() {
float endRadius = getEndRadius();
cancelAnimations();
rippleAnimator = new AnimatorSet();
rippleAnimator.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
if (!ripplePersistent) {
setRadius(0);
setRippleAlpha(rippleAlpha);
}
if (rippleDelayClick) {
startRipple();
}
childView.setPressed(false);
}
});
ObjectAnimator ripple = ObjectAnimator.ofFloat(this, radiusProperty, radius, endRadius);
ripple.setDuration(rippleDuration);
ripple.setInterpolator(new DecelerateInterpolator());
ObjectAnimator fade = ObjectAnimator.ofInt(this, circleAlphaProperty, rippleAlpha, 0);
fade.setDuration(rippleFadeDuration);
fade.setInterpolator(new AccelerateInterpolator());
fade.setStartDelay(rippleDuration - rippleFadeDuration - FADE_EXTRA_DELAY);
if (ripplePersistent) {
rippleAnimator.play(ripple);
} else if (getRadius() > endRadius) {
fade.setStartDelay(0);
rippleAnimator.play(fade);
} else {
rippleAnimator.playTogether(ripple, fade);
}
rippleAnimator.start();
}
private void cancelAnimations() {
if (rippleAnimator != null) {
rippleAnimator.cancel();
rippleAnimator.removeAllListeners();
}
}
private float getEndRadius() {
final int width = getWidth();
final int height = getHeight();
final int halfWidth = width / 2;
final int halfHeight = height / 2;
final float radiusX = halfWidth > currentCoords.x ? width - currentCoords.x : currentCoords.x;
final float radiusY = halfHeight > currentCoords.y ? height - currentCoords.y : currentCoords.y;
return (float) Math.sqrt(Math.pow(radiusX, 2) + Math.pow(radiusY, 2)) * 1.2f;
}
private AdapterView findParentAdapterView() {
if (parentAdapter != null) {
return parentAdapter;
}
ViewParent current = getParent();
while (true) {
if (current instanceof AdapterView) {
parentAdapter = (AdapterView) current;
return parentAdapter;
} else {
try {
current = current.getParent();
} catch (NullPointerException npe) {
throw new RuntimeException("Could not find a parent AdapterView");
}
}
}
}
private boolean adapterPositionChanged() {
if (rippleInAdapter) {
int newPosition = findParentAdapterView().getPositionForView(InfiniteRippleLayout.this);
final boolean changed = newPosition != positionInAdapter;
positionInAdapter = newPosition;
if (changed) {
cancelAnimations();
childView.setPressed(false);
setRadius(0);
}
return changed;
}
return false;
}
private boolean findClickableViewInChild(View view, int x, int y) {
if (view instanceof ViewGroup) {
ViewGroup viewGroup = (ViewGroup) view;
for (int i = 0; i < viewGroup.getChildCount(); i++) {
View child = viewGroup.getChildAt(i);
final Rect rect = new Rect();
child.getHitRect(rect);
final boolean contains = rect.contains(x, y);
if (contains) {
return findClickableViewInChild(child, x - rect.left, y - rect.top);
}
}
} else if (view != childView) {
return (view.isEnabled() && (view.isClickable() || view.isLongClickable() || view.isFocusableInTouchMode()));
}
return view.isFocusableInTouchMode();
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
bounds.set(0, 0, w, h);
rippleBackground.setBounds(bounds);
}
#Override
public boolean isInEditMode() {
return true;
}
/*
* Drawing
*/
#Override
public void draw(Canvas canvas) {
final boolean positionChanged = adapterPositionChanged();
currentCoords = new Point(getWidth() / 2, getHeight() / 2);
if (rippleOverlay) {
if (!positionChanged) {
rippleBackground.draw(canvas);
}
super.draw(canvas);
if (!positionChanged) {
if (rippleRoundedCorners != 0) {
Path clipPath = new Path();
RectF rect = new RectF(0, 0, canvas.getWidth(), canvas.getHeight());
clipPath.addRoundRect(rect, rippleRoundedCorners, rippleRoundedCorners, Path.Direction.CW);
canvas.clipPath(clipPath);
}
canvas.drawCircle(currentCoords.x, currentCoords.y, radius, paint);
}
} else {
if (!positionChanged) {
rippleBackground.draw(canvas);
canvas.drawCircle(currentCoords.x, currentCoords.y, radius, paint);
}
super.draw(canvas);
}
}
private float getRadius() {
return radius;
}
public void setRadius(float radius) {
this.radius = radius;
invalidate();
}
public int getRippleAlpha() {
return paint.getAlpha();
}
public void setRippleAlpha(Integer rippleAlpha) {
paint.setAlpha(rippleAlpha);
invalidate();
}
/**
* {#link Canvas#clipPath(Path)} is not supported in hardware accelerated layers
* before API 18. Use software layer instead
* <p/>
* https://developer.android.com/guide/topics/graphics/hardware-accel.html#unsupported
*/
private void enableClipPathSupportIfNecessary() {
if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.JELLY_BEAN_MR1) {
if (rippleRoundedCorners != 0) {
layerType = getLayerType();
setLayerType(LAYER_TYPE_SOFTWARE, null);
} else {
setLayerType(layerType, null);
}
}
}
}
attributes.xml
Add this attributes in your res->values->attributes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="InfiniteRippleLayout">
<attr name="mrl_rippleColor" format="color" localization="suggested" />
<attr name="mrl_rippleOverlay" format="boolean" localization="suggested" />
<attr name="mrl_rippleAlpha" format="float" localization="suggested" />
<attr name="mrl_rippleDuration" format="integer" localization="suggested" />
<attr name="mrl_rippleFadeDuration" format="integer" localization="suggested" />
<attr name="mrl_rippleBackground" format="color" localization="suggested" />
<attr name="mrl_rippleDelayClick" format="boolean" localization="suggested" />
<attr name="mrl_ripplePersistent" format="boolean" localization="suggested" />
<attr name="mrl_rippleInAdapter" format="boolean" localization="suggested" />
<attr name="mrl_rippleRoundedCorners" format="dimension" localization="suggested" />
</declare-styleable>
</resources>
Add effect using below xml code
<com.broooapps.curvegraphview.InfiniteRippleLayout
android:layout_width="match_parent"
android:layout_height="150dp"
app:mrl_rippleAlpha="0.2"
app:mrl_rippleColor="#585858"
app:mrl_rippleDelayClick="true"
app:mrl_rippleDuration="1100"
app:mrl_rippleOverlay="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="HARDIK TALAVIYA"
android:textColor="#000"
android:textSize="20sp" />
</com.broooapps.curvegraphview.InfiniteRippleLayout>
Result
I hope this can help you!

Ripple effect over shape background on Button

[Please note that I use Xamarin.Droid which is a cross-platform framework using Mono.NET C#, the code is really close to Android's Java and I do accept Java responses as it is easy to translate to C# ]
I subclassed a Button and I'm applying a shape with a color and a leftDrawable. Everything is working fine except the fact that I have lost the Ripple effect when the button is pressed.
I've tried to add ?attr/selectableItemBackground but with code since I don't have any XML for this subclass, and the ripple effect still doesn't show up.
Here's my button subclass
public class LTButton : Android.Support.V7.Widget.AppCompatButton
{
Context context;
public LTButton(Context pContext, IAttributeSet attrs) : base(pContext, attrs)
{
context = pContext;
Elevation = 0;
}
protected override void OnDraw(Canvas canvas)
{
base.OnDraw(canvas);
Init();
}
void Init()
{
// Adding a left drawable
Drawable img = ContextCompat.GetDrawable(context, Resource.Drawable.chevron_right);
img.SetBounds(0, 0, 70, 70);
SetCompoundDrawables(img, null, null, null);
TextSize = 16;
// The shape with background color and rounded corners
var shape = new GradientDrawable();
// This is a full rounded button
shape.SetCornerRadius(Height / 2);
shape.SetColor(ContextCompat.GetColor(context, Resource.Color.LTGreen));
Background = shape;
// Foreground => To have a ripple effect
int[] attrs = { Android.Resource.Attribute.SelectableItemBackground };
TypedArray ta = context.ObtainStyledAttributes(attrs);
Drawable selectableDrawable = ta.GetDrawable(0);
ta.Recycle();
Foreground = selectableDrawable;
}
}
Create an XML file for a ripple drawable something like this :
my_button_background_v21.xml
<?xml version="1.0" encoding="UTF-8" ?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/black"
tools:targetApi="lollipop">
<item>
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<solid android:color="#color/LTGreen" />
</shape>
</item>
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<solid android:color="#color/black" />
</shape>
</item>
Then in your custom button's onDraw method add the ripple effect something like this:
protected override void OnDraw(Canvas canvas)
{
base.OnDraw(canvas);
Drawable img = ContextCompat.GetDrawable(context, Resource.Drawable.chevron_right);
img.SetBounds(0, 0, 70, 70);
SetCompoundDrawables(img, null, null, null);
TextSize = 16;
if (Build.VERSION.SdkInt < BuildVersionCodes.Lollipop)
{
SetBackgroundResource(Resource.Layout.my_button_background);
}
else
{
SetBackgroundResource(Resource.Layout.my_button_background_v21);
}
}
Use java you can do like this:
Custom a RippleButton
public class RippleButton extends Button {
private RippleDrawable rippleDrawable;
private Paint paint;
public RippleButton(Context context) {
this(context,null);
}
public RippleButton(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public RippleButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
paint = new Paint();
rippleDrawable = new RippleDrawable();
//Set refresh interface, View has been implemented ---> source button inheritance child drawable.callback
rippleDrawable.setCallback(this);
//rippleDrawable
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//Set the refresh area ---> source code
rippleDrawable.setBounds(0,0,getWidth(),getHeight());
}
#Override
protected boolean verifyDrawable(Drawable who) {
return who == rippleDrawable || super.verifyDrawable(who);
}
#Override
protected void onDraw(Canvas canvas) {
rippleDrawable.draw(canvas);
super.onDraw(canvas);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
rippleDrawable.onTouch(event);
return true;
}
}
Custom a RippleDrawable :
public class RippleDrawable extends Drawable {
private Paint mPaint;
private Bitmap bitmap;
private int rippleColor;
private float mRipplePointX = 0;
private float mRipplePointY = 0;
private float mRippleRadius = 0;
private int mAlpha = 200;
private float mCenterPointX,mCenterPointY;
private float mClickPointX;
private float mClickPointY;
//Maximum radius
private float MaxRadius;
//Starting radius
private float startRadius;
//End radius
private float endRadius;
//Record whether to raise your finger--->boolean
private boolean mUpDone;
//Record whether the animation is finished
private boolean mEnterDone;
/**Enter animation*/
//Enter the progress value of the animation
private float mProgress;
//Each incremental time
private float mEnterIncrement = 16f/360;
//Enter the animation add interpolator
private DecelerateInterpolator mEnterInterpolator = new DecelerateInterpolator(2);
private Runnable runnable = new Runnable() {
#Override
public void run() {
mEnterDone = false;
mCircleAlpha = 255;
mProgress = mProgress + mEnterIncrement;
if (mProgress > 1){
onEnterPrograss(1);
enterDone();
return;
}
float interpolation = mEnterInterpolator.getInterpolation(mProgress);
onEnterPrograss(interpolation);
scheduleSelf(this, SystemClock.uptimeMillis() + 16);
}
};
/**How to enter the animation refresh
* #parms realProgress */
public void onEnterPrograss(float realPrograss){
mRippleRadius = getCenter(startRadius,endRadius,realPrograss);
mRipplePointX = getCenter(mClickPointX,mCenterPointX,realPrograss);
mRipplePointY = getCenter(mClickPointY,mCenterPointY,realPrograss);
mBgAlpha = (int) getCenter(0,182,realPrograss);
invalidateSelf();
}
private void enterDone() {
mEnterDone = true;
if(mUpDone)
startExitRunnable();
}
/**Exit animation*/
//Exit the progress value of the animation
private float mExitProgress;
//Each incremental time
private float mExitIncrement = 16f/280;
//Exit animation add interpolator
private AccelerateInterpolator mExitInterpolator = new AccelerateInterpolator(2);
private Runnable exitRunnable = new Runnable() {
#Override
public void run() {
if (!mEnterDone){
return;
}
mExitProgress = mExitProgress + mExitIncrement;
if (mExitProgress > 1){
onExitPrograss(1);
exitDone();
return;
}
float interpolation = mExitInterpolator.getInterpolation(mExitProgress);
onExitPrograss(interpolation);
scheduleSelf(this, SystemClock.uptimeMillis() + 16);
}
};
/**Exit animation refresh method
* #parms realProgress */
public void onExitPrograss(float realPrograss){
//Set background
mBgAlpha = (int) getCenter(182,0,realPrograss);
//Set the circular area
mCircleAlpha = (int) getCenter(255,0,realPrograss);
invalidateSelf();
}
private void exitDone() {
mEnterDone = false;
}
//Set the gradient effect including radius / bg color / center position, etc.
public float getCenter(float start,float end,float prograss){
return start + (end - start)*prograss;
}
public RippleDrawable() {
//Anti-aliased brush
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
//Set anti-aliasing
mPaint.setAntiAlias(true);
//Set anti-shake
mPaint.setDither(true);
setRippleColor(0x60000000);
}
//private int mPaintAlpha = 255;
//Background transparency
private int mBgAlpha;
//Transparency of the circular area
private int mCircleAlpha;
#Override
public void draw(Canvas canvas) {
//Get the transparency of user settings
int preAlpha = mPaint.getAlpha();
//current background
int bgAlpha = (int) (preAlpha * (mBgAlpha/255f));
//bg + prebg Operational background
int maxCircleAlpha = getCircleAlpha(preAlpha,bgAlpha);
int circleAlpha = (int) (maxCircleAlpha * (mCircleAlpha/255f));
mPaint.setAlpha(bgAlpha);
canvas.drawColor(mPaint.getColor());
mPaint.setAlpha(circleAlpha);
canvas.drawCircle(mRipplePointX,mRipplePointY,mRippleRadius,mPaint);
//Set the initial transparency to ensure that the next entry into the operation will not go wrong
mPaint.setAlpha(preAlpha);
}
public int getCircleAlpha(int preAlpha,int bgAlpha){
int dAlpha = preAlpha - bgAlpha;
return (int) ((dAlpha*255f)/(255f - bgAlpha));
}
public void onTouch(MotionEvent event){
switch (event.getActionMasked()){
case MotionEvent.ACTION_DOWN:
//press
mClickPointX = event.getX();
mClickPointY = event.getY();
onTouchDown(mClickPointX, mClickPointY);
break;
case MotionEvent.ACTION_MOVE:
//move
//onTouchMove(moveX,moveY);
break;
case MotionEvent.ACTION_UP:
//up
onTouchUp();
break;
case MotionEvent.ACTION_CANCEL:
//exit
//onTouchCancel();
break;
}
}
public void onTouchDown(float x,float y){
//Log.i("onTouchDown====",x + "" + y );
//unscheduleSelf(runnable);
mUpDone = false;
mRipplePointX = x;
mRipplePointY = y;
mRippleRadius = 0;
startEnterRunnable();
}
public void onTouchMove(float x,float y){
}
public void onTouchUp(){
mUpDone = true;
if (mEnterDone){
startExitRunnable();
}
}
public void onTouchCancel(){
mUpDone = true;
if (mEnterDone){
startExitRunnable();
}
}
/**
* Open to enter animation
* */
public void startEnterRunnable(){
mProgress = 0;
//mEnterDone = false;
unscheduleSelf(exitRunnable);
unscheduleSelf(runnable);
scheduleSelf(runnable,SystemClock.uptimeMillis());
}
/**
* Open exit animation
* */
public void startExitRunnable(){
mExitProgress = 0;
unscheduleSelf(runnable);
unscheduleSelf(exitRunnable);
scheduleSelf(exitRunnable,SystemClock.uptimeMillis());
}
public int changeColorAlpha(int color,int alpha){
//Set transparency
int a = (color >> 24) & 0xFF;
a = a * alpha/255;
int red = Color.red(color);
int green = Color.green(color);
int blue = Color.blue(color);
int argb = Color.argb(a, red, green, blue);
return argb;
}
//Take the center point of the drawn area
#Override
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
mCenterPointX = bounds.centerX();
mCenterPointY = bounds.centerY();
MaxRadius = Math.max(mCenterPointX,mCenterPointY);
startRadius = MaxRadius * 0.1f;
endRadius = MaxRadius * 0.8f;
}
#Override
public void setAlpha(int alpha) {
mAlpha = alpha;
onColorOrAlphaChange();
}
#Override
public int getAlpha() {
return mAlpha;
}
#Override
public void setColorFilter(ColorFilter colorFilter) {
//Filter effect
if (mPaint.getColorFilter() != colorFilter){
mPaint.setColorFilter(colorFilter);
invalidateSelf();
}
}
#Override
public int getOpacity() {
//Return transparency
if (mAlpha == 255){
return PixelFormat.OPAQUE;
}else if (mAlpha == 0){
return PixelFormat.TRANSPARENT;
}else{
return PixelFormat.TRANSLUCENT;
}
}
public void setRippleColor(int rippleColor) {
this.rippleColor = rippleColor;
onColorOrAlphaChange();
}
private void onColorOrAlphaChange() {
//Set brush color
mPaint.setColor(rippleColor);
if (mAlpha != 255){
int pAlpha = mPaint.getAlpha();
int realAlpha = (int) (pAlpha * (mAlpha/255f));
//Set transparency
mPaint.setAlpha(realAlpha);
}
invalidateSelf();
}
}
If be helpful ,please mark answer to help others.
Thanks to #G.Hakim and this thread, I was able to reproduce my background, and add the ripple effect with just XML.
my_button_background.xml
<?xml version="1.0" encoding="UTF-8" ?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/black"
tools:targetApi="lollipop">
<item>
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<solid android:color="#color/LTGreen" />
</shape>
</item>
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<solid android:color="#color/black" />
</shape>
</item>
</ripple>
MyButton.cs
protected override void OnDraw(Canvas canvas)
{
base.OnDraw(canvas);
Drawable img = ContextCompat.GetDrawable(context, Resource.Drawable.chevron_right);
img.SetBounds(0, 0, 70, 70);
SetCompoundDrawables(img, null, null, null);
TextSize = 16;
if (Build.VERSION.SdkInt < BuildVersionCodes.Lollipop)
{
SetBackgroundResource(Resource.Layout.my_button_background);
}
else
{
SetBackgroundResource(Resource.Layout.my_button_background_v21);
}
}

How to create custom progress bar? [duplicate]

i want to custom progress bar in circle shape like same as download blazer app in google play shop.i am expected like below screen shot:
any one help me how to do that?
The best two libraries I found on the net are on github:
https://github.com/Todd-Davies/ProgressWheel
https://github.com/f2prateek/progressbutton?source=c
Hope that will help you
I've encountered same problem and not found any appropriate solution for my case, so I decided to go another way. I've created custom drawable class. Within this class I've created 2 Paints for progress line and background line (with some bigger stroke). First of all set startAngle and sweepAngle in constructor:
mSweepAngle = 0;
mStartAngle = 270;
Here is onDraw method of this class:
#Override
public void draw(Canvas canvas) {
// draw background line
canvas.drawArc(mRectF, 0, 360, false, mPaintBackground);
// draw progress line
canvas.drawArc(mRectF, mStartAngle, mSweepAngle, false, mPaintProgress);
}
So now all you need to do is set this drawable as a backgorund of the view, in background thread change sweepAngle:
mSweepAngle += 360 / totalTimerTime // this is mStep
and directly call InvalidateSelf() with some interval (e.g every 1 second or more often if you want smooth progress changes) on the view that have this drawable as a background. Thats it!
P.S. I know, I know...of course you want some more code. So here it is all flow:
Create XML view :
<View
android:id="#+id/timer"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Create and configure Custom Drawable class (as I described above). Don't forget to setup Paints for lines. Here paint for progress line:
mPaintProgress = new Paint();
mPaintProgress.setAntiAlias(true);
mPaintProgress.setStyle(Paint.Style.STROKE);
mPaintProgress.setStrokeWidth(widthProgress);
mPaintProgress.setStrokeCap(Paint.Cap.ROUND);
mPaintProgress.setColor(colorThatYouWant);
Same for backgroung paint (set width little more if you want)
In drawable class create method for updating (Step calculation described above)
public void update() {
mSweepAngle += mStep;
invalidateSelf();
}
Set this drawable class to YourTimerView (I did it in runtime) - view with #+id/timer from xml above:
OurSuperDrawableClass superDrawable = new OurSuperDrawableClass();
YourTimerView.setBackgroundDrawable(superDrawable);
Create background thread with runnable and update view:
YourTimerView.post(new Runnable() {
#Override
public void run() {
// update progress view
superDrawable.update();
}
});
Thats it ! Enjoy your cool progress bar. Here screenshot of result if you're too bored of this amount of text.
for more information on How to create Circle Android Custom Progress Bar view this link
Step 01
You should create an xml file on drawable file for configure the appearance of progress bar . So Im creating my xml file as circular_progress_bar.xml.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="120"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="140">
<item android:id="#android:id/background">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:useLevel="false"
android:angle="0"
android:type="sweep"
android:thicknessRatio="50.0">
<solid android:color="#000000"/>
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="120"
android:toDegrees="120">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:angle="0"
android:type="sweep"
android:thicknessRatio="50.0">
<solid android:color="#ffffff"/>
</shape>
</rotate>
</item>
</layer-list>
Step 02
Then create progress bar on your xml file
Then give the name of xml file on your drawable folder as the parth of android:progressDrawable
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginLeft="0dp"
android:layout_centerHorizontal="true"
android:indeterminate="false"
android:max="100"
android:progressDrawable="#drawable/circular_progress_bar" />
Step 03
Visual the progress bar using thread
package com.example.progress;
import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.view.Menu;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ProgressBar;
import android.widget.TextView;
public class MainActivity extends Activity {
private ProgressBar progBar;
private TextView text;
private Handler mHandler = new Handler();
private int mProgressStatus=0;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
progBar= (ProgressBar)findViewById(R.id.progressBar);
text = (TextView)findViewById(R.id.textView1);
dosomething();
}
public void dosomething() {
new Thread(new Runnable() {
public void run() {
final int presentage=0;
while (mProgressStatus < 63) {
mProgressStatus += 1;
// Update the progress bar
mHandler.post(new Runnable() {
public void run() {
progBar.setProgress(mProgressStatus);
text.setText(""+mProgressStatus+"%");
}
});
try {
Thread.sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
}
A very useful lib for custom progress bar in android.
In your layout file
<com.lylc.widget.circularprogressbar.example.CircularProgressBar
android:id="#+id/mycustom_progressbar"
.
.
.
/>
and Java file
CircularProgressBar progressBar = (CircularProgressBar) findViewById(R.id.mycustom_progressbar);
progressBar.setTitle("Circular Progress Bar");
Try this piece of code to create circular progress bar(pie chart). pass it integer value to draw how many percent of filling area. :)
private void circularImageBar(ImageView iv2, int i) {
Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(b);
Paint paint = new Paint();
paint.setColor(Color.parseColor("#c4c4c4"));
paint.setStrokeWidth(10);
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(150, 150, 140, paint);
paint.setColor(Color.parseColor("#FFDB4C"));
paint.setStrokeWidth(10);
paint.setStyle(Paint.Style.FILL);
final RectF oval = new RectF();
paint.setStyle(Paint.Style.STROKE);
oval.set(10,10,290,290);
canvas.drawArc(oval, 270, ((i*360)/100), false, paint);
paint.setStrokeWidth(0);
paint.setTextAlign(Align.CENTER);
paint.setColor(Color.parseColor("#8E8E93"));
paint.setTextSize(140);
canvas.drawText(""+i, 150, 150+(paint.getTextSize()/3), paint);
iv2.setImageBitmap(b);
}
I have solved this cool custom progress bar by creating the custom view. I have overriden the onDraw() method to draw the circles, filled arc and text on the canvas.
following is the custom progress bar
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import com.investorfinder.utils.UiUtils;
public class CustomProgressBar extends View {
private int max = 100;
private int progress;
private Path path = new Path();
int color = 0xff44C8E5;
private Paint paint;
private Paint mPaintProgress;
private RectF mRectF;
private Paint textPaint;
private String text = "0%";
private final Rect textBounds = new Rect();
private int centerY;
private int centerX;
private int swipeAndgle = 0;
public CustomProgressBar(Context context) {
super(context);
initUI();
}
public CustomProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
initUI();
}
public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initUI();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
initUI();
}
private void initUI() {
paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeWidth(UiUtils.dpToPx(getContext(), 1));
paint.setStyle(Paint.Style.STROKE);
paint.setColor(color);
mPaintProgress = new Paint();
mPaintProgress.setAntiAlias(true);
mPaintProgress.setStyle(Paint.Style.STROKE);
mPaintProgress.setStrokeWidth(UiUtils.dpToPx(getContext(), 9));
mPaintProgress.setColor(color);
textPaint = new Paint();
textPaint.setAntiAlias(true);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setColor(color);
textPaint.setStrokeWidth(2);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int viewWidth = MeasureSpec.getSize(widthMeasureSpec);
int viewHeight = MeasureSpec.getSize(heightMeasureSpec);
int radius = (Math.min(viewWidth, viewHeight) - UiUtils.dpToPx(getContext(), 2)) / 2;
path.reset();
centerX = viewWidth / 2;
centerY = viewHeight / 2;
path.addCircle(centerX, centerY, radius, Path.Direction.CW);
int smallCirclRadius = radius - UiUtils.dpToPx(getContext(), 7);
path.addCircle(centerX, centerY, smallCirclRadius, Path.Direction.CW);
smallCirclRadius += UiUtils.dpToPx(getContext(), 4);
mRectF = new RectF(centerX - smallCirclRadius, centerY - smallCirclRadius, centerX + smallCirclRadius, centerY + smallCirclRadius);
textPaint.setTextSize(radius * 0.5f);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(path, paint);
canvas.drawArc(mRectF, 270, swipeAndgle, false, mPaintProgress);
drawTextCentred(canvas);
}
public void drawTextCentred(Canvas canvas) {
textPaint.getTextBounds(text, 0, text.length(), textBounds);
canvas.drawText(text, centerX - textBounds.exactCenterX(), centerY - textBounds.exactCenterY(), textPaint);
}
public void setMax(int max) {
this.max = max;
}
public void setProgress(int progress) {
this.progress = progress;
int percentage = progress * 100 / max;
swipeAndgle = percentage * 360 / 100;
text = percentage + "%";
invalidate();
}
public void setColor(int color) {
this.color = color;
}
}
In layout XML
<com.your.package.name.CustomProgressBar
android:id="#+id/progress_bar"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentRight="true"
android:layout_below="#+id/txt_title"
android:layout_marginRight="15dp" />
in activity
CustomProgressBar progressBar = (CustomProgressBar)findViewById(R.id.progress_bar);
progressBar.setMax(9);
progressBar.setProgress(5);
I'd make a new view class and derive from the existing ProgressBar. Then override the onDraw function. You're going to need to make direct draw calls to the canvas for this, since its so custom- a combination of drawText, drawArc, and drawOval should do it- an oval for the outer ring and empty portions, and an arc for the colored in parts. You may end up needing to override onMeasure and onLayout as well. Then in your xml, reference this view by class name like this when you want to use it.
I did a simple class which u can use to make custom ProgressBar dialog.
Actually it has 2 default layouts:
- First dialog with no panel with progress bar and animated text centered over it
- Second normal dialog with panel, progress bar, title and msg
It is just a class, so not a customizable library which u can import in your project, so you need to copy it and change it how you want.
It is a DialogFragment class, but you can use it inside an activity as a normal fragment just like you do with classic fragment by using FragmentManager.
Code of the dialog class:
public class ProgressBarDialog extends DialogFragment {
private static final String TAG = ProgressBarDialog.class.getSimpleName();
private static final String KEY = TAG.concat(".key");
// Argument Keys
private static final String KEY_DIALOG_TYPE = KEY.concat(".dialogType");
private static final String KEY_TITLE = KEY.concat(".title");
private static final String KEY_PROGRESS_TEXT = KEY.concat(".progressText");
private static final String KEY_CUSTOM_LAYOUT_BUILDER = KEY.concat(".customLayoutBuilder");
// Class Names
private static final String CLASS_GRADIENT_STATE = "GradientState";
// Field Names
private static final String FIELD_THICKNESS = "mThickness";
private static final String FIELD_INNER_RADIUS = "mInnerRadius";
/** Dialog Types **/
private static final int TYPE_PROGRESS_BAR_ONLY_NO_ANIM = 0x0;
private static final int TYPE_PROGRESS_BAR_ONLY_ROTATE_ANIM = 0x1;
private static final int TYPE_PROGRESS_BAR_ONLY_FADE_ANIM = 0x2;
private static final int TYPE_PROGRESS_BAR_AND_MSG = 0xF;
/** Animations Values **/
private static final long CENTER_TEXT_VIEWS_ANIMATION_DURATION = 250L;
private static final long CENTER_TEXT_VIEWS_START_OFFSET_MULTIPLIER = 250L;
private MaterialProgressBar mProgressBar;
private LinearLayout mllTextContainer;
private TextView mtvTitle;
private TextView mtvProgressText;
private List<TextView> mCenterTextViews;
private int mDialogType;
private String mTitle;
private String mProgressText;
private CustomLayoutBuilder mCustomLayoutBuilder;
/** Public Static Factory Methods **/
public static ProgressBarDialog initLayoutProgressBarOnlyNoAnim(String text, CustomLayoutBuilder builder){
return initLayoutProgressBarOnly(TYPE_PROGRESS_BAR_ONLY_NO_ANIM, text, builder);
}
public static ProgressBarDialog initLayoutProgressBarOnlyRotateAnim(String text, CustomLayoutBuilder builder){
return initLayoutProgressBarOnly(TYPE_PROGRESS_BAR_ONLY_ROTATE_ANIM, text, builder);
}
public static ProgressBarDialog initLayoutProgressBarOnlyFadeAnim(String text, CustomLayoutBuilder builder){
return initLayoutProgressBarOnly(TYPE_PROGRESS_BAR_ONLY_FADE_ANIM, text, builder);
}
public static ProgressBarDialog initLayoutProgressBarAndMsg(String title, String text, CustomLayoutBuilder builder){
ProgressBarDialog mInstance = new ProgressBarDialog();
Bundle args = new Bundle();
args.putInt(KEY_DIALOG_TYPE, TYPE_PROGRESS_BAR_AND_MSG);
args.putString(KEY_TITLE, title);
args.putString(KEY_PROGRESS_TEXT, text);
args.putParcelable(KEY_CUSTOM_LAYOUT_BUILDER, builder);
mInstance.setArguments(args);
return mInstance;
}
/** Private Static Factory Methods **/
private static ProgressBarDialog initLayoutProgressBarOnly(int animation, String text, CustomLayoutBuilder builder){
ProgressBarDialog mInstance = new ProgressBarDialog();
Bundle args = new Bundle();
args.putInt(KEY_DIALOG_TYPE, animation);
args.putString(KEY_PROGRESS_TEXT, text);
args.putParcelable(KEY_CUSTOM_LAYOUT_BUILDER, builder);
mInstance.setArguments(args);
return mInstance;
}
/** Override Lifecycle Methods **/
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initData();
}
#Override #Nullable
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View view = inflater.inflate(R.layout.dialog_progress_bar, container, false);
initViews(view);
if(getContext() != null && mCustomLayoutBuilder != null) {
mProgressBar.setIndeterminateDrawable(getResources().getDrawable(mCustomLayoutBuilder.getLayoutResID()));
initShapes();
}
return view;
}
private void initShapes(){
if(mProgressBar.getIndeterminateDrawable() instanceof LayerDrawable) {
LayerDrawable layerDrawable = (LayerDrawable) mProgressBar.getIndeterminateDrawable();
for (int i = 0; i < layerDrawable.getNumberOfLayers(); i++) {
if(layerDrawable.getDrawable(i) instanceof RotateDrawable) {
RotateDrawable rotateDrawable = (RotateDrawable) layerDrawable.getDrawable(i);
int[] fromToDeg = mCustomLayoutBuilder.getDegreesMatrixRow(i);
if(fromToDeg.length > 0){
rotateDrawable.setFromDegrees(fromToDeg[CustomLayoutBuilder.INDEX_FROM_DEGREES]);
rotateDrawable.setToDegrees(fromToDeg[CustomLayoutBuilder.INDEX_TO_DEGREES]);
}
if(rotateDrawable.getDrawable() instanceof GradientDrawable){
GradientDrawable gradientDrawable = (GradientDrawable) rotateDrawable.getDrawable();
int innerRadius = getResources().getDimensionPixelSize(mCustomLayoutBuilder.getInnerRadius(i));
if(mDialogType == TYPE_PROGRESS_BAR_AND_MSG){
innerRadius /= 3;
}
int thickness = getResources().getDimensionPixelSize(mCustomLayoutBuilder.getThickness(i));
int[] colors = mCustomLayoutBuilder.getColorsMatrixRow(i);
if(colors.length > 0x0){
gradientDrawable.setColors(DataUtils.resourcesIDsToColors(this.getContext(), colors));
}
if(innerRadius != -0x1){
DataUtils.setSubClassFieldIntValue(gradientDrawable.getConstantState(), gradientDrawable.getClass(), CLASS_GRADIENT_STATE, FIELD_INNER_RADIUS, innerRadius);
}
if(thickness != -0x1){
DataUtils.setSubClassFieldIntValue(gradientDrawable.getConstantState(), gradientDrawable.getClass(), CLASS_GRADIENT_STATE, FIELD_THICKNESS, thickness);
}
}
}
}
}
}
#Override
public void onStart() {
super.onStart();
setWindowSize();
startAnimation();
}
/** Public Methods **/
public void changeTextViews(String progressText){
mProgressText = progressText;
initTextViews();
startAnimation();
}
public String getProgressText(){
return mProgressText;
}
/** Private Methods **//** Init Methods **/
private void initData(){
if(getArguments() != null) {
if (getArguments().containsKey(KEY_DIALOG_TYPE)) {
mDialogType = getArguments().getInt(KEY_DIALOG_TYPE);
}
if(getArguments().containsKey(KEY_TITLE)){
mTitle = getArguments().getString(KEY_TITLE);
}
if (getArguments().containsKey(KEY_PROGRESS_TEXT)) {
mProgressText = getArguments().getString(KEY_PROGRESS_TEXT);
}
if (getArguments().containsKey(KEY_CUSTOM_LAYOUT_BUILDER)){
mCustomLayoutBuilder = getArguments().getParcelable(KEY_CUSTOM_LAYOUT_BUILDER);
}
}
mCenterTextViews = new ArrayList<>();
}
private void initViews(View layout){
if(layout != null){
switch(mDialogType){
case TYPE_PROGRESS_BAR_ONLY_NO_ANIM:
case TYPE_PROGRESS_BAR_ONLY_ROTATE_ANIM:
case TYPE_PROGRESS_BAR_ONLY_FADE_ANIM:
if(getDialog() != null && getDialog().getWindow() != null) {
getDialog().getWindow().setBackgroundDrawableResource(android.R.color.transparent);
}
LinearLayout mLayoutProgressBarOnly = layout.findViewById(R.id.layout_progress_bar_only);
mLayoutProgressBarOnly.setVisibility(LinearLayout.VISIBLE);
mProgressBar = layout.findViewById(R.id.dpb_progress_bar);
if(mCustomLayoutBuilder.getProgressBarWidthDimen() != -0x1){
ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) mProgressBar.getLayoutParams();
lp.width = getResources().getDimensionPixelSize(mCustomLayoutBuilder.getProgressBarWidthDimen());
lp.height = getResources().getDimensionPixelSize(mCustomLayoutBuilder.getProgressBarHeightDimen());
mProgressBar.setLayoutParams(lp);
}
mllTextContainer = layout.findViewById(R.id.dpb_text_container);
initTextViews();
break;
case TYPE_PROGRESS_BAR_AND_MSG:
LinearLayout mLayoutProgressBarAndMsg = layout.findViewById(R.id.layout_progress_bar_and_msg);
mLayoutProgressBarAndMsg.setVisibility(LinearLayout.VISIBLE);
mProgressBar = layout.findViewById(R.id.dpb_progress_bar_and_msg);
mtvTitle = layout.findViewById(R.id.pbd_title);
mtvProgressText = layout.findViewById(R.id.dpb_progress_msg);
initProgressMsg();
break;
}
}
}
private void initTextViews(){
if(!TextUtils.isEmpty(mProgressText)){
clearTextContainer();
for(char digit : mProgressText.toCharArray()){
TextView tv = new TextView(getContext(), null, 0x0, R.style.PBDCenterTextStyleWhite);
if(mCustomLayoutBuilder.getProgressMsgColor() != CustomLayoutBuilder.DEFAULT_COLOR && getContext() != null){
tv.setTextColor(ActivityCompat.getColor(getContext(), mCustomLayoutBuilder.getProgressMsgColor()));
}
if(mCustomLayoutBuilder.getProgressMsgDimen() != CustomLayoutBuilder.DEFAULT_DIMEN){
tv.setTextSize(getResources().getDimension(mCustomLayoutBuilder.getProgressMsgDimen()));
}
tv.setText(String.valueOf(digit));
mCenterTextViews.add(tv);
mllTextContainer.addView(tv);
}
}
}
private void initProgressMsg(){
mtvTitle.setText(mTitle);
mtvProgressText.setText(mProgressText);
if(mCustomLayoutBuilder.getProgressMsgColor() != CustomLayoutBuilder.DEFAULT_COLOR){
mtvProgressText.setTextColor(mCustomLayoutBuilder.getProgressMsgColor());
}
if(mCustomLayoutBuilder.getProgressMsgDimen() != CustomLayoutBuilder.DEFAULT_DIMEN){
mtvProgressText.setTextSize(getResources().getDimension(mCustomLayoutBuilder.getProgressMsgDimen()));
}
}
private void clearTextContainer(){
if(mllTextContainer.getChildCount() >= 0x0){
for(int i=0; i < mllTextContainer.getChildCount(); i++){
View v = mllTextContainer.getChildAt(i);
if(v instanceof TextView){
TextView tv = (TextView) v;
if(tv.getAnimation() != null){
tv.clearAnimation();
}
}
}
}
mllTextContainer.removeAllViews();
}
private void setWindowSize(){
Dialog dialog = getDialog();
if(dialog != null && dialog.getWindow() != null){
int width = 0x0, height = 0x0;
switch(mDialogType){
case TYPE_PROGRESS_BAR_ONLY_NO_ANIM:
case TYPE_PROGRESS_BAR_ONLY_ROTATE_ANIM:
case TYPE_PROGRESS_BAR_ONLY_FADE_ANIM:
width = ViewGroup.LayoutParams.WRAP_CONTENT; //getResources().getDimensionPixelSize(R.dimen.pbd_window_width);
height = ViewGroup.LayoutParams.WRAP_CONTENT; //getResources().getDimensionPixelSize(R.dimen.pbd_window_height);
break;
case TYPE_PROGRESS_BAR_AND_MSG:
width = ViewGroup.LayoutParams.MATCH_PARENT;
height = ViewGroup.LayoutParams.WRAP_CONTENT; //getResources().getDimensionPixelSize(R.dimen.pbd_textual_window_height);
break;
}
dialog.getWindow().setLayout(width, height);
}
}
/** Animation Methods **/
private void startAnimation(){
switch(mDialogType){
case TYPE_PROGRESS_BAR_ONLY_ROTATE_ANIM:
startRotateAnimations();
break;
case TYPE_PROGRESS_BAR_ONLY_FADE_ANIM:
startFadeInAnimations();
break;
}
}
private void startRotateAnimations(){
for(TextView tv : mCenterTextViews){
if(tv != null && tv.getText() != null && !TextUtils.isEmpty(tv.getText().toString().trim())) {
int i = mCenterTextViews.indexOf(tv);
RotateAnimation anim = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
anim.setDuration(CENTER_TEXT_VIEWS_ANIMATION_DURATION);
anim.setFillAfter(true);
anim.setStartOffset(CENTER_TEXT_VIEWS_START_OFFSET_MULTIPLIER * i);
if (i == (mCenterTextViews.size() - 0x1)) {
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
startRotateAnimations();
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
tv.startAnimation(anim);
}
}
}
private void startFadeInAnimations(){
for(TextView tv : mCenterTextViews){
if(tv != null && tv.getText() != null && !TextUtils.isEmpty(tv.getText().toString().trim())) {
int i = mCenterTextViews.indexOf(tv);
AlphaAnimation anim = new AlphaAnimation(0x1, 0x0);
anim.setDuration(CENTER_TEXT_VIEWS_ANIMATION_DURATION);
anim.setFillAfter(true);
anim.setStartOffset(CENTER_TEXT_VIEWS_START_OFFSET_MULTIPLIER * i);
if (i == (mCenterTextViews.size() - 0x1)) {
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
startFadeOutAnimations();
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
tv.startAnimation(anim);
}
}
}
private void startFadeOutAnimations(){
for(TextView tv : mCenterTextViews){
int i = mCenterTextViews.indexOf(tv);
AlphaAnimation anim = new AlphaAnimation(0x0, 0x1);
anim.setDuration(CENTER_TEXT_VIEWS_ANIMATION_DURATION);
anim.setFillAfter(true);
anim.setStartOffset(CENTER_TEXT_VIEWS_START_OFFSET_MULTIPLIER * i);
if(i == (mCenterTextViews.size() - 0x1)){
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
startFadeInAnimations();
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
tv.startAnimation(anim);
}
}
/** Progress Bar Custom Layout Builder Class **/
public static class CustomLayoutBuilder implements Parcelable {
/** Shapes **/
private static final int RING = GradientDrawable.RING;
/** Colors **/
private static final int[][] COLORS_MATRIX_RYGB = new int[][]{
new int[]{ R.color.transparent, R.color.transparent, R.color.material_red_A700 },
new int[]{ R.color.transparent, R.color.transparent, R.color.material_amber_A700 },
new int[]{ R.color.transparent, R.color.transparent, R.color.material_light_green_A700 },
new int[]{ R.color.transparent, R.color.transparent, R.color.material_blue_A700 }
};
private static final int DEFAULT_COLOR = -0x1;
/** Dimens **/
private static final int DEFAULT_DIMEN = -0x1;
private static final int[] DEFAULT_PROGRESS_BAR_DIMEN = new int[]{};
/** Indexes **/
private static final int INDEX_PROGRESS_BAR_WIDTH = 0x0;
private static final int INDEX_PROGRESS_BAR_HEIGHT = 0x1;
private static final int INDEX_FROM_DEGREES = 0x0;
private static final int INDEX_TO_DEGREES = 0x1;
/** Arrays Sizes **/
private static final int SIZE_PROGRESS_BAR_DIMENS_ARRAY = 0x2;
/** Matrix Columns Number **/
private static final int NUM_COLUMNS_DEGREES_MATRIX = 0x2; /* Degrees Matrix Index -> degrees[3] = { fromDegrees, toDegrees } */
private static final int NUM_COLUMNS_COLORS_MATRIX = 0x3; /* GradientDrawable Colors Matrix Index -> colors[3] = { startColor, centerColor, endColor } */
/** Drawables Layout Resource IDs **/
private static final int LAYOUT_RES_PROGRESS_BAR_RINGS = R.drawable.progress_bar_rings;
/** Layout Data: Four Rings Overlaid **/
private static final int RINGS_OVERLAID_LAYERS = 0x4;
private static final int[][] RINGS_OVERLAID_DEGREES = new int[][]{ new int[]{ 300, 660 }, new int[]{ 210, 570 }, new int[]{ 120, 480 }, new int[]{ 30, 390 } };
private static final int[] RINGS_OVERLAID_SHAPES = new int[]{ RING, RING, RING, RING };
private static final int[] RINGS_OVERLAID_INNER_RADIUS = new int[]{ R.dimen.pbd_inner_radius_60dp, R.dimen.pbd_inner_radius_60dp, R.dimen.pbd_inner_radius_60dp, R.dimen.pbd_inner_radius_60dp};
private static final int[] RINGS_OVERLAID_THICKNESS = new int[]{ R.dimen.pbd_thickness_40dp, R.dimen.pbd_thickness_30dp, R.dimen.pbd_thickness_20dp, R.dimen.pbd_thickness_10dp };
/** Layout Data: Four Rings Spaced **/
private static final int RINGS_SPACED_LAYERS = 0x4;
private static final int[][] RINGS_SPACED_DEGREES = new int[][]{ new int[]{ 180, 540 }, new int[]{ 0, 360 }, new int[]{ 90, 450 }, new int[]{ 270, 630 } };
private static final int[] RINGS_SPACED_SHAPES = new int[]{ RING, RING, RING, RING };
private static final int[] RINGS_SPACED_INNER_RADIUS = new int[]{ R.dimen.pbd_inner_radius_30dp, R.dimen.pbd_inner_radius_60dp, R.dimen.pbd_inner_radius_90dp, R.dimen.pbd_inner_radius_120dp };
private static final int[] RINGS_SPACED_THICKNESS = new int[]{ R.dimen.pbd_thickness_10dp, R.dimen.pbd_thickness_15dp, R.dimen.pbd_thickness_20dp, R.dimen.pbd_thickness_25dp };
private int mLayoutResID;
private int[] mProgressBarDimens;
private int mNumLayers;
private int[][] mRotateDegrees;
private int[] mShapes;
private int[] mInnerRadius;
private int[] mThickness;
private int[][] mColors;
private int mProgressMsgColor;
private int mProgressMsgDimen;
public static Parcelable.Creator CREATOR = new CreatorCustomLayoutBuilder();
/** Constructors **/
private CustomLayoutBuilder(int layoutResID, int[] progressBarDimens, int numLayers, int[][] degreesMatrix, int[] shapes, int[] innerRadius, int[] thickness,
int[][] colorsMatrix, int msgColor, int progressMsgDimen){
mLayoutResID = layoutResID;
mProgressBarDimens = progressBarDimens;
mNumLayers = numLayers;
mRotateDegrees = degreesMatrix;
mShapes = shapes;
mInnerRadius = innerRadius;
mThickness = thickness;
mColors = colorsMatrix;
mProgressMsgColor = msgColor;
mProgressMsgDimen = progressMsgDimen;
}
private CustomLayoutBuilder(Parcel in){
mLayoutResID = in.readInt();
mProgressBarDimens = new int[SIZE_PROGRESS_BAR_DIMENS_ARRAY];
in.readIntArray(mProgressBarDimens);
mNumLayers = in.readInt();
int[] tempArray = new int[NUM_COLUMNS_DEGREES_MATRIX * mNumLayers];
in.readIntArray(tempArray);
mRotateDegrees = DataUtils.arrayToMatrix(tempArray, NUM_COLUMNS_DEGREES_MATRIX);
mShapes = new int[mNumLayers];
in.readIntArray(mShapes);
mInnerRadius = new int[mNumLayers];
in.readIntArray(mInnerRadius);
mThickness = new int[mNumLayers];
in.readIntArray(mThickness);
tempArray = new int[NUM_COLUMNS_COLORS_MATRIX * mNumLayers];
in.readIntArray(tempArray);
mColors = DataUtils.arrayToMatrix(tempArray, NUM_COLUMNS_COLORS_MATRIX);
mProgressMsgColor = in.readInt();
mProgressMsgDimen = in.readInt();
}
/** Public Static Factory Methods **/
public static CustomLayoutBuilder initLayoutRingsOverlaid(){
return new CustomLayoutBuilder(LAYOUT_RES_PROGRESS_BAR_RINGS, DEFAULT_PROGRESS_BAR_DIMEN, RINGS_OVERLAID_LAYERS, RINGS_OVERLAID_DEGREES, RINGS_OVERLAID_SHAPES,
RINGS_OVERLAID_INNER_RADIUS, RINGS_OVERLAID_THICKNESS, COLORS_MATRIX_RYGB, R.color.material_white, DEFAULT_DIMEN);
}
public static CustomLayoutBuilder initLayoutRingsOverlaid(int[] resProgBarDimens, int resProgMsgColor, int resProgMsgDimen){
return new CustomLayoutBuilder(LAYOUT_RES_PROGRESS_BAR_RINGS, resProgBarDimens, RINGS_OVERLAID_LAYERS, RINGS_OVERLAID_DEGREES, RINGS_OVERLAID_SHAPES,
RINGS_OVERLAID_INNER_RADIUS, RINGS_OVERLAID_THICKNESS, COLORS_MATRIX_RYGB, resProgMsgColor, resProgMsgDimen);
}
public static CustomLayoutBuilder initLayoutRingsSpaced(){
return new CustomLayoutBuilder(LAYOUT_RES_PROGRESS_BAR_RINGS, DEFAULT_PROGRESS_BAR_DIMEN, RINGS_SPACED_LAYERS, RINGS_SPACED_DEGREES, RINGS_SPACED_SHAPES,
RINGS_SPACED_INNER_RADIUS, RINGS_SPACED_THICKNESS, COLORS_MATRIX_RYGB, DEFAULT_COLOR, DEFAULT_DIMEN);
}
/** Override Parcelable Methods **/
#Override
public int describeContents() {
return 0;
}
#Override
public void writeToParcel(Parcel out, int flags) {
out.writeInt(mLayoutResID);
out.writeIntArray(mProgressBarDimens);
out.writeInt(mNumLayers);
out.writeIntArray(DataUtils.matrixToArray(mRotateDegrees));
out.writeIntArray(mShapes);
out.writeIntArray(mInnerRadius);
out.writeIntArray(mThickness);
out.writeIntArray(DataUtils.matrixToArray(mColors));
out.writeInt(mProgressMsgColor);
out.writeInt(mProgressMsgDimen);
}
/** Getter & Setter Methods **/
private int getLayoutResID() {
return mLayoutResID;
}
private void setLayoutResID(int layoutResID) {
this.mLayoutResID = layoutResID;
}
private int[] getProgressBarDimens() {
return mProgressBarDimens;
}
private void setProgressBarDimens(int[] progressBarDimens) {
this.mProgressBarDimens = progressBarDimens;
}
private int getProgressBarWidthDimen(){ // Used to check if 'mProgressBarDimens' array is set.
if(mProgressBarDimens != null && mProgressBarDimens.length == SIZE_PROGRESS_BAR_DIMENS_ARRAY){
return mProgressBarDimens[INDEX_PROGRESS_BAR_WIDTH];
} else {
return -0x1;
}
}
private int getProgressBarHeightDimen(){
return mProgressBarDimens[INDEX_PROGRESS_BAR_HEIGHT];
}
private int getNumLayers() {
return mNumLayers;
}
private void setNumLayers(int numLayers) {
this.mNumLayers = numLayers;
}
private int[][] getRotateDegrees() {
return mRotateDegrees;
}
private void setRotateDegrees(int[][] rotateDegrees) {
this.mRotateDegrees = rotateDegrees;
}
private int[] getShapes() {
return mShapes;
}
private void setShapes(int[] shapes) {
this.mShapes = shapes;
}
private int[] getInnerRadius() {
return mInnerRadius;
}
private void setInnerRadius(int[] innerRadius) {
this.mInnerRadius = innerRadius;
}
private int[] getThickness() {
return mThickness;
}
private void setThickness(int[] thickness) {
this.mThickness = thickness;
}
private int[][] getColorsMatrix() {
return mColors;
}
private void setColorsMatrix(int[][] colorsMatrix) {
this.mColors = colorsMatrix;
}
private int getProgressMsgColor() {
return mProgressMsgColor;
}
private void setProgressMsgColor(int progressMsgColor) {
this.mProgressMsgColor = progressMsgColor;
}
private int getProgressMsgDimen() {
return mProgressMsgDimen;
}
private void setProgressMsgDimen(int progressMsgDimen) {
this.mProgressMsgDimen = progressMsgDimen;
}
/** Public Methods **/
private int[] getDegreesMatrixRow(int numRow){
if(mRotateDegrees != null && mRotateDegrees.length > numRow) {
return mRotateDegrees[numRow];
} else {
return new int[]{};
}
}
private int getShape(int position){
if(mShapes != null && mShapes.length > position){
return mShapes[position];
} else {
return -0x1;
}
}
private int getInnerRadius(int position){
if(mInnerRadius != null && mInnerRadius.length > position){
return mInnerRadius[position];
} else {
return -0x1;
}
}
private int getThickness(int position){
if(mThickness != null && mThickness.length > position){
return mThickness[position];
} else {
return -0x1;
}
}
private int[] getColorsMatrixRow(int numRow) {
if(mColors != null && mColors.length > numRow){
return mColors[numRow];
} else {
return new int[]{};
}
}
/** Private Static Class Parcelable Creator **/
private static class CreatorCustomLayoutBuilder implements Parcelable.Creator<CustomLayoutBuilder> {
#Override
public CustomLayoutBuilder createFromParcel(Parcel in) {
return new CustomLayoutBuilder(in);
}
#Override
public CustomLayoutBuilder[] newArray(int size) {
return new CustomLayoutBuilder[size];
}
}
}
}
The class has a progress bar with no dialog and custom text over it.
The text can have 2 animations:
Fade In -> Fade Out animation: digits will fade out like a sequentially from left to right. At end of text will restart from left.
Rotate Animation: same sequential behavior but the digits rotate on themself one by one instead of fading out.
Other way is a Progress Bar with a dialog (Title + Message)
Rest of code
Code of utils methods:
public static int[] resourcesIDsToColors(Context context, int[] resIDs){
int[] colors = new int[resIDs.length];
for(int i=0; i < resIDs.length; i++){
colors[i] = ActivityCompat.getColor(context, resIDs[i]);
}
return colors;
}
public static void setSubClassFieldIntValue(Object objField, Class<?> superClass, String subName, String fieldName, int fieldValue){
Class<?> subClass = getSubClass(superClass, subName);
if(subClass != null) {
Field field = getClassField(subClass, fieldName);
if (field != null) {
setFieldValue(objField, field, fieldValue);
}
}
}
public static Class<?> getSubClass(Class<?> superClass, String subName){
Class<?>[] classes = superClass.getDeclaredClasses();
if(classes != null && classes.length > 0){
for(Class<?> clss : classes){
if(clss.getSimpleName().equals(subName)){
return clss;
}
}
}
return null;
}
public static Field getClassField(Class<?> clss, String fieldName){
try {
Field field = clss.getDeclaredField(fieldName);
field.setAccessible(true);
return field;
} catch (NoSuchFieldException nsfE) {
Log.e(TAG, nsfE.getMessage());
} catch (SecurityException sE){
Log.e(TAG, sE.getMessage());
} catch (Exception e){
Log.e(TAG, e.getMessage());
}
return null;
}
public static int[][] arrayToMatrix(int[] array, int numColumns){
int numRows = array.length / numColumns;
int[][] matrix = new int[numRows][numColumns];
int nElemens = array.length;
for(int i=0; i < nElemens; i++){
matrix[i / numColumns][i % numColumns] = array[i];
}
return matrix;
}
public static int[] matrixToArray(int[][] matrix){
/** [+] Square matrix of order n -> A matrix with n rows and n columns, same number of rows and columns.
* [+] Matrix rows & columns number annotations:
* matrix[rows][columns] matrix (rows x columns) matrix rows, columns rows by columns matrix
* **/
int numRows = matrix.length;
int[] arr = new int[]{};
for(int i=0; i < numRows; i++){
int numColumns = matrix[i].length;
int[] row = new int[numColumns];
for(int j=0; j < numColumns; j++){
row[j] = matrix[i][j];
}
arr = ArrayUtils.addAll(arr, row);
}
return arr;
}
Code of default layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/transparent">
<LinearLayout
android:id="#+id/layout_progress_bar_only"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
<android.support.constraint.ConstraintLayout
android:id="#+id/dpb_constraint_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:id="#+id/dpb_progress_bar"
android:layout_width="#dimen/pbd_progressbar_width_2"
android:layout_height="#dimen/pbd_progressbar_height_2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"/>
<LinearLayout
android:id="#+id/dpb_text_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"/>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout_progress_bar_and_msg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"
style="#style/PBDTextualMainLayoutStyle">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="#dimen/pbd_textual_card_elevation">
<TextView
android:id="#+id/pbd_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/PBDTextualTitle"/>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/pbd_textual_main_layout_height"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="#dimen/pbd_textual_progressbar_width"
android:layout_height="#dimen/pbd_textual_progressbar_height">
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:id="#+id/dpb_progress_bar_and_msg"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/PBDProgressBarStyle"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="#dimen/pbd_textual_msg_container_height">
<TextView
android:id="#+id/dpb_progress_msg"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/PBDTextualProgressMsgStyle"/>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Progress Bar Rings:
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="300"
android:toDegrees="660">
<shape
android:shape="ring"
android:useLevel="false">
<gradient
android:type="sweep"/>
</shape>
</rotate>
</item>
<item>
<rotate
android:fromDegrees="210"
android:toDegrees="570">
<shape
android:shape="ring"
android:useLevel="false">
<gradient
android:type="sweep"/>
</shape>
</rotate>
</item>
<item>
<rotate
android:fromDegrees="120"
android:toDegrees="480">
<shape
android:shape="ring"
android:useLevel="false">
<gradient
android:type="sweep"
android:startColor="#00000000"
android:centerColor="#00000000"/>
</shape>
</rotate>
</item>
<item>
<rotate
android:fromDegrees="30"
android:toDegrees="390">
<shape
android:shape="ring"
android:useLevel="false">
<solid android:color="#000000"/>
<gradient
android:type="sweep"/>
</shape>
</rotate>
</item>
</layer-list>
Dimens Resources:
<!-- ProgressBarDialog Dimens (Normal & Textual Versions) -->
<dimen name="pbd_window_width">250dp</dimen>
<dimen name="pbd_window_height">250dp</dimen>
<dimen name="pbd_progressbar_width_1">250dp</dimen>
<dimen name="pbd_progressbar_height_1">250dp</dimen>
<dimen name="pbd_progressbar_width_2">400dp</dimen>
<dimen name="pbd_progressbar_height_2">400dp</dimen>
<dimen name="pbd_textual_window_height">170dp</dimen>
<dimen name="pbd_textual_main_layout_height">150dp</dimen>
<dimen name="pbd_textual_progressbar_width">150dp</dimen>
<dimen name="pbd_textual_progressbar_height">150dp</dimen>
<dimen name="pbd_textual_msg_container_height">150dp</dimen>
<dimen name="pbd_textual_main_layout_margin_horizontal">50dp</dimen>
<dimen name="pbd_textual_main_layout_padding_horizontal">5dp</dimen>
<dimen name="pbd_textual_main_layout_padding_bottom">15dp</dimen>
<dimen name="pbd_textual_title_padding">4dp</dimen>
<dimen name="pbd_textual_msg_container_margin">3dp</dimen>
<dimen name="pbd_textual_msg_container_padding">3dp</dimen>
<dimen name="pbd_textual_card_elevation">15dp</dimen>
<dimen name="pbd_textual_progressmsg_padding_start">10dp</dimen>
<dimen name="pbd_inner_radius_30dp">30dp</dimen>
<dimen name="pbd_inner_radius_60dp">60dp</dimen>
<dimen name="pbd_inner_radius_90dp">90dp</dimen>
<dimen name="pbd_inner_radius_120dp">120dp</dimen>
<dimen name="pbd_thickness_40dp">40dp</dimen>
<dimen name="pbd_thickness_30dp">30dp</dimen>
<dimen name="pbd_thickness_25dp">25dp</dimen>
<dimen name="pbd_thickness_20dp">20dp</dimen>
<dimen name="pbd_thickness_15dp">15dp</dimen>
<dimen name="pbd_thickness_10dp">10dp</dimen>
Styles Resources:
<!-- PROGRESS BAR DIALOG STYLES -->
<style name="PBDCenterTextStyleWhite">
<item name="android:textAlignment">center</item>
<item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
<item name="android:textStyle">bold|italic</item>
<item name="android:textColor">#color/material_white</item>
<item name="android:layout_gravity">center</item>
<item name="android:gravity">center</item>
</style>
<style name="PBDTextualTitle">
<item name="android:textAlignment">viewStart</item>
<item name="android:textAppearance">?android:attr/textAppearanceLargeInverse</item>
<item name="android:textStyle">bold|italic</item>
<item name="android:textColor">#color/colorAccent</item>
<item name="android:padding">#dimen/pbd_textual_title_padding</item>
<item name="android:layout_gravity">start</item>
<item name="android:gravity">center_vertical|start</item>
<item name="android:background">#color/colorPrimaryDark</item>
</style>
<style name="PBDTextualProgressMsgStyle">
<item name="android:textAlignment">viewStart</item>
<item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
<item name="android:textColor">#color/material_black</item>
<item name="android:textStyle">normal|italic</item>
<item name="android:paddingStart">#dimen/pbd_textual_progressmsg_padding_start</item>
<item name="android:layout_gravity">start</item>
<item name="android:gravity">center_vertical|start</item>
<item name="android:background">#color/material_yellow_A100</item>
</style>
<style name="PBDTextualMainLayoutStyle">
<item name="android:paddingLeft">#dimen/pbd_textual_main_layout_padding_horizontal</item>
<item name="android:paddingRight">#dimen/pbd_textual_main_layout_padding_horizontal</item>
<item name="android:paddingBottom">#dimen/pbd_textual_main_layout_padding_bottom</item>
<item name="android:background">#color/colorPrimaryDark</item>
</style>
<style name="PBDProgressBarStyle">
<item name="android:layout_gravity">center</item>
<item name="android:gravity">center</item>
</style>

How background changes at login in Instagram app?

I have made my app to change background color every few milliseconds. But it is not appealing to user. If you have seen Instagram's login screen, it changes color at a very soft rate and with blurry effect.
I just wanted that type of background for my app.
What should I have to do for that
Using following code might be good start for you:
public class BackgroundPainter {
private static final int MIN = 800;
private static final int MAX = 1500;
private final Random random;
public BackgroundPainter() {
random = new Random();
}
public void animate(#NonNull final View target, #ColorInt final int color1,
#ColorInt final int color2) {
final ValueAnimator valueAnimator = ValueAnimator.ofObject(new ArgbEvaluator(), color1, color2);
valueAnimator.setDuration(randInt(MIN, MAX));
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override public void onAnimationUpdate(ValueAnimator animation) {
target.setBackgroundColor((int) animation.getAnimatedValue());
}
});
valueAnimator.addListener(new AnimatorListenerAdapter() {
#Override public void onAnimationEnd(Animator animation) {
//reverse animation
animate(target, color2, color1);
}
});
valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
valueAnimator.start();
}
private int randInt(int min, int max) {
return random.nextInt((max - min) + 1) + min;
}
}
With usage:
final View targetView = findViewById(R.id.root_view);
BackgroundPainter backgroundPainter = new BackgroundPainter();
int color1 = ContextCompat.getColor(this, R.color.colorAccent);
int color2 = ContextCompat.getColor(this, R.color.colorPrimary);
backgroundPainter.animate(targetView, color1, color2);
Update
For changing background which consists of more than one color, generally speaking of drawables instead of ValueAnimator you can try using below solution.
I have tested this code on Device with API 19 and 23.
Define colors in your colors.xml:
<color name="color1">#9C27B0</color>
<color name="color2">#FF4081</color>
<color name="color3">#7B1FA2</color>
<color name="color4">#F8BBD0</color>
<color name="color5">#FF5252</color>
<color name="color6">#607D8B</color>
<color name="color7">#FF5722</color>
<color name="color8">#FFA000</color>
Define gradients in drawable:
gradient_1.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="45"
android:endColor="#color/color2"
android:startColor="#color/color1"
android:type="linear"/>
</shape>
gradient_2.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="-45"
android:endColor="#color/color5"
android:startColor="#color/color3"
android:type="linear"/>
</shape>
gradient_3.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="45"
android:endColor="#color/color8"
android:startColor="#color/color7"
android:type="linear"/>
</shape>
Create class GradientBackgroundPainter in your project:
public class GradientBackgroundPainter {
private static final int MIN = 4000;
private static final int MAX = 5000;
private final Random random;
private final Handler handler;
private final View target;
private final int[] drawables;
private final Context context;
public GradientBackgroundPainter(#NonNull View target, int[] drawables) {
this.target = target;
this.drawables = drawables;
random = new Random();
handler = new Handler();
context = target.getContext().getApplicationContext();
}
private void animate(final int firstDrawable, int secondDrawable, final int duration) {
if (secondDrawable >= drawables.length) {
secondDrawable = 0;
}
final Drawable first = ContextCompat.getDrawable(context, drawables[firstDrawable]);
final Drawable second = ContextCompat.getDrawable(context, drawables[secondDrawable]);
final TransitionDrawable transitionDrawable =
new TransitionDrawable(new Drawable[] { first, second });
target.setBackgroundDrawable(transitionDrawable);
transitionDrawable.setCrossFadeEnabled(false);
transitionDrawable.startTransition(duration);
final int localSecondDrawable = secondDrawable;
handler.postDelayed(new Runnable() {
#Override public void run() {
animate(localSecondDrawable, localSecondDrawable + 1, randInt(MIN, MAX));
}
}, duration);
}
public void start() {
final int duration = randInt(MIN, MAX);
animate(0, 1, duration);
}
public void stop() {
handler.removeCallbacksAndMessages(null);
}
private int randInt(int min, int max) {
return random.nextInt((max - min) + 1) + min;
}
}
And usage:
public class MainActivity extends AppCompatActivity {
private GradientBackgroundPainter gradientBackgroundPainter;
#Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View backgroundImage = findViewById(R.id.root_view);
final int[] drawables = new int[3];
drawables[0] = R.drawable.gradient_1;
drawables[1] = R.drawable.gradient_2;
drawables[2] = R.drawable.gradient_3;
gradientBackgroundPainter = new GradientBackgroundPainter(backgroundImage, drawables);
gradientBackgroundPainter.start();
}
#Override protected void onDestroy() {
super.onDestroy();
gradientBackgroundPainter.stop();
}
}
You can check the Property Animation Api
int colorFrom = getResources().getColor(R.color.red);
int colorTo = getResources().getColor(R.color.blue);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
colorAnimation.setDuration(250); // milliseconds
colorAnimation.addUpdateListener(new AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animator) {
textView.setBackgroundColor((int) animator.getAnimatedValue());
}
});
colorAnimation.start();
Use a Relative layout,
give an id to your Relative layout,downcast it ,and put into condition:
if(something){
rlayout.setBackground(getResource().getDrawable().R.drawable.img);
}
or
use switch
Create a TransitionDrawable to change between two drawables that you use for the background.
<?xml version="1.0" encoding="UTF-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<!-- use whatever drawables you want, gradients, shapes etc-->
<item android:drawable="#drawable/start" />
<item android:drawable="#drawable/end" />
Transition Drawables in Android
TransitionDrawable trans = (TransitionDrawable) myLayout.getBackground();
trans.startTransition(2000);
I think this little code might help you.

implement a spinning activity indicator similar to iOS in Android

I am trying to implement the spinning activity similar to the the one I have placed below in Android. I believe I should use the ProgressDialog. My issue arises from how to actually manipulate the ProgressDialog to appear like the activity indicator.
Any thoughts are welcome. A link to an example would even be better.
Thanks.
REEDIT:
myProgress.java
public class myProgress extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ProgressDialog d = (ProgressDialog)findViewById(R.id.progres);
main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/progres"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
<ProgressBar
android:id="#+id/progressBar"
android:indeterminate="true"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
</RelativeLayout>
I wrote my own custom LoadingIndicatorView.
It consists of two files:
LoadingIndicatorBarView
LoadingIndicatorView
Pros:
Programmatically created, no PNG antics meaning scalable and crisp :D
Customizable bar colors and corner radius (if you understand my code)
Cons:
Not as performant as the iOS version (I'm just a beginner Android developer coming from iOS background, what do you expect?) :P
Disclaimer:
Don't blame me if your project blows up, I'm putting this as free public domain code.
You'll notice my coding style and structure resemble my iOS programming codes a lot. I do everything programmatically, no XML if I can get away with it.
How to use this Loading Indicator
After you've copied and pasted all three class source codes into their Java file, you want to use the LoadingIndicatorView class, you shouldn't need to touch the other class, unless you want to customise the colour or rounded corner of each bar.
Create an instance of LoadingIndicatorView like this in your Activity:
import com.companyName.myApplication.views.LoadingIndicatorView;
public class MyActivity extends AppCompatActivity
{
public mainLayout RelativeLayout;
...
public LoadingIndicatorView loadingIndicator;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
initViews();
initLayouts();
addViews();
}
public void initViews()
{
mainLayout = new RelativeLayout(this);
mainLayout.setBackgroundColor(Color.BLACK);
...
// ---------------------------------------------------
// 40 here is the radius of the circle
// try and use multiples of 2, e.g. 40, 60, 80 etc
// ---------------------------------------------------
loadingIndicator = new LoadingIndicatorView(this, 40);
// hide until ready to start animating
loadingIndicator.setAlpha(0.0f);
}
public void initLayouts()
{
...
// Need API level 17 for this, set in your AndroidManifeset.xml
mainLayout.setId(View.generateViewId());
loadingIndicator.setId(View.generateViewId());
RelativeLayout.LayoutParams loadingIndicatorLayoutParams = new RelativeLayout.LayoutParams(
(int)(loadingIndicator.radius * 2.0f),
(int)(loadingIndicator.radius * 2.0f)
);
loadingIndicatorLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
loadingIndicator.setLayoutParams(loadingIndicatorLayoutParams);
}
public void addViews()
{
...
mainLayout.addView(loadingIndicator);
setContentView(mainLayout);
}
}
Once you're ready to show it, e.g. in a button click listener, then you call:
loadingIndicator.startAnimating();
When you want to stop and hide the indicator, call:
loadingIndicator.stopAnimating();
You end up with something like this:
LoadingIndicatorView.java
package com.companyName.myApplication.views;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.PorterDuff;
import android.os.CountDownTimer;
import android.os.Handler;
import android.os.Looper;
import android.util.Log;
import android.view.View;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;
import java.lang.reflect.Array;
import java.util.ArrayList;
import java.util.Timer;
import java.util.TimerTask;
/**
* Created by Zhang on 11/02/16.
*/
public class LoadingIndicatorView extends RelativeLayout
{
private Context context;
private int numberOfBars;
public ArrayList<LoadingIndicatorBarView> arrBars;
public float radius;
private boolean isAnimating;
private int currentFrame;
private final Handler handler = new Handler();
private Runnable playFrameRunnable;
public LoadingIndicatorView(Context context, float radius)
{
super(context);
this.context = context;
this.radius = radius;
this.numberOfBars = 12;
initViews();
initLayouts();
addViews();
spreadBars();
}
public void initViews()
{
arrBars = new ArrayList<LoadingIndicatorBarView>();
for(int i = 0; i < numberOfBars; i++)
{
LoadingIndicatorBarView bar = new LoadingIndicatorBarView(context, radius / 10.0f);
arrBars.add(bar);
}
}
public void initLayouts()
{
for(int i = 0; i < numberOfBars; i++)
{
LoadingIndicatorBarView bar = arrBars.get(i);
bar.setId(View.generateViewId());
RelativeLayout.LayoutParams barLayoutParams = new RelativeLayout.LayoutParams(
(int)(radius / 5.0f),
(int)(radius / 2.0f)
);
barLayoutParams.addRule(ALIGN_PARENT_TOP);
barLayoutParams.addRule(CENTER_HORIZONTAL);
bar.setLayoutParams(barLayoutParams);
}
}
public void addViews()
{
for(int i = 0; i < numberOfBars; i++)
{
LoadingIndicatorBarView bar = arrBars.get(i);
addView(bar);
}
}
public void spreadBars()
{
int degrees = 0;
for(int i = 0; i < arrBars.size(); i++)
{
LoadingIndicatorBarView bar = arrBars.get(i);
rotateBar(bar, degrees);
degrees += 30;
}
}
private void rotateBar(LoadingIndicatorBarView bar, float degrees)
{
RotateAnimation animation = new RotateAnimation(0, degrees, radius / 10.0f, radius);
animation.setDuration(0);
animation.setFillAfter(true);
bar.setAnimation(animation);
animation.start();
}
public void startAnimating()
{
setAlpha(1.0f);
isAnimating = true;
playFrameRunnable = new Runnable()
{
#Override
public void run()
{
playFrame();
}
};
// recursive function until isAnimating is false
playFrame();
}
public void stopAnimating()
{
isAnimating = false;
setAlpha(0.0f);
invalidate();
playFrameRunnable = null;
}
private void playFrame()
{
if(isAnimating)
{
resetAllBarAlpha();
updateFrame();
handler.postDelayed(playFrameRunnable, 0);
}
}
private void updateFrame()
{
if (isAnimating)
{
showFrame(currentFrame);
currentFrame += 1;
if (currentFrame > 11)
{
currentFrame = 0;
}
}
}
private void resetAllBarAlpha()
{
LoadingIndicatorBarView bar = null;
for (int i = 0; i < arrBars.size(); i++)
{
bar = arrBars.get(i);
bar.setAlpha(0.5f);
}
}
private void showFrame(int frameNumber)
{
int[] indexes = getFrameIndexesForFrameNumber(frameNumber);
gradientColorBarSets(indexes);
}
private int[] getFrameIndexesForFrameNumber(int frameNumber)
{
if(frameNumber == 0)
{
return indexesFromNumbers(0, 11, 10, 9);
}
else if(frameNumber == 1)
{
return indexesFromNumbers(1, 0, 11, 10);
}
else if(frameNumber == 2)
{
return indexesFromNumbers(2, 1, 0, 11);
}
else if(frameNumber == 3)
{
return indexesFromNumbers(3, 2, 1, 0);
}
else if(frameNumber == 4)
{
return indexesFromNumbers(4, 3, 2, 1);
}
else if(frameNumber == 5)
{
return indexesFromNumbers(5, 4, 3, 2);
}
else if(frameNumber == 6)
{
return indexesFromNumbers(6, 5, 4, 3);
}
else if(frameNumber == 7)
{
return indexesFromNumbers(7, 6, 5, 4);
}
else if(frameNumber == 8)
{
return indexesFromNumbers(8, 7, 6, 5);
}
else if(frameNumber == 9)
{
return indexesFromNumbers(9, 8, 7, 6);
}
else if(frameNumber == 10)
{
return indexesFromNumbers(10, 9, 8, 7);
}
else
{
return indexesFromNumbers(11, 10, 9, 8);
}
}
private int[] indexesFromNumbers(int i1, int i2, int i3, int i4)
{
int[] indexes = {i1, i2, i3, i4};
return indexes;
}
private void gradientColorBarSets(int[] indexes)
{
float alpha = 1.0f;
LoadingIndicatorBarView barView = null;
for(int i = 0; i < indexes.length; i++)
{
int barIndex = indexes[i];
barView = arrBars.get(barIndex);
barView.setAlpha(alpha);
alpha -= 0.125f;
}
invalidate();
}
}
LoadingIndicatorBarView.java
package com.companyName.myApplication.views;
import android.content.Context;
import android.graphics.Color;
import android.widget.RelativeLayout;
import com.companyName.myApplication.helper_classes.ToolBox;
/**
* Created by Zhang on 11/02/16.
*/
public class LoadingIndicatorBarView extends RelativeLayout
{
private Context context;
private float cornerRadius;
public LoadingIndicatorBarView(Context context, float cornerRadius)
{
super(context);
this.context = context;
this.cornerRadius = cornerRadius;
initViews();
}
public void initViews()
{
setBackground(ToolBox.roundedCornerRectWithColor(
Color.argb(255, 255, 255, 255), cornerRadius));
setAlpha(0.5f);
}
public void resetColor()
{
setBackground(ToolBox.roundedCornerRectWithColor(
Color.argb(255, 255, 255, 255), cornerRadius));
setAlpha(0.5f);
}
}
Toolbox.java
package com.companyName.myApplication.helper_classes;
import android.content.Context;
import android.content.res.Configuration;
import android.content.res.Resources;
import android.graphics.Paint;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RoundRectShape;
/**
* Created by Zhang on 3/02/16.
*/
public class ToolBox
{
private static ToolBox instance;
public Context context;
private ToolBox()
{
}
public synchronized static ToolBox getInstance()
{
if(instance == null)
{
instance = new ToolBox();
}
return instance;
}
public static ShapeDrawable roundedCornerRectOutlineWithColor(int color, float cornerRadius,
float strokeWidth)
{
float[] radii = new float[] {
cornerRadius, cornerRadius,
cornerRadius, cornerRadius,
cornerRadius, cornerRadius,
cornerRadius, cornerRadius
};
RoundRectShape roundedCornerShape = new RoundRectShape(radii, null, null);
ShapeDrawable shape = new ShapeDrawable();
shape.getPaint().setColor(color);
shape.setShape(roundedCornerShape);
shape.getPaint().setStrokeWidth(strokeWidth);
shape.getPaint().setStyle(Paint.Style.STROKE);
return shape;
}
public static ShapeDrawable roundedCornerRectWithColor(int color, float cornerRadius)
{
float[] radii = new float[] {
cornerRadius, cornerRadius,
cornerRadius, cornerRadius,
cornerRadius, cornerRadius,
cornerRadius, cornerRadius
};
RoundRectShape roundedCornerShape = new RoundRectShape(radii, null, null);
ShapeDrawable shape = new ShapeDrawable();
shape.getPaint().setColor(color);
shape.setShape(roundedCornerShape);
return shape;
}
public static ShapeDrawable roundedCornerRectWithColor(int color, float topLeftRadius, float
topRightRadius, float bottomRightRadius, float bottomLeftRadius)
{
float[] radii = new float[] {
topLeftRadius, topLeftRadius,
topRightRadius, topRightRadius,
bottomRightRadius, bottomRightRadius,
bottomLeftRadius, bottomLeftRadius
};
RoundRectShape roundedCornerShape = new RoundRectShape(radii, null, null);
ShapeDrawable shape = new ShapeDrawable();
shape.getPaint().setColor(color);
shape.setShape(roundedCornerShape);
return shape;
}
public static int getScreenWidth()
{
return Resources.getSystem().getDisplayMetrics().widthPixels;
}
public static int getScreenHeight()
{
return Resources.getSystem().getDisplayMetrics().heightPixels;
}
public static int getScreenOrientation(Context context)
{
return context.getResources().getConfiguration().orientation;
}
public static boolean isLandscapeOrientation(Context context)
{
return getScreenOrientation(context) == Configuration.ORIENTATION_LANDSCAPE;
}
}
This Toolbox class is my convenience helper class to create rounded corner shapes etc in all my projects.
Hope that helps :D
this is how i achieve it
here is the code
#Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case DIALOG_LOADING:
final Dialog dialog = new Dialog(this, android.R.style.Theme_Translucent);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.loading);
dialog.setCancelable(true);
dialog.setOnCancelListener(new OnCancelListener() {
#Override
public void onCancel(DialogInterface dialog) {
//onBackPressed();
}
});
return dialog;
default:
return null;
}
};
here is the loading.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/progres"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
<ProgressBar
android:indeterminate="true"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
</RelativeLayout>
call the dialog with
showDialog(DIALOG_LOADING);
hide it using
dismissDialog(DIALOG_LOADING);
UPDATE
if you want and custom indicator you can do the following in the layout.xml.
replace the ProgressBar with an ImageView
set the background of the ImageView to a AnimationDrawable
you can start the animation in onPrepareDialog
You are looking for progressDialog i believe. This link can you set you start with it.
http://www.helloandroid.com/tutorials/using-threads-and-progressdialog
pd = ProgressDialog.show(this, "Working..", "Calculating Pi", true,
false);
private Handler handler = new Handler() {
#Override
public void handleMessage(Message msg) {
pd.dismiss();
tv.setText(pi_string);
}
};
Just look at this library. IOSDialog/Spinner library
It is very easy to use and solves your problem. With it, you can easily create and use spinner like in IOS.
The example of code:
final IOSDialog dialog1 = new IOSDialog.Builder(IOSDialogActivity.this)
.setOnCancelListener(new DialogInterface.OnCancelListener() {
#Override
public void onCancel(DialogInterface dialog) {
dialog0.show();
}
})
.setDimAmount(3)
.setSpinnerColorRes(R.color.colorGreen)
.setMessageColorRes(R.color.colorAccent)
.setTitle(R.string.standard_title)
.setTitleColorRes(R.color.colorPrimary)
.setMessageContent("My message")
.setCancelable(true)
.setMessageContentGravity(Gravity.END)
.build();
Result
final IOSDialog dialog0 = new IOSDialog.Builder(IOSDialogActivity.this)
.setTitle("Default IOS bar")
.setTitleColorRes(R.color.gray)
.build();
Result: stadard IOS Dialog

Categories

Resources