Thursday, March 12, 2020

android kotlin - ListView alternate row color with ripple

MainActivity.kt

package com.example.jetpack

import android.content.res.ColorStateList
import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.graphics.drawable.RippleDrawable
import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import android.widget.AdapterView
import android.widget.ArrayAdapter
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.textview.MaterialTextView
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // list to populate list view
        val list = mutableListOf(
            "Golden yellow",
            "Han purple",
            "Carrot orange",
            "Carnation pink",
            "Jungle green",
            "Lavender blush",
            "Lawn green"
        )

        // initialize an array adapter
        val adapter:ArrayAdapter<String> = object: ArrayAdapter<String>(
            this,
            android.R.layout.simple_dropdown_item_1line,
            list
        ){
            override fun getView(position: Int, convertView: View?,
                                 parent: ViewGroup): View {

                val materialTextView =  super.getView(position,
                    convertView, parent) as MaterialTextView

                // list view item alternate color
                if (position % 2 == 0){
                    materialTextView.background = getRippleDrawable()
                }else{
                    materialTextView.background = getRippleDrawable(
                        rippleColor = Color.parseColor("#E30022"),
                        contentColor = Color.parseColor("#FEFEFA")
                    )
                }

                return materialTextView
            }
        }


        // attach the array adapter with list view
        listView.adapter = adapter


        // list view item click listener
        listView.onItemClickListener = AdapterView.OnItemClickListener {
                parent, view, position, id ->

            val clickedItem = parent?.getItemAtPosition(position)
                .toString()
            textViewResult.text = "Clicked : $clickedItem"
        }
    }
}


// method to generate ripple drawable
fun getRippleDrawable(
    rippleColor: Int = Color.parseColor("#007FFF"), // ripple color Azure
    contentColor:Int = Color.parseColor("#F0FFFF"), // background
    maskColor:Int = Color.RED
):RippleDrawable{
    val ripple = RippleDrawable(
        ColorStateList.valueOf(rippleColor),
        ColorDrawable(contentColor),
        ColorDrawable(maskColor)
    )
    return ripple
}
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:choiceMode="singleChoice"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/textViewResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="8dp"
        android:textAppearance=
            "@style/TextAppearance.MaterialComponents.Headline5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="TextView" />

</androidx.constraintlayout.widget.ConstraintLayout>
More android examples