Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skydoves/AndroidRibbon
:ribbon: A fancy and beautiful ribbon with shimmer effects for Android.
https://github.com/skydoves/AndroidRibbon
android android-library android-ui androidribbon recyclerview ribbon ribbonlayout ribbonview skydoves
Last synced: 3 months ago
JSON representation
:ribbon: A fancy and beautiful ribbon with shimmer effects for Android.
- Host: GitHub
- URL: https://github.com/skydoves/AndroidRibbon
- Owner: skydoves
- License: apache-2.0
- Created: 2019-01-14T09:43:20.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2022-01-15T05:57:35.000Z (almost 3 years ago)
- Last Synced: 2024-06-21T18:22:40.998Z (5 months ago)
- Topics: android, android-library, android-ui, androidribbon, recyclerview, ribbon, ribbonlayout, ribbonview, skydoves
- Language: Kotlin
- Homepage:
- Size: 790 KB
- Stars: 692
- Watchers: 11
- Forks: 60
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-android-ui - Android Ribbon - 2.0) | <img src="https://user-images.githubusercontent.com/24237865/51105497-7873e680-182c-11e9-954a-1bf767d15312.gif" align="center" width="32%"/> (Index)
README
AndroidRibbon
:ribbon: A fancy and beautiful ribbon with the shimmer effect for Android.
## Download
[](https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22androidribbon%22)
### Gradle
Add the codes below to your **root** `build.gradle` file (not your module build.gradle file):
```gradle
allprojects {
repositories {
mavenCentral()
}
}
```
Next, add the dependency below to your **module**'s `build.gradle` file:
```gradle
dependencies {
implementation "com.github.skydoves:androidribbon:1.0.4"
}
```
## Usage
Add XML namespace inside your XML layout file as in the following:
```gradle
xmlns:app="http://schemas.android.com/apk/res-auto"
```
### RibbonView in layout
```gradle
```
### create using Builder
This is how to create `RibbonView`'s instance using `RibbonView.Builder` class.
```java
new RibbonView.Builder(context)
.setText("Android-Ribbon")
.setTextColor(Color.WHITE)
.setTextSize(13f)
.setRibbonRotation(-45)
.setRibbonBackgroundColor(ContextCompat.getColor(context, R.color.bright_lavender))
.setRibbonDrawable(ContextCompat.getDrawable(context, R.drawable.ribbon03))
.build();
```
### create using kotlin dsl
This is how to create `RibbonView`'s instance using kotlin dsl.
```kotlin
val ribbonView = ribbonView(this) {
setText("Android-Ribbon")
setTextColor(Color.WHITE)
setTextSize(13f)
setTextStyle(Typeface.BOLD)
setRibbonRotation(-45)
setRibbonDrawableResource(R.drawable.ribbon02)
}
```
## ShimmerRibbonView
ShimmerRibbonView lets you implement shimmer animation easily.
### ShimmerRibbonView in layout
```gradle
```
### create using Builder
This is how to create `ShimmerRibbonView`'s instance using `ShimmerRibbonView.Builder` class.
```java
new ShimmerRibbonView.Builder(context)
.setRibbonView(ribbonView)
.setShimmer(shimmer)
.build();
```
### create using kotlin dsl
This is how to create `ShimmerRibbonView`'s instance using kotlin dsl.
```kotlin
val shimmerRibbonView = shimmerRibbonView(context) {
ribbon = ribbonView(context) {
text = "Android-Ribbon"
textColor = Color.WHITE
textSize = 13f
textStyle = Typeface.BOLD
ribbonRotation = -45
ribbonDrawable = ContextCompat.getDrawable(context, R.drawable.ribbon02)
}
shimmer = alphaShimmer {
setBaseAlpha(1.0f)
setHighlightAlpha(0.5f)
}
}
```
## Shimmer
This library using [shimmer-android](https://github.com/facebook/shimmer-android) by Facebook.
Here are the detail [shimmer-instruction](http://facebook.github.io/shimmer-android/) about shimmer or you can reference below examples.
### create using Builder
This is how to create `Shimmer`'s instance using `Shimmer.Builder` class.
```java
new Shimmer.AlphaHighlightBuilder()
.setBaseAlpha(1.0f)
.setHighlightAlpha(0.5f)
.setRepeatDelay(1000)
.setDuration(1000)
.setDirection(Shimmer.Direction.RIGHT_TO_LEFT)
.build();
```
### create using kotlin dsl
This is how to create `Shimmer`'s instance using kotlin dsl.
```kotlin
val shimmer_alpha = alphaShimmer {
setBaseAlpha(1.0f)
setHighlightAlpha(0.5f)
}
val shimmer_color = colorShimmer {
setBaseAlpha(1.0f)
setHighlightAlpha(0.5f)
setBaseColor(ContextCompat.getColor(context, R.color.colorPrimary))
setHighlightColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))
}
```
## RibbonLayout
RibbonLayout lets RibbonViews overlap with other child views.
### RibbonLayout in layout
```gradle
```
And should set `ribbonHeader` or `ribbonBottom` using `RibbonView` or `ShimmerRibbonView` instance.
```java
ribbonLayout.setRibbonHeader(ribbon_header);
ribbonLayout.setRibbonBottomAlign(Gravity.LEFT);
ribbonLayout.setRibbonBottom(ribbon_bottom);
ribbonLayout.setRibbonBottomAlign(Gravity.RIGHT);
```
## RibbonRecyclerView
RibbonRecyclerView lets you implement RecyclerView has `RibbonView` items easily.
### RibbonRecyclerView in layout
```gradle
```
Add or remove `RibbonView` items.
```java
recyclerView.addRibbon(ribbonView);
recyclerView.addRibbon(2, ribbonView);
recyclerView.addRibbonList(ribbonViewList);
recyclerView.removeRibbon(ribbonView);
recyclerView.removeRibbon(2);
recyclerView.clear();
```
## RibbonView Attributes
Attributes | Type | Default | Description
--- | --- | --- | ---
ribbonBackgroundColor | Color | #e254ff | sets ribbon background using color.
ribbonRadius | Float | 10f | sets ribbon corner's radius. It's only active using with `ribbonBackgroundColor`.
ribbonDrawable | Drawable | null | sets ribbon background using drawable. `ribbonBackgroundColor` and `ribbonRadius` will be ignored.
ribbonRotation | Int | 0 | sets ribbon rotation. Only between 1 to 90 or -90 to -1 degree.
paddingLeft | Float | 8f | sets left padding of the text.
paddingTop | Float | 4f | sets top padding of the text.
paddingRight | Float | 8f | sets right padding of the text.
paddingBottom | Float | 4f | sets bottom padding of the text.
text | String | "" | sets text. It is same as `android:text` attribute.
textColor | Color | Color.WHITE | sets text color. It is same as `android:textColor` attribute.
textSize | Float | 12f | sets text size. It is same as `android:textSize` attribute.
textStyle | Int | Typeface.NORMAL | sets text style. It is same as `android:textStyle` attribute.
## ShimmerRibbonView Attributes
Attributes | Type | Default | Description
--- | --- | --- | ---
ribbon | RibbonView | RibbonView(context) | sets `RibbonView` on the frame.
shimmer | Shimmer | AlphaHighlightBuilder(context).build() | sets `Shimmer` on the frame.
## ShimmerLayout Attributes
Attributes | Type | Default | Description
--- | --- | --- | ---
ribbonHeader | RibbonView | RibbonView(context) | sets header `RibbonView` on the frame.
ribbonBottom | RibbonView | RibbonView(context) | sets bottom `RibbonView` on the frame.
ribbonHeaderAlign | Gravity | Gravity.START | sets an align of the header ribbon.
ribbonBottomAlign | Gravity | Gravity.CENTER | sets an align of the bottom ribbon.
## Find this library useful? :heart:
Support it by joining __[stargazers](https://github.com/skydoves/AndroidRibbon/stargazers)__ for this repository. :star:
And __[follow](https://github.com/skydoves)__ me for my next creations! 🤩
# License
```xml
Copyright 2019 skydoves
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.
```