Develop Reference

Progress bar with rounded corners?

I am trying to achieve this progress bar design:
The current code that I have produces this:
This is the code:
<item android:id="#android:id/background">
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/dirtyWhite"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/colorPrimaryDark"/>
</shape>
</clip>
</item>
My progress bar:
<ProgressBar
android:id="#+id/activeProgress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:progress="10"
android:progressDrawable="#drawable/rounded_corners_progress_bar"/>
I tried adding <size> attribute on the <shape> in <clip to make the progress shape a bit smaller but it did not work. Also, the progress bar is flat and I want to be curved as per design. What I need to change in order to achieve the design?

How to make the progress shape a bit smaller?
You need to give the progress item a little padding, like so:
<item android:id="#android:id/progress"
android:top="2dp"
android:bottom="2dp"
android:left="2dp"
android:right="2dp">
How to make the progress bar to be curved as per design?
Replace the <clip></clip> element, with <scale android:scaleWidth="100%"></scale>. That will make the shape keep its form as it grows - and not cut off.
Unfortunately, it will have a little unwanted visual effect at the beginning - as the shape corners don't have enough space to draw. But it might be good enough for most cases.
Full code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/dirtyWhite"/>
</shape>
</item>
<item android:id="#android:id/progress"
android:top="1dp"
android:bottom="1dp"
android:left="1dp"
android:right="1dp">
<scale android:scaleWidth="100%">
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/colorPrimaryDark"/>
</shape>
</scale>
</item>
</layer-list>

With the Material Components Library you can use the LinearProgressIndicator and the app:trackCornerRadius attribute.
Something like:
<com.google.android.material.progressindicator.LinearProgressIndicator
android:indeterminate="true"
app:trackThickness="xxdp"
app:trackCornerRadius="xdp"/>
It works also for the determinate progress indicator removing the android:indeterminate="true" or using android:indeterminate="false"
Note: it requires at least the version 1.3.0.

Thanks to Georgi Koemdzhiev for a nice question and images. For those who want to make similar to his, do the following.
1) Create a background for a ProgressBar.
progress_bar_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners android:radius="3dp" />
<stroke android:color="#color/white" android:width="1dp" />
</shape>
2) Create a scale for the ProgressBar.
curved_progress_bar.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>
<corners android:radius="2dp" />
<solid android:color="#color/transparent" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="2dp" />
<solid android:color="#ffff00" />
</shape>
</clip>
</item>
</layer-list>
3) In layout file add the ProgressBar.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="6dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:background="#drawable/progress_bar_background"
>
<ProgressBar
android:id="#+id/progress_bar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_margin="1dp"
android:indeterminate="false"
android:progressDrawable="#drawable/curved_progress_bar"
/>
</FrameLayout>

You can achieve progress bar with both inner progress color ,border
color,empty progress with transparent color.
<?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="15dip" />
<stroke android:width="1dp" android:color="#color/black" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#color/black"
android:centerColor="#color/trans"
android:centerY="0.75"
android:endColor="#color/black"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
>
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="#color/black"
android:endColor="#color/black"
android:angle="270" />
</shape>
</clip>
</item>
</layer-list>

<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="#+id/pb_team2"
android:layout_width="0dp"
android:layout_height="8dp"
android:layout_marginStart="55dp"
android:layout_marginEnd="15dp"
app:trackColor="#E0E0E0"
app:trackCornerRadius="6dp"
app:trackThickness="8dp"
android:progress="2"
app:indicatorColor="#color/red"
android:scaleX="-1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_versus"
app:layout_constraintTop_toBottomOf="#id/tv_team2_score" />

add material dependencies in build.gradle(Module)
implementation 'com.google.android.material:material:1.6.0'
come back at activity_main.xml. Add
<com.google.android.material.progressindicator.LinearProgressIndicator>
...
app:trackCornerRadius="3dp"
</com.google.android.material.progressindicator.LinearProgressIndicator>
Hope it will do your work.

You can create a custom progressbar with Drawable.
1) create first drawable as a custom_progress_bar_horizontal.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>
<padding
android:bottom="2dip"
android:left="2dip"
android:right="2dip"
android:top="2dip" />
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#80385682"
android:centerY="0.50"
android:endColor="#80577AAF"
android:startColor="#80222F44" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="90"
android:endColor="#FF1997E1"
android:startColor="#FF0E75AF" />
</shape>
</clip>
</item>
</layer-list>
2) Create style in style.xml file.
<style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">#drawable/custom_progress_bar_horizontal</item>
<item name="android:minHeight">10dip</item>
<item name="android:maxHeight">20dip</item>
</style>
3) Use anywhere in your project.
<ProgressBar
android:id="#+id/mProgressBar"
style="#style/CustomProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Output:-

Android: custom seekbar thumb doesn't show correctly

I have a custom SeekBar with a specific style:
<SeekBar
android:id="#+id/mediacontroller_progress"
style="#style/MediaSeekBar"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content" />
MediaSeekBar style:
<style name="MediaSeekBar" parent="android:Widget.SeekBar">
<item name="android:progressDrawable">#drawable/media_seek_bar</item>
<item name="android:minHeight">2dp</item>
<item name="android:maxHeight">2dp</item>
<item name="android:thumb">#drawable/media_seek_bar_thumb</item>
<item name="android:progress">0</item>
</style>
media_seek_bar drawable:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="0dip" />
<solid android:color="#20ffffff" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="0dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="0dip" />
<solid android:color="#color/theme_accent_1" />
</shape>
</clip>
</item>
</layer-list>
media_seek_bar_thumb drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/control_pressed" />
<item android:state_focused="true"
android:drawable="#drawable/control_pressed" />
<item android:state_selected="true"
android:drawable="#drawable/control_pressed" />
<item android:drawable="#drawable/control_normal" />
</selector>
And the result:
without press
when I press thumb
So the problem is the area arround the yellow circle: it's translucent in my png files but not in App.

Problem is in your images inside selector. Probably images have extra space. I have tried to run your code with custom drawable inside selector and it works fine. Here my circle drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ffe600"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>

<SeekBar
android:splitTrack="false"
....
/>
Will be ok.

just set this code and work
android:thumbTint="#android:color/transparent" // this code for hide thumb
android:splitTrack="false" // this code for show correctly

Progressbar with three sections in Android

I have figured out that we can set a secondary progress for a progress bar in android by defining a custom style like following xml code:
res/drawable/custom_profressbar_horizontal.xml:
<?xml version="1.0" encoding="UTF-8"?>![enter image description here][1]
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#android:id/background">
<shape>
<corners android:radius="15dip" />
<gradient
android:startColor="#ffffffff"
android:centerColor="#ffdddddd"
android:centerY="0.50"
android:endColor="#ffffffff"
android:angle="270" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="15dip" />
<solid android:color="#ec3910"/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="15dip" />
<gradient android:startColor="#ff0e75af"
android:endColor="#ff1997e1"
android:angle="90" />
</shape>
</clip>
</item>
</layer-list>
and in the layout of my Activity i have this:
activity_maib.xml:
<ProgressBar
style="#style/CustomProgressBar"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_margin="7dp"
android:max="100"
android:progress="50"
android:secondaryProgress="80" />
and i have this progress bar:
But i need to have a third progress. how can i do this?
Thanx in advance.

Thin blue progress bar

I'm trying to create a thin, blue progress bar, similar to this:
I'm not that good with Drawables, but what I have changes the ProgressBar to green, but I'm not sure how to make it thin and blue:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<ProgressBar
android:id="#+id/ProgressBar"
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:progressDrawable="#drawable/progress"
style="#android:style/Widget.ProgressBar.Horizontal"
android:visibility="gone"
/>
</LinearLayout>
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>
<corners android:radius="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
>
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="#33FF33"
android:endColor="#008000"
android:angle="270" />
</shape>
</clip>
</item>
</layer-list>

The height is defined by the android:layout_height="wrap_content attribute. You could set it to 2dp for example, to create a thinner progress bar.
Changing your color will be a bit more difficult, since you are using gradients. So you'll have to change your start & end color to some kind of blue.
What I am using
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_marginTop="0.01dp"
android:max="100"
android:progress="50"
android:progressDrawable="#drawable/myprogressbar"
android:secondaryProgress="0" />
MyProgressBar.xml in the drawable folder
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="0dip" />
<gradient android:startColor="#C0C0C0" android:centerColor="#F8F8FF"
android:centerY="0.75" android:endColor="#ffffff" android:angle="90" />
<stroke android:width="0.01dp" android:color="#6B8E23" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="0dip" />
<gradient android:startColor="#9ACD32" android:endColor="#FFFF00"
android:angle="90" />
<stroke android:width="1dp" android:color="#6B8E23" />
</shape>
</clip>
</item>
</layer-list>
Replace the color codes with your own blue color codes:
android:startColor="#C0C0C0" android:centerColor="#F8F8FF"
android:endColor="#ffffff"

Custom layout weird bug

I'm facing a weird bug , if i remove the first layout(id = firstLayout) the second layout(id = user_home_buttonsLLay) works fine with their borders , but when i put all together the buttons border disappear . The most strange is that it was working fine before . Thanks for any help.
My Layout :
<LinearLayout id="#+id/firtLayout" style="#style/headerLLay">
<ImageView style="#style/header_left_img" />
<TextView android:id="#+id/user_home_headerTitulo"
android:text="Usuário" style="#style/header_titulo" />
<ImageButton android:id="#+id/user_home_headerImgBtInfo"
style="#style/header_right_img" />
</LinearLayout>
<LinearLayout android:id="#+id/user_home_buttonsLLay"
style="#style/user_home_buttonsLLay">
<Button android:id="#+id/user_home_bt_novoCliente" style="#style/user_home_button"
android:text="#string/user_home_novoCliente" />
<Button android:id="#+id/user_home_bt_jaCadastrado" style="#style/user_home_button"
android:text="#string/user_home_jaCadastrado" />
</LinearLayout>
Buttons Style
<style name="user_home_button" parent="#android:style/Widget.Button">
<item name="android:layout_width">200dip</item>
<item name="android:layout_height">40dip</item>
<item name="android:background">#drawable/bt_padrao_selector</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#ff0000</item>
<item name="android:layout_marginBottom">10dip</item>
</style>
Buttons selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/bt_padrao" />
<item
android:state_pressed="true"
android:drawable="#drawable/bt_padrao_pressed" />
</selector>
Buttons custom background with borders
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"/>
<solid android:color="#000000"/>
<corners android:radius="1dp"/>
</shape>
</item>
<item>
<shape>
<padding android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp"/>
<gradient android:startColor="#FFFFFF"
android:centerColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="90"/>
<corners android:radius="1dp"/>
</shape>
</item>

Already find the answer , somehow the background of my imagebutton which was set to (#00000000) to make it transparent, was interfering on the other components . Like float in css without clear after may disturb the rest of the page. I solve it using image instead of imagebutton , which lets me remove the background (#00000000) .