Slim blue progress bar

Question

I am trying to create a thin blue progress bar similar to this:

I'm not so good with Drawables , but I have changed 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> 

Answer 1

The height is determined by the android:layout_height="wrap_content attribute android:layout_height="wrap_content . For example, you can set it to 2dp to create a thinner progress bar.

Changing the color will be a little harder as you use gradients. Thus, you have to change the color of the beginning and end to some kind of blue color.

What i use

 <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 dropdown 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"