frogo-ui
frogo-ui copied to clipboard
Frogo UI - Frogo UI Guideline
About This Project (release 👷🔧️👷♀️⛏)
- UI Kit for helping you in apps development
- Avaiable for android and desktop
- Follow-up project from frogo-ui-kit
- Privacy Policy Click Here
- License Click Here
Screen Shoot
UI KIT LIST | UI KIT GRID |
---|---|
![]() |
![]() |
Version Release
This Is Latest Release
$version_release = 2.0.3
What's New??
* Avaiable For Android And Desktop *
Include Library
No. | Library Name | Docs |
---|---|---|
1. | FrogoAnimation | Click Here |
2. | FrogoLoadingIndicatorView | Click Here |
Download this project
Step 1. Add the JitPack repository to your build file (build.gradle : Project)
<Option 1> Groovy Gradle
// Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
<Option 2> Kotlin DSL Gradle
// Add it in your root build.gradle.kts at the end of repositories:
allprojects {
repositories {
...
maven("https://jitpack.io")
}
}
Step 2. Add the dependency (build.gradle : Module)
<Option 1> Groovy Gradle
dependencies {
// library frogo-ui
implementation 'com.github.frogobox:frogo-ui:2.0.3'
// library frogo-ui for desktop
implementation 'com.github.frogobox.frogo-ui:core-ui:2.0.3'
}
<Option 2> Kotlin DSL Gradle
dependencies {
// library frogo-ui
implementation("com.github.frogobox:frogo-ui:2.0.3")
// library frogo-ui for desktop
implementation("com.github.frogobox.frogo-ui:core-ui:2.0.3")
}
Documentation
- Layouts
- RecyclerView List Click Here
- RecyclerView Grid Click Here
- Drawables Click Here
- Dimens Click Here
- Colors Click Here
- Strings Click Here
- Styles Click Here
FrogoAnimation
Easy Use Animation
FrogoAnimation().apply {
setAnimation(Bounce.In(binding.TextView))
setDuration(1500)
}.start()
Repeated Infinite
FrogoAnimation().apply {
setAnimation(Attention.Ruberband(binding.TextView))
setRepeated()
setDuration(1500)
}.start()
Repeated Count
FrogoAnimation().apply {
setAnimation(Attention.Ruberband(binding.TextView))
setRepeated(20)
setDuration(1500)
}.start()
Animations
To animate the view, add the class name and specific animation method namesetAnimation
to an view. You can include the method setDuration
to specify duration of animation. Default value for duration
is 1000 Milliseconds
. Finally you need to add one of the following classes to the view:
Class Name | ||||||
---|---|---|---|---|---|---|
Attention |
Bounce |
Fade |
Flip |
Rotate |
Slide |
Zoom |
Attention
Attention |
|||
---|---|---|---|
Bounce |
![]() |
Flash |
![]() |
Pulse |
![]() |
Ruberband |
![]() |
Shake |
![]() |
Standup |
![]() |
Swing |
![]() |
Tada |
![]() |
Wave |
![]() |
Wobble |
![]() |
Bounce
Bounce |
|||
---|---|---|---|
InDown |
![]() |
InUp |
![]() |
InLeft |
![]() |
InRight |
![]() |
In |
![]() |
Fade
Fade |
|||
---|---|---|---|
InDown |
![]() |
InUp |
![]() |
InLeft |
![]() |
InRight |
![]() |
OutDown |
![]() |
OutUp |
![]() |
OutLeft |
![]() |
OutRight |
![]() |
In |
![]() |
Out |
![]() |
Flip
Flip |
|||
---|---|---|---|
InX |
![]() |
InY |
![]() |
OutX |
![]() |
OutY |
![]() |
Rotate
Rotate |
|||
---|---|---|---|
InDownLeft |
![]() |
InDownRight |
![]() |
InUpLeft |
![]() |
InUpRight |
![]() |
OutDownLeft |
![]() |
OutDownRight |
![]() |
OutUpLeft |
![]() |
OutUpRight |
![]() |
In |
![]() |
Out |
![]() |
Slide
Slide |
|||
---|---|---|---|
InDown |
![]() |
InUp |
![]() |
InLeft |
![]() |
InRight |
![]() |
OutDown |
![]() |
OutUp |
![]() |
OutLeft |
![]() |
OutRight |
![]() |
Zoom
Zoom |
|||
---|---|---|---|
InDown |
![]() |
InUp |
![]() |
InLeft |
![]() |
InRight |
![]() |
OutDown |
![]() |
OutUp |
![]() |
OutLeft |
![]() |
OutRight |
![]() |
In |
![]() |
Out |
![]() |
FrogoLoadingIndicatorView
Demo
Step 1. Add the FrogoLoadingIndicatorView to your layout:
Simple
<com.frogobox.loadingindicator.FrogoLoadingIndicatorView
android:id="@+id/indicator"
style="@style/FrogoLoadingIndicatorView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:indicatorName="BallPulseIndicator" // Indicator Name
app:indicatorColor="#FFFFFF"/>
Step 2. It's very simple use just like .
fun hideClick(view: View?) {
binding.fli.hide()
// or fli.smoothToHide();
}
fun showClick(view: View?) {
binding.fli.show()
// or fli.smoothToShow();
}
Indicators
As seen above in the Demo, the indicators are as follows:
Row 1
-
BallPulseIndicator
-
BallGridPulseIndicator
-
BallClipRotateIndicator
-
BallClipRotatePulseIndicator
Row 2
-
SquareSpinIndicator
-
BallClipRotateMultipleIndicator
-
BallPulseRiseIndicator
-
BallRotateIndicator
Row 3
-
CubeTransitionIndicator
-
BallZigZagIndicator
-
BallZigZagDeflectIndicator
-
BallTrianglePathIndicator
Row 4
-
BallScaleIndicator
-
LineScaleIndicator
-
LineScalePartyIndicator
-
BallScaleMultipleIndicator
Row 5
-
BallPulseSyncIndicator
-
BallBeatIndicator
-
LineScalePulseOutIndicator
-
LineScalePulseOutRapidIndicator
Row 6
-
BallScaleRippleIndicator
-
BallScaleRippleMultipleIndicator
-
BallSpinFadeLoaderIndicator
-
LineSpinFadeLoaderIndicator
Row 7
-
TriangleSkewSpinIndicator
-
PacmanIndicator
-
BallGridBeatIndicator
-
SemiCircleSpinIndicator
Colaborator
Very open to anyone, I'll write your name under this, please contribute by sending an email to me
- Mail To [email protected]
- Subject : Github _ [Github-Username-Account] _ [Language] _ [Repository-Name]
- Example : Github_amirisback_kotlin_admob-helper-implementation
Name Of Contribute
- Muhammad Faisal Amir
- Waiting List
- Waiting List
Waiting for your contribute
Attention !!!
- Please enjoy and don't forget fork and give a star
- Don't Forget Follow My Github Account