user8412632
user8412632

Reputation:

Drawing a custom Seek Bar

I am trying to draw a custom seekbar. Below is the screenshot what i want to achieve.enter image description here

I have completed the seekbar, but the only problem is the thumb of the seekbar. Following is the code of the thumb of my seekbar.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:thickness="4dp"
    android:useLevel="false"
    android:tint="#22B7FF">
    <solid
        android:color="#22B7FF" />
    <size
        android:width="32dp"
        android:height="130dp" />

</shape>

I know how to draw vertical line I want to draw the complete thumb in the drawable xml itself and not use view tag I don't understand how to draw vertical line at the exact center of the thumb. Any help would be appreciated

Upvotes: 1

Views: 866

Answers (1)

Mohit
Mohit

Reputation: 144

Code for your Thumb. Edit the height and top bottom spaces of this accordingly :

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- This is the main color -->

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="#22B7FF" />
            <size
                android:width="10dp"
                android:height="20dp" />
        </shape>
    </item>

    <item
        android:bottom="7dp"
        android:left="4.5dp"
        android:right="4.5dp"
        android:top="7dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black" />

            <size
                android:width="1dp"
                android:height="4dp" />

        </shape>
    </item>

    <item
        android:bottom="7dp"
        android:left="2.5dp"
        android:right="6.5dp"
        android:top="7dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black" />

            <size
                android:width="1dp"
                android:height="4dp" />

        </shape>
    </item>


    <item
        android:bottom="7dp"
        android:left="6.5dp"
        android:right="2.5dp"
        android:top="7dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black" />

            <size
                android:width="1dp"
                android:height="4dp" />

        </shape>
    </item>


</layer-list>

Upvotes: 2

Related Questions