Free tutorials & notes in Hindi & English · Clean code examples 🧰 Free PDF & Image Tools →
🎨 UI – Views & Layouts  ·  Lesson 11

TextView, EditText & Button

TextView

TextView shows text. Important attributes:

XML
<TextView
    android:id="@+id/tvWelcome"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/welcome"
    android:textSize="20sp"
    android:textStyle="bold"
    android:textColor="@color/brand"
    android:gravity="center"
    android:maxLines="2"
    android:ellipsize="end"
    android:drawablePadding="8dp"
    android:drawableStart="@drawable/ic_star" />
AttributeEffect
textSize / textStyle / textColorSize in sp, bold/italic, colour
maxLines + ellipsize="end"Cut long text with …
gravityAlign text inside the view
drawableStart + drawablePaddingIcon next to the text

Use strings.xml

Keep all text in res/values/strings.xml. It makes Hindi translation (a values-hi/strings.xml file) and reuse easy.

XML + Kotlin
<!-- res/values/strings.xml -->
<resources>
    <string name="app_name">BMI Calculator</string>
    <string name="welcome">Welcome to BMI Calculator</string>
    <string name="your_bmi">Your BMI is %1$.1f (%2$s)</string>
</resources>

// Kotlin
tvResult.text = getString(R.string.your_bmi, 22.7, "Normal")   // "Your BMI is 22.7 (Normal)"

EditText and inputType

XML
<EditText
    android:id="@+id/etWeight"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Weight in kg"
    android:inputType="numberDecimal"
    android:maxLength="5"
    android:imeOptions="actionNext" />
inputTypeKeyboard
text / textCapWordsNormal / capital first letters
number / numberDecimalDigits / digits with dot
phonePhone dial pad
textEmailAddressKeyboard with @
textPasswordHidden characters
textMultiLineEnter key makes new line

Material TextInputLayout

XML
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/tilHeight"
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Height in cm"
    app:helperText="Example: 165"
    app:suffixText="cm">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/etHeight"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:imeOptions="actionDone" />
</com.google.android.material.textfield.TextInputLayout>

<!-- password with eye icon -->
<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Password"
    app:endIconMode="password_toggle">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
9:41▮▮ 85%Sign up⋮Height in cmExample: 165Password 👁9:41▮▮ 85%Sign up⋮Height in cm⚠ Enter height in cmPassword 👁
Helper text, then an error set with til.error = "…"

Button and click listeners

Kotlin
// 1) lambda (most common)
btnCalculate.setOnClickListener { calculate() }

// 2) long press
btnCalculate.setOnLongClickListener {
    Toast.makeText(this, "Tap to calculate", Toast.LENGTH_SHORT).show()
    true                                  // true = event handled
}

// 3) enable / disable
btnCalculate.isEnabled = false

Mini project: BMI calculator

XML – res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="24dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/welcome"
        android:textSize="22sp"
        android:textStyle="bold" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilWeight"
        style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:hint="Weight"
        app:suffixText="kg">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etWeight"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="numberDecimal" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilHeight"
        style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:hint="Height"
        app:suffixText="cm">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etHeight"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:imeOptions="actionDone"
            android:inputType="number" />
    </com.google.android.material.textfield.TextInputLayout>

    <Button
        android:id="@+id/btnCalculate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Calculate BMI" />

    <TextView
        android:id="@+id/tvResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:gravity="center"
        android:textSize="20sp" />
</LinearLayout>
Kotlin – MainActivity.kt
package com.example.bmi

import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.textfield.TextInputEditText
import com.google.android.material.textfield.TextInputLayout

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tilWeight = findViewById<TextInputLayout>(R.id.tilWeight)
        val tilHeight = findViewById<TextInputLayout>(R.id.tilHeight)
        val etWeight = findViewById<TextInputEditText>(R.id.etWeight)
        val etHeight = findViewById<TextInputEditText>(R.id.etHeight)
        val tvResult = findViewById<TextView>(R.id.tvResult)

        findViewById<Button>(R.id.btnCalculate).setOnClickListener {
            val weight = etWeight.text?.toString()?.toDoubleOrNull()
            val heightCm = etHeight.text?.toString()?.toDoubleOrNull()

            tilWeight.error = if (weight == null || weight <= 0) "Enter weight" else null
            tilHeight.error = if (heightCm == null || heightCm < 50) "Enter height in cm" else null
            if (tilWeight.error != null || tilHeight.error != null) return@setOnClickListener

            val h = heightCm!! / 100
            val bmi = weight!! / (h * h)
            val category = when {
                bmi < 18.5 -> "Underweight"
                bmi < 25 -> "Normal"
                bmi < 30 -> "Overweight"
                else -> "Obese"
            }
            tvResult.text = getString(R.string.your_bmi, bmi, category)
        }
    }
}
9:41▮▮ 85%BMI Calculator⋮Welcome to BMI CalculatorWeight 62 kgHeight 165 cmCALCULATE BMIYour BMI is 22.8 (Normal)
Validation + calculation + formatted result
Read texttoDoubleOrNull()Validatetil.errorCalculatew / h²ShowgetString(…)
The pattern for every form

Keyboard tips

  • android:imeOptions="actionNext" moves to the next field; actionDone closes the keyboard.
  • Add android:windowSoftInputMode="adjustResize" to the activity in the manifest so the keyboard does not cover the form.

Common mistakes

  • etWeight.text.toString().toDouble() on an empty box → NumberFormatException. Use toDoubleOrNull().
  • textView.text = 5 → type error; use 5.toString(). setText(5) crashes (looks for string resource 5).
  • Setting the error on the EditText instead of the TextInputLayout → use til.error.

Summary

  • TextView for text, EditText (inside TextInputLayout) for input, Button for actions.
  • inputType controls the keyboard; strings.xml holds text.
  • Read → validate (til.error) → act; numbers with toDoubleOrNull().
✅ Practice

Build a "Percentage calculator": inputs for obtained and total marks, a button, and a result like "85.0% – Distinction". Show errors for empty fields and obtained > total.

Frequently Asked Questions

How do I read a number from an EditText safely?
Use editText.text.toString().toDoubleOrNull(). It returns null instead of crashing when the box is empty or contains text, so you can show an error.
What is the difference between hint and text?
hint is grey placeholder text that disappears when the user types. text is the real value inside the box.
Why use TextInputLayout instead of a plain EditText?
It gives a floating label, error messages under the field, character counter, password toggle and icons — the Material Design look users expect.
← Android Tutorial (Kotlin)
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

Next topicView Binding Your progress: 11 / 43 (26%) · Lesson 12 / 43 Continue →

How was this lesson?

Your feedback helps us make the content better.

Write a review or suggestion (optional)

After approval, your name and city may appear publicly with your review. Please do not write your email or phone number.

▶ CodingEasily on YouTube

Learn with video lessons in easy Hindi

Featured video: RDBMS Part 3 – Class XI Commerce IT

▶ Subscribe – it’s free
RDBMS Part 3 – Class XI Commerce IT – video thumbnailRDBMS Part 3 – Class XI Commerce IT