Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing rounded edges of a customized Seekbar?

I'm trying to customize a seekbar. I have this mostly working, but I am not able to remove the rounded edges of this seekbar. I know there are many questions regarding this, and that applying corners 0dp will help, but I don't know where to implement this shape. When I try to display the shape, it's getting sharp edges but my background is not showing, it's showing a black rectangular shape. I want to have sharp edges with my background.

enter image description here

seekbarprogrss.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">
        <bitmap
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:tileMode="repeat"
            android:antialias="true"
            android:dither="false"
            android:filter="false"
            android:gravity="left"
            android:src="@drawable/cover_back" />
    </item>
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/seek_progress_bg"/>

</layer-list>

seek_progress_bg.xml

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

    <item>
        <clip>
        <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
            android:src="@drawable/cover_front"
            android:tileMode="repeat"
            android:antialias="true"
            android:dither="false"
            android:filter="false"
            android:gravity="left"
        />
        </clip>
    </item>

</layer-list>

Seekbar implementation

 <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/button2"
        android:progress="0"
        android:secondaryProgress="0"
        android:padding="0dp"
        android:thumbOffset="0dp"
        android:progressDrawable="@drawable/seekbarprogrss"
        android:thumb="@drawable/cover"
like image 990
Sreedev Avatar asked Apr 04 '13 06:04

Sreedev


1 Answers

SeekBar Customization

First You Create a Custom Class For mSeekbar.java

public class mSeekbar extends SeekBar{
    public seekBar (Context context) {
        super(context);
        Initialise();
    }
    public seekBar (Context context, AttributeSet attrs) {
        super(context, attrs);
        Initialise();
    }
    public seekBar (Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        Initialise();
    }
    private void Initialise(){
       this.setBackgroundDrawable(getResources().getDrawable(R.drawable.shape));
       this.setProgressDrawable(getResources().getDrawable(R.drawable.seek_bar_base));
    }
}

then, add this part to your xml

<"packageName".seekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:thumb="@drawable/red_front"
        android:padding="0dp"
        android:progress="0"
        android:indeterminate="false"
        android:secondaryProgress="0"
        android:thumbOffset="0dp"/>

Use these Drawables

seek_bar_base.xml

<layer-list 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
        android:id="@android:id/background">
        <bitmap 
            android:src="@drawable/gray_back"
            android:tileMode="repeat">
        </bitmap>
    </item>
    <item 
        android:id="@android:id/progress">
        <layer-list 
            xmlns:android="http://schemas.android.com/apk/res/android" >
            <item>
                <clip >
                    <bitmap 
                        xmlns:android="http://schemas.android.com/apk/res/android"
                        android:src="@drawable/gray_front"
                        android:tileMode="repeat"/>
                </clip>
            </item>
        </layer-list>
    </item>
</layer-list>

shape.xml

 <shape 
        xmlns:android="http://schemas.android.com/apk/res/android" >
        <corners android:radius="0dp"/>
    </shape>

Images used,

enter image description here gray_back.jpg

enter image description here gray_front.jpg

enter image description here red_front.jpg

like image 159
Sino Raj Avatar answered Oct 19 '22 20:10

Sino Raj