/ Ribbon

A library that lets you implement ribbon ui and shimmer animation

A library that lets you implement ribbon ui and shimmer animation

AndroidRibbon

A library that lets you implement ribbon ui and shimmer animation easily.

AndroidRibbonz

AndroidRibbon

Download

Gradle

And add a dependency code to your module's build.gradle file.

dependencies {  
    implementation "com.github.skydoves:androidribbon:1.0.0"
}

Usage

Add following XML namespace inside your XML layout file.

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(context) {
      text = "Android-Ribbon"
      textColor = Color.WHITE
      textSize = 13f
      textStyle = Typeface.BOLD
      ribbonRotation = -45
      ribbonDrawable = ContextCompat.getDrawable(context, 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.

GitHub