🌈 An expressive Kotlin DSL for dynamically creating and
applying gradients, text shaders, and tints to any Android View.

Add the dependency below on your root build.gradle.kts file:

dependencies {
    implementation("com.github.skydoves:rainbow:1.1.0")
}

We can apply gradations and tinting to any views easily using Rainbow class.

A gradient is defined by a collection of colors, which we refer to as a palette. The palette lambda block is the primary mechanism for constructing this collection.

Within the lambda, you can add colors using the contextColor and color functions. The contextColor function resolves a color resource from your colors.xml file, whereas the color function accepts a ColorInt value directly. These functions should be used with the unary + operator to add them to the palette.

Rainbow(myCardView).palette { // constructs a palette for collecting colors.
  +contextColor(R.color.red_200) // getting a color from the resource
  +contextColor(R.color.yellow_200)
  +contextColor(R.color.green_200)
  +contextColor(R.color.blue_200)
  +color(Color.WHITE) // getting a color
}.withAlpha(225) // sets alpha (0~255)
 .foreground() // applies gradations to myCardView

Here is kotlin extension ways to apply gradations using View.rainbow() method to views.

myLinearLayout.rainbow().palette {
  +contextColor(R.color.skyBlue)
  +contextColor(R.color.colorPrimary)
}.background(orientation = RainbowOrientation.TOP_BOTTOM, radius = 8)

Once a palette is defined, you can apply the resulting gradient to a view's background or foreground.

Rainbow(myCardView).palette {
  +contextColor(R.color.red_200)
  +contextColor(R.color.yellow_200)
}.background() // or foreground()

The gradient's orientation and corner radius can be customized. There are eight predefined orientations available in the RainbowOrientation enum.

background(orientation = RainbowOrientation.RIGHT_LEFT, radius = 8)
background(orientation = RainbowOrientation.TOP_BOTTOM, radius = 8)
foreground(RainbowOrientation.DIAGONAL_TOP_LEFT, 8)
foreground(RainbowOrientation.DIAGONAL_BOTTOM_RIGHT, 8)

For TextView instances, Rainbow provides a shade method that applies the gradient to the text itself, creating a multi-colored text effect.

myTextView.rainbow().palette {
  +contextColor(R.color.colorPrimary)
  +contextColor(R.color.md_orange_100)
  +contextColor(R.color.md_blue_200)
}.shade()

You can also define a palette from a color array resource declared in XML.

// In res/values/colors.xml:
// <array name="rainbow_colors">
//   <item>@color/red_100</item>
//   <item>@color/blue_100</item>
// </array>

myTextView.rainbow().palette {
  +colorArray(R.array.rainbow_colors)
}.shade()

The tint method applies the defined palette as a tint color. This is effective for views that support tinting, such as ImageView, CompoundButton, and any views implementing TintableBackgroundView.

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

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

If you need the gradient as a GradientDrawable object for use elsewhere, you can retrieve it with the getDrawable method.

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

// Now you can use the drawable instance as needed.
someOtherView.background = gradientDrawable

RainbowView is a versatile view that renders a multi-color gradient. It sources its colors from a color-array resource.

<com.skydoves.rainbow.RainbowView
  android:id="@+id/rainbowView"
  android:layout_width="match_parent"
  android:layout_height="100dp"
  app:rainbowView_colors="@array/rainbow_colors"
  app:rainbowView_orientation="left_right"
  app:rainbowView_radius="12dp" />

The rainbowView_colors attributes gets color list from the color-array from your colors.xml.

<resources>
  <color name="colorPrimary">#C51162</color>
  ...
  <array name="colors">
    <item>@color/red_100</item>
    <item>@color/orange_100</item>
    <item>@color/yellow_100</item>
    <item>@color/green_100</item>
    ...
  </array>
</resources>

BinaryRainbowView is a simplified version for creating two or three-color gradients directly from color attributes.

<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
/>

Both RainbowView and BinaryRainbowView support dynamic shuffling of their palette colors. Calling the shuffleColors() method will randomly reorder the gradient colors, providing a simple way to create dynamic visual effects.

val rainbowView = findViewById<RainbowView>(R.id.rainbowView)
rainbowView.shuffleColors()

val binaryRainbowView = findViewById<BinaryRainbowView>(R.id.binaryRainbowView)
binaryRainbowView.shuffleColors()

Support it by joining stargazers for this repository. ⭐

Copyright 2019 skydoves (Jaewoong Eum)

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.