Layouts, UI design, Linearlayout, Relativelayout, Constraintlayout, Scrolview, nestedlayouts

Layouts and UI Design in Android�UI (User Interface) design in Android defines how elements like TextView, Button, ImageView, etc. are arranged on the screen.�To control this arrangement, Android provides various layout types, each with different behavior.�

1. LinearLayout

• Arranges child views in a single direction — vertically or horizontally.
• Use android:orientation="vertical" or "horizontal" to set direction.

​

​

<LinearLayout

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

​

<TextView android:text="Username" />

<EditText android:hint="Enter username" />

<Button android:text="Login" />

</LinearLayout>

​

​

2. RelativeLayout�Allows views to be positioned relative to each other or to the parent layout.�Example: one view can be below, to the right of, or aligned with another.�

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

​

<TextView

android:id="@+id/label"

android:text="Name"

android:layout_alignParentTop="true"

android:layout_marginTop="30dp"/>

​

<EditText

android:layout_below="@id/label"

android:layout_marginTop="10dp"

android:hint="Enter name"/>

</RelativeLayout>

​

3. ConstraintLayout

• A modern, powerful layout introduced to replace RelativeLayout and LinearLayout.
• Uses constraints to position elements relative to parent or siblings.
• Highly recommended for complex UIs because it improves performance.

​

<androidx.constraintlayout.widget.ConstraintLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

​

<Button

android:id="@+id/btnLogin"

android:text="Login"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

​

4. FrameLayout�Holds one child view, or layers multiple views on top of each other.�Commonly used for fragments or when stacking elements (e.g., image + text overlay).�Example:�

<FrameLayout

android:layout_width="match_parent"

android:layout_height="200dp">

​

<ImageView android:src="@drawable/background" />

<TextView android:text="Hello" android:gravity="center"/>

</FrameLayout>

​

5. ScrollView

• Allows content to scroll vertically when it doesn’t fit on the screen.
• Can contain only one direct child, usually a LinearLayout.

​

<ScrollView

android:layout_width="match_parent"

android:layout_height="match_parent">

​

<LinearLayout

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<!-- Many TextViews or Buttons -->

</LinearLayout>

</ScrollView>

​

6. GridView�Displays items in a grid (rows and columns).�Commonly used to show images or icons.�Example:�

<GridView

android:id="@+id/gridView"

android:numColumns="3"

android:verticalSpacing="10dp"

android:horizontalSpacing="10dp"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

​

7. TableLayout

• Organizes content in rows and columns like an HTML table.
• Each row is a TableRow.

Example:

<TableLayout

android:layout_width="match_parent"

android:layout_height="wrap_content">

​

<TableRow>

<TextView android:text="Name:"/>

<EditText android:hint="Enter name"/>

</TableRow>

​

<TableRow>

<TextView android:text="Email:"/>

<EditText android:hint="Enter email"/>

</TableRow>

</TableLayout>

​

8. ListView�Displays a scrollable list of items vertically.�Requires an Adapter to connect data (like an array or list) to the view.�Example:�

<ListView

android:id="@+id/listView"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

​

Use when: You need to show dynamic data, like contact lists or menus.