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
Gradle
dependencies {
compile 'com.nightonke:faceofftogglebutton:1.0.0'
}
Demo
Try demo:
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
| Method | With Animation | With Listener |
|---|---|---|
setChecked(boolean checked) |
Y | Y |
setChecked(boolean checked, boolean callListener) |
Y | Y/N |
setCheckedImmediately(boolean checked) |
N | Y |
setCheckedImmediately(boolean checked, boolean callListener) |
N | Y/N |
toggle() |
Y | Y |
toggle(boolean callListener) |
Y | Y/N |
toggleImmediately() |
N | Y |
toggleImmediately(boolean callListener) |
N | Y/N |
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
- Ease out back effect of the eyes and mouth.
- 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.