AndroidRibbon
Download
Gradle
Add the codes below to your root build.gradle file (not your module build.gradle file):
allprojects {
repositories {
mavenCentral()
}
}Next, add the dependency below to your module's build.gradle file:
dependencies {
implementation "com.github.skydoves:androidribbon:1.0.4"
}Usage
Add XML namespace inside your XML layout file as in the following:
xmlns:app="http://schemas.android.com/apk/res-auto"RibbonView in layout
<com.skydoves.androidribbon.RibbonView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="skydoves"
android:textColor="@android:color/white"
app:ribbon_rotation="-45" // set rotation
app:ribbon_background_color="@color/colorPrimary" // set background color
app:ribbon_ribbonRadius="4dp" // set radius
app:ribbon_drawable="@drawable/ribbon03" // set drawable, not background color
app:ribbon_padding_top="4dp"
app:ribbon_padding_bottom="8dp"/>create using Builder
This is how to create RibbonView's instance using RibbonView.Builder class.
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.
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
<com.skydoves.androidribbon.ShimmerRibbonView
android:layout_width="130dp"
android:layout_height="wrap_content"
android:alpha="0.8"
app:shimmer_base_alpha="1.0"
app:shimmer_highlight_alpha="0.5"
app:shimmer_ribbon_text="Android-Ribbon"
app:shimmer_ribbon_textColor="@android:color/white"
app:shimmer_ribbon_textStyle="bold"
app:shimmer_ribbon_padding_top="3dp"
app:shimmer_ribbon_padding_bottom="3dp"
app:shimmer_ribbon_rotation="-45"
app:shimmer_ribbon_background_color="@color/colorPrimary"/>create using Builder
This is how to create ShimmerRibbonView's instance using ShimmerRibbonView.Builder class.
new ShimmerRibbonView.Builder(context)
.setRibbonView(ribbonView)
.setShimmer(shimmer)
.build();create using kotlin dsl
This is how to create ShimmerRibbonView's instance using kotlin dsl.
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 by Facebook.
Here are the detail shimmer-instruction about shimmer or you can reference below examples.
create using Builder
This is how to create Shimmer's instance using Shimmer.Builder class.
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.
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
<com.skydoves.androidribbon.RibbonLayout
android:id="@+id/ribbonLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:ribbonLayout_header_align="left"
app:ribbonLayout_bottom_align="center">
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:src="@drawable/background02"
android:scaleType="fitXY"/>
</com.skydoves.androidribbon.RibbonLayout>And should set ribbonHeader or ribbonBottom using RibbonView or ShimmerRibbonView instance.
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
<com.skydoves.androidribbon.RibbonRecyclerView
android:id="@+id/ribbonRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
app:ribbon_recycler_space="3dp"
app:ribbon_recycler_orientation="horizontal"/>Add or remove RibbonView items.
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? ❤️
Support it by joining stargazers for this repository.
And follow me for my next creations!
License
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.