Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/CRED-CLUB/neopop-android
NeoPop is CRED's inbuilt library for using NeoPop components in your app
https://github.com/CRED-CLUB/neopop-android
cred neopop
Last synced: 3 months ago
JSON representation
NeoPop is CRED's inbuilt library for using NeoPop components in your app
- Host: GitHub
- URL: https://github.com/CRED-CLUB/neopop-android
- Owner: CRED-CLUB
- License: apache-2.0
- Created: 2022-06-01T09:28:07.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-10T07:47:03.000Z (almost 2 years ago)
- Last Synced: 2024-01-17T02:24:51.870Z (5 months ago)
- Topics: cred, neopop
- Language: Kotlin
- Homepage:
- Size: 291 KB
- Stars: 275
- Watchers: 6
- Forks: 32
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-list - CRED-CLUB/neopop-android - NeoPop is CRED's inbuilt library for using NeoPop components in your app (Kotlin)
README
# NeoPOP
NeoPOP is CRED's inbuilt library for using NeoPOP components in your app.
### What really is NeoPOP?
[NeoPOP](https://cred.club/neopop) was created with one simple goal; to create the next generation of a beautiful, affirmative design system. NeoPOP stays true to everything that design at CRED stands for.
NeoPOP is built for Android, [iOS](https://github.com/CRED-CLUB/neopop-ios), [Flutter](https://github.com/CRED-CLUB/neopop-flutter) and [Web](https://github.com/CRED-CLUB/neopop-web)
## Install
You can install NeoPOP by adding these to your project:
1. Add this to your module `build.gradle` file:
```groovy
dependencies {
implementation 'club.cred:neopop:1.0.2'
}
```
2. Add this to the root/project `build.gradle` file:
```groovy
allprojects {
repositories {
google()
jcenter()
maven {
url = 'https://libs.dev.cred.club/'
}
}
}
```
# PopLayout
`PopFrameLayout` render 5 surfaces, top, left, right, bottom and center.
These surfaces can be customized in two ways:
## Elevated
By specifying the `button_position` as `bottom|right`, the layout computes bottom and right surface's color according to `neopop_center_surface_color` . It will also compute visibility of the surfaces according to `button_position`
```xml
```
## Flat
By specifying the `button_position` as `center`, the layout will compute right and bottom surface's color according to `neopop_center_surface_color`.
Top and left surface's color is computed w.r.t `neopop_parent_view_color` and `neopop_grandparent_view_color`
```xml
```
## Shimmer
```xml
```
## Flat Strokes
To render stroke on a flat button, add `neopop_stroke_color`
```xml
```
## Plunk Strokes
To render strokes on an elevated button ,add
`neopop_is_stroked_button = "true"` and `neopop_stroke_color`
```xml
```
## Adjacent Buttons
### Horizontally aligned buttons
```xml
...content
...content
```
### Vertically Aligned buttons
```xml
...content
...content
```
## PopLayout All configs
```xml
```
# TiltLayout
## Non Floating
```xml
```
## Floating
```xml
```
## Strokes
## Shimmer
```xml
```
## All button attributes
| Attribute | Description | Value |
|--|--|--|
|`app:neopop_depth`| depth of shadow | dimension |
|`app:neopop_top_surface_color` or `app:neopop_right_surface_color` or `app:neopop_bottom_surface_color` or `app:neopop_left_surface_olor`| shadow colors | color |
| `app:neopop_parent_view_color` | immediate ancestor's color | color |
| `app:neopop_grandparent_view_color` | 2nd level ancestor's color | color |
| `app:neopop_stroke_color` | layout's stroke colors | color |
| `app:neopop_surface_color` | card color | style resource |
| `app:neopop_is_top_surafce_visible` or `app:neopop_is_right_surface_visible` or `app:neopop_is_bottom_surface_visible` or `app:neopop_is_left_surface_visible`| shadow visibility | boolean |
| `app:neopop_button_position` | position of button in ref to parent view | `top`,`right`, `bottom`,`left`,`center` |
| `app:neopop_button_on_top` or `app:neopop_button_on_right` or `app:neopop_button_on_bottom` or `app:neopop_button_on_left`| assign reference of button which is on top/right/bottom/left of this button | view id |
| `app:neopop_shimmer_duration` | total duration of shimmer | seconds in millis |
| `app:neopop_shimmer_color` | shimmer color | color |
| `app:neopop_shimmer_width` | shimmer width | dimension |
| `app:neopop_show_shimmer` | enable shimmer | boolean |
| `app:neopop_shimmer_repeat_delay` | repeat delay between shimmers | seconds in millis|
|`app:neopop_shimmer_start_delay` | shimmer start delay | seconds in millis |
|`app:neopop_animate_on_touch` | use button animator internally to animate | boolean |
## Tilt Specific Attributes
| Attribute | Description | Value |
|--|--|--|
| `app:neopop_shadow_color` | bottom plane color | color |
| `app:neopop_card_rotation` | | |
| `app:neopop_shadow_rotation` | | |
| `app:neopop_gravity` | floating or static | `on_space`, `on_ground`|
| `app:neopop_top_shimmer_color` | top shimmer color | color |
| `app:neopop_bottom_shimmer_color` | bottom shimmer color | color |
| `app:neopop_black_shadow_top_padding` | | |
| `app:neopop_black_shadow_height` | | |
| `app:neopop_floating_shadow_color` | | color |
## Min SDK
We support a minimum SDK of 21.
## Contributing
Pull requests are welcome! We'd love help improving this library. Feel free to browse through open issues to look for things that need work. If you have a feature request or bug, please open a new issue so we can track it.
## License
```
Copyright 2022 Dreamplug Technologies Private Limited.
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.
```