DEV Community

Biswajit Porel
Biswajit Porel

Posted on

Give me one android code and then explain what is what

Great idea. Let's start with one of the simplest Android apps: a button that changes the text on the screen. This will introduce you to the basic building blocks of Android development.

MainActivity.kt (Kotlin)

package com.example.myfirstapp

import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        val textView = findViewById<TextView>(R.id.textView)
        val button = findViewById<Button>(R.id.button)

        button.setOnClickListener {
            textView.text = "Hello, Kotlin!"
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

activity_main.xml (The Screen Layout)

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome!"
        android:textSize="24sp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"/>

</LinearLayout>
Enter fullscreen mode Exit fullscreen mode

Now let's explain every part

1. package

package com.example.myfirstapp
Enter fullscreen mode Exit fullscreen mode

This tells Android which project this file belongs to.

Think of it like your home address.


2. import

import android.widget.Button
import android.widget.TextView
Enter fullscreen mode Exit fullscreen mode

Imports bring ready-made Android classes into your code.

  • Button → creates a button.
  • TextView → displays text.
  • AppCompatActivity → the base screen of your app.

3. Class

class MainActivity : AppCompatActivity()
Enter fullscreen mode Exit fullscreen mode

Every Android screen is called an Activity.

This line creates your app's first screen.


4. onCreate()

override fun onCreate(savedInstanceState: Bundle?)
Enter fullscreen mode Exit fullscreen mode

This function runs when the screen opens.

Imagine opening YouTube. Everything you see is created here.


5. super.onCreate()

super.onCreate(savedInstanceState)
Enter fullscreen mode Exit fullscreen mode

This tells Android to do its normal setup before your own code runs.


6. setContentView

setContentView(R.layout.activity_main)
Enter fullscreen mode Exit fullscreen mode

This loads the XML layout.

Without this line, your app would show a blank screen.


7. findViewById

val textView = findViewById<TextView>(R.id.textView)
Enter fullscreen mode Exit fullscreen mode

This connects your Kotlin code to the TextView in the XML layout.

R.id.textView refers to:

android:id="@+id/textView"
Enter fullscreen mode Exit fullscreen mode

8. val

val button = ...
Enter fullscreen mode Exit fullscreen mode

val means a variable whose reference won't be reassigned.

Example:

val age = 25
Enter fullscreen mode Exit fullscreen mode

age always refers to that value unless you create a new variable.


9. Button Click

button.setOnClickListener {
Enter fullscreen mode Exit fullscreen mode

This means:

"When the button is clicked, run the code inside these braces."


10. Change Text

textView.text = "Hello, Kotlin!"
Enter fullscreen mode Exit fullscreen mode

This changes the text shown on the screen.

Initially:

Welcome!
Enter fullscreen mode Exit fullscreen mode

After clicking:

Hello, Kotlin!
Enter fullscreen mode Exit fullscreen mode

Understanding the XML

LinearLayout

<LinearLayout>
Enter fullscreen mode Exit fullscreen mode

A layout is a container that holds other UI elements.

LinearLayout arranges them in a line.


orientation="vertical"

android:orientation="vertical"
Enter fullscreen mode Exit fullscreen mode

This stacks items from top to bottom.

Like this:

Welcome!

Click Me
Enter fullscreen mode Exit fullscreen mode

If it were "horizontal":

Welcome!   Click Me
Enter fullscreen mode Exit fullscreen mode

TextView

<TextView
Enter fullscreen mode Exit fullscreen mode

Displays text on the screen.


Button

<Button
Enter fullscreen mode Exit fullscreen mode

Creates a button that users can tap.


android:id

android:id="@+id/button"
Enter fullscreen mode Exit fullscreen mode

This gives the button a unique name so your Kotlin code can find it.


android:text

android:text="Click Me"
Enter fullscreen mode Exit fullscreen mode

This is the label shown on the button.


layout_width

android:layout_width="wrap_content"
Enter fullscreen mode Exit fullscreen mode

wrap_content means the view is only as wide as it needs to be.

Other common value:

match_parent
Enter fullscreen mode Exit fullscreen mode

which makes it fill the available width.


What happens when you run this app?

  1. The app starts.
  2. onCreate() runs.
  3. activity_main.xml is displayed.
  4. You see:
  • Welcome!
  • Click Me button
    1. You tap the button.
    2. The text changes to: Hello, Kotlin!

Key things to learn from this example

  • Activity → A screen in your app.
  • XML → Describes what the screen looks like.
  • Kotlin → Controls how the app behaves.
  • Button → Receives user input.
  • TextView → Displays text.
  • ID → Connects XML elements to Kotlin code.
  • Click Listener → Runs code when a button is tapped.

This small app demonstrates the core pattern you'll use in almost every Android app: define the interface in XML, then write Kotlin code to respond to user actions.

Top comments (0)