12/08/2018, 15:56

Android Switch Icon and Double sided seekbar

This a library that simplifies switch icons and is compatible from API 15 (Android 4.0.3).. Follow this easy tutorial to implement. Add it in your root build.gradle at the end of repositories allprojects { repositories { ... maven { url "https://jitpack.io" } ...

This a library that simplifies switch icons and is compatible from API 15 (Android 4.0.3).. Follow this easy tutorial to implement.

  1. Add it in your root build.gradle at the end of repositories
allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}
  1. Add the dependency to gradle compile 'com.github.zagum:Android-SwitchIcon:1.3.5'

  2. Thats it! SwitchIconView extends from AppCompatImageView so you can set icon with app:srcCompat, you can set any icon (vector or image) to SwitchIconView and enjoy switchable icon in your application. Below are some of the properties you can set in the xml.

Declaration Description Default
app:si_tint_color set color of icon Default color is black
app:si_disabled_color set color when icon disabled Default color is equals with app:si_tint_color
app:si_disabled_alpha set alpha when icon disabled Default alpha is .5
app:si_no_dash if you don't want to draw dash Default is drawn dash
app:si_animation_duration change switching state animation duration Default unset
app:si_enabled set initial icon state Default is enabled

A fully xml implementation is shown below

<com.github.zagum.switchicon.SwitchIconView
    android:layout_awidth="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"
    app:si_animation_duration="500"
    app:si_disabled_alpha=".3"
    app:si_disabled_color="#b7b7b7"
    app:si_tint_color="#ff3c00"
    app:si_enabled="false"
    app:si_no_dash="true"
    app:srcCompat="@drawable/ic_cloud"/>
    
    Some public method u can use onClickListener:
  public void setIconEnabled(boolean enabled);

  public void setIconEnabled(boolean enabled, boolean animate);

  public boolean isIconEnabled();

  public void switchState();

  public void switchState(boolean animate);

You can use like this:

SwitchIconView switchIconView = findViewById(R.id.swt_one);
switchIconView.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
    switchIconView.switchState();
  }
});

There are various libraries out there that can be used for double sided seekbar but finding the library with support of many properties is important. MultiSlider is one of such. Follow this guide to implement. Add to gradle compile 'io.apptik.widget:multislider:1.3'

Add the custom seekbar to your xml

    <io.apptik.widget.MultiSlider
        android:id="@+id/range_slider"
        android:layout_awidth="match_parent"
        android:layout_height="wrap_content"
        app:thumbNumber="2"
        app:stepsThumbsApart="5"
        app:drawThumbsApart="true"
   />

Add this code to your Activity/Fragment MultiSlider multiSlider = (MultiSlider)v.findViewById(R.id.range_slider);

multiSlider.setOnThumbValueChangeListener(new MultiSlider.OnThumbValueChangeListener() {
    @Override
    public void onValueChanged(MultiSlider multiSlider, MultiSlider.Thumb thumb, int thumbIndex, int value) {
    //Since we have only two slider, we can identify each by thier corresponding index.
        if (thumbIndex == 0) {
        //first slider
            doSmth(String.valueOf(value));
        } else {
        //second slider
            doSmthElse(String.valueOf(value));
        }
    }
});

NOTE: the number of thumbs can be from 0 to any. Default is two and you can add more thumbs using app:thumbNumber="number of thumbs". If you require more u can add and referrence by the thumbIndex. Below are list of customizable features:

  • View Dimensions
    
  • Number of thumbs, from 0 to any. Default is 2
    
  • Thumb offset. default is half the thumb awidth
    
  • Track drawable
    
  • Global Range drawable
    
  • Separate Range drawables for each thumb
    
  • Global Thumb drawable (supporting selector drawable)
    
  • Separate Thumbs drawables (via XML thumb 1 and 2 can be specified, via code all)
    
  • Global Min and Max scale limits
    
  • Specific Min and Max limits for each thumb
    
  • Values for thumbs (via XML thumb 1 and 2 can be specified, via code all)
    
  • Scale step
    
  • Option to draw thumbs apart, in order to be easier to select thumbs with the same or similar value
    
  • Option to keep thumbs apart a specific number of steps in order not to allow thumbs to have same or similar values
0