What is Android User Interface (UI)?
• User Interface (UI) is the part of the app that users interact with.
• It includes everything the user sees and touches on the screen — buttons, text
fields, images, menus, and more.
• Designing a good UI is crucial because it impacts user experience (UX) and app
usability.
UI Components in Android
Android UI is built using two main types of elements:
a) Layouts
• Layouts are containers that hold UI elements (called Views).
• They define the structure and positioning of UI elements on the screen.
• Android provides several layout types, each with different ways of arranging
components:
1. Linear Layout
o Arranges child elements in a single row (horizontal) or column (vertical).
o Simple and easy to use for straightforward vertical or horizontal lists.
o Example: Placing a text label above a button.
2. Relative Layout
o Allows positioning elements relative to each other or to the parent
container.
o For example, a button can be placed below a Text View or aligned to the right
edge.
3. Constraint Layout
o Most flexible and recommended layout.
o Uses constraints to position UI elements relative to others or parent edges.
o Enables building complex and responsive UI with less nesting.
o More efficient in terms of layout rendering.
4. Frame Layout
o Simplest layout that stacks child views on top of each other.
o Useful for overlaying views or showing/hiding views dynamically.
b) Views (UI Widgets)
• Views are the basic building blocks of Android UI.
• They represent UI elements that users can see or interact with.
• Common types of Views:
1. Text View
o Displays static text on the screen.
o Used for labels, headings, descriptions.
2. Edit Text
o Allows user to enter text input.
o Can be configured for different input types like email, password, number.
3. Button
o Clickable element that performs an action.
o Can contain text or images.
4. Image View
o Displays images or icons.
5. CheckBox and Radio Button
o Allow user to make choices.
o CheckBox is for multiple selections, RadioButton for single selection among
a group.
6. Switch
o Toggle button for ON/OFF state.
7. Spinner
o Dropdown list allowing user to select one item from a list.
UI Design Principles in Android
• Consistency: Use standard UI elements so users can quickly learn app usage.
• Clarity: Make UI simple and clean with readable fonts and appropriate spacing.
• Feedback: Provide visual or textual feedback for user actions (e.g., button press,
form validation).
• Accessibility: Design UI accessible to users with disabilities (e.g., screen readers).
• Responsiveness: UI should adapt well to different screen sizes and orientations.
5. Organizing UI in XML files
• Android UI is mainly defined in XML layout files inside the res/layout directory.
• These XML files declare the hierarchy of layouts and views.
• Each element is a tag with attributes defining appearance and behavior.
• Example snippet for a button:
Code Example: Simple Login Screen UI
Goal:
• Do EditText (username, password)
• One Button (Login)
• One TextView (for message)
To create a simple login screen UI in Android, we use three basic components: two
EditText fields where the user can enter their username and password, one Button
labeled "Login" to trigger the login action, and one TextView to display messages (such
as errors or success feedback). These elements are arranged vertically using a
LinearLayout, with appropriate spacing and hints to ensure a clean and user-friendly
interface. This layout is commonly used in login forms because it's straightforward and
easy to understand.
<?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:orientation="vertical"
android:padding="24dp"
android:gravity="center">
<!-- Username Field -->
<EditText
android:id="@+id/editTextUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:inputType="textPersonName"
android:layout_marginBottom="12dp" />
<!-- Password Field -->
<EditText
android:id="@+id/editTextPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
android:layout_marginBottom="12dp" />
<!-- Login Button -->
<Button
android:id="@+id/buttonLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:layout_marginBottom="16dp" />
<!-- Message Text -->
<TextView
android:id="@+id/textViewMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textColor="#FF0000"
android:textSize="14sp" />
</LinearLayout>
Output generated
Example : #2
This UI example represents a Student Registration Form. It is designed using a
LinearLayout where all components are arranged vertically. The form asks the student to
enter their Full Name, Email, Password, and Phone Number. For gender selection, it uses
RadioButtons, and for course selection, it uses a Spinner (drop-down menu). After filling
the details, the student clicks the Register button. A TextView is included to display
confirmation or error messages.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="24dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<!-- Full Name -->
<EditText
android:id="@+id/editTextName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Full Name"
android:inputType="textPersonName"
android:layout_marginBottom="12dp" />
<!-- Email -->
<EditText
android:id="@+id/editTextEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="textEmailAddress"
android:layout_marginBottom="12dp" />
<!-- Password -->
<EditText
android:id="@+id/editTextPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
android:layout_marginBottom="12dp" />
<!-- Phone Number -->
<EditText
android:id="@+id/editTextPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Phone Number"
android:inputType="phone"
android:layout_marginBottom="12dp" />
<!-- Gender Selection -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gender:"
android:textStyle="bold"
android:layout_marginBottom="4dp" />
<RadioGroup
android:id="@+id/radioGroupGender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="12dp">
<RadioButton
android:id="@+id/radioMale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Male" />
<RadioButton
android:id="@+id/radioFemale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Female" />
</RadioGroup>
<!-- Course Selection -->
<Spinner
android:id="@+id/spinnerCourses"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp" />
<!-- Register Button -->
<Button
android:id="@+id/buttonRegister"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Register" />
<!-- Message Text -->
<TextView
android:id="@+id/textViewMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textColor="#FF0000"
android:layout_marginTop="16dp" />
</LinearLayout>
</ScrollView>
