In Android app development, a “View” is the most basic component of the User Interface (UI). In this course, we will take a closer look at the basic views of Android apps using Kotlin. We will learn about the types and characteristics of views, as well as how to utilize them through actual example code.
1. Understanding Views
A view is an element that allows users to interact with the app. It serves the role of displaying information (text, images, etc.) to the user or collecting user input. There are various views provided in Android, all of which inherit from the View class.
Commonly used views include:
- TextView: A view that displays text on the screen.
- EditText: A view that allows users to enter text.
- Button: A button that can be clicked by the user.
- ImageView: A view that displays images.
- CheckBox: A checkbox that can be selected.
- RadioButton: A radio button that allows selecting one option among multiple choices.
- ListView: A view that displays multiple items in a list format.
2. Basic View Example
Now, let’s create a simple Android app using basic views. In this example, we will implement an app that receives user input through TextView, EditText, and Button, displaying the entered text in TextView upon button click.
2.1. Project Setup
Create a new project in Android Studio. Please follow the settings below:
- Select Project: Empty Activity
- Select Language: Kotlin
- Select Minimum API level: API 21: Android 5.0 (Lollipop)
2.2. Layout Configuration
Once the project is created, open the res/layout/activity_main.xml file and update it as follows:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="The entered text will be displayed here."
android:textSize="24sp"/>
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter text here"/>
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Display Text"/>
</LinearLayout>
2.3. Implementing MainActivity Class
Now, navigate to the MainActivity.kt file and add logic to change the text upon button click:
package com.example.myapp
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
class MainActivity : AppCompatActivity() {
private lateinit var textView: TextView
private lateinit var editText: EditText
private lateinit var button: Button
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
textView = findViewById(R.id.textView)
editText = findViewById(R.id.editText)
button = findViewById(R.id.button)
button.setOnClickListener {
textView.text = editText.text
}
}
}
2.4. Running the App
Now, when the app is run, the text entered by the user in EditText will be displayed in TextView upon clicking the button.
3. Properties and Uses of Various Views
In addition to the basic views discussed above, we will look at various other views, their properties, and how to handle events.
3.1. TextView
TextView has various properties. The most commonly used properties are:
text: Sets the text.textSize: Sets the size of the text.textColor: Sets the color of the text.gravity: Sets the alignment of the text.
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello!"
android:textSize="18sp"
android:textColor="#FF6347"
android:gravity="center"/>
3.2. EditText
EditText is a view that can receive user input and can be configured with additional properties such as input format.
Commonly used properties:
hint: Provides a hint in the input field.inputType: Sets the format of input (e.g., text, number, email, etc.).
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter email"
android:inputType="textEmailAddress"/>
3.3. Button
A Button is a view that can handle events, allowing for various background colors, text colors, etc.
Additionally, buttons in Android can handle click events to perform various actions. To do this, the setOnClickListener method is used.
3.4. CheckBox and RadioButton
A CheckBox allows multiple options to be selected, while a RadioButton allows only one option to be selected from multiple choices.
For example, you can use CheckBox and RadioButton like this:
<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 1"/>
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:id="@+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option A"/>
<RadioButton
android:id="@+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option B"/>
</RadioGroup>
4. Event Handling
All views have methods that can handle various events. The basic events that can be handled include:
OnClickListener: Handles click events.OnLongClickListener: Handles long click events.TextWatcher: Detects changes in text.
4.1. Button Click Event
To define an action when the button is clicked, you can use the setOnClickListener method. In the MainActivity.kts file, you can handle the button click event as follows:
button.setOnClickListener {
// Code to execute when the button is clicked
Toast.makeText(this, "Button was clicked.", Toast.LENGTH_SHORT).show()
}
4.2. Using TextWatcher
You can use TextWatcher to detect changes whenever the user types text in EditText. Here is an example of how to implement it:
editText.addTextChangedListener(object : TextWatcher {
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
// Code to handle when the text changes
}
override fun afterTextChanged(s: Editable?) {}
})
5. Types of Layouts
In Android, there are various layouts in which views can be arranged. The following layouts are frequently used:
5.1. LinearLayout
LinearLayout is a layout that allows views to be arranged vertically or horizontally. The orientation property can be used to set the direction.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
...
</LinearLayout>
5.2. RelativeLayout
RelativeLayout is a layout that allows you to set the relative position between views. You can position a view based on the position of another view.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Positioned at the top"/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textView"
android:text="Positioned below the button"/>
</RelativeLayout>
5.3. ConstraintLayout
ConstraintLayout is a layout that helps in easily constructing complex layouts. It allows you to set constraints between views for flexible placement.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Hello!"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click"
app:layout_constraintTop_toBottomOf="@id/textView"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
6. Advanced Views and Custom Views
In addition to the built-in views, you can create custom views in Android to meet specific functionality or design requirements of your app.
6.1. Creating a Custom View
The following example explains how to create a custom view. First, create a new Kotlin class that inherits from the View class:
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View
class CustomView(context: Context, attrs: AttributeSet) : View(context, attrs) {
private val paint = Paint()
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
paint.color = Color.BLUE
canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)
}
}
Once you create the class above, you can use the custom view in the XML layout file:
<com.example.myapp.CustomView
android:layout_width="match_parent"
android:layout_height="200dp"/>
7. Conclusion and Deployment
We have now learned about basic views and their utilization. I hope you have gained an understanding of the foundational elements needed to create a real app. In the next lesson, we will cover more complex views and implementations of lists and graphs using various adapters.
Of course, once your app is complete, you need to prepare for deployment through Google Play. Before distribution, it is essential to thoroughly test the app and improve it based on user feedback.
I hope this article has been helpful, and I encourage you to continue your interest and efforts in Android app development using Kotlin.