CODEWITHSUNDEEP
androidseekbar
Jenya Kirmiza
Jenya Kirmiza

Reputation: 531

Custom SeekBar set thumb and progressDrawable

I'm implementing custom SeekBar, because i need to use different progressDrawable and Thumb. I have a folder in assets with all images for thumb and progreeDrawable and i'm trying to load this images to the seekbar. I did the same trick with ImageView, the problem was when i used not images but xml files. So i decided it by using StateList:

ics_play.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_activated="false"
        android:state_pressed="false"
        android:drawable="@drawable/ico_in_circle_play"/>
    <item
        android:state_activated="true"
        android:state_pressed="false"
        android:drawable="@drawable/ico_in_circle_pause" />
    <item
        android:state_activated="false"
        android:state_pressed="true"
        android:drawable="@drawable/ico_in_circle_play_hover"/>
    <item
        android:state_activated="true"
        android:state_pressed="true"
        android:drawable="@drawable/ico_in_circle_pause_hover" />
</selector>

Custom StateListDrawable:

public class CustomStateDrawable extends StateListDrawable {

    private final static String TAG = "LirisStateDrawable";
    public boolean inflate(AssetManager assetManager,String theme, String tag){

        Drawable d = null;
        Drawable d1 = null;
        Drawable d2 = null;
        Drawable d3 = null;

        try {
            d = Drawable.createFromStream(assetManager.open("liris_themes/"+theme+"/"+tag+"_f_f.png"), null);
            d1 = Drawable.createFromStream(assetManager.open("liris_themes/"+theme+"/"+tag+"_t_f.png"), null);
            d2 = Drawable.createFromStream(assetManager.open("liris_themes/"+theme+"/"+tag+"_f_t.png"), null);
            d3 = Drawable.createFromStream(assetManager.open("liris_themes/"+theme+"/"+tag+"_t_t.png"), null);
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }

        addState(new int[]{-android.R.attr.state_activated,-android.R.attr.state_pressed}, d);
        addState(new int[]{android.R.attr.state_activated,-android.R.attr.state_pressed },  d1);
        addState(new int[]{-android.R.attr.state_activated,android.R.attr.state_pressed },  d2);
        addState(new int[]{android.R.attr.state_activated,android.R.attr.state_pressed },  d3);

        return true;
    }
}

then i inflated it in my custom ImageView

stateListDrawable.inflate(getResources().getAssets(),theme,tag)

it worked fine. But now, how can i implement it for seekbar?

I'm setting seekbar progress drawable with xml file:

<?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/rounded_corners_seekbar_transparent"/>
    <!--<item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="@drawable/rounded_corners_seekbar_transparent"
            android:scaleWidth="100%" />
    </item>-->
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/rounded_corners_seekbar_player"
            android:scaleWidth="100%" />
    </item>

</layer-list>

How should i use StateListDrawable in this case if i have "id" attribute?:

addState(new int[]{android.R.attr.id????}, d);

When i used imageView it was a selector in xml file, not it's a layer-list.

SOLUTION

I needed to use LayerDrawable for seek-bar

Upvotes: 0

Views: 5495

Answers (1)

sandeepmaaram
sandeepmaaram

Reputation: 4241

By xml:-

 <SeekBar
                android:id="@+id/wb_seekbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:progressDrawable="@drawable/wb_apptheme_scrubber_progress_horizontal_holo_light"
                android:thumb="@drawable/wb_apptheme_scrubber_control_selector_holo_light" />

Change Drawables dynamically/programatically:

    //setting wb seekbar dynamically
    RelativeLayout.LayoutParams wbLayoutParams = (RelativeLayout.LayoutParams)wbSeekBar.getLayoutParams();
    wbLayoutParams.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);
    wbSeekBar.setProgressDrawable(getResources().getDrawable(R.drawable.wb_apptheme_scrubber_progress_horizontal_holo_light));
    Drawable wbThumb = getResources().getDrawable(R.drawable.wb_apptheme_scrubber_control_selector_holo_light);
    wbThumb.setBounds(new Rect(0, 0, wbThumb.getIntrinsicWidth(),wbThumb.getIntrinsicHeight()));
    wbSeekBar.setPadding(padding, 0, padding, 0);
    wbSeekBar.setLayoutParams(wbLayoutParams);
    wbSeekBar.setThumb(wbThumb);

Here we have nice resource Android Holo Colors Generator that will help to create elements with different colors much faster. Just select color and element by this Link

Upvotes: 1

Related Questions