Search code examples
javaandroidandroid-seekbarandroid-vertical-seekbar

Set width SeekBar Android


I'm using VerticalSeekBar and I would like to set the width. With the term width I mean the width of the seekbarbar progress part. This is my xml

<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
        android:layout_width="wrap_content"
        android:layout_height="350dp"
        android:layout_below="@+id/btnDate"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="15dp">
            <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
                android:id="@+id/verticaleDate"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:seekBarRotation="CW270"
            android:max="10"
            android:splitTrack="false"/>
    </com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>

Thanks for interesting.


Solution

  • background_fill.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <gradient
            android:angle="90"
            android:centerColor="#FF555555"
            android:endColor="#FF555555"
            android:startColor="#FF555555" />
    
        <corners android:radius="1dp" />
    
        <stroke
            android:width="1dp"
            android:color="#50999999" />
        <stroke
            android:width="1dp"
            android:color="#70555555" />
    
    </shape>
    

    progress_fill.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <gradient
            android:angle="90"
            android:centerColor="#FFB80000"
            android:endColor="#FFFF4400"
            android:startColor="#FF470000" />
    
        <corners android:radius="1dp" />
    
        <stroke
            android:width="1dp"
            android:color="#50999999" />
        <stroke
            android:width="1dp"
            android:color="#70555555" />
    
    </shape>
    

    progress.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/background_fill"/>
        <item android:id="@android:id/progress">
            <clip android:drawable="@drawable/progress_fill" />
        </item>
    
    </layer-list>
    

    thumb.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval" >
    
        <gradient
            android:angle="270"
            android:endColor="#E5492A"
            android:startColor="#E5492A" />
    
        <size
            android:height="20dp"
            android:width="20dp" />
    
    </shape>
    

    Update your seekbar layout by this:

    <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
        android:layout_width="wrap_content"
        android:layout_height="350dp"
        android:layout_below="@+id/btnDate"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="15dp">
    
        <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
            android:id="@+id/verticaleDate"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:progressDrawable="@drawable/progress"
            android:thumb="@drawable/thumb"
            app:seekBarRotation="CW270"
            android:max="10"
            android:splitTrack="false"/>
    
    </com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>