I'm trying to do something like this:
This is what my code does:
I've this code in my drawable file:
progress_bar_layout.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:innerRadius="70dp"
android:shape="ring"
android:thickness="18dp">
</shape>
</item>
<item android:id="#android:id/progress">
<shape
android:innerRadius="70dp"
android:shape="ring"
android:thickness="18dp">
<gradient
android:endColor="#ff0f315f"
android:startColor="#ff005563"
android:type="sweep" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadius="70dp"
android:shape="ring"
android:thickness="18dp">
<gradient
android:endColor="#ff1490e4"
android:startColor="#ff00c0dd"
android:type="sweep" />
</shape>
</item>
</layer-list>
layout:
<ProgressBar
android:id="#+id/bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="180dp"
android:layout_height="180dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:max="100"
android:progress="99"
android:progressDrawable="#drawable/progress_bar_layout"
android:secondaryProgress="30" />
The problem is that my background style doesn't show up. That's why i'm using progress to do background's job, but as you can see, it doesn't work pretty well bcs the maximum size is 99, and there's a space in the end. Am i missing some code?
Basically, i had to split progress_bar_layout.xml drawable file for each element, so, one file with the progress settings, and another for background settings.
And then, i added them to the respective elements.
android:background="#drawable/circle_shape"
android:progressDrawable="#drawable/circular_progress_bar" />
Using layer list, the project didn't find the background setting, so this approach solved my problem.
circle_shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="60dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#color/blue"></solid>
</shape>
circular_progress_bar.xml
<?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="60dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="true">
<solid android:color="#color/blue"></solid>
</shape>
</rotate>
Related
Progress bar xml is as:
<ProgressBar
android:id="#+id/progressBarCircular"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignTop="#id/squareView_3"
android:layout_toRightOf="#id/squareView_3"
android:layout_marginTop="-105dp"
android:layout_marginLeft="40dp"
android:indeterminate="false"
android:max="100"
android:progress="0"
android:background="#color/BlackText"
android:progressDrawable="#drawable/circular_progressbar" />
circular_progressbar.xml is as:
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/background">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8.0">
<solid android:color="#color/DarkGrey" />
</shape>
</item>
<item android:id="#+id/progress">
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thicknessRatio="12.0">
<solid android:color="#color/green" />
</shape>
</item>
</layer-list>
and for setting progress:
ProgressBar pb = (ProgressBar)view.FindViewById(Resource.Id.progressBarCircular);
pb.Progress = 75;
This is not giving me progress bar as shown below, How can I draw progress bar as below image:
Any help will be heartly appreciated. Thankyou, Happy Coding.
Try this solution, I think you will get your desired output
<?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:angle="0"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#eeeeee" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:angle="0"
android:shape="ring"
android:thickness="10dp"
android:useLevel="true">
<solid android:color="#81ca33" />
</shape>
</rotate>
</item>
</layer-list>
And for the rotation, I adjusted attributes in ProgressBar view as:-
<ProgressBar
android:id="#+id/progressBarView"
android:layout_width="200dp"
android:layout_height="200dp"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminateOnly="false"
android:rotation="-90"
android:max="100"
android:progressDrawable="#drawable/circular_progressbar" />
I've Drawable xml file which stands for my custom progress bar:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/background">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:useLevel="false"
android:thicknessRatio="6.4">
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#android:color/darker_gray" />
</shape>
</item>
<item android:id="#+id/progress">
<rotate
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="7.0">
<solid
android:id="#+id/progressColor"
android:color="#FBB817" />
</shape>
</rotate>
</item>
</layer-list>
Used here:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dip"
android:id="#+id/relativeLayout">
<ProgressBar
android:id="#+id/progressBar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="150dip"
android:layout_height="150dip"
android:layout_centerHorizontal="true"
android:indeterminate="false"
android:progressDrawable="#drawable/progressbar" />
<TextView
android:id="#+id/tvProgress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="progress" />
</RelativeLayout>
I need to change solid color with id progressColor at runtime based on some conditions. Tried everything here and nothing works for me. Any suggestions?
I tried to change it like that:
LayerDrawable layerDrawable = (LayerDrawable) getResources().getDrawable(R.drawable.progressbar);
layerDrawable.setDrawableByLayerId(R.id.progressColor, new ColorDrawable(Color.BLUE));
progressBar.setProgressDrawable(layerDrawable);
But it doesn't change anything.
I found solution here:
View v = findViewById(R.id.relativeLayout);
LayerDrawable layerDrawable = (LayerDrawable) v.getBackground();
final GradientDrawable shape = (GradientDrawable) layerDrawable.findDrawableByLayerId(R.id.progressColor);
shape.setColor(Color.BLACK);
But this just crash my app.
I found solution, it's not perfect though, but it do the trick.
First make another drawable with different progress color.
progressbar1.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/background">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="6.4"
android:useLevel="false">
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#android:color/darker_gray" />
</shape>
</item>
<item android:id="#+id/progress">
<rotate
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:id="#+id/shape"
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="7.0">
<solid
android:id="#+id/progressColor"
android:color="#111" />
</shape>
</rotate>
</item>
Then when you need it, before you draw your progress bar just change the drawable with following code:
Drawable drawable = getResources().getDrawable(R.drawable.progressbar1);
progressBar.setProgressDrawable(drawable);
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'd like to create a gradient with 3 rings overlaid on it and use this as a background for all screens in my android app, either using the android:background property in xml or the SetBackgroundResource method depending on how each activity is being created.
Example background layout :
I have the following xml in my drawable folder
<?xml version="1.0" encoding="utf-8" ?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#C0F57C9B"
android:endColor="#C0C70F3F"
android:angle="225" />
</shape>
</item>
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="90dp"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="#24f45995" />
</shape>
</item>
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="60dp"
android:thickness="10dp"
android:useLevel="false">
<solid
android:color="#24f45995" />
</shape>
</item>
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="40dp"
android:thickness="6dp"
android:useLevel="false">
<solid
android:color="#24f45995" />
</shape>
</item>
</layer-list>
The problem I have is how to position the rings.
Is a layer-list the right way to go or should I be using some other method?
Grateful for any advice.