¿Cómo dibujar un borde en un evento de clic en Android con Kotlin?

A veces queremos mostrar a los usuarios que han hecho clic en un elemento mostrando un borde en el elemento. Entonces, para esto, necesitamos crear dos archivos de recursos dibujables, uno para el fondo normal del elemento y otro para el borde. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Crear un nuevo proyecto en Android Studio en kotlin.

Paso 2: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <TextView
        android:id="@+id/gfg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GeeksforGeeks"
        android:textSize="22sp"
        android:textColor="#189C1E"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.192" />
 
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="140dp"
        android:text="Option1"
        android:padding="3dp"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/gfg" />
 
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="Option2"
        android:padding="3dp"
        app:layout_constraintBottom_toTopOf="@+id/textView4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />
 
    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="240dp"
        android:text="Option3"
        android:textSize="18sp"
        android:padding="3dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintStart_toStartOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 3: Creación de archivos de recursos dibujables

Consulte este artículo Crear un archivo XML de recursos de Drawable en Android Studio y cree un archivo XML de recursos de Drawable. Archivo de diseño para item_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#F3EDED" />
    <corners android:radius="4dp" />
    <stroke
        android:width="1dp"
        android:color="#EEE" />
</shape>

Se hace clic en el diseño de on_item_select.xml para el elemento.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 
<solid android:color="#FFF" />
<corners android:radius="6dp" />
<stroke
    android:width="2dp"
    android:color="#F40909" />
</shape>

Paso 4: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.ayush.gfgitemselect
 
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
 
class MainActivity : AppCompatActivity() {
     
    // Initializing the views
    lateinit var option1: TextView
    lateinit var option2: TextView
    lateinit var option3: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    
        // Binding the views
        option1 = findViewById(R.id.textView2)
        option2 = findViewById(R.id.textView3)
        option3 = findViewById(R.id.textView4)
        
        // setting the normal background for the items
        option1.setBackgroundResource(R.drawable.item_background)
        option2.setBackgroundResource(R.drawable.item_background)
        option3.setBackgroundResource(R.drawable.item_background)
         
        // setting the background when item is clicked
        option1.setOnClickListener {
            option1.setBackgroundResource(R.drawable.on_item_select)
        }
        option2.setOnClickListener {
            option2.setBackgroundResource(R.drawable.on_item_select)
        }
        option3.setOnClickListener {
            option3.setBackgroundResource(R.drawable.on_item_select)
        }
    }
}

Entonces, nuestra aplicación está lista. Y podemos ver la salida.

Producción: