https://github.com/frogobox/frogo-ui
Frogo UI - Frogo UI Guideline
https://github.com/frogobox/frogo-ui
android-ui-library desktop-ui-library frogo-sdk frogo-ui ui-library
Last synced: about 1 year ago
JSON representation
Frogo UI - Frogo UI Guideline
- Host: GitHub
- URL: https://github.com/frogobox/frogo-ui
- Owner: frogobox
- License: apache-2.0
- Created: 2022-02-26T16:11:46.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-18T06:46:18.000Z (over 1 year ago)
- Last Synced: 2024-11-18T07:42:04.530Z (over 1 year ago)
- Topics: android-ui-library, desktop-ui-library, frogo-sdk, frogo-ui, ui-library
- Language: Kotlin
- Homepage: https://frogobox.github.io/frogo-ui/
- Size: 4.4 MB
- Stars: 21
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README

## DEPRECATED
- Reason Deprecated, Merge library become single library
- Please Using This : [deltadox-android](https://github.com/deltadox/deltadox-android)
##

## About This Project (release 👷🔧️👷♀️⛏)
[](https://jitpack.io/#frogobox/frogo-ui)
[](https://github.com/frogobox/frogo-ui/actions/workflows/android-ci.yml)
[](https://github.com/frogobox/frogo-ui/actions/workflows/detekt-analysis.yml)
[](https://github.com/frogobox/frogo-ui/actions/workflows/pages/pages-build-deployment)
- UI Kit for helping you in apps development
- Avaiable for android and desktop
- Follow-up project from [frogo-ui-kit](https://github.com/amirisback/frogo-ui-kit)
- Privacy Policy [Click Here](https://github.com/frogobox/frogo-ui/blob/master/PRIVACY-POLICY.md)
- License [Click Here](https://github.com/frogobox/frogo-ui/blob/master/LICENSE)
## Screen Shoot
| UI KIT LIST | UI KIT GRID |
|:--------------------------------------------------------------------:|:--------------------------------------------------------------------:|
|
|
|
## Version Release
This Is Latest Release
$version_release = 2.0.5
What's New??
* Avaiable For Android And Desktop *
* Update to libs.versions.toml *
## 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)
#### Groovy Gradle
// Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
#### Kotlin DSL Gradle
```kotlin
// 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)
#### Groovy Gradle
```groovy
dependencies {
// library frogo-ui
implementation 'com.github.frogobox:frogo-ui:2.0.5'
// library frogo-ui for desktop
implementation 'com.github.frogobox.frogo-ui:core-ui:2.0.5'
}
```
#### Kotlin DSL Gradle
```groovy
dependencies {
// library frogo-ui
implementation("com.github.frogobox:frogo-ui:2.0.5")
// library frogo-ui for desktop
implementation("com.github.frogobox.frogo-ui:core-ui:2.0.5")
}
```
#### libs.versions.toml
```yml
[versions]
frogoui = "2.0.5"
[libraries]
frogo-ui = { group = "com.github.frogobox", name = "frogo-ui", version.ref = "frogoui" }
frogo-ui-core = { group = "com.github.frogobox.frogo-ui", name = "core-ui", version.ref = "frogoui" }
dependencies {
// library frogo-ui
implementation(libs.frogo.ui)
// library frogo-ui for desktop
implementation(libs.frogo.ui.core)
}
```
## Documentation
- Layouts
- RecyclerView List [Click Here](https://github.com/frogobox/frogo-android-ui-kit/blob/master/docs/recyclerview_list.md)
- RecyclerView Grid [Click Here](https://github.com/frogobox/frogo-android-ui-kit/blob/master/docs/recyclerview_grid.md)
- Drawables [Click Here](https://github.com/amirisback/frogo-ui-kit/wiki/Drawable)
- Dimens [Click Here](https://github.com/amirisback/frogo-ui-kit/wiki/Dimens)
- Colors [Click Here](https://github.com/amirisback/frogo-ui-kit/wiki/Colors)
- Strings [Click Here](https://github.com/amirisback/frogo-ui-kit/wiki/Strings)
- Styles [Click Here](https://github.com/amirisback/frogo-ui-kit/wiki/Styles)
## FrogoAnimation
### Easy Use Animation
```kotlin
FrogoAnimation().apply {
setAnimation(Bounce.In(binding.TextView))
setDuration(1500)
}.start()
```
### Repeated Infinite
```kotlin
FrogoAnimation().apply {
setAnimation(Attention.Ruberband(binding.TextView))
setRepeated()
setDuration(1500)
}.start()
```
### Repeated Count
```kotlin
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 name`setAnimation` 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
```xml
```
### Step 2. It's very simple use just like .
```kotlin
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 faisalamircs@gmail.com
- 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
