🔥A beautiful, gradual and simple used progress view for android.
A beautiful and simple used progress view for Android. It provides two different styles to display the progress. You can achieve a gradual change by setting the start color and the end color.
Recently, this library is refactoring and improving underway. Here's the plan:
It's very easy to use this library, just need two or three steps.
Project —> build.gradle
:
allprojects {
repositories {
maven { url "https://maven.google.com" }
jcenter()
}
}
Moudle —> build.gradle
:
implementation 'com.moos:Material-ProgressView:1.0.6'
<com.moos.library.CircleProgressView
android:id="@+id/progressView_circle"
android:layout_width="240dp"
android:layout_height="240dp"
android:layout_marginTop="12dp"
app:start_progress="0"
app:end_progress="60"
app:start_color="@color/purple_end"
app:end_color="@color/purple_start"
app:circleBroken="true"
app:isTracked="true"
app:track_width="26dp"/>
<com.moos.library.HorizontalProgressView
android:id="@+id/progressView_horizontal"
android:layout_width="320dp"
android:layout_height="100dp"
android:layout_marginBottom="40dp"
android:layout_marginTop="36dp"
app:start_color="@color/red_start"
app:end_color="@color/red_end"
app:track_width="12dp"
app:end_progress="60"
app:progressTextColor="#696969"
app:corner_radius="12dp"
app:isTracked="true"
app:trackColor="#f4f4f4"/>
We can use these ProgressViews by following codes:
//CircleProgressView
CircleProgressView circleProgressView = (CircleProgressView) view.findViewById(R.id.progressView_circle);
circleProgressView.setStartProgress(0);
circleProgressView.setEndProgress(80);
circleProgressView.setStartColor(Color.parseColor("#FF8F5D"));
circleProgressView.setEndColor(Color.parseColor("#F54EA2"));
circleProgressView.setCircleBroken(true);
circleProgressView.setTrackWidth(20);
circleProgressView.setProgressDuration(2000);
circleProgressView.setTrackEnabled(true);
circleProgressView.setFillEnabled(false);
circleProgressView.startProgressAnimation();
//HorizontalProgressView
HorizontalProgressView circleProgressView = (HorizontalProgressView) view.findViewById(R.id.progressView_horizontal);
horizontalProgressView.setStartProgress(0);
horizontalProgressView.setEndProgress(80);
horizontalProgressView.setStartColor(Color.parseColor("#FF8F5D"));
horizontalProgressView.setEndColor(Color.parseColor("#F54EA2"));
horizontalProgressView.setTrackWidth(30);
horizontalProgressView.setProgressDuration(2000);
horizontalProgressView.setTrackEnabled(true);
horizontalProgressView.setProgressCornerRadius(20);
horizontalProgressView.setProgressTextPaddingBottom(12);
horizontalProgressView.startProgressAnimation();
Or if you want to let the progress value text moved with HorizontalProgressView
progress animation, you can use it like this in xml:
app:textMovedEnable="true"
Or you can use it in java:
horizontalProgressView.setProgressTextMoved(true);
What's more, If you want to animate the progress view's value in dynamic state, like download or upload files. You can use method setProgress
like this:
......
//downloading or uploading call back
@Override
public void onDownloading(float progress) {
// you don't need to use `startProgressAnimation` method
horizontalProgressView.setProgress(progress);
}
......
Common attributes:
Attribute | Description |
---|---|
start_progress |
the progress you wanted to start with |
end_progress |
the progress you wanted to finish |
start_color |
the start color of gradient ramp |
end_color |
the end color of gradient ramp |
isTracked |
display the progress track or not |
track_width |
the width of progress stroke border |
trackColor |
the color of progress background |
progressTextVisibility |
display or hide the progress value text |
progressTextColor |
the color of progress text color |
progressTextSize |
size of progress text |
progressDuration |
the duration of progress animating from start progress to end progress |
animateType |
type of progress animation moving |
Unique attributes for CircleProgressView:
Attribute | Description |
---|---|
isFilled |
fill the progress inner space or not |
circleBroken |
the circle has loophole or not(circle or arc) |
isGraduated |
Start the scale zone border mode or not |
scaleZone_width |
Each scale zone's width |
scaleZone_length |
Each scale zone's length |
scaleZone_corner_radius |
scale zone's rect corner radius |
scaleZone_padding |
the padding between two scale zones |
Unique attributes for HorizontalProgressView:
Attribute | Description |
---|---|
corner_radius |
the radius of progress four corners |
text_padding_bottom |
the distance offset between text and progress view |
Call back
/**
* you can use this callback to customize your own progress text UI, like pursuit movement.
*/
circleProgressView.setProgressViewUpdateListener(new CircleProgressView.CircleProgressUpdateListener() {
@Override
public void onCircleProgressStart(View view) {
}
@Override
public void onCircleProgressUpdate(View view,float progress) {
/**
* you can detail with progressViews' animate event and customize their animate order
*/
int progressInt = (int) progress;
textView.setText(String.valueOf(progress)+"%");
}
@Override
public void onCircleProgressFinished(View view) {
}
});
horizontalProgressView.setProgressViewUpdateListener(new HorizontalProgressView.HorizontalProgressUpdateListener() {
@Override
public void onHorizontalProgressStart(View view) {
}
@Override
public void onHorizontalProgressUpdate(View view,float progress) {
/**
* you can detail with progressViews' animate event and customize their animate order
*/
int progressInt = (int) progress;
textView.setText(String.valueOf(progress)+"%");
}
@Override
public void onHorizontalProgressFinished(View view) {
}
});
Methods
//common methods
void setAnimateType(@AnimateType int type);
void setStartProgress(float startProgress);
void setEndProgress(float endProgress);
void setStartColor(@ColorInt int startColor);
void setEndColor(@ColorInt int endColor);
void setTrackWidth(int width);
void setProgressTextSize(int size);
void setProgressTextColor(@ColorInt int textColor);
void setProgressDuration(int duration);
void setTrackEnabled(boolean trackAble);
void setTrackColor(@ColorInt int color);
void setProgressTextVisibility(boolean visibility);
void startProgressAnimation();
void stopProgressAnimation();
//special for CircleProgressView
void setCircleBroken(boolean isBroken);
void setFillEnabled(boolean fillEnabled);
void setGraduatedEnabled(boolean isGraduated);
void setScaleZoneWidth(float zoneWidth);
void setScaleZoneLength(float zoneLength);
void setScaleZonePadding(int zonePadding);
void setScaleZoneCornerRadius(int cornerRadius);
//special for HorizontalProgressView
void setProgressCornerRadius(int radius);
void setProgressTextPaddingBottom(int offset);
HorizontalProgressUpdateListener
and CircleProgressUpdateListener
, add two methods to get back the animation state.downloading
or uploading
.CircleProgressView
init failed, details in #3.setStartColor
before calling setTrackWidth
.If you have any question or ideas of this library, please let me know by giving an issue. Or you can contact me by the following E-mail:
Copyright (c) 2018 - 2020 Moosphon
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.