Kotlin 28. How does Kotlin display color gradient effect through TransitionDrawable

How Kotlin TransitionDrawabledisplays the color gradient effect by

Here, we use to TransitionDrawabledisplay the color gradient effect, including the change of the background color, and the gradient effect between pictures.

---

---

1 Import the picture that needs gradient

If we need to realize the gradient effect between pictures, we need two photos, so as to realize the gradient from photo 1 to photo 2. Under the path /res/values/, we create a new arrays.xmlfile:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="icons">
        <item>@drawable/idea1</item>
        <item>@drawable/idea2</item>
    </array>
</resources>

This file contains two items: @drawable/idea1and @drawable/idea2, write them in an array. Here, the names of the two pictures we imported are idea1.pngand idea2.pngare stored res/drawable/under the path.

From the above two photos we can see that we hope to TransitionDrawableshow the switch effect of the light bulb through .

2 activity_main.xml

The front end involved in this example consists of three parts, a TextView, an ImageView, and a Switch. When we click the Switch button, the light of the picture can change between bright and dark, and the gradient of the font background.

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="100dp"
    android:text="案例2：灯泡颜色渐变"
    android:textSize="20dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/pushButton" />

<ImageView
    android:id="@+id/iv_light"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:src="@drawable/idea"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView2"
    app:layout_constraintVertical_bias="0.218" />

<Switch
    android:id="@+id/switchView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginTop="20dp"
    android:showText="true"
    android:textOff="关"
    android:textOn="开"
    app:layout_constraintTop_toBottomOf="@+id/iv_light"
    tools:ignore="UseSwitchCompatOrMaterialXml" />

3 MainActivity.kt

@SuppressLint("ClickableViewAccessibility", "ResourceType")
override fun onCreate(savedInstanceState: Bundle?) {
    
    
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val resources: Resources = resources
    val icons: TypedArray = resources.obtainTypedArray(R.array.icons)
    val drawable = icons.getDrawable(0) // ending image
    val drawableTwo = icons.getDrawable(1) // starting image
    val iconDrawables = arrayOf(drawable,drawableTwo)
    var transitionDrawableIcon = TransitionDrawable(iconDrawables);

    val colorDrawables = arrayOf(ColorDrawable(Color.RED),ColorDrawable(Color.GREEN) )
    var transitionDrawable = TransitionDrawable(colorDrawables)

    switchView.setOnCheckedChangeListener {
    
     buttonView, isChecked ->
        iv_light.setImageDrawable(transitionDrawableIcon)
        transitionDrawableIcon.reverseTransition(
            2000
        )
        transitionDrawable.isCrossFadeEnabled = false

        val transitionDrawableTextView = TransitionDrawable(colorDrawables)
        textView2.background = transitionDrawableTextView
        transitionDrawableTextView.startTransition(1000)
    }

}

We first import these two pictures, and then this array is given as input to TransitionDrawablethe function: var transitionDrawableIcon = TransitionDrawable(iconDrawables);. The same is true for the text background, we need to put the color that needs to be gradient into an array first: val colorDrawables = arrayOf(ColorDrawable(Color.RED),ColorDrawable(Color.GREEN) ), and then give it as input to TransitionDrawablethe function: var transitionDrawable = TransitionDrawable(colorDrawables). When we click the Switch button, the light bulb will become brighter (actually the color gradient between the two light bulbs), and the font background will also change from red to green.