Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I set a custom seekbar's ProgressDrawable size to be smaller than the ProgressBackground

I have a custom seekbar that's not quite working.

I want the seekbar to look like this:

Notice the progress bar is 'skinnier' than the background

But this is as close as I have been able to get

The progress bar and background are the same size

Ignoring the slight coloring and size issues, the problem I'm having is with the green progress size. Is there some way to make this smaller than the background? I've tried size and padding tags in the XML, and even tried fiddling with two rectangles on top of each other with clip gravity, but no luck yet.

Here is my Seekbar 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 android:shape="rectangle">
            <corners android:radius="20dp" />
            <solid android:color="@color/fofo_grey" />

        </shape>
    </item>

    <item android:id="@android:id/progress">

        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="20dp" />
                  <solid android:color="@color/signup_green" />
            </shape>
    </clip>
    </item>

</layer-list>  

And the Seekbar in the layout fragment

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/seekBar"
    android:layout_below="@+id/textView6"
    android:layout_centerHorizontal="true"
    android:splitTrack="false"
    android:progressDrawable="@drawable/custom_seekbar"
    android:thumb="@drawable/thumb_seekbar"
    android:max="100"
    android:progress="50"
    android:indeterminate="false" />
like image 862
BlitzKraig Avatar asked Dec 14 '15 09:12

BlitzKraig


People also ask

How do I change the SeekBar thumb size on android?

Show activity on this post. Then I used vector code in . xml file, which has attrs android:width="28dp" and android:height="28dp" in the vector tag. Here we can change the size of the thumb.

How can I customize my SeekBar?

SeekBar can be understood as an extension of ProgressBar in Android. You have to just drag the thumb on SeekBar and drag it towards the backward or forward direction and store the current value of progress changed.

How can I make SeekBar thicker?

You can use the Slider provided by the Material Components Library. Use the app:trackHeight="xxdp" (the default value is 4dp ) to change the height of the track bar. It requires the version 1.2. 0 of the library.

How do I change the color of my SeekBar line in Android?

If you are using default SeekBar provided by android Sdk then their is a simple way to change the color of that . just go to color. xml inside /res/values/colors. xml and change the colorAccent.


1 Answers

for change height progress drawble just add android:minHeight="2dp" and android:maxHeight="2dp" to layout.

UPDATE:

<androidx.appcompat.widget.AppCompatSeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:max="100"
    android:minHeight="2dp"
    android:maxHeight="2dp"
    android:background="@android:color/transparent"
    android:progressDrawable="@drawable/sb_progress_drawable"
    android:progress="0"
    android:secondaryProgress="0"
    android:thumbOffset="0dp"
    android:thumb="@drawable/sb_thumb" />

sb_progress_drawable.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="#26FFFFFF"/>
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <scale
            android:scaleWidth="100%" >
            <shape android:shape="rectangle">
                <solid android:color="#26FFFFFF"/>
            </shape>
        </scale>
    </item>

    <item android:id="@android:id/progress">
        <scale
            android:scaleWidth="100%" >
            <shape android:shape="rectangle">
                <solid android:color="#FFFFFF"/>
            </shape>
        </scale>
    </item>

</layer-list>

sb_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <size android:width="20dp" android:height="20dp" />
    <solid android:color="#FFFFFF" />
</shape>
like image 162
Farzad Avatar answered Nov 15 '22 12:11

Farzad