I have a custom circular progress bar, this progress bar is from other website. I have tried many methods to adjust it's size, but the circular bar doesn't change. I just want to enlarge the circular bar.
My .xml that contains the bar:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.hangsproduction.algebragames.MainActivity$PlaceholderFragment">
<ProgressBar
android:id="#+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:progress="50"
android:progressDrawable="#drawable/circular"
android:secondaryProgress="100"
android:layout_marginBottom="110dp"
android:maxHeight="600dip"
android:minHeight="600dip"
android:minWidth="600dip"
android:maxWidth="10dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:background="#drawable/whitecircle"
android:id="#+id/imageView3"
android:layout_alignTop="#+id/tv"
android:layout_centerHorizontal="true"
android:layout_marginTop="76dp" />
<TextView
android:id="#+id/tv"
android:layout_width="250dp"
android:layout_height="250dp"
android:gravity="center"
android:text="25%"
android:textColor="#ffffff"
android:textSize="25sp"
android:layout_alignBottom="#+id/circularProgressbar"
android:layout_centerHorizontal="true"
android:layout_marginBottom="54dp" />
</RelativeLayout>
My custom circular bar:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadiusRatio="6"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<gradient
android:centerColor="#dddfe1"
android:endColor="#dddfe1"
android:startColor="#dddfe1"
android:type="sweep" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270">
<shape
android:innerRadiusRatio="6"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
<gradient
android:centerColor="#00FF00"
android:endColor="#00FF00"
android:startColor="#00FF00"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>
Have you try :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadiusRatio="6"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<stroke
android:width="mydp" /> // add this line
<gradient
android:centerColor="#dddfe1"
android:endColor="#dddfe1"
android:startColor="#dddfe1"
android:type="sweep" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270">
<shape
android:innerRadiusRatio="6"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<stroke
android:width="mydp" /> // add this line
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
<gradient
android:centerColor="#00FF00"
android:endColor="#00FF00"
android:startColor="#00FF00"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>
Hope this helps
You can try this Circle Progress library.
Or you could use the code in this answer:
https://stackoverflow.com/a/27269329/6049176
You can now use the Android Material Design component CircularProgressIndicator, which removes the need to implement a custom drawable. It also resizes easily!
XML:
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="#+id/progress_bar"
android:layout_width="match_parent" <--- Can also be static size (e.g. 48dp)
android:layout_height="match_parent" <--- Can also be static size (e.g. 48dp)
android:layout_gravity="center"
android:indeterminateTint="#color/colorPrimary"
android:progressTint="#color/colorPrimary" />
Related
I have added a progress bar like following in my layout, i also added a color to it, and it works fine.
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="50dp"
android:layout_height="50dp"
android:indeterminate="true"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="#color/color"
android:layout_gravity="center_vertical|center_horizontal"
android:visibility="visible"
/>
But i need to add a gradient color on it. I added a gradient in colors folder like following.
<gradient android:type="linear"
android:angle="0"
android:startColor="#dc0336"
android:endColor="#ff7f00"
xmlns:android="http://schemas.android.com/apk/res/android" />
and then i assigned this color to the Progressbar
android:indeterminateTint="#color/gradientColor"
But this does not work, I need to know a way to add a gradient to the progressBar
This is a late answer but I think this will help other people. Just Try Following the code.
drawable/loading_progressbar
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="1440">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<size
android:width="60dp"
android:height="60dp" />
<gradient
android:centerColor="#b43787"
android:centerY="0.50"
android:endColor="#7036a3"
android:startColor="#f0376f"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
activity_main.xml
<ProgressBar
android:id="#+id/loading_progress"
android:layout_width="130dp"
android:layout_height="130dp"
android:indeterminateDrawable="#drawable/loading_progressbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
Result
You should use android:progressDrawable instead of android:indeterminateTint.
Your code should look like below:
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="50dp"
android:layout_height="50dp"
android:indeterminate="true"
android:indeterminateTintMode="src_atop"
android:progressDrawable="#drawable/gradientDrawable"
android:layout_gravity="center_vertical|center_horizontal"
android:visibility="visible"
/>
Use the following as your gradient Drawable. Name the file as gradientDrawable.xml and place it under your drawable directory.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="3.5"
android:shape="ring"
android:thickness="2.5dp"
android:useLevel="false">
<gradient
android:angle="0"
android:endColor="#ff7f00"
android:startColor="#dc0336"
android:type="linear" />
</shape>
I have tested your gradient and it looked like this:
You can set gradient background to progress-bar as below:
<ProgressBar
android:layout_width="75dp"
android:layout_height="75dp"
**android:progressDrawable="#drawable/circular"** />
**circular.xml**
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<solid android:color="#FA969C" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="true">
<gradient
android:centerColor="#CC3037"
android:endColor="#ED4A52"
android:startColor="#A11210"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>
I am new in Kotlin and trying to make a progress bar that is a HALF CIRCLE in my app and shows how much someone has spend so far.
There are many solutions for round ones and normal ones, but I can't find one for a half circle.
IN MY activity_main.xml FILE:
...
<ProgressBar
android:id="#+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="250dp"
android:layout_height="250dp"
android:max="100"
android:progress="50"
android:layout_centerInParent="true"
android:progressDrawable="#drawable/circular"
android:secondaryProgress="100"/>
<TextView
android:id="#+id/tv"
android:layout_width="250dp"
android:layout_height="250dp"
android:gravity="center"
android:text="25$"
android:layout_centerInParent="true"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
AND IN MY circular.xml FILE:
...
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadiusRatio="6"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<gradient
android:centerColor="#DADADA"
android:endColor="#999999"
android:startColor="#FFFFFF"
android:type="sweep" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270">
<shape
android:innerRadiusRatio="6"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">
<gradient
android:centerColor="#03A9F4"
android:endColor="#0063B1"
android:startColor="#68CCFF"
android:type="sweep" />
</shape>
</rotate>
</item>
WHAT I WANT is a horizontally cut circle as a progress bar.
I don't know if I am even on the right track and also I don't know how to set the degrees and things in the circular.xml file to get what I want, I tried but every time I changed something the output made no sense.
I download this code from internet (in the end I set the link)
for customize the color circular progress bar
But the circular progress bar is not rotating
Am I missing something?
the progress bar is "static"
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:useLevel="true"
android:thicknessRatio="14.0">
<gradient
android:startColor="#color/colorBlanco"
android:endColor="#color/colorBlanco"
android:centerColor="#color/colorBlanco"
android:type="sweep" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:useLevel="true"
android:thicknessRatio="14.0">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%" />
<gradient
android:startColor="#color/colorAzul"
android:endColor="#color/colorAzul"
android:centerColor="#color/colorAzul"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>
this code has my launcher
<ProgressBar
android:layout_gravity="center"
android:id="#+id/circularProgressbar"
android:layout_width="100dp"
android:layout_height="100dp"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminate="false"
android:progress="80"
android:max="100"
android:secondaryProgress="100"
android:layout_below="#+id/img_logo_app_launcher"
android:progressDrawable="#drawable/custom_progressbar" />
Horizontal and Circular Progress Bar in Android
Set progressBar.setIndeterminateDrawable() to any drawable file it
will replace your moving loader to the defined moving image.
This is my style_circular_fill.xml file
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="true">
<gradient
android:centerColor="#A9E2F3"
android:endColor="#A9E2F3"
android:startColor="#A9E2F3"
android:type="sweep" />
</shape>
</rotate>
</item>
<item android:id="#android:id/background">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="false">
<gradient
android:centerColor="#FFF"
android:endColor="#FFF"
android:startColor="#FFF"
android:type="sweep" />
</shape>
</item>
And here is the progressbar in my activity.xml file
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="300dp"
android:layout_height="300dp"
android:indeterminate="false"
android:progressDrawable="#drawable/style_circular_fill"
android:max="100"
android:progress="10" />
And here is the result:
I don't know why the white circle background is not showing up...
Are there anything that I did wrong in either of the .xml file?
You can use this library for your material design progress bar.
eg:
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
app:mpb_progressStyle="horizontal"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />
I have split your selector into 2 different drawables and set one for background and the other one for progressDrawable and it seems to work fine.
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="300dp"
android:layout_height="300dp"
android:indeterminate="false"
android:progressDrawable="#drawable/style_circular_fill"
android:background="#drawable/background_circular"
android:max="100"
android:progress="20" />
in style_circular_fill :
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="true">
<gradient
android:centerColor="#A9E2F3"
android:endColor="#A9E2F3"
android:startColor="#A9E2F3"
android:type="sweep" />
</shape>
</rotate>
in background_circular :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="false">
<gradient
android:centerColor="#FFF"
android:endColor="#FFF"
android:startColor="#FFF"
android:type="sweep" />
</shape>
i am using progressbar in toolbar ,by default its loading Accent color,i want to customize the color of progressbar .i am using support library 22.0.0
?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_aweseome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary">
<ProgressBar
android:id="#+id/progress_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:indeterminate="true"
/>
so i tried to change progressbar color using setColor filter
progressBar = (ProgressBar) findViewById(R.id.progress_spinner);
progressBar.getIndeterminateDrawable().setColorFilter(Color.parseColor("#FF104D"),//Pink color
android.graphics.PorterDuff.Mode.MULTIPLY);
progressBar.setVisibility(View.VISIBLE);
but i tried to set as pink ,but out put is some other different color.
progressBar.getIndeterminateDrawable().setColorFilter(Color.WHITE,android.graphics.PorterDuff.Mode.MULTIPLY)),
when i set as white color,its not even showing up..
Use :
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminateDrawable="#drawable/progress"
/>
use create progress.xml in your drawable folder :
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="720" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false" >
<size
android:height="86dip"
android:width="86dip" />
<gradient
android:angle="0"
android:endColor="#color/blue"
android:startColor="#android:color/transparent"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
try this ,
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="20"
android:useLevel="false" >
<size
android:height="48dp"
android:width="48dp" />
<gradient
android:centerColor="#color/tranparent"
android:centerY="0.50"
android:endColor="#color/red"
android:startColor="#color/tranparent"
android:type="sweep"
android:useLevel="false" />
</shape>
Try with PorterDuff.Mode.SRC_IN. It works for me, at least with SeekBar.