Layouts & Views in Depth

Views and ViewGroups

A View is a single UI element — a TextView, Button, ImageView or EditText. A ViewGroup is a container that arranges other views, such as LinearLayout or ConstraintLayout. You describe screens in XML files under res/layout/, and Android “inflates” that XML into real objects at runtime.

Units: dp and sp

Always size things in dp (density-independent pixels) and text in sp (scale-independent pixels). These adapt across screens of different densities and respect the user’s font-size setting. Never use raw pixels.

LinearLayout

Stacks children in a single row or column. Use layout_weight to split space proportionally.

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button android:text="Yes"
        android:layout_width="0dp" android:layout_weight="1"
        android:layout_height="wrap_content" />

    <Button android:text="No"
        android:layout_width="0dp" android:layout_weight="1"
        android:layout_height="wrap_content" />
</LinearLayout>

Setting width to 0dp with equal weights makes the two buttons share the row 50/50.

ConstraintLayout (the recommended one)

ConstraintLayout lets you position views relative to each other and to the parent, which keeps the view hierarchy flat (and therefore fast). You connect each view’s edges with constraints.

<androidx.constraintlayout.widget.ConstraintLayout ...>
    <ImageView android:id="@+id/avatar"
        android:layout_width="64dp" android:layout_height="64dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView android:id="@+id/name"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/avatar"
        app:layout_constraintStart_toEndOf="@id/avatar"
        android:layout_marginStart="12dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Here the name sits to the right of the avatar — no nested layouts needed.

Other useful layouts

• FrameLayout — stack views on top of each other.
• ScrollView — make content scroll when it’s taller than the screen.
• RecyclerView — long, efficient scrolling lists (its own lesson).

Connecting XML to code with View Binding

Enable View Binding in Gradle, and Android generates a binding class for each layout — no more error-prone findViewById.

// build.gradle.kts: android { buildFeatures { viewBinding = true } }

private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)
    binding.name.text = "Anand"
    binding.button.setOnClickListener { /* ... */ }
}

Common mistakes

• Deeply nesting LinearLayouts — switch to ConstraintLayout for complex screens.
• Using pixels instead of dp/sp.
• Forgetting match_parent vs wrap_content — the first fills the parent, the second hugs the content.

Summary: Use ConstraintLayout for most screens, size in dp/sp, and connect XML to code with View Binding instead of findViewById.