This is a small tool I made in the company. Because of the intellectual property of the code in the company, I did not use Java to implement it, but used Kotlin to implement this custom tool again (it is also a practice with Kotlin).

Let’s get down to business

I think static gradient background is not compatible with the Material design style of Android. However, there is still a need to make gradient background effect in practical applications, so I will also study this feature. There are two ways to customize gradients on Android:

  • 1 through the custom in the res/drawable such properties to achieve advantage is implemented simple (you just need to XML configuration properties), the disadvantage is that custom is not powerful (custom attributes can only support: most startColor, centerColor, endColor three, The gradient Angle must also be a multiple of 45 degrees);
  • 2 LinearGradient, SweepGradient, RadialGradient gradient gradient gradient tool class to achieve gradient, the advantage is that you can customize a variety of complex gradient, The disadvantage is that you need to customize the view to override the view’s onDraw() method to draw the gradient in paint (adding code complexity);

This article does not attempt to explain the first method (because it is easy to use, there is a lot of information to find), but for the second method I provide a few common layouts and some constraints to make it easier to use custom gradients.

Without further ado, above:

4 color 

<com.heybik.easygradient.sample.GoogleGradientView
        android:id="@+id/google_gradient_view"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:endY = "0"
        app:gradientColors="@array/google_gradient_colors"
        app:gradientPositions="@array/google_gradient_percents"/>
Copy the code

The gradient configuration is the last three lines of code:

app:endY = "0"// Set the y-coordinate of the gradient end point app:gradientColors="@array/google_gradient_colors"// Set the gradient array of colors app:gradientPositions="@array/google_gradient_percents"// Set the ratio of each color in the array aboveCopy the code

I use endY to specify the end point Y coordinate and combine it with the default start point coordinate to form the gradient Angle (default startX, Y is 0, endX == width, endY== height) so I just need to reset endY to achieve the horizontal gradient. GradientColors specify the array of colors to use for gradientColors, and gradientPositions specify the scale of each color for gradientColors. LinearGradient, SweepGradient, RadialGradient, LinearGradient, SweepGradient, RadialGradient

All my custom attRs for gradients are as follows:

<resources>
    <declare-styleable name="gradientLayout">
        <attr name="startX" format="integer"/>
        <attr name="startY" format="integer"/>
        <attr name="endX" format="integer"/>
        <attr name="endY" format="integer"/ > <! --centerX ,centerY are specific attrsfor RadialGradient & SweepGradient-->
        <attr name="centerX" format="integer"/>
        <attr name="centerY" format="integer"/ > <! --specific attrfor RadialGradient-->
        <attr name="radius" format="integer"/>
        <attr name="gradientColors" format="reference"/>
        <attr name="gradientPositions" format="reference"/ > <! --titleMode has no effectfor SweepGradient-->
        <attr name="tileMode" format="string"/ > <! --gradienttype (linear,radial,sweep) default is linear-->
        <attr name="gradientType" format="string"/>
    </declare-styleable>
</resources>
Copy the code

The 4-color gradient GoogleGradientView in the figure above inherits from a GradientBaseView defined in the util library, which has resolved the various properties of gradientview. GoogleGradientVie only needs to handle rounded corners:

/**
 * custom round corner gradient view (use google logo's color) * Created by gaobiaoqing on 2017/12/24. */ class GoogleGradientView : GradientBaseView { var roundX: Float = 12f var roundY = 12f private val rect = RectF() constructor(context: Context) : this(context, null) constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0) constructor(context: Context, attrs: AttributeSet? , defStyleAttr: Int) : super(context, attrs, defStyleAttr) @TargetApi(Build.VERSION_CODES.LOLLIPOP) constructor(context: Context, attrs: AttributeSet? , defStyleAttr: Int, defStyleRes: Int) : super(context, attrs, defStyleAttr, defStyleRes) override fun onDraw(canvas: Canvas) { Log.i(TAG, "onDraw") rect.left = 0f rect.top = 0f rect.right = measuredWidth.toFloat() rect.bottom = measuredHeight.toFloat() canvas.drawRoundRect(rect, roundX, roundY, paint) } }Copy the code

In addition to BaseView, there is a Base layout for setting the gradient background color directly to the Layout

Here’s how to use the library:

// In the root directory of build.gradle find AllProjects ->repositories add: allProjects {repositories {... maven { url'https://jitpack.io'}}} // You need to refer to the module of this function (in most cases you add compile to the build.gradle of the module of your app)'com. Making. Gaobq: easygradient - kotlin: v0.0.2'Or the implementation'com. Making. Gaobq: easygradient - kotlin: v0.0.2'(replaced with implementation AS recommended in AS 3.0)Copy the code

The code is very simple and it’s written in Kotlin, and it’s actually kotlin’s basic syntax, so it’s very easy to understand

Source address: easygradient-Kotlin, welcome to directly look at the source code, if you can, please give a star~~, the function of this library is very basic, you can submit the extension of the Pull Request above; Finally, if you need to reprint, please ask my consent, and indicate the original author, thank you ~