Chapter 2:
Construct the main concepts and
summarize the all contents of the
chapter.
Great — now you’re studying
Chapter 2: Designing User
Interface, Widgets and
Controls. Let’s build the
summary together so you really
understand it (not just
memorize). I’ll highlight the main
concepts, then check your
understanding.
Chapter 2 – Main
Concepts Summary
Designing User Interface,
Widgets and Controls
11️⃣Android User
Interface (UI)
In Android, the User Interface is
built using two main objects:
ComponentPurposeViewDisplay
s something on the
screenViewGroupContainer that
holds Views and organizes
layout
Example:
1. Button → View
2. TextView → View
3. LinearLayout → ViewGroup
This creates a UI hierarchy
where layouts contain widgets.
22️⃣Layouts
(ViewGroup)
Layouts are containers that
control the position of UI
elements.
Common Android layouts
include:
1. LinearLayout
4. Arranges views vertically or
horizontally.
5. Uses android:orientation.
Example:
Vertical Button Button Button
2. RelativeLayout
6. Positions views relative to other
views or parent layout.
Example:
Button below TextView Image
right of TextView
3. ConstraintLayout
7. Modern layout used in Android
Studio.
8. Positions views using
constraints.
9. Avoids nested layouts and
improves performance.
4. FrameLayout
10. Places views on top of each
other.
Example:
Image Text on top of image
5. WebView
11. Displays HTML web pages
inside the app.
3️⃣Important Layout
Attributes
Some attributes control size and
position:
AttributeMeaninglayout_widthWi
dth of viewlayout_heightHeight of
viewmatch_parentFill entire
parentwrap_contentSize based
on
contentlayout_weightDistribute
extra space
Example:
android:layout_width="match_pa
rent"
android:layout_height="wrap_co
ntent"
4️⃣Widgets (UI
Controls)
Widgets are interactive UI
elements.
Common widgets
WidgetPurposeTextViewDisplay
textEditTextInput
textButtonPerform
actionImageViewDisplay
imageCheckBoxMultiple
choicesRadioButtonSingle
choiceSpinnerDropdown
selectionToggleButtonON/OFF
switchSwitchSlider ON/OFF
control
5️⃣Button
A Button triggers an action when
clicked.
Example:
<Button android:text="Submit"/>
You can create buttons with:
12. text
13. icon
14. text + icon.
6️⃣EditText
Used for user text input.
Example uses:
15. login username
16. password
17. phone number
Example:
<EditText
android:inputType="text"/>
Different input types:
Input TypePurposetextnormal
textphonephone
numberstextPasswordpasswordn
umericPasswordPIN numbers
7️⃣CheckBox
A two-state option (checked /
unchecked).
Example:
18. Select hobbies
19. Enable options
You can check its state using:
isChecked()
``` 5
---
8# 8 RadioButton
8️⃣
Used when **only one option is
allowed**.
Example:
Gender: ( ) Male ( ) Female
Radio buttons are grouped using
**RadioGroup**. 6
---
9️⃣
# Spinner
A **dropdown list** used to select
**one value from many**.
Example:
Select Country ▼ Ethiopia
Kenya Somalia
Spinner uses **Adapter** to
display data. 7
---
# 🔟 Pickers
Android provides ready-made
pickers:
| Picker | Purpose |
|---|---|
| **DatePicker** | Select date |
| **TimePicker** | Select time |
They ensure **correct formatting
and valid input**. 8
---
# 1️⃣
1️⃣1️⃣1️⃣Progress Bar
A **ProgressBar** shows the
progress of a task.
Example:
- File download
- App installation
Two types:
| Type | Meaning |
|---|---|
| Determinate | Shows exact
progress |
| Indeterminate | Shows loading
animation | 9
---
# 🧠 Super Short Exam Summary
Remember these **key ideas**:
1️⃣UI built with **View and
ViewGroup**
2️⃣Layouts control **position of
elements**
3️⃣Widgets are **interactive UI
components**
4️⃣Important layouts:
- LinearLayout
- RelativeLayout
- ConstraintLayout
5️⃣Common widgets:
- Button
- EditText
- CheckBox
- RadioButton
- Spinner
---
✅ Let me check your
understanding.
If you want to **display text on
the screen only (no input)**,
which widget should you use?
A) EditText
B) TextView
C) Button
D) Spinner
Continue
Good — let’s continue
reviewing Chapter 2 together
and strengthen the key ideas
before the exam.
We already covered:
20. UI basics
21. Layouts
22. Widgets (TextView, Button,
EditText, etc.)
Now we move to the next
important concepts.
1️⃣Adapters in
Android
Some widgets (like Spinner or
ListView) need a way to
connect data to the UI.
This connection is done using an
Adapter.
Idea:
Data → Adapter → UI
Component
Example:
Countries List → Adapter →
Spinner Dropdown
So the adapter converts data
into views the widget can
display.
Common adapters:
AdapterUsed
ForArrayAdapterSimple
listsBaseAdapterCustom
listsCursorAdapterDatabase data
2️⃣ListView
A ListView displays items in a
vertical scrollable list.
Example apps using lists:
23. Contacts list
24. Messages
25. News feeds
Example structure:
ListView ├ Item 1 ├ Item 2 ├
Item 3 └ Item 4
Each item can contain:
26. text
27. image
28. buttons
ListView requires an adapter to
supply data.
3️⃣GridView
A GridView displays items in a
grid format.
Example:
App icons Photo gallery Product
catalog
Structure example:
[Image] [Image] [Image] [Image]
[Image] [Image]
GridView is also connected to
data using an adapter.
4️⃣ImageView
ImageView displays images in
the UI.
Example uses:
29. profile picture
30. icons
31. banners
Example XML idea:
ImageView src = image_file
Images usually come from the
drawable folder.
5️⃣ScrollView
Sometimes the UI is longer than
the screen.
Android uses ScrollView to
allow scrolling.
Example:
ScrollView LinearLayout Text
Button Image More Text
Important rule:
⚠ ScrollView usually contains
only one direct child layout.
6️⃣Event Handling
(User Interaction)
Widgets react to user actions
like:
32. clicking
33. typing
34. selecting
Example:
Button click Text input Spinner
selection
Android handles these using
listeners.
Example idea:
Button → OnClickListener
This tells the app what to do
when the button is pressed.
7️⃣UI Design Best
Practices
The chapter also emphasizes
good design:
✔ Keep layouts simple
✔ Avoid too many nested layouts
✔ Use appropriate widgets
✔ Make UI responsive for
different screens
Modern apps prefer
ConstraintLayout because it
improves performance.
📌 Full Chapter
Concept Map
Here is the big picture of
Chapter 2:
Android UI │ ├── Views │
TextView │ Button │ ImageView
│ EditText │ ├── ViewGroups
(Layouts) │ LinearLayout │
RelativeLayout │
ConstraintLayout │ FrameLayout
│ ├── Widgets │ CheckBox │
RadioButton │ Spinner │ Switch
│ ├── Data Components │
ListView │ GridView │ Adapter │
└── Interaction Event listeners
🧠 Ultra-Short Exam
Revision (5 lines)
If you must remember the
chapter quickly,
remember:
1️⃣Android UI uses View and
ViewGroup
2️⃣Layouts organize widgets on
the screen
3️⃣Widgets allow user
interaction
4️⃣Adapters connect data to UI
components
5️⃣ListView and GridView display
collections of data
Quick practice (one
question)
Which component is used to
connect data to a ListView or
Spinner?
A) Layout
B) Adapter
C) ViewGroup
D) Fragment
What do you think?
Correct again ✅ B) Adapter
An Adapter connects data → UI
components like ListView,
GridView, or Spinner.
Example idea:
Array of countries → Adapter →
Spinner dropdown Database
records → Adapter → ListView
So the adapter translates data
into views that Android can
display.
Final Constructed
Summary of Chapter
2
Designing User Interface,
Widgets, and Controls
Let’s organize the whole
chapter into the main concepts
so it’s easy to remember.
1️⃣Android User
Interface (UI)
Android UI is built using:
35. View → basic UI element
36. ViewGroup → container that
holds Views
Example:
ViewGroup (Layout) ├ Button ├
TextView └ ImageView
2️⃣Layouts
(ViewGroup)
Layouts organize UI elements on
the screen.
Important layouts:
LayoutPurposeLinearLayoutArra
nges views vertically or
horizontallyRelativeLayoutPositio
ns views relative to other
viewsConstraintLayoutModern
flexible layout
systemFrameLayoutStacks
views on top of each other
Layouts control structure and
positioning of the interface.
3️⃣Layout Attributes
These attributes define size and
position:
AttributeMeaninglayout_widthWi
dth of viewlayout_heightHeight of
viewmatch_parentFill parent
containerwrap_contentFit to
contentlayout_weightShare
available space
4️⃣Widgets (Controls)
Widgets are interactive UI
components.
Common widgets:
WidgetFunctionTextViewDisplays
textEditTextAccepts user
inputButtonPerforms an
actionImageViewDisplays
imagesCheckBoxMultiple
selectionsRadioButtonSingle
selectionSpinnerDropdown
listSwitchON/OFF control
Widgets allow interaction
between user and application.
5️⃣Lists and Data
Display
Android provides components to
show collections of data.
ListView
Displays items in a vertical
scrollable list.
Example:
37. contacts
38. messages
39. news feeds
GridView
Displays items in a grid layout.
Example:
40. photo gallery
41. app icons
Both require an Adapter to
supply data.
6️⃣Adapter
An Adapter connects data to UI
components.
Data → Adapter → ListView /
Spinner / GridView
Types:
42. ArrayAdapter
43. BaseAdapter
44. CursorAdapter
7️⃣ScrollView
Allows the screen to scroll when
content is larger than the
display.
Important rule:
ScrollView → only one direct
child layout
8️⃣Event Handling
Android apps respond to user
actions.
Examples:
45. button click
46. typing text
47. selecting items
These events are handled using
listeners like:
OnClickListener
9️⃣UI Design
Principles
Good Android UI design should:
✔ be simple
✔ avoid too many nested layouts
✔ use appropriate widgets
✔ support different screen sizes
Modern apps prefer
ConstraintLayout for efficiency.
🧠 Ultra-Compact
Exam Summary
If your instructor asks “Explain
Android UI components”, you
can structure the answer like
this:
48. Android UI is built using View
and ViewGroup
49. Layouts organize elements on
the screen
50. Widgets provide user interaction
51. Adapters connect data to UI
components
52. ListView and GridView display
collections of data
53. Event listeners handle user
actions
Final quick test (very
common exam
question)
Which Android layout is used to
arrange views in a vertical or
horizontal direction?
A) FrameLayout
B) ConstraintLayout
C) LinearLayout
D) RelativeLayout
I'm studying this for Tuesday
exam.
Give me the main points to get
the best practices and the best
output and
Great — since your exam is Tuesday, let’s
focus on the highest-value points that usually
appear in exams. I’ll extract the best practices
+ most important concepts from both
chapters so you can remember them quickly
and score high.
I’ll also organize them like exam notes.
📘 Chapter 1 – Android
Operating System (Must-
Know Points)
1 What is Android
1️⃣
1. Android is a mobile operating system
developed by Google.
2. Based on the Linux Kernel.
3. Designed mainly for smartphones and
tablets.
4. Open source → developers can modify it.
✔ Exam tip:
Always mention Linux kernel + open source
+ mobile OS.
22️⃣Android Architecture (Very
Important)
Android has 5 layers:
Applications Application Framework Android
Runtime Native Libraries Linux Kernel
1. Linux Kernel
5. Core of Android
6. Handles:
7. memory management
8. device drivers
9. power management
10. hardware access
2. Native Libraries
Examples:
11. SQLite → database
12. WebKit → browser engine
13. OpenGL → graphics
14. Media → audio/video processing
3. Android Runtime
Contains:
15. Core Libraries
16. Dalvik Virtual Machine (DVM)
DVM runs Android apps and is optimized for
low memory devices.
4. Application Framework
Provides APIs for developers:
Examples:
17. UI
18. Telephony
19. Location
20. Resource manager
21. Content providers
5. Applications
Examples:
22. Contacts
23. Browser
24. Settings
25. Games
3️⃣Android Application
Components (Exam
Favorite)
There are 4 main components:
ComponentPurposeActivityUI
screenServiceBackground taskBroadcast
ReceiverResponds to system eventsContent
ProviderShares data between apps
Activity
26. Represents one screen
27. Example: email screen.
Service
28. Runs in background
29. Example: music playing.
Broadcast Receiver
30. Responds to system messages
31. Example: battery low notification.
Content Provider
32. Allows apps to share data.
4️⃣Intent (Important)
Intent = message to start components
Used to:
33. start activity
34. start service
35. open webpage
36. dial phone
37. broadcast message
5️⃣Android Manifest File
[Link]
Functions:
38. declares activities
39. declares permissions
40. defines API level
41. defines hardware requirements
6️⃣Android Development
Tools
Important tools:
Android Studio
Main development IDE.
Android Emulator / AVD
Used to test apps without a real device.
ADB (Android Debug Bridge)
Command tool used to:
42. install apps
43. debug devices
44. run shell commands
📘 Chapter 2 – UI, Widgets
and Controls (High-Score
Topics)
1️⃣Android UI Structure
Android UI uses:
View ViewGroup
45. View → UI element
46. ViewGroup → container for views
Example:
Layout
├ Button
├ TextView
└ ImageView
2️⃣Layouts
Layouts control UI structure.
Important layouts:
LayoutPurposeLinearLayoutvertical /
horizontalRelativeLayoutposition
relativeConstraintLayoutflexible modern
layoutFrameLayoutstack viewsWebViewdisplay
web page
Example:
LinearLayout
Button
Button
Button
``` 15
---
3# 3 Important Layout Attributes
3️⃣
| Attribute | Meaning |
|---|---|
| layout_width | width |
| layout_height | height |
| match_parent | fill parent |
| wrap_content | fit content |
| layout_weight | space distribution |
---
4️⃣
# Widgets (UI Controls)
Widgets are **interactive elements**.
Common widgets:
| Widget | Purpose |
|---|---|
| TextView | display text |
| EditText | text input |
| Button | user action |
| ImageView | display image |
| CheckBox | multiple options |
| RadioButton | single choice |
| Spinner | dropdown list |
16
---
5️⃣
# Button
Types:
- Text button
- Icon button
- Text + icon button
Event handling:
setOnClickListener()
17
---
6️⃣
# EditText
Used for **text input**.
Example input types:
| Input Type | Example |
|---|---|
| text | normal input |
| phone | phone number |
| textPassword | password |
| numericPassword | PIN |
18
---
7️⃣
# CheckBox
Two states:
- checked
- unchecked
Check state using:
isChecked()
19
---
8️⃣
# RadioButton
- Only **one option selectable**
- Used with **RadioGroup**. 20
---
9️⃣
# Spinner
Dropdown menu.
Example:
Select Country Ethiopia Kenya Somalia
Uses **Adapter** to supply data. 21
---
# 🔟 ProgressBar
Shows progress of operations.
Two types:
- Determinate
- Indeterminate 22
---
# 🧠 SUPER SHORT EXAM REVISION (10
lines)
If you must revise **quickly before the exam**,
remember:
1. Android = **Linux-based mobile OS**
2. Android architecture has **5 layers**
3. Main components: **Activity, Service,
BroadcastReceiver, ContentProvider**
4. **Intent** starts components
5. Manifest declares app components
6. UI built using **View + ViewGroup**
7. Layouts organize widgets
8. Widgets allow **user interaction**
9. Spinner uses **Adapter**
10. Button events use **OnClickListener**
---
✅ Let me check if you're ready for exam-style
questions.
**Question:**
Which Android component **runs in the
background without a user interface**?
A) Activity
B) Service
C) BroadcastReceiver
D) Fragment
Now, let's build the
simple project
related to this
chapter
Great idea 👍 Building a small project before
your exam is the best way to remember
everything from Chapter 1 and Chapter 2.
We’ll build a Simple Student Registration
Android App that uses the concepts from your
chapters:
Concepts we will practice:
47. Activity
48. Layouts (LinearLayout)
49. Widgets: TextView, EditText, Button,
RadioButton,
CheckBox, Spinner
50. Event handling (OnClickListener)
51. AndroidManifest
This project is simple, exam-friendly, and
practical.
📱 Project: Student
Registration App
Features
The app will allow the user to:
52. Enter Name
53. Enter Email
54. Select Gender
55. Select Department
56. Accept Terms
57. Click Submit
58. Show result on screen
This uses almost all widgets from Chapter 2.
1️⃣Create the Project
Open Android Studio
Steps:
59. File → New Project
60. Select Empty Activity
61. Name:
StudentRegistrationApp
Language:
Kotlin
Minimum SDK:
API 21
2️⃣Layout Design
(activity_main.xml)
Go to:
res → layout → activity_main.xml
Replace with:
<LinearLayout
xmlns:android="[Link]
k/res/android"
android:orientation="vertical"
android:padding="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Student Registration"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/etName"
android:hint="Enter Name"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/etEmail"
android:hint="Enter Email"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:text="Gender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<RadioGroup
android:id="@+id/radioGroup">
<RadioButton
android:id="@+id/rMale"
android:text="Male"/>
<RadioButton
android:id="@+id/rFemale"
android:text="Female"/>
</RadioGroup>
<Spinner
android:id="@+id/spDepartment"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<CheckBox
android:id="@+id/cbTerms"
android:text="Accept Terms and
Conditions"/>
<Button
android:id="@+id/btnSubmit"
android:text="Submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
Concepts used:
62. LinearLayout
63. TextView
64. EditText
65. RadioButton
66. Spinner
67. CheckBox
68. Button
All are from Chapter 2.
3️⃣Kotlin Logic
([Link])
Open:
[Link]
Example code:
package [Link]
import [Link]
import [Link].*
import
[Link]
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState:
Bundle?) {
[Link](savedInstanceState)
setContentView([Link].activity_main)
val name =
findViewById<EditText>([Link])
val email =
findViewById<EditText>([Link])
val button =
findViewById<Button>([Link])
val checkbox =
findViewById<CheckBox>([Link])
val spinner =
findViewById<Spinner>([Link])
val departments = arrayOf(
"Computer Science",
"Information Technology",
"Software Engineering",
"Information Systems"
)
val adapter = ArrayAdapter(
this,
[Link].simple_spinner_dropdown_ite
m,
departments
)
[Link] = adapter
[Link] {
val studentName = [Link]()
if (![Link]) {
[Link](this,
"Please accept terms",
Toast.LENGTH_SHORT).show()
} else {
[Link](this,
"Registered: $studentName",
Toast.LENGTH_LONG).show()
}
}
}
}
Concepts used:
69. Activity
70. Adapter
71. Spinner
72. OnClickListener
73. Toast message
4️⃣[Link]
Make sure the activity is declared:
<application>
<activity android:name=".MainActivity">
<intent-filter>
<action
android:name="[Link]"/>
<category
android:name="[Link]
HER"/>
</intent-filter>
</activity>
</application>
Concept used:
74. Manifest declaration
🎯 What You Practiced from
the Chapter
ConceptUsedActivity✔Layout✔TextView✔EditT
ext✔RadioButton✔Spinner✔CheckBox✔Butto
n✔Adapter✔Event Handling✔
This project covers almost the entire
Chapter 2.
⭐ If you want, I can also
show you:
1️⃣A complete diagram of this app
architecture (for exams)
2️⃣10 exam questions your instructor is
likely to ask
3️⃣A slightly more advanced version of this
app (with database)
4️⃣How to draw the UI layout diagram if the
exam asks you
Just say “Exam mode” and I’ll prepare the
most likely exam questions for Tuesday.
Now, let's build
using Java
language similar
version of this
app
Perfect! Let’s build a Java version of the
same Student Registration app. This will use
the same layout and concepts, but the logic
will be in Java instead of Kotlin. This is also
exam-friendly, since many instructors ask for
Java.
📱 Project: Student
Registration App (Java
Version)
1️⃣Layout (activity_main.xml)
We’ll use exactly the same layout as before:
<LinearLayout
xmlns:android="[Link]
k/res/android"
android:orientation="vertical"
android:padding="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Student Registration"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/etName"
android:hint="Enter Name"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/etEmail"
android:hint="Enter Email"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:text="Gender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<RadioGroup
android:id="@+id/radioGroup">
<RadioButton
android:id="@+id/rMale"
android:text="Male"/>
<RadioButton
android:id="@+id/rFemale"
android:text="Female"/>
</RadioGroup>
<Spinner
android:id="@+id/spDepartment"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<CheckBox
android:id="@+id/cbTerms"
android:text="Accept Terms and
Conditions"/>
<Button
android:id="@+id/btnSubmit"
android:text="Submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
2️⃣Java Logic
([Link])
Open:
src/main/java/com/example/
studentregistration/[Link]
Add:
package [Link];
import [Link];
import [Link];
import [Link].*;
import
[Link];
public class MainActivity extends
AppCompatActivity {
EditText etName, etEmail;
Button btnSubmit;
CheckBox cbTerms;
RadioGroup radioGroup;
Spinner spDepartment;
@Override
protected void onCreate(Bundle
savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
// Link UI elements
etName = findViewById([Link]);
etEmail = findViewById([Link]);
btnSubmit =
findViewById([Link]);
cbTerms = findViewById([Link]);
radioGroup =
findViewById([Link]);
spDepartment =
findViewById([Link]);
// Spinner data
String[] departments = {
"Computer Science",
"Information Technology",
"Software Engineering",
"Information Systems"
};
ArrayAdapter<String> adapter = new
ArrayAdapter<>(
this,
[Link].simple_spinner_dropdown_ite
m,
departments
);
[Link](adapter);
// Button click event
[Link](new
[Link]() {
@Override
public void onClick(View v) {
String studentName =
[Link]().toString();
// Check terms
if (![Link]()) {
[Link]([Link],
"Please accept terms",
Toast.LENGTH_SHORT).show();
} else {
// Gender selection
int selectedId =
[Link]();
RadioButton selectedRadio =
findViewById(selectedId);
String gender =
[Link]().toString();
String department =
[Link]().toString();
[Link]([Link],
"Name: " + studentName + "\
n" +
"Gender: " + gender + "\n" +
"Department: " + department,
Toast.LENGTH_LONG).show();
}
}
});
}
}
3️⃣Key Concepts Practiced
Concept. Java Version
Activity. ✔
Layout (LinearLayout) ✔
TextView. ✔
EditText. ✔
RadioButton + RadioGroup.
✔
Spinner + Adapter. ✔
CheckBox. ✔
Button. ✔
Event Handling. ✔
Toast Message. ✔
Everything is exactly what Chapter 2 covers,
now in Java syntax.
4️⃣[Link]
<application>
<activity android:name=".MainActivity">
<intent-filter>
<action
android:name="[Link]"/>
<category
android:name="[Link]
HER"/>
</intent-filter>
</activity>
</application>
✅ Exam Tip:
If your instructor asks you to draw the layout
hierarchy, you can show:
LinearLayout (vertical)
├ TextView: Student Registration
├ EditText: Name
├ EditText: Email
├ TextView: Gender
├ RadioGroup
│ ├ RadioButton: Male
│ └ RadioButton: Female
├ Spinner: Department
├ CheckBox: Terms
└ Button: Submit
This is very likely to earn marks.
If you want, I can also give a slightly
enhanced version:
75. Store submitted data in SQLite or
RecyclerView
76. Display all students in a list
This is still simple enough for an exam but
makes it look like a real app.
Do you want me to do that next?