How to apply gradations and tint easily on Android.

Hi everyone! I’m going to introduce an easy way to apply gradation and tint on Android. Sometimes we have to implement gradation to layout’s background or foreground, but it is a hassle thing which whenever we make it. So I made a lightweight library Rainbow, and I’m going to explain how to use it.

Firstly, we should add a below dependency code on your build.gradle(app) file.

dependencies {
 implementation “com.github.skydoves:rainbow:1.0.1”
}

Usage

The basic usage is kind simple. The preview image shows everything.
Palette lambda expression collects colors for composing gradation. We can collect colors using contextColor and color functions. The contextColor function receives a color resource from your colors.xml file, and the color function receives a ColorInt. They must be used with a prefix + operator in the palette lambda expression. The colors will be stored sequentially on the lambda. We can apply an alpha value using the withAlpha function.

Foreground, Background

As we can see, we can apply gradations composed with palette colors to the view’s background or foreground. The forground() method can be applied to our CardView or something others. The

background() method can be applied to our any kind of view layouts which can be applied background color. And we can control the gradient orientation and corner radius. We can use 8 kinds of orientation which RainbowOrientation. And we can implement corner round using radiusoption.

Tinting

We can change some kinds of view’s tint colors which can be applied tint. Here are views can be applied tint: TextView(drawable), ImageView, CompoundButton, TintableBackgroundView.

Rainbow(myCheckBox).palette {
  +contextColor(R.color.red_200)
}.tint()

Drawable

We can get a GradientDrawable using getDrawable method.

val drawable = Rainbow(myCheckBox).palette {
  +contextColor(R.color.red_200)
  +contextColor(R.color.yellow_200)
}.getDrawable()

RainbowView

RainbowView is a gradient view for implementing gradations.
Add following XML namespace inside your XML layout file.

xmlns:app="http://schemas.android.com/apk/res-auto"

RainbowView in xml layout

<com.skydoves.rainbow.RainbowView
  android:id="@+id/rainbow"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:rainbowView_colors="@array/colors" // colors for gradient.
  app:rainbowView_orientation="left_right" // gradient orientation.
  app:rainbowView_radius="12dp" // corner radius.
/>

BinaryRainbowView

BinaryRainbowView is a gradient view for implementing a simple view with gradations.

<com.skydoves.rainbow.BinaryRainbowView
  android:layout_width="match_parent"
  android:layout_height="80dp"
  app:binaryRainbowView_startColor="@color/md_green_100" // starting color of the gradient.
  app:binaryRainbowView_centerColor="@color/white" // center color of the gradient.
  app:binaryRainbowView_endColor="@color/skyBlue" // end color of the gradient.
  app:binaryRainbowView_orientation="bottom_top" // gradient orientation.
  app:binaryRainbowView_radius="12dp" // corner radius
/>

Shuffle

RainbowView and BinaryRainbowView provides shuffling the palette colors using theshuffleColors() method. The gradation colors placement will be changed randomly.

rainbow.shuffleColors()

Usage in Java

Here are some usages for Java developers.

new Rainbow(myView)
    .addContextColor(R.color.red_100)
    .addContextColor(R.color.orange_100)
    .addContextColor(R.color.yellow_100)
    .addContextColor(R.color.green_100)
    .withAlpha(255)
    .background(RainbowOrientation.RIGHT_LEFT, 8);

Sample project

You can reference the sample project.

skydoves/Rainbow

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐️