An open API service indexing awesome lists of open source software.

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

Awesome Lists containing this project

README

          

![ScreenShoot Apps](https://raw.githubusercontent.com/amirisback/amirisback/master/docs/image/deprecated.png?raw=true)
## DEPRECATED
- Reason Deprecated, Merge library become single library
- Please Using This : [deltadox-android](https://github.com/deltadox/deltadox-android)
##

![ScreenShoot Apps](https://raw.githubusercontent.com/frogobox/frogo-ui/master/docs/image/ss_banner.png?raw=true)

## About This Project (release 👷🔧️👷‍♀️⛏)
[![](https://jitpack.io/v/frogobox/frogo-ui.svg?style=flat-square)](https://jitpack.io/#frogobox/frogo-ui)
[![Android CI](https://github.com/frogobox/frogo-ui/actions/workflows/android-ci.yml/badge.svg)](https://github.com/frogobox/frogo-ui/actions/workflows/android-ci.yml)
[![Scan with Detekt](https://github.com/frogobox/frogo-ui/actions/workflows/detekt-analysis.yml/badge.svg)](https://github.com/frogobox/frogo-ui/actions/workflows/detekt-analysis.yml)
[![pages-build-deployment](https://github.com/frogobox/frogo-ui/actions/workflows/pages/pages-build-deployment/badge.svg)](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` | portfolio_view | `Flash` | portfolio_view |
| `Pulse` | portfolio_view | `Ruberband` | portfolio_view |
| `Shake` | portfolio_view | `Standup` | portfolio_view |
| `Swing` | portfolio_view | `Tada` | portfolio_view |
| `Wave` | portfolio_view | `Wobble` | portfolio_view |

### Bounce

| `Bounce` | | | |
|-----------|------------------------------------------------------------------------------------------------------------------------------------------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------|
| `InDown` | portfolio_view | `InUp` | portfolio_view |
| `InLeft` | portfolio_view | `InRight` | portfolio_view |
| `In` | portfolio_view | | |

### Fade

| `Fade` | | | |
|-----------|-----------------------------------------------------------------------------------------------------------------------------------------|------------|------------------------------------------------------------------------------------------------------------------------------------------|
| `InDown` | portfolio_view | `InUp` | portfolio_view |
| `InLeft` | portfolio_view | `InRight` | portfolio_view |
| `OutDown` | portfolio_view | `OutUp` | portfolio_view |
| `OutLeft` | portfolio_view | `OutRight` | portfolio_view |
| `In` | portfolio_view | `Out` | portfolio_view |

### Flip

| `Flip` | | | |
|--------|--------------------------------------------------------------------------------------------------------------------------------------|--------|--------------------------------------------------------------------------------------------------------------------------------------|
| `InX` | portfolio_view | `InY` | portfolio_view |
| `OutX` | portfolio_view | `OutY` | portfolio_view |

### Rotate

| `Rotate` | | | |
|---------------|------------------------------------------------------------------------------------------------------------------------------------------------|----------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
| `InDownLeft` | portfolio_view | `InDownRight` | portfolio_view |
| `InUpLeft` | portfolio_view | `InUpRight` | portfolio_view |
| `OutDownLeft` | portfolio_view | `OutDownRight` | portfolio_view |
| `OutUpLeft` | portfolio_view | `OutUpRight` | portfolio_view |
| `In` | portfolio_view | `Out` | portfolio_view |

### Slide

| `Slide` | | | |
|-----------|------------------------------------------------------------------------------------------------------------------------------------------|------------|-------------------------------------------------------------------------------------------------------------------------------------------|
| `InDown` | portfolio_view | `InUp` | portfolio_view |
| `InLeft` | portfolio_view | `InRight` | portfolio_view |
| `OutDown` | portfolio_view | `OutUp` | portfolio_view |
| `OutLeft` | portfolio_view | `OutRight` | portfolio_view |

### Zoom

| `Zoom` | | | |
|-----------|-----------------------------------------------------------------------------------------------------------------------------------------|------------|------------------------------------------------------------------------------------------------------------------------------------------|
| `InDown` | portfolio_view | `InUp` | portfolio_view |
| `InLeft` | portfolio_view | `InRight` | portfolio_view |
| `OutDown` | portfolio_view | `OutUp` | portfolio_view |
| `OutLeft` | portfolio_view | `OutRight` | portfolio_view |
| `In` | portfolio_view | `Out` | portfolio_view |

## FrogoLoadingIndicatorView

### Demo
![avi](docs/image/demo_apps.gif?raw=true)

### 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

![ScreenShoot Apps](docs/image/mad_score.png?raw=true)