Custom seekbar thumb size color and background

Question

I would like to have this seekbar in my Android project     This is my seekbar     lt SeekBar         android id    id seekBar luminosite          android layout width   dimen seekbar width          android layout height   dimen seekbar height          android minHeight  15dp          android minWidth  15dp          android maxHeight  15dp          android maxWidth  15dp          android progress   integer luminosite defaut          android progressDrawable   drawable custom seekbar          android thumb   drawable custom thumb    gt    This is my custom thumb xml     lt shape xmlns android  http   schemas android com apk res android      android shape  oval   gt        lt gradient         android angle  270          android endColor   color colorDekraOrange          android startColor   color colorDekraOrange    gt        lt size         android height  35dp          android width  35dp    gt    lt  shape gt    This is my custom seekbar xml     lt layer-list xmlns android  http   schemas android com apk res android   gt        lt item         android id   android id background          android drawable   drawable seekbar   gt       lt item android id   android id progress  gt           lt clip android drawable   color colorDekraYellow    gt       lt  item gt    lt  layer-list gt    This is my seekbar png  background       And this is the result     No shadow and no rounded borders in the bar     I really not understand how I can do

User · Answer

Android custom SeekBar - custom track or progress, shape, size, background and thumb and for other seekbar customization see http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples

Custom Track 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"
        android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle"
            android:tint="#ffd600">
            <corners android:radius="8dp"/>
            <size android:height="30dp" />
            <solid android:color="#ffd600" />
        </shape>
    </item>
    <item android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <selector>
                <item android:state_enabled="false"
                    android:drawable="@android:color/transparent" />
                <item>
                    <shape android:shape="rectangle"
                        android:tint="#f50057">
                        <corners android:radius="8dp"/>
                        <size android:height="30dp" />
                        <solid android:color="#f50057" />
                    </shape>
                </item>
            </selector>
        </scale>
    </item>
</layer-list>

Custom thumb drawable

?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:thickness="4dp"
    android:useLevel="false"
    android:tint="#ad1457">
    <solid
        android:color="#ad1457" />
    <size
        android:width="32dp"
        android:height="32dp" />
</shape>

Output

User · Answer

All done in XML  no  png images   The clever bit is border shadow xml    All about the vectors these days      Screenshot     This is your SeekBar  res layout     xml    SeekBar   lt SeekBar     android id    id seekBar luminosite      android layout width  300dp      android layout height  wrap content              android progress   integer luminosite defaut      android progressDrawable   drawable seekbar style      android thumb   drawable custom thumb   gt    Let s make it stylish  so you can easily customize it later    style  res drawable seekbar style xml    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item          android id   android id background           android drawable   drawable border shadow   gt       lt  item gt        lt item          android id   android id progress   gt            lt clip              android drawable   drawable seekbar progress    gt       lt  item gt   lt  layer-list gt    thumb  res drawable custom thumb xml    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item gt           lt shape android shape  oval  gt               lt solid android color   color colorDekraOrange   gt               lt size                 android width  35dp                  android height  35dp   gt           lt  shape gt       lt  item gt      lt  layer-list gt    progress  res drawable seekbar progress xml    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list      xmlns android  http   schemas android com apk res android   gt       lt item          android id    id progressshape   gt           lt clip gt               lt shape                  android shape  rectangle   gt                   lt size android height  5dp   gt                   lt corners                      android radius  5dp    gt                   lt solid android color   color colorDekraYellow   gt                       lt  shape gt           lt  clip gt       lt  item gt   lt  layer-list gt    shadow  res drawable border shadow xml    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt              lt item gt                 lt shape gt                lt corners                  android radius  5dp    gt               lt gradient                 android angle  270                  android startColor   33000000                  android centerColor   11000000                  android endColor   11000000                  android centerY  0 2                  android type  linear                gt                     lt  shape gt        lt  item gt   lt  layer-list gt

User · Answer

android minHeight android maxHeight is important for that    lt SeekBar     android id    id pb      android layout width  match parent      android layout height  wrap content      android maxHeight  2dp      android minHeight  2dp      android progressDrawable   drawable seekbar bg      android thumb   drawable seekbar thumb      android max  100      android progress  50   gt    seekbar bg xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list     xmlns android  http   schemas android com apk res android  gt       lt item android id   android id background  gt           lt shape gt               lt corners android radius  3dp    gt               lt solid android color   ECF0F1    gt           lt  shape gt       lt  item gt       lt item android id   android id secondaryProgress  gt           lt clip gt               lt shape gt                   lt corners android radius  3dp    gt                   lt solid android color   C6CACE    gt               lt  shape gt           lt  clip gt       lt  item gt       lt item android id   android id progress  gt           lt clip gt               lt shape gt                   lt corners android radius  3dp    gt                   lt solid android color   16BC5C    gt               lt  shape gt           lt  clip gt       lt  item gt   lt  layer-list gt    seekbar thumb xml   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  oval  gt       lt solid android color   16BC5C    gt       lt stroke         android width  1dp          android color   16BC5C    gt       lt size         android height  20dp          android width  20dp    gt   lt  shape gt

User · Answer

You can use the official Slider in the Material Components Library   Use the app trackHeight  xxdp   default value is 4dp  to change the height of the track bar   Also use these attributes to customize the colors    app activeTrackColor  the active track color app inactiveTrackColor  the inactive track color app thumbColor  to fill the thumb   Something like        lt com google android material slider Slider         android id    id slider          android layout width  wrap content          android layout height  wrap content          app activeTrackColor   ffd400          app inactiveTrackColor   e7e7e7          app thumbColor   ffb300          app trackHeight  12dp               gt      It requires the version 1 2 0 of the library

User · Answer

At first courtesy goes to  Charuka    DO  You can use android progressDrawable   drawable seekbar  instead of android background   drawable seekbar     progressDrawable used for the progress mode   You should try with  android minHeight      Defines the minimum height of the view  It is not guaranteed the view   will be able to achieve this minimum height  for example  if its   parent layout constrains it with less available height     android minWidth     Defines the minimum width of the view  It is not guaranteed the view   will be able to achieve this minimum width  for example  if its parent   layout constrains it with less available width        android minHeight  25p      android maxHeight  25dp     FYI   Using android minHeight and android maxHeight is not good solutions  Need to rectify your Custom Seekbar  From Class Level

User · Answer

No shadow and no rounded borders in the bar   You are using an image so the easiest solution is row your boat with the flow   You cannot give heights manually yes you can but make sure it gets enough space to show your full image view there    easiest way is use  android layout height  wrap content  for SeekBar To get more clear rounded borders you can easily use the same image that you have used with another color     I am no good with Photoshop but I managed to edit a background one for a test    seekbar brown to show progress png   lt SeekBar     android splitTrack  false       for unwanted white space in thumb     android id    id seekBar luminosite      android layout width  250dp       use your own size     android layout height  wrap content      android minHeight  10dp      android minWidth  15dp      android maxHeight  15dp      android maxWidth  15dp      android progress  50      android progressDrawable   drawable custom seekbar progress      android thumb   drawable custom thumb    gt    custom seekbar progress xml   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item         android id   android id background          android drawable   drawable seekbar    gt       lt item android id   android id progress  gt           lt clip android drawable   drawable seekbar brown to show progress    gt       lt  item gt   lt  layer-list gt    custom thumb xml is same as yours   Finally android splitTrack  false  will remove the unwanted white space in your thumb  Let s have a look at the output

User · Answer

You can try progress bar instead of seek bar   lt ProgressBar     android id    id progressBar      style   android attr progressBarStyleHorizontal      android layout width  fill parent      android layout height  50dp      android layout marginBottom  35dp        gt

User · Answer

Use tints      lt SeekBar         android layout width  match parent          android layout height  wrap content          android minHeight  15dp          android minWidth  15dp          android maxHeight  15dp          android maxWidth  15dp          android progress  20          android thumbTint   color colorPrimaryDark          android progressTint   color colorPrimary   gt    use the color you need in thumbTint and progressTint  It is much faster      Edit ofc you can use in combination with android progressDrawable   drawable seekbar

User · Answer

First at all  use android splitTrack  quot false quot  for the transparency problem of your thumb   For the seekbar png  you have to use a 9 patch  It would be good for the rounded border and the shadow of your image

User · Answer

For future readers   Starting from material-components-android 1 2 0-alpha01  you can use new slider component  ex   Modify thumbSize  thumbColor  trackColor accordingly     lt com google android material slider Slider         android id    id slider          android layout width  match parent          android layout height  match parent          android valueFrom  20f          android valueTo  70f          android stepSize  10          app thumbRadius  20dp          app thumbColor   color colorAccent          app trackColor   android color darker gray            gt    Note    Track corners are not round

[android] Custom seekbar (thumb size, color and background)

Examples related to android

Examples related to seekbar

Examples related to android-slider