Massive Screens & Foldables Tutorial for Android

Learn to construct nice consumer experiences for giant screens & foldables in Android. Additionally learn to design and take a look at adaptive Android apps.

Massive screens are an essential and fast-growing section of lively Android units. There are greater than 270 million large-screen Android units in use. They embrace tablets, foldable units and Chrome OS units. To achieve this rising section of Android customers, study to make your app UI adaptive throughout a variety of units.

On this tutorial, you’ll construct an app known as Artful Pocket book, which exhibits a listing of notes. Alongside the best way, you’ll find out about:

• APIs and instruments to construct nice consumer experiences for large-screen Android units.
• Designing adaptive apps for various display screen sizes, orientations and kind elements.
• Google Play updates for large-screen units.
• Testing your app layouts for giant screens.

Getting Began

Obtain the starter challenge by clicking the Obtain Supplies button on the high or backside of the tutorial.

On this tutorial, you’ll use a resizable emulator to check your app’s UI throughout totally different units. To arrange a resizable emulator, open the starter challenge with Android Studio model 2021.2.1 or newer and comply with these steps:

• Click on Instruments ▸ SDK Supervisor. Within the SDK Instruments tab, choose Android Emulator and click on OK. This may set up the newest model of the emulator if it isn’t already put in.
• To create a digital system, click on Instruments ▸ Machine Supervisor. Then, click on the Create system button and choose Telephone ▸ Resizable. Click on Subsequent and choose the newest API degree. Verify the emulator particulars and click on End. This may create a resizable emulator.
• On the checklist of digital units, choose the resizable system and click on the Launch icon to begin it.

Construct and run the challenge. Right here’s what you’ll see:

Within the emulator window, click on the Show Mode drop-down and choose Pill:

On a large-screen system like a pill, content material stretches to fill the out there display screen house like this:

However customers anticipate a fantastic expertise whereas utilizing your app throughout totally different Android units. Your purpose is to make use of the additional display screen house to enhance the consumer expertise and supply nice accessibility on large-screen units.

Wanting Into Android 12L Updates

Android units are available in varied kind elements: telephones, tablets, foldables and Chrome OS units. They range in display screen sizes from small to massive display screen sizes.

At Android Dev summit 2021, Google introduced Android 12L. Android 12L is a function replace for Android 12 that was constructed for large-screen units. Android 13 builds on updates made in Android 12L. A number of the updates embrace:

• Taskbar interplay: The brand new taskbar makes it straightforward to launch and swap apps. Gestures akin to drag and drop enter split-screen mode. In gesture navigation, customers can flip by means of current apps. This permits highly effective and intuitive multitasking on massive screens.
• Default multi-window mode: To boost the cut up display screen expertise, Android 12 or larger permits multi-window mode by default in all apps.
• Improved compatibility expertise: Some apps aren’t optimized for giant screens but. They aren’t resizable or are utilizing mounted orientation. These apps are launched in compatibility mode to make them look higher by default. Such apps are centered on the display screen with black bars filling the unused show space.
• Digicam preview enhancements: This makes the digital camera app adaptive to massive screens, multi-window mode and totally different foldable system postures.
• Media projection updates: Beginning in Android 12L, the digital show is scaled to suit out there display screen house. This improves display screen casting on massive shows like televisions. It maximizes the dimensions of floor photographs and ensures the right side ratio.

You’ve discovered about updates for large-screen units beginning in Android 12L. Subsequent, you’ll learn to construct responsive apps throughout totally different units.

Designing Adaptive Apps

Responsive apps present a fantastic consumer expertise throughout totally different display screen sizes and kind elements. They assist totally different display screen orientations and resizable configurations like multi-window mode.

That will help you create adaptive layouts, Materials Design 3 gives canonical layouts. Canonical layouts function a tenet for creating responsive layouts for giant screens. They embrace:

• Record-detail view: In a list-detail view, you place a listing of things on the left. On the precise facet, you present particulars of an merchandise.
• Supporting panel: A structure consists of focus and assist areas. The main focus area exhibits the first content material. It covers two-thirds of the show space. The supporting panel occupies the remaining display screen house to indicate extra content material like feedback on a doc. It’s positioned on the backside third on an expanded top or trailing third on an expanded width.
• Feed: Feed layouts are widespread in information or social content material apps. For instance, with a RecyclerView, use a special structure supervisor like GridLayoutManager when the width isn’t compact.

Realizing what sort of system the consumer is utilizing received’t enable you to determine which app layouts to make use of. On tablets, for instance, an app may very well be sharing the display screen with one other app in multi-window mode. Or, on a foldable system, there may very well be multiple bodily display screen. As a substitute, make choices based mostly on the precise portion of the display screen that’s allotted through the use of Jetpack WindowManager library.

Within the subsequent part, you’ll learn to use Window Measurement courses to find out the structure on your app. Window dimension courses are decided by the window dimension out there to your software no matter the kind of system the app is operating on.

Exploring Window Measurement Courses

Window dimension courses are viewport breakpoints to information you in designing responsive and adaptive layouts. They classify display screen house out there on your app as compact, medium or expanded.

Accessible width and top are labeled individually. The out there width is extra essential than the out there top as a result of vertical scrolling is widespread throughout units. The out there width is classed as follows:

• Compact width: The system width is lower than 600dp. Telephones in portrait orientation and foldables in folded state are on this class.
• Medium width: The system width is greater than 600dp. Medium-width units embrace tablets and huge unfolded foldables in portrait orientation.
• Expanded width: Tablets and huge unfolded foldables in panorama orientation fall on this class. They’re greater than 840dp large.

You’ll use the material3-window-size-class library to get the window dimension class of a tool. The library calculates the window dimension class utilizing present window metrics.

Open construct.gradle(app). The next library dependency has already been added:

implementation "androidx.compose.material3:material3-window-size-class:1.0.0-alpha14"

Open presentation ▸ MainActivity.kt, and change // TODO 1 with the next:

val windowSizeClass = calculateWindowSizeClass(exercise = this)

The code above returns the window dimension class for the supplied exercise. calculateWindowSizeClass(exercise: Exercise) calculates WindowSizeClass for the supplied exercise. The strategy returns a brand new WindowSizeClass throughout display screen rotation or window resize. The app recomposes the UI with the brand new window dimension class.

Add any lacking imports by urgent Possibility-Return on Mac or Alt-Enter on PC.

You may even see an error squiggly line. It is because the library remains to be experimental. To repair the error, add the next earlier than onCreate() and import the corresponding bundle:

@OptIn(ExperimentalMaterial3WindowSizeClassApi::class)

Subsequent, you’ll go windowSizeClass to the NoteApp() composable. You’ll use this info later to find out the app layouts.

Exchange // TODO 2 with the next:

windowSizeClass = windowSizeClass.widthSizeClass,

Earlier than updating the app to answer adjustments in display screen sizes, you’ll contemplate system fold posture additionally.

Wanting Into Machine Fold Posture

A foldable system may be in varied states and postures. It might be folded or unfolded, in portrait or panorama orientation. It may very well be in a tabletop or e book posture. An adaptive design helps totally different foldable postures.

Jetpack WindowManager library’s WindowLayoutInfo class gives the next details about foldable shows:

• state: This describes the fold state. Its worth is FLAT when the system is totally opened, or HALF_OPENED.
• orientation: The orientation of the hinge. It may be HORIZONTAL or VERTICAL.
• occlusionType: The worth is FULL when the hinge hides a part of the show. In any other case the worth is NONE.
• isSeparating: It’s true when the hinge creates two logical shows.

You’ll use this info to find out system fold posture. Open presentation ▸ util ▸ DevicePostureUtil.kt. DevicePosture interface defines the next postures:

• Regular posture: Whether or not a tool is totally opened or totally folded.
• Ebook posture: The system is in portrait orientation and its fold state is HALF_OPENED.
• Separating posture: The system is totally open and its fold state is FLAT. It’s just like the case of system posture the place occlusionType is FULL due to a bodily hinge. Keep away from inserting touchable or seen components below the hinge.

Analyzing Machine Fold Posture

To get system fold posture, open MainActivity.kt and change // TODO 3 with the next:

// 1
val devicePostureFlow = WindowInfoTracker.getOrCreate(this).windowLayoutInfo(this)
  .flowWithLifecycle(this.lifecycle)
  // 2
  .map { layoutInfo ->
    val foldingFeature =
      layoutInfo.displayFeatures
        .filterIsInstance()
        .firstOrNull()
    when {
      isBookPosture(foldingFeature) ->
        DevicePosture.BookPosture(foldingFeature.bounds)

      isSeparating(foldingFeature) ->
        DevicePosture.Separating(foldingFeature.bounds, foldingFeature.orientation)

      else -> DevicePosture.NormalPosture
    }
  }
  .stateIn(
    scope = lifecycleScope,
    began = SharingStarted.Eagerly,
    initialValue = DevicePosture.NormalPosture
  )

Additionally embrace the next imports to keep away from Android Studio’s complaints:

import androidx.lifecycle.flowWithLifecycle
import androidx.lifecycle.lifecycleScope
import androidx.window.structure.FoldingFeature
import androidx.window.structure.WindowInfoTracker
import com.yourcompany.android.craftynotebook.presentation.util.DevicePosture
import com.yourcompany.android.craftynotebook.presentation.util.isBookPosture
import com.yourcompany.android.craftynotebook.presentation.util.isSeparating
import kotlinx.coroutines.circulation.SharingStarted
import kotlinx.coroutines.circulation.map
import kotlinx.coroutines.circulation.stateIn

Within the code above, you’re utilizing Kotlin Flows to work with WindowLayoutInfo knowledge assortment.

1. windowLayoutInfo(exercise: Exercise) returns show info of a tool as Circulation. The strategy emits WindowLayoutInfo each time the show info adjustments.
2. It makes use of map operator and show info returned by windowLayoutInfo(exercise: Exercise) to find out the system fold posture.

Subsequent, you’ll observe system posture as compose state. In MainActivity.kt, change // TODO 4 with the next and import the corresponding bundle.

val devicePosture = devicePostureFlow.collectAsState().worth

Then, go devicePosture in NoteApp() composable name. Exchange // TODO 5 with the next:

devicePosture = devicePosture,

Up up to now utilizing window dimension courses, the app is aware of the display screen house out there. It additionally is aware of the system fold posture. You’ll use this info to find out the app UI. First, you’ll implement responsive navigation.

Selecting Applicable Navigation Kind

Responsive UIs embrace various kinds of navigation components akin to show dimension adjustments.

Materials library gives navigation parts like backside navigation, navigation rail and navigation drawer. You’ll implement essentially the most acceptable navigation relying on the window dimension class of a tool:

• Backside navigation: Backside navigation is most acceptable for compact window sizes.
• Navigation rail: Use navigation rail for medium display screen sizes.
• Navigation drawer: This could be appropriate for large-screen units like tablets. There are two sorts of navigation drawers: modal and everlasting. Use a modal navigation drawer for compact to medium sizes as a result of it may be expanded as an overlay on the content material or hidden. Use a everlasting navigation drawer for mounted navigation on massive screens like tablets and Chrome OS units.

Now, you’ll swap between totally different navigation sorts relying on the window dimension of a category and system fold posture.

Open NoteApp.kt and change // TODO 6 with the next and import the bundle for NavigationType:

// 1
val navigationType: NavigationType
// 2
when (windowSizeClass) {
  WindowWidthSizeClass.Compact -> {
    navigationType = NavigationType.BOTTOM_NAVIGATION
    // TODO 13
  }
  WindowWidthSizeClass.Medium -> {
    navigationType = NavigationType.NAVIGATION_RAIL
    // TODO 14
  }
  WindowWidthSizeClass.Expanded -> {
    // 3
    navigationType = if (devicePosture is DevicePosture.BookPosture) {
      NavigationType.NAVIGATION_RAIL
    } else {
      NavigationType.PERMANENT_NAVIGATION_DRAWER
    }
    // TODO 15
  }
  else -> {
    navigationType = NavigationType.BOTTOM_NAVIGATION
    // TODO 16
  }
}

The code above does the next:

1. Declares the navigationType variable.
2. Utilizing a swap assertion, it initializes navigationType with the right worth relying on the window dimension class.
3. Handles fold state to keep away from inserting content material or touching motion on the hinge space. When a tool is in BookPosture, use a navigation rail and divide content material across the hinge. For giant desktops or tablets, use a everlasting navigation drawer.

Subsequent, you’ll go navigationType to NoteNavigationWrapperUi() composable name. In NoteApp.kt, change // TODO 7 with the next:

navigationType = navigationType,

Now, the app is aware of navigation sorts to use to totally different window dimension courses and system fold postures. Subsequent, you’ll implement totally different navigation to make sure glorious interplay and reachability.

Implementing Responsive Navigation

Open NoteNavigationWrapperUi.kt. Exchange NoteAppContent() composable name with the next:

if (navigationType == NavigationType.PERMANENT_NAVIGATION_DRAWER) {
  PermanentNavigationDrawer(drawerContent = {
    NavigationDrawerContent(
      navController = navController
    )
  }) {
    NoteAppContent(
      navigationType = navigationType,
      contentType = contentType,
      modifier = modifier,
      navController = navController,
      notesViewModel = notesViewModel
    )
  }
} else {
  ModalNavigationDrawer(
    drawerContent = {
      NavigationDrawerContent(
        navController = navController,
        onDrawerClicked = {
          scope.launch {
            drawerState.shut()
          }
        }
      )
    },
    drawerState = drawerState
  ) {
    NoteAppContent(
      navigationType = navigationType,
      contentType = contentType,
      modifier = modifier,
      navController = navController,
      notesViewModel = notesViewModel,
      onDrawerClicked = {
        scope.launch {
          drawerState.open()
        }
      }
    )
  }
}

As normal, there are a couple of imports that you must add as properly:

import kotlinx.coroutines.launch
import androidx.compose.material3.*

The navigation drawer is the container for notes UI. Within the code above, you’re wrapping the NoteAppContent() composable name with a everlasting or modal navigation drawer relying on the worth of navigationType.

In NoteAppContent.kt, change the Column() composable with the next:

Row(modifier = Modifier.fillMaxSize()) {
  AnimatedVisibility(seen = navigationType == NavigationType.NAVIGATION_RAIL) {
    NoteNavigationRail(
      onDrawerClicked = onDrawerClicked,
      navController = navController
    )
  }
  Column(
    modifier = modifier.fillMaxSize()
  ) {
    NoteNavHost(
      modifier = modifier.weight(1f),
      contentType = contentType,
      navController = navController,
      notesViewModel = notesViewModel
    )
    AnimatedVisibility(seen = navigationType == NavigationType.BOTTOM_NAVIGATION) {
      NoteBottomNavigationBar(navController = navController)
    }
  }
}

To make Android Studio pleased, add the next imports as properly:

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.basis.structure.Row

The code above makes use of navigationType to find out placement of navigation rail or backside navigation. You wrapped each navigation rail and backside navigation within the AnimatedVisibility() composable. This animates the entry and exit visibility of every navigation relying on navigationType .

Construct and run.

For compact window dimension class like a telephone, the app makes use of backside navigation like within the display screen beneath:

In a medium window dimension class, the app makes use of a navigation rail like within the display screen beneath:

The app makes use of a everlasting navigation drawer in an expanded window dimension class, like this:

Congratulations! You’ve efficiently applied dynamic navigation on totally different units. Subsequent, you’ll make the most of the extra display screen house to indicate extra content material. You’ll implement list-detail on massive screens.

Displaying Extra Content material

Open presentation ▸ util ▸ ConstantsUtil.kt. ContentType enum defines two constants: LIST_ONLY and LIST_AND_DETAIL. These will enable you to decide content material structure relying on the window dimension class.

Open NoteApp.kt. Exchange // TODO 12 with the next and import the corresponding bundle:

val contentType: ContentType

Right here, you’ve declared a variable of kind ContentType.

Subsequent, you’ll initialize the contentType variable with the right worth relying on display screen state.

In NoteApp.kt, change the TODOs within the when assertion as proven beneath:

Exchange // TODO 13 with the next code:

contentType = ContentType.LIST_ONLY

It units the worth of contentType with as LIST_ONLY when the window dimension class is compact.

Exchange // TODO 14 with the next code:

contentType = if (devicePosture is DevicePosture.BookPosture
  || devicePosture is DevicePosture.Separating
) {
  ContentType.LIST_AND_DETAIL
} else {
  ContentType.LIST_ONLY
}

The code above initializes contentType with LIST_ONLY for medium window dimension class. For a foldable system in e book posture, set the worth to LIST_DETAIL. This may separate checklist view and element view on the hinge space. It helps keep away from inserting content material or contact targets on the hinge space.

Exchange // TODO 15 with the code beneath:

contentType = ContentType.LIST_AND_DETAIL

This units the worth of contentType as LIST_AND_DETAIL on massive screens.

Lastly, change // TODO 16 with the code beneath to incorporate the default case:

contentType = ContentType.LIST_ONLY

Subsequent, go contentType to the NoteNavigationWrapperUi() composable. Exchange // TODO 17 with the next:

contentType = contentType,

You’ll use the contentType parameter to find out whether or not to indicate a listing structure or a list-detail structure.

Open NotesScreen.kt. Exchange the NotesListComposable() composable name with the next:

if (contentType == ContentType.LIST_AND_DETAIL) {
  NoteListDetailComposable(notes = notes)
} else {
  NotesListComposable(
    notes = notes,
    onItemSelected = onNoteItemSelected,
  )
}

The code above checks the worth of contentType to find out which structure to indicate. The app will present a list-detail structure on massive screens. In compact and medium display screen sizes, the app will present a listing structure.

Construct and run.

On a compact or medium display screen dimension, the app exhibits a listing structure like within the screens beneath:

On massive screens like a pill or desktop, the app exhibits a list-detail structure like this:

Making certain Knowledge is Accessible for All Display Sizes

A responsive UI retains knowledge when a telephone is rotated or a foldable is unfolded or folded. Altering telephone orientation, folding and unfolding a foldable or resizing a window are configuration adjustments. Throughout configuration adjustments, the system recreates app actions, fragments or composables. The really helpful methods to protect knowledge throughout configuration adjustments are utilizing a ViewModel class and rememberSavable API for compose apps.

On massive screens, you could be exhibiting extra content material to make the most of the additional display screen house. So, you could be tempted to fetch knowledge when the display screen dimension adjustments. This goes towards the precept of unidirectional knowledge circulation — that state flows down and occasions circulation up — the place knowledge needs to be hoisted and supplied to the composables for displaying.

It is best to present sufficient knowledge to the composable in order that it all the time has what it must show throughout any display screen dimension. Then, you should use a flag like contentType to find out what knowledge to indicate on a given display screen dimension.

Open NotesScreen.kt. You’ll see code like this:

val notes = notesViewModel.notes.collectAsState().worth
if (contentType == ContentType.LIST_AND_DETAIL) {
  NoteListDetailComposable(notes = notes)
} else {
  NotesListComposable(
    notes = notes,
    onItemSelected = onNoteItemSelected,
  )
}

An inventory of notes is handed to each NotesListComposable() and NoteListDetailComposable() composables. Full observe textual content won’t be displayed on a small or medium display screen dimension. Nevertheless, it’ll be out there for displaying on massive screens that present each the checklist of notes and particulars of a observe merchandise.

You’ve discovered construct adaptive apps whereas making certain knowledge is out there throughout totally different system configurations. Subsequent, you’ll learn to take a look at your app compatibility throughout totally different display screen sizes and kind elements.

Testing Apps for Massive Screens With Android Studio

To check your app compatibility with large-screen units, Android Studio gives the next capabilities:

• Reference units: These embrace telephones, massive foldable internal show, tablets and desktops. You may create device-respective emulators in Android Studio. Then, you’ll use the emulators to check your app structure throughout totally different units.
• Resizable emulator: Resizeable emulator is out there in Android Studio chipmunk and better. It permits you to toggle between the 4 reference units — telephone, foldable, pill and desktop — to validate your app structure at runtime.
• Structure validation: Beginning Electrical Eel Canary 1, Android Studio will test for visible lint points throughout totally different display screen sizes. While you open Structure Validation, you’ll see all of your layouts render in a number of system sizes. If there’s a problem, it’ll present up within the Issues Panel. Visible linting will likely be out there for layouts written in Views or Compose.

Now, you’ll look into what to check to make sure your app compatibility in several display screen sizes and kind elements.

Wanting Into What to Check in Massive Screens

When you’ve arrange totally different system emulators, you’ll take a look at your app for widespread use instances for giant screens. A number of the issues to check for embrace:

• Display sizes, system posture and orientation: Test how your app responds to adjustments in display screen sizes, system posture of a foldable and display screen orientation.
• Taskbar integration and cut up display screen mode: For Android 12L units and better, guarantee your app UI isn’t blocked by the taskbar. Test your app conduct if you enter multi-window mode utilizing the taskbar. Check switching between your app and different apps utilizing the taskbar.
• Multi-window mode: Test your app conduct when operating in multi-window mode on massive screens when android:resizeableActivity = false in AndroidManifest file. If android:resizeableActivity = true, test how your app responds when operating in multi-window mode on small-screen units.
• Media projection: In case your app makes use of media projection, test how your app responds whereas enjoying again, streaming or casting media on large-screen units. Additionally test how the app responds to system posture adjustments in a foldable.
• Digicam preview: For digital camera apps, test how the digital camera preview UI responds on massive screens when your app is in multi-window mode. Test how your app responds to system posture adjustments on a foldable system.

Checking Into Google Play Updates for Massive Screens

The Android workforce has up to date Google Play to focus on apps which might be optimized for giant screens. They’ve added checks to evaluate apps towards the massive screens app high quality tips listed right here. If an app isn’t optimized for giant screens, customers on large-screen units will likely be notified on the app’s Play Retailer itemizing web page.

They’ve additionally launched large-screen-specific app rankings. Customers can price how your app works on their large-screen system.

Optimize your Android apps to make them straightforward to search out on Google Play!

The place to Go From Right here?

Obtain the finished challenge information by clicking the Obtain Supplies button on the high or backside of the tutorial.

Congratulations! You will have efficiently made the Artful Pocket book App responsive throughout totally different units. You will have discovered make your app adaptive to totally different display screen sizes and kind elements utilizing Jetpack Compose. You’ve additionally discovered protect state throughout configuration adjustments and Google Play updates for large-screen units.

Massive screens are good for drag-and-drop interactions — inside the app or between apps in multi-window mode. Take a look at Android Drag and Drop to learn to add drag-and-drop capabilities to your app.

Take a look at this Making certain Nice Enter Help for All Units speak to find out about supporting varied enter strategies in all units.

We hope you loved this tutorial. When you have any questions or feedback, please be part of the discussion board dialogue beneath!