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.<\/p>\n
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.<\/p>\n
Commonly used views include:<\/p>\n
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.<\/p>\n
Create a new project in Android Studio. Please follow the settings below:<\/p>\n
Once the project is created, open the Now, navigate to the Now, when the app is run, the text entered by the user in EditText will be displayed in TextView upon clicking the button.<\/p>\n In addition to the basic views discussed above, we will look at various other views, their properties, and how to handle events.<\/p>\n TextView has various properties. The most commonly used properties are:<\/p>\n EditText is a view that can receive user input and can be configured with additional properties such as input format.<\/p>\n Commonly used properties:<\/p>\n A Button is a view that can handle events, allowing for various background colors, text colors, etc.<\/p>\n Additionally, buttons in Android can handle click events to perform various actions. To do this, the A CheckBox allows multiple options to be selected, while a RadioButton allows only one option to be selected from multiple choices.<\/p>\n For example, you can use CheckBox and RadioButton like this:<\/p>\n All views have methods that can handle various events. The basic events that can be handled include:<\/p>\n To define an action when the button is clicked, you can use the You can use In Android, there are various layouts in which views can be arranged. The following layouts are frequently used:<\/p>\n LinearLayout is a layout that allows views to be arranged vertically or horizontally. The 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.<\/p>\n ConstraintLayout is a layout that helps in easily constructing complex layouts. It allows you to set constraints between views for flexible placement.<\/p>\n In addition to the built-in views, you can create custom views in Android to meet specific functionality or design requirements of your app.<\/p>\n The following example explains how to create a custom view. First, create a new Kotlin class that inherits from the View class:<\/p>\n Once you create the class above, you can use the custom view in the XML layout file:<\/p>\n 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.<\/p>\n 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.<\/p>\n I hope this article has been helpful, and I encourage you to continue your interest and efforts in Android app development using Kotlin.<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"res\/layout\/activity_main.xml<\/code> file and update it as follows:<\/p>\n\n<LinearLayout\n xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:orientation=\"vertical\"\n android:padding=\"16dp\">\n\n <TextView\n android:id=\"@+id\/textView\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n android:text=\"The entered text will be displayed here.\"\n android:textSize=\"24sp\"\/>\n\n <EditText\n android:id=\"@+id\/editText\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n android:hint=\"Enter text here\"\/>\n\n <Button\n android:id=\"@+id\/button\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n android:text=\"Display Text\"\/>\n\n<\/LinearLayout>\n<\/code><\/pre>\n2.3. Implementing MainActivity Class<\/h3>\n
MainActivity.kt<\/code> file and add logic to change the text upon button click:<\/p>\n\npackage com.example.myapp\n\nimport androidx.appcompat.app.AppCompatActivity\nimport android.os.Bundle\nimport android.widget.Button\nimport android.widget.EditText\nimport android.widget.TextView\n\nclass MainActivity : AppCompatActivity() {\n\n private lateinit var textView: TextView\n private lateinit var editText: EditText\n private lateinit var button: Button\n\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n\n textView = findViewById(R.id.textView)\n editText = findViewById(R.id.editText)\n button = findViewById(R.id.button)\n\n button.setOnClickListener {\n textView.text = editText.text\n }\n }\n}\n<\/code><\/pre>\n2.4. Running the App<\/h3>\n
3. Properties and Uses of Various Views<\/h2>\n
3.1. TextView<\/h3>\n
\n
text<\/code>: Sets the text.<\/li>\ntextSize<\/code>: Sets the size of the text.<\/li>\ntextColor<\/code>: Sets the color of the text.<\/li>\ngravity<\/code>: Sets the alignment of the text.<\/li>\n<\/ul>\n\n<TextView\n android:id=\"@+id\/textView\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n android:text=\"Hello!\"\n android:textSize=\"18sp\"\n android:textColor=\"#FF6347\"\n android:gravity=\"center\"\/>\n<\/code><\/pre>\n3.2. EditText<\/h3>\n
\n
hint<\/code>: Provides a hint in the input field.<\/li>\ninputType<\/code>: Sets the format of input (e.g., text, number, email, etc.).<\/li>\n<\/ul>\n\n<EditText\n android:id=\"@+id\/editText\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n android:hint=\"Enter email\"\n android:inputType=\"textEmailAddress\"\/>\n<\/code><\/pre>\n3.3. Button<\/h3>\n
setOnClickListener<\/code> method is used.<\/p>\n3.4. CheckBox and RadioButton<\/h3>\n
\n<CheckBox\n android:id=\"@+id\/checkBox\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Option 1\"\/>\n\n<RadioGroup\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\">\n \n <RadioButton\n android:id=\"@+id\/radioButton1\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Option A\"\/>\n\n <RadioButton\n android:id=\"@+id\/radioButton2\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Option B\"\/>\n\n<\/RadioGroup>\n<\/code><\/pre>\n4. Event Handling<\/h2>\n
\n
OnClickListener<\/code>: Handles click events.<\/li>\nOnLongClickListener<\/code>: Handles long click events.<\/li>\nTextWatcher<\/code>: Detects changes in text.<\/li>\n<\/ul>\n4.1. Button Click Event<\/h3>\n
setOnClickListener<\/code> method. In the MainActivity.kts<\/code> file, you can handle the button click event as follows:<\/p>\n\nbutton.setOnClickListener {\n \/\/ Code to execute when the button is clicked\n Toast.makeText(this, \"Button was clicked.\", Toast.LENGTH_SHORT).show()\n}\n<\/code><\/pre>\n4.2. Using TextWatcher<\/h3>\n
TextWatcher<\/code> to detect changes whenever the user types text in EditText. Here is an example of how to implement it:<\/p>\n\neditText.addTextChangedListener(object : TextWatcher {\n override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}\n\n override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {\n \/\/ Code to handle when the text changes\n }\n\n override fun afterTextChanged(s: Editable?) {}\n})\n<\/code><\/pre>\n5. Types of Layouts<\/h2>\n
5.1. LinearLayout<\/h3>\n
orientation<\/code> property can be used to set the direction.<\/p>\n\n<LinearLayout\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:orientation=\"vertical\">\n ...\n<\/LinearLayout>\n<\/code><\/pre>\n5.2. RelativeLayout<\/h3>\n
\n<RelativeLayout\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\">\n \n <TextView\n android:id=\"@+id\/textView\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:layout_alignParentTop=\"true\"\n android:text=\"Positioned at the top\"\/>\n\n <Button\n android:id=\"@+id\/button\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:layout_below=\"@id\/textView\"\n android:text=\"Positioned below the button\"\/>\n\n<\/RelativeLayout>\n<\/code><\/pre>\n5.3. ConstraintLayout<\/h3>\n
\n<androidx.constraintlayout.widget.ConstraintLayout\n xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\">\n\n <TextView\n android:id=\"@+id\/textView\"\n android:layout_width=\"0dp\"\n android:layout_height=\"wrap_content\"\n android:text=\"Hello!\"\n app:layout_constraintTop_toTopOf=\"parent\"\n app:layout_constraintStart_toStartOf=\"parent\"\n app:layout_constraintEnd_toEndOf=\"parent\"\/>\n\n <Button\n android:id=\"@+id\/button\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Click\"\n app:layout_constraintTop_toBottomOf=\"@id\/textView\"\n app:layout_constraintStart_toStartOf=\"parent\"\/>\n\n<\/androidx.constraintlayout.widget.ConstraintLayout>\n<\/code><\/pre>\n6. Advanced Views and Custom Views<\/h2>\n
6.1. Creating a Custom View<\/h3>\n
\nimport android.content.Context\nimport android.graphics.Canvas\nimport android.graphics.Color\nimport android.graphics.Paint\nimport android.util.AttributeSet\nimport android.view.View\n\nclass CustomView(context: Context, attrs: AttributeSet) : View(context, attrs) {\n\n private val paint = Paint()\n\n override fun onDraw(canvas: Canvas) {\n super.onDraw(canvas)\n paint.color = Color.BLUE\n canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)\n }\n}\n<\/code><\/pre>\n\n<com.example.myapp.CustomView\n android:layout_width=\"match_parent\"\n android:layout_height=\"200dp\"\/>\n<\/code><\/pre>\n7. Conclusion and Deployment<\/h2>\n