Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Customize seekbar in android

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.06k
    Comment on it

    If you want to customize seekbar in Android then follow the steps mentioned below:-

    1) To customize seekbar background create a new xml file in your project's drawable folder .

    seekbar_background.xml

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

    2) To customize seekbar progress create a new xml file in your project's drawable folder .

    seekbar_progress.xml

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

    3) Now create a new xml file in your project's drawable folder name it custom_seekbar.xml.

    custom_seekbar.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_progress" />
        </item>
    
    </layer-list>
    

    4) Now to customize seekbar thumb create another xml file in your project's drawable folder.

    custom_seekbar_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="45"
            android:gradientRadius="20mm"
            android:endColor="#7FBD5C"
            android:startColor="#7FBD5C"
            />
    
        <size
            android:height="0dp"
            android:width="0dp" />
    
    </shape>
    

    5) Now impliment these custom xml file in seekbar tag.

    <SeekBar
                android:id="@+id/CapacitySeekBar"
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:layout_marginLeft="17dp"
                android:layout_marginRight="17dp"
                android:layout_marginBottom="10dp"
                android:thumb="@drawable/custom_seekbar_thumb"
                android:progress="2"
                android:progressDrawable="@drawable/custom_seekbar"
                android:enabled="false"
                android:max="5"/>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: