Building for Large Screens

We can all agree now that we live in a world with foldable phones, a technology we never anticipated, due to their growing demand and popularity. Ten years ago, if you had told a developer we would have foldable phones, no one would have believed it due to the ambiguity of screen complexity and the transfer of information.

However, now the devices are here with us. And since some of these devices run on the Android operating system, it’s vital to know how we developers will build our applications to cater to foldability, along with the number of Android tablets we’re now seeing on the market. The support for large screens seems now mandatory, and in this chapter, we will look at supporting large screens in the new Modern Android Development.

In this chapter, we’ll be covering the following recipes:

• Building adaptive layouts in Modern Android Development
• Building adaptive layouts using ConstraintLayouts
• Handling large...

Technical requirements

The complete source code for this chapter can be found at https://github.com/PacktPublishing/Modern-Android-13-Development-Cookbook/tree/main/chapter_nine.

Building adaptive layouts in Modern Android Development

When building the UI for your application in Modern Android Development, it is fair to say that you should consider ensuring the application is responsive to different screen sizes, orientations, and form factors. Finally, developers can now remove the lock in portrait mode. In this recipe, we will utilize ideas we learned from previous recipes and build an adaptive app for different screen sizes and orientations.

Getting ready

We will be using the cities application to create a traveler profile, and our screen should be able to change based on different screen sizes and support foldable devices and tablets. To get the entire code, check out the Technical requirements section.

How to do it…

For this recipe, we will create a new project, and this time, instead of picking the empty Compose Activity template, we will pick empty Compose Activity (Material 3). Material 3 seeks to improve our application’s...

Building adaptive layouts using ConstraintLayouts

Jetpack Compose, a declarative UI toolkit to build great UIs, is ideal to implement and design screen layouts that adjust automatically by themselves and render content well across different screen sizes.

This can be useful to consider when building your application, since the chance of it being installed in a foldable device is high. Furthermore, this can range from simple layout adjustments to filling up a foldable space that looks like a tablet.

Getting ready

You need to have read the previous chapters to follow along with this recipe.

How to do it…

For this recipe, we will build a separate composable function to show you how to use ConstraintLayout in the same project instead of creating a new one:

1. Let’s go ahead and open Traveller. Add a new package and call it constraintllayoutexample. Inside the package, create a Kotlin file, called ConstraintLayoutExample, and then add the following dependency...

Handling large-screen configuration changes and continuity

Android devices undergo various configuration changes during their operation. Some of the most notable, or standard, ones include the following:

• Screen orientation change: This occurs when a user rotates a device’s screen, triggering a configuration change. This is when the device switches from portrait to landscape mode or vice versa.
• Screen size change: This is when a user changes the screen size of a device – for example, by plugging or unplugging an external display, triggering a configuration change.
• Language or locale change: This is when a user changes the language or locale of a device, triggering a configuration change. This can affect the formatting of text and dates, among other things.
• Theme change: This is when a user changes a device’s theme, triggering a configuration change. This can affect the appearance of the UI.
• Keyboard availability change: This is when a user...

Understanding activity embedding

In Jetpack Compose, activity embedding refers to the process of including a composable function within the context of an activity. This allows you to create custom views that can integrate seamlessly with existing Android activities.

To embed a composable function within an activity, you can use the setContent method of the activity. This method accepts a composable function as a parameter, which can be used to define the activity’s layout.

Getting ready

You need to have completed the previous recipes to follow along.

How to do it…

Let’s look at an example of embedding a composable function in an activity:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
        ...

Material Theming in Compose

Material Theming in Compose is a design system introduced by Google that provides guidelines and principles to design user interfaces. Material Theming helps designers create interfaces that are consistent, easy to use, and visually appealing. Some key features of Material Theming in Jetpack Compose include the following:

• Color palettes: A set of predefined color palettes that can be used to create consistent and visually appealing interfaces. Jetpack Compose provides a MaterialTheme composable that allows you to apply a color palette to your entire app.
• Typography: A set of typography styles that can create a consistent and easy-to-read interface. Jetpack Compose provides a Typography composable that allows you to apply a typography style to your text.
• Shapes: A set of shapes that can create consistent and visually appealing components. Jetpack Compose provides a Shape composable that allows you to apply a shape to your components.
• Icons...

Testing your applications on a foldable device

Testing your apps on foldable devices is essential to ensure they work correctly and provide an excellent user experience. In this recipe, we will look at some tips to test your apps on foldable devices in Jetpack Compose.

Getting ready

You will need to have done the previous recipes. You can access the entire code in the Technical requirements section.

How to do it…

Here are some tips to test your applications on foldable devices:

• Use an emulator: You can use the Android emulator to test your app on foldable devices without buying a physical device. The emulator provides a range of foldable device configurations that you can use to test your app.
• Use real devices: Testing your app on an actual foldable device can provide a more accurate representation of how your app will work on these devices. If you have access to a foldable device, it’s highly recommended to test your app on it.
• Test different...