Android User Interface Design Basics

User Interface Layout

• Orientation refers to the screen's orientation from the user's perspective.
• Two screen orientations exist: landscape (widescreen aspect ratio) and portrait (tall screen aspect ratio).
• Devices default to specific orientations, but these can change at runtime if rotated.

User Interface Terminologies

• Resolution is the total number of physical pixels on a screen.
• Screen size is the actual physical size, measured diagonally.
• Android classifies screen sizes into small, normal, large, and extra-large categories for simplicity.
• Screen density is the quantity of pixels within a physical area (measured in dots per inch, or dpi).
• Android categorizes screen densities as low, medium, high, and extra-high, with more pixels generally corresponding to higher densities.
• Density-independent pixels (dp) are a virtual unit used for UI layout, expressing dimensions and positions without density dependence.
• A dp is equivalent to one physical pixel on a 160 dpi screen.
• The system dynamically scales dp units at runtime based on the actual screen density.
• Android categorizes densities into small, normal, large, and extra-large sizes, with corresponding pixel dimensions (e.g., large screens minimum 640dp x 480dp).
• The conversion formula from dp to pixels is px = dp * (dpi / 160).

Units for Specifying User Interface

• Various units are used to define UI dimensions.
• px (pixels), in (inches), mm (millimeters), pt (points), dp (density-independent pixels), and dip (a synonym for dp) are some of these units.

User Interface Layout

• Android UI layouts are hierarchical tree structures composed of Views and ViewGroups.
• ViewGroups serve as containers for other Views or ViewGroups.
• Views are leaf nodes in this structure and directly represent UI components like buttons or text fields.

Views

• Views are the fundamental building blocks of the UI in Android.
• They are rectangular boxes that react to user interactions.
• Examples include EditText, Button, and CheckBox.
• View is the base class for all UI classes in android.
• View is responsible for handling events and drawing.

ViewGroup

• ViewGroups are subclasses of View.
• They act as containers for holding other views and defining layout properties
• Examples include LinearLayout, FrameLayout, RelativeLayout, TableLayout, and ConstraintLayout.

View Group Examples

• Common ViewGroup subclasses used in Android applications include FrameLayout, LinearLayout, RelativeLayout, GridView, ListView, TableLayout, and others.
• These are frequently used as layout elements.

Differences Between a View and a ViewGroup

• Views are basic UI elements like buttons or text boxes.
• ViewGroup is an invisible container that holds other Views and defines their layout structure.

Android Layouts

• Android layouts define the UI elements (controls or widgets) used in each screen of an app.
• All components of a layout are built in a View/ ViewGroup hierarchy.
• A ViewGroup is a container for Views (its children) and defines how they are laid out.
• Views are the components (controls) such as buttons, text boxes etc.

How to Declare a Layout

• Layouts can be defined in XML to separate the presentation from the code and make them screen-size adaptable.
• The Android framework enables using XML or programmatic approaches, or both, to construct UI elements.

Android Layout Editor

• Android Studio's Layout Editor provides a visual interface for designing and building XML layouts.
• The editor allows previewing layouts on different devices and dynamic resizing.
• Layouts are stored as XML files in the /res/layout directory.

Examples of Layout

• Common Android layouts include Linear, FrameLayout, RelativeLayout, TableLayout, and ConstraintLayout.

Linear Layout

• Layouts are arranged in single rows or columns.
• Controls can be aligned horizontally or vertically.

XML File for Linear Layout

• XML structure can include tags that define properties such as size, orientation, and content components.
• Defining in XML separates UI from app logic.
• UTF-8 encoding standard is often used.

Relative Layout

• Views are positioned relative to each other or a parent.
• Useful for creating forms.
• Positions of child views are determined by relationships to each other or the parent.

Relative Layout Example

• XML layouts define relationships among elements.

Table Layout

• TableLayout is structured in rows and columns analogous to HTML tables.
• Cells can contain multiple Views, like ImageView or TextView.

Table Layout XML Example

• XML structure defines rows, columns, and their contents.

Frame Layout

• Holds a single child; useful for tab views and image switchers.
• Child views are layered on top of each other.

Frame Layout Example

• XML layouts in FrameLayout are similar to other layouts.
• Children are positioned without relative adjustments as this method does not depend on their respective coordinates or sizes.

Tab Layout Example

• Tab layouts include labels and/or icons; content for each tab.

Constraint Layout

• Flexible layout for complex layouts in a flat hierarchy.
• Enhances performance due to reduced nesting.

Advantages of Constraint Layout

• Perform animations easily.
• Simple construction using drag-and-drop.
• Group widgets with single code lines.
• Highly optimized performance over other layouts.

Loading Layout XML Resource

• Android loads layout XML resources by using Bundle's saveInstanceState() to load the needed design into the app's layout.

Terminologies of Views and View Groups

• Padding is the space inside a view's border, between the border and its content.
• Margin is the space outside a view's border.
• Padding and margins differentiate how space is allocated in a layout.

Operations on Views

• Views can be customized via XML attributes.
• Event listeners (e.g., on click) set up dynamic interactions between controls and user actions.