Android Material Design rounded progress_bar - android

I´m working on an app wich uses different progress bars, and I want them to look as the ones in Google fit, with rounded cornes.
I have a custom drawable for each bar with different colors, and it rounds the outside corners but not the inside corners, as you can see here:
My custom drawable is:
<?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>
<corners android:radius="#dimen/progress_bar_rounded" />
<solid android:color="#color/progressbarBackground" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="#dimen/progress_bar_rounded" />
<solid android:color="#color/progressbarGreen" />
</shape>
</clip>
</item>
</layer-list>
An the progress bars code is:
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="#dimen/progress_bar_high"
android:id="#+id/GreenProgressBar"
android:indeterminate="false"
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:progressDrawable="#drawable/custom_green_progressbar" />
I could use some libraries as https://github.com/akexorcist/Android-RoundCornerProgressBar , but as it is such a simple thing i think it´s not worth it.
I also have been looking on different threads, but nothing has worked for me.
Any idea, without having to work with .9.png images, if possible?
Thanks a lot!


Use the scale tag rather than clip:
<?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>
<corners android:radius="#dimen/progress_bar_rounded" />
<solid android:color="#color/progressbarBackground" />
</shape>
</item>
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%" android:useIntrinsicSizeAsMinimum="true">
<shape>
<corners android:radius="#dimen/progress_bar_rounded" />
<solid android:color="#color/progressbarGreen" />
<size android:width="#dimen/progress_bar_rounded"/>
</shape>
</scale>
</item>
</layer-list>

Related

How to add gradient color and rounded indicator to LinearProgressBar in Android?

This is the Progress indicator I need.
I took help from this answer. Gradient color Progress Indicator
This is what I achieved so far.
My Progressbar background drawable is:
<?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>
<corners android:radius="#dimen/_11sdp" />
<solid android:color="#color/cultured" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip android:clipOrientation="horizontal">
<shape android:shape="rectangle">
<corners android:radius="#dimen/_11sdp" />
<gradient
android:endColor="#color/colorPrimary"
android:startColor="#color/deep_peach" />
</shape>
</clip>
</item>
</layer-list>
My Progressbar code is:
<ProgressBar
android:id="#+id/viewLinearProgress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="4dp"
android:layout_marginStart="#dimen/_6sdp"
android:layout_marginTop="#dimen/_19sdp"
android:layout_marginEnd="#dimen/_14sdp"
android:progress="60"
android:progressDrawable="#drawable/gradient_progressbar"
app:layout_constraintEnd_toStartOf="#id/tvProgress"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvMessage" />
The only problem is that - only the Progressbar indicator right side rounded corner is not resolved. The track is ok.

This is working
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background" android:top="#dimen/size_6" android:bottom="#dimen/size_6">
<shape>
<solid android:color="#B5B6B5"/>
<corners android:radius="100dp" />
</shape>
</item>
<item android:id="#android:id/progress"
android:top="#dimen/size_4" android:bottom="#dimen/size_4">
<clip>
<scale android:scaleWidth="100%" android:scaleHeight="20">
<shape>
<gradient android:endColor="#FF7400" android:startColor="#FFA119" android:angle="180"/>
<corners android:radius="100dp" />
</shape>
</scale>
</clip>
</item>
</layer-list>
Use
<ProgressBar
android:id="#+id/progressbar_insurance"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="#dimen/_14sdp"
android:layout_marginTop="#dimen/_4sdp"
android:indeterminate="false" />
Hope this work for you, let me know if doesn't work... :)

How to create horizontal indeterminate progress drawable with round corners for progressbar in android?

I want to create horizontal indeterminate progress drawable with round corners for progress bar in android. How to create that using xml?
Edit 1: I am using following 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>
<solid android:color="?attr/dividerAndProgressColor" />
<corners android:radius="20dp" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="?attr/secondaryText" />
<corners android:radius="20dp" />
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
>
<clip>
<shape>
<solid android:color="?attr/secondaryText" />
<corners android:radius="20dp" />
</shape>
</clip>
</item>
</layer-list>
android:indeterminateDrawable="#drawable/progress_drawable_start_end_indeterminate"
But there is one problem, animation starts from 0 reaches 100 and then restarts. This is not desired in case of indeterminate progressbar.

round corner
lookout this, https://stackoverflow.com/a/42646939/12709358
<ProgressBar
android:id="#+id/progressbar_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:indeterminateOnly="true"
android:indeterminateDrawable="#drawable/progressbar_indeterminate_horizontal"
android:progressDrawable="#drawable/progressbar_horizontal"
android:minHeight="24dip"
android:maxHeight="24dip"
/>
also see this, https://stackoverflow.com/a/63463786/12709358

Android: Drawable vertically alignment for SeekBar

This is waht I need to achieve with xml drawable for SeekBar:
I tried many different variations and this is best I could make.
This is seekbar_thumb_drawable.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#color/accent_color"/>
<size
android:height="20dp"
android:width="20dp" />
</shape>
This is seekbar_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"
android:height="5dp"
android:top="7.5dp">
<shape
android:shape="rectangle">
<solid android:color="#color/seekbar_background" />
<corners android:radius="2.5dp" />
</shape>
</item>
<item
android:id="#android:id/progress"
android:height="10dp"
android:top="5dp">
<clip>
<shape
android:shape="rectangle">
<solid android:color="#color/seekbar_progress" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
</layer-list>
Result on API 18:
Problem is that lines are not verticaly centered.
Result on API 24:
This display exactly how I want it to display.
Is there any possible solution to make this appear as on first picture on all devices from API 16?
I do not want to use nine-patch, because I need to use color from resources.
I tried padding, gravity, top, bottom, inter-shape, line, rectangle but I could not find solution...

This is because the android:height and android:width for <item> are only available for API 23 and above. If you use these attributes for API below 23, it will not give you an error, but simply ignore it.
In your case, android:height="5dp", and android:height="10dp" are not being applied.
If you look at the relevant docs or , it says that these were added in API level 23.

Make update in your drawable files.
In seekbar_thumb_drawable.xml :
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="oval">
<solid android:color="#color/accent_color" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
</item>
</layer-list>
seekbar_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"
android:height="5dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#color/seekbar_background" />
<corners android:radius="2.5dp" />
</shape>
</item>
<item
android:id="#android:id/progress"
android:height="10dp"
android:gravity="center">
<clip>
<shape android:shape="rectangle">
<solid android:color="#color/seekbar_progress" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
</layer-list>
I m using gravity in item, So that drawable item draw in center.

You probably faced with already known issue, here is the solution for it. You should define maxHeight and minHeight of the SeekBar the same as the height of it. Or you can even set maxHeight to some big value like 1000dp, if you exepect your height to be wrap_content, like mentioned below the suggested answer in the same thread.
<SeekBar
android:thumb="#drawable/seekbar_thumb_drawable"
android:progressDrawable="#drawable/seekbar_drawable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="1000dp"
<!-- OR -->
android:maxHeight="16dp"
android:minHeight="16dp"/>

<SeekBar
android:id="#+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="3dp"
android:minHeight="3dp"
android:progressDrawable="#drawable/nnl_bg_seek_bar_progress"
android:splitTrack="false"
android:thumb="#drawable/nnl_sel_seek_bar_thumb"
tools:ignore="UnusedAttribute"
/>
The code above is my way. You may need to pay attention to these attributes: maxHeight / minHeight / splitTrack.

I am also facing same issue in Low API of thumb drawable come above the line So what I did for it.
<SeekBar
android:id="#+id/seekbar_transparency"
android:layout_width="match_parent"
android:layout_height="40dp"
android:paddingTop="#dimen/seekbar_thumb_size_space"
android:paddingBottom="#dimen/seekbar_thumb_size_space"
android:progress="100"
android:theme="#style/SeekbarTheme"
android:thumb="#drawable/thumb_drawable" />
style.xml
<!--Seekbar background change-->
<style name="SeekbarTheme" parent="Theme.AppCompat.Light">
<!-- active seekbar progress track color -->
<item name="colorControlActivated">#color/colorSeekBar</item>
<!-- inactive seekbar progress track color -->
<item name="colorControlNormal">#color/colorGray</item>
</style>
thumb_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="2.5dp"
android:left="2.5dp"
android:right="2.5dp"
android:top="2.5dp">
<shape android:shape="rectangle">
<size
android:width="#dimen/seekbar_thumb_size"
android:height="#dimen/seekbar_thumb_size" />
<corners android:radius="20dp" />
<solid android:color="#201DE9B6" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle">
<size
android:width="#dimen/seekbar_thumb_size"
android:height="#dimen/seekbar_thumb_size" />
<corners android:radius="20dp" />
<solid android:color="#AA1DE9B6" />
</shape>
</item>
</layer-list>
dimes.xml
<!--Seeckbar thumb size-->
<dimen name="seekbar_thumb_size">10dp</dimen>
<dimen name="seekbar_thumb_size_space">5dp</dimen>

Creating custom SeekBar with a triangle shape background

I am trying to create a custom SeekBar with a triangle shape background. There is no thumb icon. Below are some images of what I want to achieve
Below is my code so far
Res/Drawable/segment_bg
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<clip>
<shape>
<gradient
android:startColor="#FF5e8ea3"
android:centerColor="#FF32a0d2"
android:centerY="0.1"
android:endColor="#FF13729e"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
Res/Drawable/segment
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/slider"
android:dither="true"
/>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:startColor="#80028ac8"
android:centerColor="#80127fb1"
android:centerY="0.75"
android:endColor="#a004638f"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/segment_bg"
/>
</layer-list>
activity.xml
<SeekBar
android:id="#+id/frequency_slider"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:max="20"
android:progress="0"
android:secondaryProgress="0"
android:progressDrawable="#drawable/segment"
/>
The 9-patch image used is
The result looks like this
My questions are how do I have the seekbar cater for the triangle shape? Then how do I remove the thumb icon, one isn't needed.
Thanks

Android - Custom SeekBar - Unnecessary white space on bottom of the seekbar

I need to customize a seekbar. To achieve this I'm using a layer-list XML file, and then set it as background to seekbar.
For the #android:id/background I'm using a bitmap, for secondaryProgress and progress, I'm using a shape.
This is the XML background file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<bitmap
android:src="#drawable/progressbar_bg"
android:tileMode="repeat" />
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#B2B2B2" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#E00072" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
</layer-list>
And here's how I declare the SeekBar:
<SeekBar
android:id="#+id/seekBar1"
android:thumb="#drawable/progressbar_thumb"
android:progressDrawable="#drawable/custom_seek_bar"
android:background="#drawable/progressbar_bg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toLeftOf="#id/video_total_time"
android:layout_toRightOf="#id/video_time_played" />
The problem is that the SeekBar height does not shrink to new height, which I'm expecting to be equal with height of the background image. Instead, I see a area filled with white space.
Do you know where does the white space come from, and how to git rid of it?

The issue was solved by using a 9-patch instead of a Bitmap, for the #android:id/background item.
<item android:id="#android:id/background">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:src="#drawable/progressbar_backg" />
</item>

Categories

Resources