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
Related
What I did..
<item>
<rotate
android:fromDegrees="40"
android:toDegrees="20"
android:pivotX="25%"
android:pivotY="50%" >
<shape
android:shape="line"
android:top="1dip" >
<stroke
android:width="1dip"
android:color="#FF0000" />
</shape>
</rotate>
</item>
It rotates but doesn't bend. It needs to be bent to form an arc like shape
Any Idea?
You can draw a ring shape, rotate it based on your preference and use it with ProgressBar as progressDrawable with a set progress.
drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="150"
android:toDegrees="150">
<shape
android:shape="ring"
android:thickness="10dp"
android:innerRadius="20dp"
android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
<solid android:color="#color/colorPrimary"/>
</shape>
</rotate>
layout.xml
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="120dp"
android:layout_height="120dp"
android:progressDrawable="#drawable/widget_arc"
android:indeterminate="false"
android:max="100"
android:progress="67"
/>
You can set the progress dinamically and also easy to animate it
*Use dimen res values
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>
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>
This question already has answers here:
How to increase height of ProgressBar in ICS/JB
(2 answers)
Closed 18 days ago.
I am working with a SeekBar that works perfectly fine. But I want to increase the height of the Progress bar, as the native height is not as high.
So how can I change the height of the progress bar, either dynamically or through XML?
To create custom seekbar, add in your xml file below code:
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/seek_homelayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/_10sdp"
android:maxHeight="8dip"
android:minHeight="8dip"
android:progressBackgroundTint="#color/thumb"
android:progressDrawable="#drawable/sb_progress_drawable"
android:progressTint="#color/black"
android:secondaryProgressTint="#color/colorPrimary"
android:thumb="#drawable/sb_thumb"
android:thumbTint="#color/colorPrimary" />
Create sb_progress_drawable.xml file in drawable:
<?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="rectangle">
<solid android:color="#26FFFFFF"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<scale
android:scaleWidth="100%" >
<shape android:shape="rectangle">
<solid android:color="#26FFFFFF"/>
</shape>
</scale>
</item>
<item android:id="#android:id/progress">
<scale
android:scaleWidth="100%" >
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
</shape>
</scale>
</item>
</layer-list>
If you want to use thumb on to seekbar then add sb_thumb.xml file in your drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<size android:width="12dp"
android:height="12dp" />
<solid android:color="#color/colorPrimary" />
</shape>
You have maxHeigh and minHeight attributes.
This attributes will determinate the height of your seekbar.
android:maxHeight="3dp"
android:minHeight="3dp"
https://www.lvguowei.me/post/customize-android-seekbar-color/
Cheers.
None of the above works, simply set android:layout_height="10dp" to whatever value you want!
<SeekBar
android:id="#+id/seekBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
I have a very strange problem - I defined a custom progress drawable for a progress bar and
sometimes it shows and sometimes its not.
I tried cleaning my project, restarting eclipse and even restart the computer.
its still happens.
here is the progress drawable 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
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<gradient
android:startColor="#6f7754"
android:endColor="#858762"
android:angle="90"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<gradient
android:startColor="#ffba00"
android:endColor="#af6c03"
android:angle="90"/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="5dp" />
<gradient
android:startColor="#ffba00"
android:endColor="#af6c03"
android:angle="90" />
</shape>
</clip>
and here's the xml where I use it:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginBottom="2dp"
android:background="#drawable/quick_action_item_btn">
<ImageView
android:id="#+id/icon"
android:layout_width="21dp"
android:layout_height="21dp"
android:scaleType="centerInside"/>
<ProgressBar
android:id="#+id/progress"
android:layout_width="20dp"
android:layout_height="4dp"
android:layout_marginTop="2dp"
style="#android:style/Widget.ProgressBar.Horizontal"
android:progressDrawable="#drawable/achievement_progress_bar"/>
</LinearLayout>
try with this
android:indeterminateDrawable="#drawable/yourXML"
it is working for me..
Its working fine for me. Just set your indeterminateDrawable to your custum xml file.It should be fine..
Perhaps this a similar problem to this one... SharedPreferences.onSharedPreferenceChangeListener not being called consistently
Is the custom xml defined as a variable of the activity? If not, perhaps it is being collected by the garbage collector. My suggestion is to make it a field variable of the class (the activity class).