๐Ÿš€ Responsive UI: Jetpack Compose vs. Traditional Android โ€” A Battle for Consistent Tablet & Phone Experiences ๐Ÿ“ฑ๐Ÿ’ก | by Raphael C. | Jun, 2024

The Lonely T-Rex game built in Compose seen on a Tablet & Smartphone looking very responsive ๐Ÿ‘€
  1. Adaptive Layouts:
  • What it means: Jetpack Compose encourages creating layouts that adapt seamlessly to different screen sizes and orientations.
  • How to do it: Use modifiers like fillMaxWidth, fillMaxHeight, and padding to adjust layout properties dynamically based on available space. Additionally, you can play around with Modifier.weight(f)to proportionally distribute space, height, width or size of child Composables.
  • Example:
Column(
modifier = Modifier.fillMaxSize().padding(16.dp)
) {
Row {
Text(text = "Hello,!", modifier = Modifier.weight(1f))
Text(text = "Compose!", modifier = Modifier.weight(1f))
}
}
  • Why it matters: With adaptive layouts, your app looks great/similar on various devices, from compact phones to large tablets.

2. ConstraintLayout in Compose:

  • What it is: ConstraintLayout is a powerful layout manager that allows you to define relationships between UI elements.
  • How to use it: In example below, text1 and text2 are layout IDs assigned to the Text Composables and you use top.linkTo(text1.bottom) to position an element below text1.
  • Example:
ConstraintLayout(Modifier.fillMaxSize()) {
val (text1, text2) = createRefs()
Text("Top", modifier = Modifier.constrainAs(text1) {
top.linkTo(parent.top)
})
Text("Bottom", modifier = Modifier.constrainAs(text2) {
top.linkTo(text1.bottom)
})
}
  • Why itโ€™s awesome: ConstraintLayout simplifies complex UI arrangements and ensures responsiveness across both tablets & phones.

3) Window Size Classes:

  • What they are: Window size classes represent different screen sizes (small, medium, large, etc.).
  • How to use them: Access window size classes via LocalConfiguration.current.screenLayout
  • Example:
val screenSize = LocalConfiguration.current.screenLayout
when (screenSize) {
Configuration.SCREENLAYOUT_SIZE_SMALL -> // Handle small screens
Configuration.SCREENLAYOUT_SIZE_NORMAL -> // Handle normal screens
// Other cases
}
  • Why they matter: You can tailor your UI based on available space without hardcoding specific dimensions. ๐Ÿ’ƒ๐Ÿฝ๐Ÿ•บ๐Ÿฟ
  1. Resource Qualifiers:
  • What they are: Resource qualifiers allow you to provide different layouts for various screen sizes and densities.
  • How to use them: Create resource folders like layout-small, layout-large, etc., and place layout files accordingly. The OS takes care of deciding which one to inflate based on device specs.
  • Example:
res/
layout/
activity_main.xml
layout-large/
activity_main.xml (optimized for large screens)
  • Why theyโ€™re essential: Resource qualifiers ensure consistent UI across diverse devices.

2) ConstraintLayout in View:

  • What it is: ConstraintLayout enables you to create complex UI layouts with a flat view hierarchy โ€” without the need for nested view groups ๐Ÿ˜Š
  • How to use it: The XML below defines a ConstraintLayout containing two TextView elements. The first TextViewis anchored to the start of the parent and aligned with the top. The second TextView is positioned to the right of the first one while also aligned with the top. This layout ensures that the two TextViews are horizontally adjacent within the ConstraintLayout.
  • Example:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second TextView"
app:layout_constraintStart_toEndOf="@+id/textView1"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

  • Why theyโ€™re essential: ConstraintLayout is essential because it allows you to create complex Android UI layouts with flexible relationships between views, reducing nested view groups and improving performance.

Developing responsive Android layouts is crucial for delivering a consistent user experience across various screen sizes. By employing adaptive designs, you ensure that your app looks great on both phones and tablets. Remember to validate your layout on different devices to catch any unexpected issues. And if youโ€™re curious about The Lonely T-Rex image above, itโ€™s the Google Chrome offline game, only built using Jetpack Compose ๐Ÿ‘๐Ÿฝ You can download it on Google Play and leave a review to help drive those wonky algorithms ๐Ÿš€๐Ÿ“ฑ

Leave a Reply