UNIT 03:UI COMPONENTS AND LAYOUTS 08 MARKS

AndroidManifest.xml:

• Every project in Android includes a manifest file, which is AndroidManifest.xml, stored in

the root directory of its project hierarchy.

• The manifest file is an important part of our app because it defines the structure and
metadata of our application, its components, and its requirements.

• This file includes nodes for each of the Activities, Services, Content Providers and
Broadcast Receiver that make the application and using Intent Filters and Permissions,
determines how they co-ordinate with each other and other applications.

• Java:

• The Java folder contains the Java source code files. These files are used as a controller
for controlled UI (Layout file). It gets the data from the Layout file and after processing

1
 that data output will be shown in the UI layout. It works on the backend of an Android
application.

• drawable: A Drawable folder contains resource type file (something that can be
drawn). Drawables may take a variety of file like Bitmap (PNG, JPEG), Nine Patch, Vector
(XML), Shape, Layers, States, Levels, and Scale.

• layout: A layout defines the visual structure for a user interface, such as the UI for an
Android application. This folder stores Layout files that are written in XML language

• mipmap: Mipmap folder contains the Image Asset file that can be used in Android
Studio application. You can generate the icon types like Launcher icons, Action bar and
tab icons, and Notification icons.
• colors.xml: colors.xml file contains color resources of the Android application. Different
color values are identified by a unique name that can be used in the Android application
program.
• strings.xml: The strings.xml file contains string resources of the Android application.
The different string value is identified by a unique name that can be used in the Android
application program. This file also stores string array by using XML language.
• Below is a sample strings.xml file:
• <resources>
• <string name="app_name">MM Polytechnic</string>
• </resources>

• styles.xml: The styles.xml file contains resources of the theme style in the Android
application. This file is written in XML language
• build.gradle(Module: app): This defines the module-specific build configurations. Here
you can add dependencies what you need in your Android application.

Control Flow in Android

Control flow in Android applications is primarily governed by Activities, Fragments,

Services, and their lifecycle methods. Here's an overview of the control flow:

1. Activity Lifecycle

The Activity class is the entry point for user interaction. Its lifecycle methods dictate
the control flow:

 onCreate(): Called when the activity is created. Used for initialization (e.g.,
inflating layouts, initializing components).
 onStart(): Called when the activity becomes visible to the user.
 onResume(): Called when the activity starts interacting with the user.
 onPause(): Called when the activity is partially obscured (e.g., another activity
comes into focus).
 onStop(): Called when the activity is no longer visible.
 onDestroy(): Called when the activity is destroyed.
 onRestart(): Called when the activity restarts after being stopped.

2
2. Fragment Lifecycle

Fragments are reusable components within activities and have a similar lifecycle:

 onAttach()
 onCreate()
 onCreateView()
 onStart()
 onResume()
 onPause()
 onStop()
 onDestroyView()
 onDestroy()
 onDetach()

3. Service Lifecycle

Services manage background operations:

 onCreate()
 onStartCommand(): Handles service requests.
 onDestroy()

4. Broadcast Receivers

Broadcast receivers respond to system or app events:

 Triggered by intents (e.g., battery status, network changes).

5. Intents

Used to navigate between activities, send data, or start services:

 Explicit Intent: Specifies the target component.

 Implicit Intent: Specifies an action to be performed.

6. Threading and Async

Android handles threading using:

 Main/UI Thread: Handles UI updates.

 Worker Threads: For background tasks (e.g., AsyncTask, HandlerThread, Kotlin
Coroutines).

Directory Structure in Android

Android projects follow a standardized directory structure for organizing code and
resources:

1. app/

The main directory for your application.

3
a. src/

Contains the source code.

 main/
o java/: Contains Java/Kotlin source files.
o res/: Resource files.
 layout/: XML layout files.
 drawable/: Images and vector assets.
 values/: XML files for colors, strings, styles, dimensions, etc.
 menu/: Menu definitions.
o AndroidManifest.xml: Defines the app structure, components, and
permissions.
 test/: Unit test cases.
 androidTest/: Instrumentation tests.

b. build/

Generated files and build outputs.

2. gradle/

Gradle build scripts and configuration.

3. .idea/

Project-specific IDE settings for Android Studio.

4. External Directories

 libs/: External libraries (JAR or AAR files).

 assets/: App assets (e.g., fonts, raw files).

Component of Layout :-
1. View Components

These are the building blocks of the UI, representing individual interactive or static
elements.

Common View Components

 TextView: Displays text on the screen.

 EditText: Allows the user to input text.
 Button: A clickable button.
 ImageView: Displays images or icons.
 CheckBox: A two-state checkbox.
 RadioButton: A single-choice button, used within a RadioGroup.
 ProgressBar: Displays progress (indeterminate or determinate).
 Switch: A toggle switch for on/off states.
 SeekBar: A slider for selecting a value within a range.
4
2. Layout Components

Layouts define the arrangement of child views and other layouts.

Types of Layouts

 LinearLayout: Arranges elements in a single row or column.

 RelativeLayout: Positions elements relative to each other or the parent
container.
 ConstraintLayout: A flexible layout allowing constraints between views for
complex designs.
 FrameLayout: A single container for holding one child view or overlapping
multiple views.
 TableLayout: Arranges views in rows and columns.
 GridLayout: Lays out views in a grid-like structure.

3. Specialized Components

Components that enhance interaction, display data, or support advanced UI

requirements.

Data Display Components

 RecyclerView: Displays large data sets in a list or grid, replacing the older
ListView.
 ListView: Displays scrollable lists (deprecated for RecyclerView in modern apps).
 GridView: Displays items in a grid format.
 ScrollView: Enables vertical scrolling for a group of views.
 ViewPager: Allows horizontal swiping between pages or fragments.

Navigation Components

 Toolbar: A customizable action bar at the top of the screen.

 NavigationView: A panel for app navigation, usually paired with a drawer
layout.
 BottomNavigationView: A bar at the bottom for switching between top-level
destinations.
 TabLayout: Displays tabs for navigating between pages.

Dialogs and Popups

 AlertDialog: Displays alerts or choices.

 Snackbar: A lightweight message bar at the bottom of the screen.
 PopupMenu: Displays a menu in a popup anchored to a view.

Other Specialized Views

 CardView: Displays content in a card-like container with rounded corners.

 FloatingActionButton: A circular button for primary actions.

5
4. Advanced Components

For integrating animations, custom views, or complex UIs:

 SurfaceView: For drawing directly onto the screen.

 WebView: Displays web pages inside the app.
 Custom Views: Developers can create custom views by extending View or
ViewGroup.

5. System UI Components

Android provides pre-defined components to integrate with system-level features:

 Status Bar: Displays notifications and system status.

 Navigation Bar: Houses system navigation buttons (Back, Home, Overview).
 Action Bar: A bar at the top for app titles and actions.

Fundamentals of UI Design :-

Material Design: Follow Google's Material Design principles for consistency, hierarchy,
motion, and responsiveness.

1. Layouts: Use appropriate layouts like:

o ConstraintLayout for flexibility.
o LinearLayout for simple rows/columns.
o ScrollView or RecyclerView for scrolling content.
2. Responsive Design:
o Support various screen sizes using dp and sp.
o Create layouts for different screen densities and orientations.
3. Typography:
o Use sp for text sizes.
o Follow predefined styles for headings, body text, etc.
4. Colors and Themes:
o Use a consistent color palette.
o Define light and dark themes for better user experience.
5. Navigation:
o Implement navigation patterns like BottomNavigation, Drawer, or
TabLayout.
o Use the Navigation Component for managing destinations.
6. Interactive Elements:
o Use tappable components like Buttons, FloatingActionButton, and
CardView.
o Provide feedback (visual or haptic) for user actions.
7. Animations:
o Add subtle animations using MotionLayout, Animator, or Lottie.
8. Accessibility:
o Use contentDescription for screen readers.
o Ensure sufficient contrast and scalable fonts.
9. Localization:
o Use strings.xml for translatable content.

6
 o Support multiple languages and regions.
10. Testing:
o Test UI on multiple screen sizes and devices.
o Use tools like Espresso and Layout Inspector for optimization.

Types of Layouts in Android

Android provides different types of layouts to organize the UI elements effectively.

Below is an overview of the most common layouts:

1. Linear Layout

 Description: Arranges child views in a single row (horizontal) or column

(vertical).
 Key Attributes:
o orientation: Defines the direction (horizontal or vertical).
o layout_weight: Assigns relative sizes to child views.
 Advantages:
o Simple and intuitive.
o Ideal for straightforward vertical or horizontal arrangements.

2. Absolute Layout (Deprecated)

 Description: Positions child views at exact x and y coordinates.

 Key Attributes:
o layout_x: Specifies the x-coordinate.
o layout_y: Specifies the y-coordinate.
 Advantages:
o Precise positioning.
 Disadvantages:
o Not flexible for different screen sizes and resolutions.
o Deprecated in favor of more adaptive layouts like ConstraintLayout.

3. Frame Layout

 Description: Stacks all child views on top of each other, with the most recent
child drawn last (on top).
 Key Attributes:
o Typically used to display a single child or overlap multiple views.
 Advantages:
o Simple for single-view or overlay use cases.

4. Table Layout

 Description: Arranges child views into rows and columns like a table.
 Key Attributes:
o TableRow: Defines a row within the table.
o All children inside a TableRow are arranged horizontally.
o
 Advantages:

7
 o Useful for structured layouts like forms.

5. Relative Layout (Superseded by ConstraintLayout)

 Description: Positions child views relative to each other or the parent container.
 Key Attributes:
o layout_alignParentTop, layout_alignParentStart: Positions a view relative to the
parent.
o layout_toRightOf, layout_below: Positions a view relative to another view.
 Advantages:
o Flexible and suitable for complex designs.
 Disadvantages:
o Harder to maintain for larger layouts.

Which Layout to Use?

 LinearLayout: Simple, linear arrangements.

 FrameLayout: Single or overlapping views.
 TableLayout: Tabular data or forms.
 RelativeLayout: Flexible positioning but better replaced by ConstraintLayout.
 AbsoluteLayout: Avoid using; it's deprecated.

For modern and complex designs, prefer ConstraintLayout for better performance
and flexibility.