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.
dependencies {
compile 'com.nightonke:faceofftogglebutton:1.0.0'
}
Try demo:
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"
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"
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"
FOTB has beautiful eyes.
setLeftEyeColor(int mLeftEyeColor)
setRightEyeColor(int mRightEyeColor)
app:foLeftEyeColor="@color/gray"
app:foRightEyeColor="@color/blue"
setLeftMouthColor(int mLeftMouthColor)
setRightMouthColor(int mRightMouthColor)
app:foLeftMouthColor="@color/gray"
app:foRightMouthColor="@color/blue"
| 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 |
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
}
});
setDuration(int duration)
app:foDuration="1000"
setDraggable(boolean draggable)
app:foDraggable="false"
For information, please check here.
setColorChangeType(ColorChangeType mColorChangeType)
app:foColorChangeType="hsv"
// 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"
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"
- Ease out back effect of the eyes and mouth.
- More emoji.
The first version.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent