Change size of Android-Seekbar?
Asked Answered
P

2

11

I have a question concerning seekbars. I tried several things but nothing helped. I want to change the height of the seekbar, but not the complete seekbar, only the bar where you scroll over with your thumb. I tried several things e.g. setBackGroundDrawable and setProgressDrawable and made my own drawables, but the drawable-size is fixed to the size of the Standard-Android-Seekbar. What can I do now?

Pichardo answered 22/9, 2011 at 7:45 Comment(0)
S
53

You have to add some padding in all directions and than set the min and max height. Here are one example that I used:

<?xml version="1.0" encoding="utf-8"?>
<SeekBar xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:progressDrawable="@drawable/custom_player_seekbar_background"
        android:paddingTop="10px" 
        android:paddingBottom="10px" 
        android:thumb="@drawable/bt_do_player" 
        android:paddingLeft="30px" 
        android:paddingRight="30px" 
        android:minHeight="6dip"
        android:maxHeight="6dip" 
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"/>
Soapstone answered 23/9, 2011 at 19:55 Comment(3)
Note that Android recommends dp over px.Catafalque
For API 19, I was able to set the size simply by setting the minHeight and maxHeight - I didn't need to set the padding.Simulator
its works, but I don not understand the reason because "adding padding to all the directions" the size change. Thanks.Dollop
E
1

For changing SeekBar size custom progressDrawable and custom thumb should be used. here is full implementation:

<SeekBar
        android:layout_width="your desired width in dp"
        android:layout_height="wrap_content"
        android:minHeight="your desired height in dp"
        android:maxHeight="as same as minHeight"
        android:progressDrawable="@drawable/seekbar_drawable"
        android:splitTrack="false"
        android:thumb="@drawable/seekbar_thumb"
       />

===========================================================

create seekbar_drawable.xml file in res/drawable folder:

  <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/seekbar_border" />
        <item>
            <clip android:drawable="@drawable/seekbar_progress"/>
        </item>
    </layer-list>

===========================================================

create seekbar_border.xml file in res/drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <solid android:color="#12000000" />
</shape>

===========================================================

create seekbar_progress.xml file in res/drawable folder:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <solid android:color="#98F7DB" />
</shape>

=========================================================== and finally create seekbar_thumb.xml file in res/drawable folder:

  <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <solid android:color="#FF60C2A5" />
        <size
            android:width="your desired height in dp"
            android:height="as same as width" />
    </shape>
Exergue answered 24/4, 2022 at 10:55 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.