I have created circular progress bar and its working fine but the problem is that the left and right edge gets cut.
i cant figure out why is it happening or how to fix it.
Its in a relative layout
Relativelayout containing progressbar
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/Button_searchdriver_Cancel"
android:layout_below="#id/searchDriver_center"
android:padding="3dp"
>
<ProgressBar
android:id="#+id/Progressbar_searchdriver_timer"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:background="#drawable/progressbackground"
android:indeterminate="false"
android:max="60"
android:progressDrawable="#drawable/circularprogress" />
</RelativeLayout>
For background and progress i have the following code -
Progress drawable
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thicknessRatio="7.0">
<gradient
android:centerColor="#ffffff"
android:endColor="#ffffff"
android:startColor="#ffffff"
android:angle="0"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
progressbar background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="2.5"
android:shape="ring"
android:useLevel="false"
android:thicknessRatio="7.0">
<gradient
android:centerColor="#000000"
android:endColor="#000000"
android:startColor="#000000"
android:angle="0"
android:type="sweep"
android:useLevel="false" />
</shape>
Can any one tell me what am i doing wrong..??
set
android:innerRadiusRatio="3.0"
According to the docs
innerRadiusRatio is the radius for the inner part of the ring, expressed as a ratio of the
ring's width. For instance, if android:innerRadiusRatio="5", then the
inner radius equals the ring's width divided by 5. This value is
overridden by android:innerRadius. Default value is 9.
Related
I need to create spinner circulate progressbar that circulate starting from bottom (progress go from 0 to max) to top and when reaches to top starting to minimized(progress max to 0) and then stating again from bottom.
Here is my prgressbar
<ProgressBar
style="?android:attr/progressBarStyle"
android:layout_width="70dp"
android:layout_height="70dp"
android:id="#+id/progressBar2"
android:indeterminateDrawable="#drawable/progressbar_circle"
android:progressTintMode="src_atop"
android:layout_centerInParent="true"
android:indeterminateDuration="500"
android:layout_marginTop="189dp"
android:indeterminateOnly="true"
/>
Here is the drawable progressbar_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%" android:pivotY="50%" android:fromDegrees="90"
android:toDegrees="270">
<shape android:shape="ring"
android:thicknessRatio="13" android:useLevel="false">
<size android:width="76dip" android:height="76dip" />
<gradient android:type="sweep" android:useLevel="false"
android:centerColor="#000cbdfb"
android:endColor="#f168c1"
android:angle="0"
/>
</shape>
</rotate>
When in my progressbar I give drawable as indeterminateDrawable. It's only circulate from bottom to top and begin from bottom immediately(I can't reach to effect when in top it starts to minimized).
change your rotate drawable parameters like this
android:fromDegrees="90"
android:toDegrees="450"
I'm trying to add a round progress bar to my app which I want to start at the top of the circle and end at the top. However, anything I try with the angles etc doesn't change the appearance. I'm fairly new to Android so go easy on me. Here is my code:
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="300dp"
android:layout_height="300dp"
android:indeterminate="false"
android:layout_centerInParent="true"
android:progressDrawable="#drawable/circular_progress_bar"
android:background="#drawable/circle_shape"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"
android:progress="30" />
circle_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="2.5"
android:thickness="6dp"
android:useLevel="false">
<solid android:color="#CCC" />
</shape>
circular_progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<clip>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thickness="6dp">
<gradient
android:angle="0"
android:endColor="#38C0F4"
android:startColor="#38C0F4"
android:centerColor="#56ccb7"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
</clip>
Here is a screenshot of what is looks like at 30% progress:
You need to edit your circular_progress_bar.xml
Get rid of the clip tags
Add [android:useLevel="true"] to the shape properties. (This is new for Android 5(21))
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thickness="6dp"
android:useLevel="true">
<gradient
android:angle="0"
android:endColor="#38C0F4"
android:startColor="#38C0F4"
android:centerColor="#56ccb7"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
I am trying to implement the below UI. I am using Eclipse with ADT plugin.
The below is the implementation of the circle [White + Dark Gray] (circle_shape.xml):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="ring" android:innerRadius="65dp" android:thickness="10dp"
android:useLevel="false">
<solid android:color="#android:color/white" />
</shape>
</item>
<item android:id="#android:id/progress">
<shape android:shape="ring" android:innerRadius="57dp" android:thickness="8dp" android:useLevel="false">
<solid android:color="#FF393939" />
</shape>
</item>
</layer-list>
and the progress bar [Green] (circle_progress_bar.xml)as:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="270" android:toDegrees="270">
<shape android:innerRadius="65dp" android:shape="ring" android:thickness="10dp">
<gradient android:angle="0" android:endColor="#FF00FF00" android:startColor="#FF00FF00" android:type="sweep" android:useLevel="false" />
</shape>
</rotate>
In the layout xml file as :
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#+id/repeat"
android:layout_centerHorizontal="true"
android:layout_marginBottom="36dp"
android:background="#drawable/circle_shape"
android:indeterminate="false"
android:max="100"
android:progress="65"
android:progressDrawable="#drawable/circular_progress_bar" />
Problem 1:
The above code gives me exact shape as I want, but only with API 19 and API 20. As soon as I switch the preview mode in Eclipse to API 21, the progressDrawable seems to fill up the full circle leaving up only single circle filled up with green colour. I am not able to figure how to do the same on Android L.
Problem 2:
This is related to the switch buttons. In API 21, I can easily set
<android:textOn="" android:textOff="">
and the buttons look fine. However, if I view the same in API19, the Thumb drawable becomes distorted (squeezed) until I set some text using textOn and textOff attributes.
Can someone please help me with the same?
Please feel free to move / close the question if it doesn't seems constructive enough. But Kindly be kind to redirect me to some other helpful resource.
Edit 1:
The below is the screen shot for Problem 2
The XML for switch goes as following:
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/repeat"
android:layout_alignBottom="#+id/repeat"
android:layout_alignParentLeft="true"
android:background="#drawable/toogle_selector"
android:checked="true"
android:thumb="#drawable/circle_1"
android:track="#drawable/transparent"
android:textOn=""
android:textOff=""/>
Found the solution to your problem
in "Circular_progress_bar"
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270" >
<shape
android:innerRadius="65dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="true" >
<gradient
android:angle="0"
android:endColor="#FF00FF00"
android:startColor="#FF00FF00"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
Because
android:useLevel="true" is by default false is API Level 21
Before
After
I got a circular ProgressBar.
I want the circular not to rotate, but to fill in. Like say maxvalue is 100... let's say setprogress(10) then 10 % of the progress bar is colored... and so on
how can this be done? How can I handle it? it keeps rotating over and over....
progress_bar.xml
<ProgressBar
android:id="#+id/progress"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="20dp"
android:indeterminate="false"
android:indeterminateDrawable="#drawable/progress_bar"
android:max="100" />
progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%"
android:pivotY="50%">
<shape android:shape="ring" android:innerRadiusRatio="4"
android:thicknessRatio="48" android:useLevel="false">
<size android:width="18dip" android:height="18dip" />
<gradient android:type="sweep" android:useLevel="false"
android:startColor="#52c1b1" android:centerColor="#52c1b1"
android:endColor="#ffffff" android:centerY="0.50" />
</shape>
</animated-rotate>
There is not direct way to achieve what you want. The only way, AFAIK, is to have a custom ProgressBar and override onDraw. Through the canvas you get as parameter you can draw an arc, for instance representing the percentage of your progress.
When I add horizontal ProgressBar it behaves as expected -- I set the progress value and it shows it.
However when I add ProgressBar (circular) it spins. And that's it. In such form it is more "please wait" indicator, that any progress bar, because progress value is not shown.
So my question is (assuming Progress in name means progress) -- how to stop spinning and shows progress value? For example if I set max to 100, and value to 50 I would expect to see half-circle arc.
In other words how to make circular ProgressBar to behave like horizontal ProgressBar, with only exception of the shape?
I know that this is an old post but I ran into the same issue and I make it work.
It is actually easier than you think, you have to set a custom progress in an xml file inside your drawable folder and handle the attributes "fromDegrees" and "toDegrees" from the < rotate > tag:
This is the code for custom_progress.xml (you can customize yours as you like but you must not modify "fromDegrees" and "toDegrees")
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape
android:innerRadiusRatio="2.3"
android:shape="ring"
android:useLevel="false"
android:type="sweep"
android:thicknessRatio="15.0">
<solid android:color="#0099ff"/>
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="-90"
android:toDegrees="-90">
<shape
android:innerRadiusRatio="2.3"
android:shape="ring"
android:angle="0"
android:type="sweep"
android:thicknessRatio="15.0">
<solid android:color="#e0e0e0"/>
</shape>
</rotate>
</item>
</layer-list>
And for your progress bar you have to set this attributes:
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:indeterminate="false"
android:max="100"
android:progress="20"
android:progressDrawable="#drawable/custom_progress" />
What is happening here is that the progress will start in degree -90 which for me is the top side of the progress bar view and towards the right and it will continue towards the same degree, this will make the view progress to start and end in the same degree.
NOTE:
If you set 0 for both "fromDegrees" and "toDegrees" the progress will start from the right side of the circle.
Hope it helps people with the same requirement.
Since Api 21 you can do something like that: Assuming that your ProgressBar defind this way:
<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
style="?android:attr/progressBarStyleLarge"
android:id="#+id/progress_bar"
android:layout_width="#dimen/item_width"
android:layout_height="#dimen/item_height"
android:clickable="false"
android:indeterminate="true"
android:indeterminateDrawable="#drawable/progress"/>
and this is progress.xml:
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false" >
<size
android:height="76dip"
android:width="76dip" />
<gradient
android:angle="0"
android:endColor="#color/colorGrayText"
android:startColor="#android:color/transparent"
android:type="sweep"
android:useLevel="false" />
</shape>
Now you can do this on your ProgressBar:
ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);
if (progressBar != null) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
RotateDrawable rotateDrawable = (RotateDrawable) progressBar.getIndeterminateDrawable();
rotateDrawable.setToDegrees(0);
}
}
Like toadzky commented, there's no baked-in method. You might try this ProgressWheel. If nothing else, it should give you idea of how to implement it.
For determinate progress bar means the progress bar which doesn't keep on rotating and user can set a fixed percentage over that.
<ProgressBar
android:id="#+id/pb_sharpness"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="#dimen/dp_50"
android:layout_height="#dimen/dp_50"
android:layout_marginTop="#dimen/dp_16"
android:indeterminate="false"
android:max="100"
android:progressDrawable="#drawable/custom_progress_bar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
For adding drawable to above progress bar
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape
android:innerRadiusRatio="2.3"
android:shape="ring"
android:useLevel="false"
android:type="sweep"
android:thicknessRatio="15.0">
<solid android:color="#color/white_color"/>
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="180"
android:toDegrees="0"
>
<shape
android:innerRadiusRatio="2.3"
android:shape="ring"
android:angle="0"
android:type="sweep"
android:thicknessRatio="15.0">
<gradient
android:startColor="#color/color_5646F3"
android:endColor="#color/color_ED88FE" />
</shape>
</rotate>
</item>
You can access the visibility property of the progress bar and set it to invisible when you need it to be invisible like this
ProgressBar progressBar = view.findViewById<ProgressBar>(R.id.progressbar)
progressBar.visibility = ProgressBar.INVISIBLE