🌈 Fluent syntactic sugar of Android for applying gradations, shading, and tinting.

Add below codes to your root build.gradle file (not your module build.gradle file).

allprojects {
    repositories {
        mavenCentral()
    }
}

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

dependencies {
    implementation "com.github.skydoves:rainbow:1.0.4"
}

Snapshots of the current development version of Rainbow are available, which track the latest versions.

repositories {
   maven { url 'https://oss.sonatype.org/content/repositories/snapshots/' }
}

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

Palette lambda expression collects colors for creating gradation.
We can collect colors using contextColor and color functions.
contextColor gets a resource color from your colors.xml file, and color gets a ColorInt color.
They should be used with + operator in the palette lambda expression.

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)

We can apply gradations composed with palette colors to the view's background or foreground.
The foreground() method can be applied to your CardView or something others.

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

And we can control the gradient orientation and corner radius.
We can use 8 kinds of orientation which RainbowOrientation.

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)

We can shade gradations on a TextView using Rainbow class.

textView.rainbow().palette {
  +contextColor(R.color.colorPrimary)
  +contextColor(R.color.md_orange_100)
  +contextColor(R.color.md_yellow_100)
  +contextColor(R.color.md_green_200)
  +contextColor(R.color.md_blue_200)
  +contextColor(R.color.md_purple_100)
}.shade()

Also, we can apply a color array using an array resource in our XML.

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

Here is a Java way.

new Rainbow(textView)
  .addContextColor(R.color.md_red_400)
  .addContextColor(R.color.md_yellow_100)
  .addContextColor(R.color.md_green_100)
  .addContextColor(R.color.md_blue_100)
  .addContextColor(R.color.white)
  .shade();

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()

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

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

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

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

rainbow.shuffleColors()

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);

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.