Unit 2
Layouts and its Types
• An Android UI layout is a container that defines the structure and positioning
of UI components on the screen.
• It helps organize views like buttons, text fields, and images into a functional
interface that adapts to various device configurations.
Types of Android UI Layouts
• Android provides several layout classes to help us design flexible and
responsive user interfaces.
Each layout type serves a specific purpose:
• LinearLayout: Arranges elements in a single row or column
• RelativeLayout: Positions elements relative to each other or the parent
• FrameLayout: Displays a single view or stacks multiple views
• ConstraintLayout: Offers a flat view hierarchy with flexible constraints
• TableLayout: Organizes elements into rows and columns like a table
1. Linear Layout
• This view group aligns all of its children in a single direction, either vertically or
horizontally.
• The android:orientation attribute specifies the layout’s direction.
<LinearLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<!-- Include other widget or layout tags here. These are considered
"child views" or "children" of the linear layout -->
</LinearLayout>
2. Relative Layout
• RelativeLayout is a view group that places its child views relative to one
another.
• Each view’s location can be set relative to sibling components (such as to the
left or below another view) or relative to the RelativeLayout area of its
parent (such as aligned to the bottom, left or center).
3. Frame Layout
• FrameLayout is a layout that is designed to show one view at a time.
• We can add multiple views inside it, but by default, they will overlap, since all
are placed at the top-left corner.
• It is best used when you want to stack views, like putting a button on top of an
image.
• If we add more than one view, we can control their position
using:android:layout_gravity="center“.
4. Constraint Layout
• ConstraintLayout permits the creation of complicated layouts with a flat view
hierarchy (no nested view groups).
• It is similar to RelativeLayout in that all views are set up according to the
relationships between sibling views and the parent layout,
• But it is more flexible than RelativeLayout and easier to use with the Layout
Editor in Android Studio.
5. Android Table Layout
• TableLayout is a ViewGroup that presents its children in rows and columns.
• TableLayout arranges its children into columns and rows.
• TableLayout containers do not display row, column, and cell border lines.
• The table will have the same number of columns as the row with the most
cells.
• A table can leave cells vacant.
Layout Attributes
• Use attributes to define the appearance, positioning, and behavior of views.
• android:layout_width and android:layout_height: Define the size of the view.
• android:layout_margin: Adds space around the view.
• android:padding: Adds space inside the view. <TextView
• android:gravity: Aligns content within the view (e.g., center, left).
android:id="@+id/textView"
• android:text: Sets text in a TextView or Button.
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome!"
android:layout_margin="16dp"
android:gravity="center"/>
ScrollView
• In Android, a ScrollView is a view group that is used to make vertically
scrollable views.
• A scroll view contains a single direct child only.
• In order to place multiple views in the scroll view, one needs to make a view
group (like LinearLayout) as a direct child and then we can define many views
inside it.
• A ScrollView supports Vertical scrolling only, so in order to create a
horizontally scrollable view, HorizontalScrollView is used.
Attribute Description
If the child layout inside the ScrollView is smaller than the viewport, it will be
android:fillViewport
stretched to fill the full height of the ScrollView.
If true, the ViewGroup will measure all of its children, including those with
visibility="GONE".
android:measureAllChildren
If false (default), it only measures children that are VISIBLE or INVISIBLE. It skips
GONE views during measurement.
alpha property of the view, as a value between 0 (completely transparent) and 1
android:alpha
(completely opaque).
android:background A drawable to use as the background.
Indicates that the view is intended to be a scrolling container, such as a ScrollView,
android:isScrollContainer and should adjust its layout (e.g., shrink) to make room for the input method (like
the soft keyboard).
android:minHeight Defines the minimum height of the view.
android:minWidth Defines the minimum width of the view.
android:scrollbars Controls which scrollbars (if any) are shown when the view is scrollable.
<?xml version="1.0" encoding="utf-8"?>
<[Link]
xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:id="@+id/main"
android:layout_width="match_parent" <TextView
android:id="@+id/scrolltext"
android:layout_height="match_parent" android:layout_width="match_parent"
android:background="@color/white" android:layout_height="wrap_content"
tools:context=".MainActivity"> android:textSize="24sp"
android:text="@string/sample_text"
android:textColor="@color/green"/>
<ScrollView </ScrollView>
</[Link]>
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="-127dp">
import [Link];
import [Link]; //Enables full-screen layouts that draw behind system bars (status bar, navigation bar).
import [Link];//The base class for activities that use the modern Android UI components
(AppCompat).
import [Link];//insets (padding) from system UI like status bars, navigation bars.
import [Link];//modify and support views dynamically in all versions
import [Link]; //A wrapper around platform (area covered by the system bar) WindowInsets
with compatibility support for all Android versions.
public class MainActivity extends AppCompatActivity {
@Override //This method is called when the activity is first created.
protected void onCreate(Bundle savedInstanceState) { //previous state (if the app was paused/killed and resumed).
[Link](savedInstanceState); //Callsloading
the parent class’s onCreate(), which is required to properly initialize the activity (like setting up the window,
fragments, etc.).
setContentView([Link].activity_main);
}
}
Resize and Reposition
• We can resize and reposition views (like TextView, Button, etc.) in Android
Design View or via code.
Resize and Reposition in Design View (XML Editor)
1. Resize
• Select the view in Design tab.
• On the corners or edges, drag the handles to resize.
• Or manually change width/height in XML:
android:layout_width="200dp"
android:layout_height="100dp“
wrap_content: size to fit content
match_parent: fill parent
ToggleButton
• ToggleButton is basically a stop/play or on/off button with an indicator light
indicating the current state of ToggleButton.
• ToggleButton is widely used, some examples are on/off audio, Bluetooth, WiFi,
hot-spot etc.
• This is a subclass of Composite Button.
XML
<ToggleButton
android:id="@+id/button_toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="onToggleClick" />