Home

Awesome

JellyToggleButton

WoWoViewPager BoomMenu CoCoin BlurLockView LeeCo GithubWidget JellyToggleButton FaceOffToggleButton

JellyToggleButton
JellyToggleButton(JTB) is a cute toggle button with 18 jelly types and 30 ease types.
You can also define your own style and have your JTB custom-made.
Maybe the gif above can not show how cute JTB is. You can click to see the video of JTB below.
JellyToggleButton

Guide

  1. 中文文档
  2. Note
  3. Gradle
  4. Demo
  5. Use Guide
    1. 18 Jellys
    2. Define Your Jelly
    3. Ease Types
    4. SetCheck Methods
    5. Colors
    6. ColorChangeType
    7. Fonts
    8. Duration
    9. Text, Text Size and Margins
    10. Draggable
    11. Listener
    12. Other Methods
  6. Versions
  7. Todo
  8. License

Note

  1. Code inspired from SwitchButton

Gradle

dependencies {
    ...
    compile 'com.nightonke:jellytogglebutton:1.0.2'
    ...
}

Demo

Demo
Try the demo above to see how cute JTB is. Download the apk from:

  1. Github
  2. http://fir.im/jellytogglebutton

Qrcode

Use Guide

  1. 18 Jellys
  2. Define Your Jelly
  3. Ease Types
  4. SetCheck Methods
  5. Colors
  6. ColorChangeType
  7. Fonts
  8. Duration
  9. Text, Text Size and Margins
  10. Draggable
  11. Listener
  12. Other Methods

18 Jellys

JTB provides 18 kinds of jelly types to show different effects of thumb. You can use different jelly types in xml or by setJelly() method.
Use in xml:

<com.nightonke.jellytogglebutton.JellyToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:jtbJelly="itself"
    />

Use in setter:

jtb.setJelly(Jelly.ITSELF);
app:jtbJelly=""setJelly()Effect
itselfITSELF
lazy_tremble_head_fattyLAZY_TREMBLE_HEAD_FATTY
lazy_tremble_head_slim_jimLAZY_TREMBLE_HEAD_SLIM_JIM
lazy_tremble_tail_fattyLAZY_TREMBLE_TAIL_FATTY
lazy_tremble_tail_slim_jimLAZY_TREMBLE_TAIL_SLIM_JIM
lazy_tremble_body_fattyLAZY_TREMBLE_BODY_FATTY
lazy_tremble_body_slim_jimLAZY_TREMBLE_BODY_SLIM_JIM
lazy_stiff_fattyLAZY_STIFF_FATTY
lazy_stiff_slim_jimLAZY_STIFF_SLIM_JIM
active_tremble_head_fattyACTIVE_TREMBLE_HEAD_FATTY
active_tremble_head_slim_jimACTIVE_TREMBLE_HEAD_SLIM_JIM
active_tremble_tail_fattyACTIVE_TREMBLE_TAIL_FATTY
active_tremble_tail_slim_jimACTIVE_TREMBLE_TAIL_SLIM_JIM
active_tremble_body_fattyACTIVE_TREMBLE_BODY_FATTY
active_tremble_body_slim_jimACTIVE_TREMBLE_BODY_SLIM_JIM
active_stiff_fattyACTIVE_STIFF_FATTY
active_stiff_slim_jimACTIVE_STIFF_SLIM_JIM
randomRANDOMAll Above

Notice that random type will change the jelly among the other 17 types randomly.

Define Your Jelly

You can define you own jelly easily. But you need sometime to understand what happens in the source code of Jelly enum. All the jelly type are the sub types of JellyStyle.class.
To extend the abstract class, you have to override 3 methods:

public class MyJelly extends JellyStyle {

    @Override
    public void changeShape(PointWithHorizontalPoints p1, PointWithVerticalPoints p2, PointWithHorizontalPoints p3, PointWithVerticalPoints p4, float stretchDistance, float bezierControlValue, float bezierScaleRatioValue, float thumbRadius, float process, State state) {
        // Change the shape of the thumb.
        // Notice that we use 12 points to form 4 bezier lines to draw the thumb.
        // We can control the shape of the thumb by controling the 12 points.
    }

    @Override
    public void changeOffset(PointWithHorizontalPoints p1, PointWithVerticalPoints p2, PointWithHorizontalPoints p3, PointWithVerticalPoints p4, float totalLength, float extractLength, float process, State state, EaseType easeType) {
        // Change the offset of the thumb.
    }

    @Override
    public float extractLength(float stretchDistance, float bezierControlValue, float bezierScaleRatioValue, float thumbRadius) {
        // Return the extract length.
    }
}

After this, use setCustomJelly() to set your custom jelly. Notice that if you don't want to use the custom any more, you have to use removeCustomJelly() to reset.

Ease Types

Ease types are used to set the effect of movement of the thumb.
Ease
Of course you can use linear function. You can find all the ease enums here.
It's very convenient to use ease types in xml:

<com.nightonke.jellytogglebutton.JellyToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:jtbEaseType="ease_in_out_circ"
    />

Or use setter:

jtb.setEaseType(EaseType.EaseInOutCirc);

Check all the ease types below.

app:jtbEaseType=""setEaseType()
ease_in_sineEaseType.EaseInSine
ease_out_sineEaseType.EaseOutSine
ease_in_out_sineEaseType.EaseInOutSine
ease_in_quadEaseType.EaseInQuad
ease_out_quadEaseType.EaseOutQuad
ease_in_out_quadEaseType.EaseInOutQuad
ease_in_cubicEaseType.EaseInCubic
ease_out_cubicEaseType.EaseOutCubic
ease_in_out_cubicEaseType.EaseInOutCubic
ease_in_quartEaseType.EaseInQuart
ease_out_quartEaseType.EaseOutQuart
ease_in_out_quartEaseType.EaseInOutQuart
ease_in_quintEaseType.EaseInQuint
ease_out_quintEaseType.EaseOutQuint
ease_in_out_quintEaseType.EaseInOutQuint
ease_in_expoEaseType.EaseInExpo
ease_out_expoEaseType.EaseOutExpo
ease_in_out_expoEaseType.EaseInOutExpo
ease_in_circEaseType.EaseInCirc
ease_out_circEaseType.EaseOutCirc
ease_in_out_circEaseType.EaseInOutCirc
ease_in_backEaseType.EaseInBack
ease_out_backEaseType.EaseOutBack
ease_in_out_backEaseType.EaseInOutBack
ease_in_elasticEaseType.EaseInElastic
ease_out_elasticEaseType.EaseOutElastic
ease_in_out_elasticEaseType.EaseInOutElastic
ease_in_bounceEaseType.EaseInBounce
ease_out_bounceEaseType.EaseOutBounce
ease_in_out_bounceEaseType.EaseInOutBounce
linearEaseType.Linear

SetCheck Methods

You can control the state of the JTB of the following methods:
(When the thumb is to the end of right, we say the JTB is checked)

  1. isChecked() Whether the JTB is checked.
  2. setChecked(boolean checked) Set the JTB to checked or not with animation. If the listener has been set, it will be called.
  3. setChecked(boolean checked, boolean callListener) Same as above, but you can choose whether call the listener(if not null).
  4. setCheckedImmediately(boolean checked) Set the JTB to checked or not immediately without animation. This method will call the listener if it's not null.
  5. setCheckedImmediately(boolean checked, boolean callListener) Same as above, and you can choose whether call the listener.
  6. toggle() Change the JTB to another state and call the listener.
  7. toggle(boolean callListener) Same as above and you can choose whether call the listener.
  8. toggleImmediately() Toggle, without animation and call the listener.
  9. toggleImmediately(boolean callListener) Toggle, without animation and you can choose not to call the listener.

Colors

Let's make the JTB colorful.

Color

Left Background Color

Change the background color when the thumb is to the end of left with:

  1. setLeftBackgroundColor(int color)
  2. setLeftBackgroundColor(String color)
  3. ```setLeftBackgroundColorRes(int res)``

Right Background Color

Change the background color when the thumb is to the end of right with:

  1. setRightBackgroundColor(int color)
  2. setRightBackgroundColor(String color)
  3. setRightBackgroundColorRes(int res)

Both Left and Right Background Color

Change left and right background color with:

  1. setBackgroundColor(int color)
  2. setBackgroundColor(String color)
  3. setBackgroundColorRes(int res)

Left Thumb Color

Change the thumb color when the thumb is to the end of left with:

  1. setLeftThumbColor(int color)
  2. setLeftThumbColor(String color)
  3. setLeftThumbColorRes(int res)

Right Thumb Color

Change the thumb color when the thumb is to the end of right with:

  1. setRightThumbColor(int color)
  2. setRightThumbColor(String color)
  3. setRightThumbColorRes(int res)

Both Left and Right Thumb Color

Change left and right thumb color with:

  1. setThumbColor(int color)
  2. setThumbColor(String color)
  3. setThumbColorRes(int res)

Left Text Color

Change the left text color with:

  1. setLeftTextColor(int color)
  2. setLeftTextColor(String color)
  3. setLeftTextColorRes(int res)

Right Text Color

Change the right text color with:

  1. setRightTextColor(int color)
  2. setRightTextColor(String color)
  3. setRightTextColorRes(int res)

Both Left and Right Text Color

Change left and right text color with:

  1. setTextColor(int color)
  2. setTextColor(String color)
  3. setTextColorRes(int res)

Or set colors in xml:

<com.nightonke.jellytogglebutton.JellyToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:jtbLeftBackgroundColor="@android:color/black"
    app:jtbRightBackgroundColor="@android:color/white"
    app:jtbLeftThumbColor="@android:color/white"
    app:jtbRightThumbColor="@android:color/black"
    app:jtbLeftTextColor="@android:color/black"
    app:jtbRightTextColor="@android:color/white"
    />

ColorChangeType

There are 2 types to perform the color changing. Use setColorChangeType(ColorChangeType colorChangeType) to select ColorChangeType.RGB or ColorChangeType.HSV or set it in xml:

<com.nightonke.jellytogglebutton.JellyToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:jtbColorChangeType="hsv"
    />

For more information, check here.

Fonts

Use setLeftTextTypeface(Typeface typeface) and setLeftTextTypeface(String typefaceString) to set the typeface of the left text. Notice that the typefaceString is in the assets directory. Similarly, use setRightTextTypeface(Typeface typeface) and setRightTextTypeface(String typefaceString) to set the typeface of the right text.
Or in xml:

<com.nightonke.jellytogglebutton.JellyToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:jtbLeftTextTypeface="fonts/Lato-Hairline.ttf"
    app:jtbRightTextTypeface="fonts/Lato-Hairline.ttf"
    />

Duration

Use setDuration(int duration) to set the duration when the thumb is animating(in ms). The default value is 1000(ms).
Or in xml:

<com.nightonke.jellytogglebutton.JellyToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:jtbDuration="1000"
    />

Text, Text Size and Margins

  1. Use setLeftText(String text) , setLeftTextRes(int res) , setRightText(String text) , setRightTextRes(int res) , setText(String leftText, String rightText) and setTextRes(int leftRes, int rightRes) to set the text.
  2. Use setTextSize(int textSize) and setTextSizeRes(int res) to set the text size.
  3. Use setTextMarginLeft(float margin) and setTextMarginLeftRes(int res) to set the margin between the left text and the left-end of background.
  4. Use setTextMarginRight(float margin) and setTextMarginRightRes(int res) to set the margin between the right text and the right-end of background.
  5. Use setTextMarginTop(float margin) and setTextMarginTopRes(int res) to set the margin between the text and the top of background.
  6. Use setTextMarginBottom(float margin) and setTextMarginBottomRes(int res) to set the margin between the text and the bottom of background.
  7. Use setTextMarginCenter(float margin) and setTextMarginCenterRes(int res) to set the margin between the left text and the right text.

Or in xml:

<com.nightonke.jellytogglebutton.JellyToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:jtbLeftText="Male"
    app:jtbRightText="Female"
    app:jtbLeftTextSize="12sp"
    app:jtbRightTextSize="12sp"
    app:jtbTextMarginLeft="2dp"
    app:jtbTextMarginRight="2dp"
    app:jtbTextMarginBottom="2dp"
    app:jtbTextMarginTop="2dp"
    app:jtbTextMarginCenter="4dp"
    />

Draggable

If you want to forbid user to drag the JTB, just call setDraggable(boolean draggable) to false.
Or in xml:

<com.nightonke.jellytogglebutton.JellyToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:jtbDraggable="false"
    />

Listener

JTB use OnStateChangeListener to detech all the events of itself.

jtb.setOnStateChangeListener(new JellyToggleButton.OnStateChangeListener() {
    @Override
    public void onStateChange(float process, State state, JellyToggleButton jtb) {
        // process - current process of JTB, between [0, 1]
        // state   - current state of JTB, it is one of State.LEFT, State.LEFT_TO_RIGHT, State.RIGHT and State.RIGHT_TO_LEFT
        // jtb     - the JTB
    }
});

For example, if you want to detech when JTB is open or close(open means the thumb moves to the end of right):

@Override
public void onStateChange(float process, State state, JellyToggleButton jbt) {
    if (state.equals(State.LEFT)) {
        if (lastToast != null) lastToast.cancel();
        lastToast = Toast.makeText(this, "Left!", Toast.LENGTH_SHORT);
        lastToast.show();
    }
    if (state.equals(State.RIGHT)) {
        if (lastToast != null) lastToast.cancel();
        lastToast = Toast.makeText(this, "Right!", Toast.LENGTH_SHORT);
        lastToast.show();
    }
}

When the thumb is move to same state, for instance, you drag the thumb just a little bit and then let it go and the thumb will smoothly move to it's last state(left or right). You can use setMoveToSameStateCallListener(boolean callListener) to select whether call listener when the above situation happens.
Or in xml:

<com.nightonke.jellytogglebutton.JellyToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:jtbMoveToSameStateCallListener="true"
    />

Other Methods

There are some methods to modify some useless values. You can use them to fine-tone the JTB.

  1. setTouchMoveRatioValue(float ratio) Set the ratio of distance of dragging to distance of the thumb-movement.
  2. setBezierControlValue(float value) and setBezierControlValueRes(int res) Set the Bezier control value.
  3. setStretchDistanceRatioValue(float value) Set the ratio of thumb-radius to the stretch distance.
  4. setBezierScaleRatioValue(float value) and setBezierScaleRatioValueRes(int res) Set the Bezier scale control value.

Versions

Jelly 1.0.1

Test Version.

Jelly 1.0.2

First Version.

Todo

Todo list is in my todo list.

License

Copyright 2016 Nightonke

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.