Set SeekBar's progress color to transparent

Question

Here is a picture of what I want to accomplish, where there is no progress color (transparent), with a solid grey background bar:

I tried

android:progressTint="#00000000"

But that sets the whole bar (progress bar AND the back bar) to transparent.

I also tried:

android:progressDrawable="@drawable/customseekbar"

where customseekbar.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/seekbar_background" />

<item android:id="@android:id/progress">
    <clip android:drawable="@drawable/seekbar_background" />
</item>

and seekbar_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#FF555555" />
</shape>

but then I get this fat and ugly:

What am I doing wrong here? Thanks

Antiphon

Answer 1

How to Style a Seekbar in Android

Here you go, you need to do the following

Step 1:

In drawable, put "progress_bg.png" (find attached)

Step 2:

In drawable, create "myprogessbar_style.xml", and insert the following

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background"
          android:drawable="@drawable/progress_bg" />
    <item
        android:id="@android:id/secondaryProgress"
        >
        <scale
            android:drawable="@drawable/progress_bg"
            android:scaleWidth="100%"/>
    </item>
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/progress_bg"/>

</layer-list>

Step 3:

Your seekbar

<SeekBar
            android:id="@+id/seekBar1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_margin="10dp"
            android:indeterminate="false"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:progressDrawable="@drawable/myprogessbar_style"/>

Result

Attachment

P.S. Yes, it's not a transparency but the expected result

Yves

You don't need to draw the background 3 times. For the two progress drawables, set them to @android:color/transparent – Medieval

Answer 2

This seems to work:

<SeekBar
    ...
    android:progressTint="@android:color/transparent"
    ... />

Nace

Answer 3

seekbar_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke android:height="1px" android:color="#FF555555" />
</shape>

1px line shape

Vanscoy

This also doesnt work. This (for some reason) completely removes the progress and the back bar. – Antiphon

maybe it's too small, you could try 1dp or something bigger – Vanscoy

I tried 1px, 2dp, 200dp, but no difference. The back bar remains invisible. :( – Antiphon

Answer 4

android:maxHeight="3dp" add this to your layout xml where you have mentioned the seekbar. You can change the dp if you wish to decrease the height

Contortive

Answer 5

That's much easier to solve. In your seekbar_background.xml:

Instead of:

  android:color="FF555555"

Try:

  android:color="@android:color/transparent"

Dropkick

Answer 6

If you want to do it programatically:

 seekBar.progressTintList = ColorStateList.valueOf(Color.TRANSPARENT)

Downhearted

Answer 7

android:background="@android:color/transparent"

This set my SeekBar in Android Studio background to transparent. Pretty straight forward.

Diplegia

Write an explanation of your answer. – Estrange