🎨 UI – Views और Layouts · Lesson 11
TextView, EditText और Button
TextView
TextView text दिखाता है। ज़रूरी 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" />| Attribute | असर |
|---|---|
| textSize / textStyle / textColor | sp में size, bold/italic, colour |
| maxLines + ellipsize="end" | लंबा text … से काटें |
| gravity | View के अंदर text align |
| drawableStart + drawablePadding | Text के बगल में icon |
strings.xml use करें
सारा text res/values/strings.xml में रखें। इससे Hindi translation (values-hi/strings.xml file) और reuse आसान होता है।
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 और 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" />| inputType | Keyboard |
|---|---|
| text / textCapWords | Normal / पहले letters capital |
| number / numberDecimal | Digits / dot वाले digits |
| phone | Phone dial pad |
| textEmailAddress | @ वाला keyboard |
| textPassword | छिपे characters |
| textMultiLine | Enter से नई 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>Button और 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 = falseMini 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)
}
}
}Keyboard tips
android:imeOptions="actionNext"अगले field पर ले जाता है;actionDonekeyboard बंद करता है।- Manifest में activity पर
android:windowSoftInputMode="adjustResize"लगाएँ ताकि keyboard form को न ढके।
आम गलतियाँ
- खाली box पर
etWeight.text.toString().toDouble()→NumberFormatException।toDoubleOrNull()use करें। textView.text = 5→ type error;5.toString()use करें।setText(5)crash करता है (string resource 5 ढूँढता है)।- Error TextInputLayout की जगह EditText पर set करना →
til.erroruse करें।
सारांश
- Text के लिए TextView, input के लिए (TextInputLayout के अंदर) EditText, actions के लिए Button।
- inputType keyboard control करता है; strings.xml में text।
- पढ़ो → validate (til.error) → काम करो; numbers
toDoubleOrNull()से।
✅ Practice
"Percentage calculator" बनाइए: obtained और total marks के inputs, एक button, और "85.0% – Distinction" जैसा result। खाली fields और obtained > total पर errors दिखाइए।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
EditText से number safely कैसे पढ़ें?
editText.text.toString().toDoubleOrNull() use करें। Box खाली हो या text हो तो crash की जगह null देता है, जिससे आप error दिखा सकते हैं।
hint और text में क्या फ़र्क है?
hint grey placeholder text है जो type करते ही गायब हो जाता है। text box के अंदर की असली value है।
Plain EditText की जगह TextInputLayout क्यों?
इससे floating label, field के नीचे error messages, character counter, password toggle और icons मिलते हैं — Material Design look जो users expect करते हैं।
