What I want to do:

such a SeekBar (volume loud left is not counted) enter image description here

In this SeekBar, I need to be able to set the progress bar size, thumb size (circle of blue) and their color.

Questions:

  1. How to properly customize SeekBar'y? (The progress bar should be a .9.png image or should it all be done with a drawable shape?)

If you do with the help of png pictures - everything goes fine.

The designer makes the picture: background, progress6 sceondary progress, thumb and everything is ok.

If you do everything with the help of shape, it turns out that the progress bar is always of one large size and I cannot change it. Code below:

layout.xml:

<SeekBar android:layout_width="306dp" android:layout_height="wrap_content" android:progressDrawable="@drawable/seek_bar_progress" android:thumb="@drawable/seek_bar_thumb"/>

seek_bar_progress.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="rectangle"> <solid android:color="#FFFFFF" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <shape android:shape="rectangle"> <solid android:color="#FFFFFF" /> </shape> </item> <item android:id="@android:id/progress"> <shape android:shape="rectangle"> <solid android:color="#0000FF" /> </shape> </item> </layer-list>

seek_bar_thumb.xml:

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item > <shape android:shape="oval"> <solid android:color="#0000FF"/> <size android:height="31dp" android:width="31dp"/> </shape> </item> </layer-list>

    1 answer 1

    An example of my SeekBar:

    SeekBar Example

    I know the height of the bar: 10dp, respectively, the code is as follows:

     <SeekBar android:layout_height="wrap_content" android:id="@+id/progress" android:layout_alignParentTop="true" android:layout_toRightOf="@+id/play" android:layout_toEndOf="@+id/play" android:layout_width="match_parent" android:layout_above="@+id/time" android:thumb="@drawable/seekbar_tracker" android:progress="0" android:progressDrawable="@drawable/seekbar" android:maxHeight="10dp" android:minHeight="10dp" android:layout_marginLeft="12dp" android:layout_marginStart="12dp" tools:progress="10" android:padding="0dp" android:layout_centerVertical="true" />

    Code seekbar_tracker.xml :

     <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#5F77C1"/> <size android:height="10dp" android:width="3dp"/> </shape>

    seekbar.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:drawable="@drawable/seek_bar_background"/> <item android:id="@android:id/progress" android:drawable="@drawable/seek_bar_progress"/> </layer-list>

    seek_bar_background.xml :

     <?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:top="4dp" android:bottom="4dp"> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#BCC2D3"/> <size android:height="2dp"/> </shape> </item> </layer-list>

    seek_bar_progress.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:drawable="@drawable/seek_bar_background"/> <item android:id="@android:id/progress"> <clip android:drawable="@drawable/seek_bar_progress_fill" /> </item> </layer-list>

    seek_bar_progress_fill.xml :

     <?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:top="4dp" android:bottom="4dp"> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#5F77C1"/> <size android:width="1dp" android:height="2dp"/> </shape> </item> </layer-list>

    The solution is to add the attributes android:top="4dp" and android:bottom="4dp" in seekbar.xml . The bottom line is that the required height of the SeekBar 2dp strip, and the height of the whole SeekBar 10dp, we set the top and bottom indents (10 - 2) / 2 dp, thus centering the strip.

    Important Background in this solution does not work for API 17, API 22 (not tested on others), but on API 23 everything works fine. Apparently for now it’s more correct to use .9 images for the background.

    • one
      Thanks for the answer! Very high quality answer! - researcher
    • You are welcome. Glad to help) - Nikita Leshchev
    • Unfortunately, when checking on the working device, the background continues to stretch, although with progress everything is fine. I'm afraid that to implement a narrow background you need to use all the same .9 images - Nikita Leshchev