apptik / MultiSlider

Multi functional slider/seekbar( / rangebar / scrubber) for Android
Apache License 2.0
320 stars 80 forks source link

range bar height #100

Open rajeshdeva23 opened 5 years ago

rajeshdeva23 commented 5 years ago

Try to increase the height of the range bar. can not increase the height #

OliverCulleyDeLange commented 4 years ago

In your layout

<io.apptik.widget.MultiSlider
      ...
        android:track="@drawable/slider_track"
        app:range="@drawable/slider_range_bar"
        app:thumbNumber="2" />

slider_track.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle"
            android:tint="?android:attr/colorControlNormal">
            <size android:height="8dp" /> <- Change height here
        </shape>
    </item>
</layer-list>

slider_range_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle"
            android:tint="?android:attr/colorControlActivated">
            <size android:height="8dp"/> <- Change height here
        </shape>
    </item>
</layer-list>

To get this i dug through the source code and found the resource they're using in the lib, and replaced the hard coded 2dp dimension with my required value.

Caveat: Its noticably mis-aligned on the vertical axis, so will become more noticable the larger your bar. I'll post back if i figure that bit out too

OliverCulleyDeLange commented 4 years ago

I couldn't figure it out so i hacked it. I just added half-height padding to the bottom of the track and range drawables:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="center_vertical|fill_horizontal"
        android:bottom="4dp"> <- 4dp padding for an 8dp high line
        <shape android:shape="rectangle"
            android:tint="?android:attr/colorControlNormal">
            <size android:height="8dp" />
            <corners android:radius="4dp" /> <- Bonus rounded track
        </shape>
    </item>
</layer-list>