Android how to make a SeekBar thicker?

90 views Asked by At

Before you post links to stackoverflow answers, please note that I've likely already tried it.

I work with android studio and kotlin. custom_lvlmeter_channel.xml is just 1 vertical seekbar inside a FrameLayout that has to fill the entire space it has availible. In other words, I want a really thick seekbar without a thumb. I have tried different approaches so far unsuccessfully. My problem is that instead of having a really wide seekbar it stops getting wider past a certain point and fills up the rest of the space with just... empty space (background color is blue).
Here is what I get. It looks the same emulated
.

custom*_*lvlmeter_channel.xml:

<?xml version="1.0" encoding="utf-8"?>


<FrameLayout android:id="@+id/flSeekbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#59A2DC"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <com.example.levelmeter.widgetlogic.LevelMeterChannel
        android:id="@+id/sbFader"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:progress="10"
        android:progressDrawable="@drawable/draw_custom_lvlmeter_channel"
        android:rotation="270"
        android:thumb="@null"
        />

</FrameLayout>

(drawable) draw_custom_lvlmeter_channel.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>
            <gradient
                android:startColor="#ffe9e9e9"
                android:centerColor="#ffc6c6c6"
                android:centerY="0.75"
                android:endColor="#ffe9e9e9"
                android:angle="270"/>

        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:startColor="#ffe9e9e9"
                    android:endColor="#ff2165ca"
                    android:angle="270" />
            </shape>
        </clip>
    </item>
</layer-list>

LvlMeterChannel.kt

//This is an unchanged seekbar. The only overridden feature, is that width now also scales to the parent's height. This is done because the seekbar is rotated, therefore it's width is now going vertically.

package com.example.levelmeter.widgetlogic

import android.content.Context
import android.graphics.Canvas
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatSeekBar

class LevelMeterChannel(context: Context, attrs: AttributeSet) : AppCompatSeekBar(context, attrs) {


    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(heightMeasureSpec, heightMeasureSpec)
    }
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Here are 2 solutions I copied and tried:

Create a wider SeekBar

https://www.youtube.com/watch?v=O48ahJPTvJc&t=1s

All that changes is the color of my seekbar, the problem remains while those tutorials seem to work for others.

1

There are 1 answers

0
MaDudeeK On

SOLUTION

Try using material design sliders instead. They offer much simpler, straightforward and flexible means of customization for your slider (the name for their seekbar) and will spare you some nerves. The thickness of a slider can be changed by setting any value of your choice under app:trackHeight instead of manipulating it through drawables and whatnot.