How to Draw Border on Event of Click in Android with Kotlin?
Sometimes we want to display to the users that they have clicked an item by showing a border on the item. So, for this, we need to create two drawable resource files, one for the normal background of the item and another for the border. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to Create a new project in android studio in kotlin.
Step 2: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
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 = "w3wiki" 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 > |
Step 3: Creating drawable resource files
Refer to this article Create Drawable Resource XML File in Android Studio and create Drawable Resource XML File. Layout file for item_background.xml
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 > |
Layout for on_item_select.xml for the item is clicked.
XML
<? 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 > |
Step 4: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
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) } } } |
So, our app is ready. And we can see the output.
Output:
Contact Us