RevelyGradient

RevelyGradient is an Android library for easy gradient management !

About Revely

<img src="https://www.revely.co/images/logo.svg" width="40"> Web site - <img src="https://forum.gitlab.com/uploads/default/original/1X/513cb6bf2c12e334f0cb4864dbc585587e712af4.png" width="30"> Open Source projects - <img src="https://c5.patreon.com/external/logo/downloads_logomark_color_on_white.png" width="40"> Become my Patreon - <img src="https://upload.wikimedia.org/wikipedia/fr/c/c8/Twitter_Bird.svg" width="30"> Twitter - <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/langfr-240px-Instagram_logo_2016.svg.png" width="30"> Instagram - <img src="https://cdn.worldvectorlogo.com/logos/behance-1.svg" width="30"> Behance

Installation

Add the dependency

dependencies {
    compile 'co.revely:gradient:1.0.1'
}

Usage

Kotlin

RevelyGradient
    .linear()
    .colors(intArrayOf(Color.parseColor("#FF2525"), Color.parseColor("#6078EA")))
    .onBackgroundOf(view)

Java

RevelyGradient
    .linear()
    .colors(new int[] {Color.parseColor("#FF2525"), Color.parseColor("#6078EA")})
    .onBackgroundOf(findViewById(R.id.view));

Choose the type of your gradient

.radial()
.linear()
.sweep()

Choose the gradient colors

.colors(intArrayOf(Color.parseColor("#FF2525"), Color.parseColor("#6078EA"), Color.parseColor("#6078EA")))

Center your gradient

.center(100f, 200f)

Rotate the gradient around the center

.angle(42)

Change the transparency of your gradient

.alpha(0.5f)

Scale the gradient

.scale(0.5f, 1f)

Change the positions of color in the gradient

.offsets(floatArrayOf(0f, 0.1f, 0.5f, 1f))

Apply the gradient on the background of view

.onBackgroundOf(text_view)

or directly on the view (TextView, ImageView, Button, ...)

.on(text_view)

You can also use the layer function to stack several gradients

.layer(
    RevelyGradient
        .radial(TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 150f, Resources.getSystem().displayMetrics ))
        .colors(intArrayOf(Color.parseColor("#ffdd55"), Color.parseColor("#ffdd55"), Color.parseColor("#ff543e"), Color.parseColor("#c837ab")))
        .offsets(floatArrayOf(0f, 0.1f, 0.5f, 1f))
        .center(50, 400),
    RevelyGradient
        .radial(TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 170f, Resources.getSystem().displayMetrics ))
        .colors(intArrayOf(Color.parseColor("#3771c8"), Color.parseColor("#3771c8"), Color.parseColor("#006600ff")))
        .offsets(floatArrayOf(0f, 0.128f, 1f))
        .angle(-15f)
        .scale(1f, 0.4f)
        .center(0, 0)
).onBackgroundOf(view)

To animate your gradient use .animate()

val color1 = Color.parseColor("#00c6ff")
val color2 = Color.parseColor("#ff72ff")

val valueAnimator = ValueAnimator.ofFloat(0f, 360f)
valueAnimator.duration = 15000
valueAnimator.repeatCount = ValueAnimator.INFINITE
valueAnimator.interpolator = LinearInterpolator()
RevelyGradient.sweep()
    .colors(intArrayOf(color1, color2, color1))
    .animate(valueAnimator, { _valueAnimator, _gradientDrawable ->
         _gradientDrawable.angle = _valueAnimator.animatedValue as Float
    })
    .onBackgroundOf(container)
valueAnimator.start()