Awesome

FaceOffToggleButton

Toggle button which shows a happy face for checked or unhappy for unchecked.

Recently, I spent some time to finish a cute toggle button and after that, I found a toggle button design with a happy or unhappy face to show the checked status. Check here for the IOS version and here for the design in Dribbble. Since I have made a similar one, so I just change some codes to create the new FaceOffToggleButton(FOTB). This document is a quite simple one and for more information, please check JellyToggleButton.

Guide

1. 中文文档
2. Gradle
3. Demo
4. Usage Guide
   1. Background Color
   2. Left & Right Background Color
   3. Left & Right Face Color
   4. Left & Right Eye Color
   5. Left & Right Mouth Color
   6. Set Checked and Toggle
   7. Listener
   8. Duration
   9. Draggable
   10. Color Change Type
   11. Dimension
   12. Other Method
5. Todo
6. Versions
7. License

Gradle

dependencies {
    compile 'com.nightonke:faceofftogglebutton:1.0.0'
}

Demo

Try demo:

1. On Github
2. On Fir

Usage Guide

Background Color

Notice that the background color here is totally different from the background color of a veiw. Try to set background color with the following method or check the source code and you will figure out why.

setBackgroundColor(int mBackgroundColor)

app:foBackgroundColor="@color/white"

Left & Right Background Color

The color of background when the face is on the end-of-left and end-of-right.

setLeftBackgroundColor(int mLeftBackgroundColor)
setRightBackgroundColor(int mRightBackgroundColor)

app:foLeftBackgroundColor="@color/gray"
app:foRightBackgroundColor="@color/blue"

Left & Right Face Color

The color of face when it is on the end-of-left and end-of-right.

setLeftFaceColor(int mLeftFaceColor)
setRightFaceColor(int mRightFaceColor)

app:foLeftFaceColor="@color/white"
app:foRightFaceColor="@color/white"

Left & Right Eye Color

FOTB has beautiful eyes.

setLeftEyeColor(int mLeftEyeColor)
setRightEyeColor(int mRightEyeColor)

app:foLeftEyeColor="@color/gray"
app:foRightEyeColor="@color/blue"

Left & Right Mouth Color

setLeftMouthColor(int mLeftMouthColor)
setRightMouthColor(int mRightMouthColor)

app:foLeftMouthColor="@color/gray"
app:foRightMouthColor="@color/blue"

Set Checked and Toggle

Listener

fotb0.setOnStateChangeListener(new FaceOffToggleButton.OnStateChangeListener() {
    @Override
    public void onStateChange(float process, State state, FaceOffToggleButton fotb) {
        // 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
        // fotb     - the FOTB
    }
});

Duration

setDuration(int duration)

app:foDuration="1000"

Draggable

setDraggable(boolean draggable)

app:foDraggable="false"

Color Change Type

For information, please check here.

setColorChangeType(ColorChangeType mColorChangeType)

app:foColorChangeType="hsv"

Dimension

// Radius of face, in pixel.
setFaceRadius(float mFaceRadius)

// The ratio for width to face radius, in float.
setWidthRadiusRatio(float mWidthRadiusRatio)

// The margin between face and background, in pixel.
setFaceMargin(float mFaceMargin)

app:foFaceRadius="15dp"
app:foWidthRadiusRatio="2.5"
app:foFaceMargin="1dp"

Other Method

The ratio for distance of finger movement to distance of face movement.

setTouchMoveRatioValue(float ratio)

app:foTouchMoveRatioValue="2"

Whether call listener when face moves to same state as last.

setMoveToSameStateCallListener(boolean callListener)

app:foMoveToSameStateCallListener="false"

Todo

1. Ease out back effect of the eyes and mouth.
2. More emoji.

Version

1.0.0

The first version.

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.