Now that we have installed Android Studio, the next step is to create an Android app using Jetpack Compose. Although this project will make use of several Compose features, it is an intentionally simple example intended to provide an early demonstration of Compose in action and an initial success on which to build as you work through the remainder of the book. The project will also serve to verify that your Android Studio environment is correctly installed and configured.
This chapter will create a new project using the Android Studio Compose project template and explore both the basic structure of a Compose-based Android Studio project and some of the key areas of Android Studio. In the next chapter, we will use this project to create a simple Android app.
Both chapters will briefly explain key features of Compose as they are introduced within the project. If anything is unclear when you have completed the project, rest assured that all of the areas covered in the tutorial will be explored in greater detail in later chapters of the book.
About the project
The completed project will consist of two text components and a slider. When the slider is moved, the current value will be displayed on one of the text components, while the font size of the second text instance will adjust to match the current slider position. Once completed, the user interface for the app will appear as shown in Figure 3-1:
Figure 3-1
 |
You are reading a sample chapter from Jetpack Compose 1.3 Essentials. Buy the full book now in Print or eBook format. Learn more. |
Creating the project
The first step in building an app is to create a new project within Android Studio. Begin, therefore, by launching Android Studio so that the “Welcome to Android Studio” screen appears as illustrated in Figure 3-2:
Figure 3-2
Once this window appears, Android Studio is ready for a new project to be created. To create the new project, click on the New Project button to display the first screen of the New Project wizard.
Creating an activity
The next step is to define the type of initial activity that is to be created for the application. The left-hand panel provides a list of platform categories from which the Phone and Tablet option must be selected. Although a range of different activity types is available when developing Android applications, only the Empty Compose Activity template provides a pre-configured project ready to work with Compose. Select this option before clicking on the Next button:
Figure 3-3
|
You are reading a sample chapter from Jetpack Compose 1.3 Essentials. Buy the full book now in Print or eBook format. Learn more. |
Defining the project and SDK settings
In the project configuration window (Figure 3-4), set the Name field to ComposeDemo. The application name is the name by which the application will be referenced and identified within Android Studio and is also the name that would be used if the completed application were to go on sale in the Google Play store:
Figure 3-4
The Package name is used to uniquely identify the application within the Google Play app store application ecosystem. Although this can be set to any string that uniquely identifies your app, it is traditionally based on the reversed URL of your domain name followed by the name of the application. For example, if your domain is www.mycompany.com, and the application has been named ComposeDemo, then the package name might be specified as follows:
com.mycompany.composedemo
If you do not have a domain name you can enter any other string into the Company Domain field, or you may use example.com for testing, though this will need to be changed before an application can be published:
com.example.composedemo
The Save location setting will default to a location in the folder named AndroidStudioProjects located in your home directory and may be changed by clicking on the folder icon to the right of the text field containing the current path setting.
|
You are reading a sample chapter from Jetpack Compose 1.3 Essentials. Buy the full book now in Print or eBook format. Learn more. |
Set the minimum SDK setting to API 26: Android 8.0 (Oreo). This is the minimum SDK that will be used in most of the projects created in this book unless a necessary feature is only available in a more recent version. The objective here is to build an app using the latest Android SDK, while also retaining compatibility with devices running older versions of Android (in this case as far back as Android 8.0). The text beneath the Minimum SDK setting will outline the percentage of Android devices currently in use on which the app will run. Click on the Help me choose link to see a full breakdown of the various Android versions still in use:
Figure 3-5
Since Compose only works with Kotlin, the Language menu is preset to Kotlin and cannot be changed. Click on the Finish button to create the project.
Previewing the example project
At this point, Android Studio should have created a minimal example application project and opened the main window.
Figure 3-6
|
You are reading a sample chapter from Jetpack Compose 1.3 Essentials. Buy the full book now in Print or eBook format. Learn more. |
The newly created project and references to associated files are listed in the Project tool window located on the left-hand side of the main project window. The Project tool window has several modes in which information can be displayed. By default, this panel should be in Android mode. This setting is controlled by the menu at the top of the panel as highlighted in Figure 3-7. If the panel is not currently in Android mode, use the menu to switch mode:
Figure 3-7
The code for the main activity of the project (an activity corresponds to a single user interface screen or module within an Android app) is contained within the MainActivity.kt file located under app -> java -> com.example. composedemo within the Project tool window as indicated in Figure 3-8:
Figure 3-8
Double-click on this file to load it into the main code editor panel. The editor can be used in different modes when writing code, the most useful of which when working with Compose is Split mode. The current mode can be changed using the buttons marked A in Figure 3-9. Split mode displays the code editor (B) alongside the Preview panel (C) in which the current user interface design will appear:
|
You are reading a sample chapter from Jetpack Compose 1.3 Essentials. Buy the full book now in Print or eBook format. Learn more. |
Figure 3-9
To get us started, Android Studio has already added some code to the MainActivity.kt file to display a Text component configured to display a message which reads “Hello Android”.
If the project has not yet been built, the Preview panel will display the message shown in Figure 3-10:
Figure 3-10
If you see this notification, click on the Build & Refresh link to rebuild the project. After the build is complete, the Preview panel should update to display the user interface defined by the code in the MainActivity.kt file:
|
You are reading a sample chapter from Jetpack Compose 1.3 Essentials. Buy the full book now in Print or eBook format. Learn more. |
Figure 3-11
Reviewing the main activity
Android applications are created by bringing together one or more elements known as Activities. An activity is a single, standalone module of application functionality that either correlates directly to a single user interface screen and its corresponding functionality, or acts as a container for a collection of related screens. An appointments application might, for example, contain an activity screen that displays appointments set up for the current day. The application might also utilize a second activity consisting of multiple screens where new appointments may be entered by the user and existing appointments edited.
When we created the ComposeDemo project, Android Studio created a single initial activity for our app, named it MainActivity, and generated some code for it in the MainActivity.kt file. This activity contains the first screen that will be displayed when the app is run on a device. Before we modify the code for our requirements in the next chapter, it is worth taking some time to review the code currently contained within the MainActivity.kt file.
The file begins with the following line (keep in mind that this may be different if you used your own domain name instead of com.example):
package com.example.composedemo
This tells the build system that the classes and functions declared in this file belong to the com.example. composedemo package which we configured when we created the project.
|
You are reading a sample chapter from Jetpack Compose 1.3 Essentials. Buy the full book now in Print or eBook format. Learn more. |
Next are a series of import directives. The Android SDK is comprised of a vast collection of libraries that provide the foundation for building Android apps. If all of these libraries were included within an app the resulting app bundle would be too large to run efficiently on a mobile device. To avoid this problem an app only imports the libraries that it needs to be able to run:
import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.material.Text . . .
Initially, the list of import directives will most likely be “folded” to save space. To unfold the list, click on the small “+” button indicated by the arrow in Figure 3-12 below:
Figure 3-12
The MainActivity class is then declared as a subclass of the Android ComponentActivity class:
class MainActivity : ComponentActivity() {
.
.
}The MainActivity class implements a single method in the form of onCreate(). This is the first method that is called when an activity is launched by the Android runtime system and is an artifact of the way apps used to be developed before the introduction of Compose. The onCreate() method is used here to provide a bridge between the containing activity and the Compose-based user interfaces that are to appear within it:
|
You are reading a sample chapter from Jetpack Compose 1.3 Essentials. Buy the full book now in Print or eBook format. Learn more. |
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeDemoTheme {
.
.
}
}
}The method declares that the content of the activity’s user interface will be provided by a composable function named ComposeDemoTheme. This composable function is declared in the Theme.kt file located under the app -> <package name> -> ui.theme folder in the Project tool window. This, along with the other files in the ui.theme folder defines the colors, fonts, and shapes to be used by the activity and provides a central location from which to customize the overall theme of the app’s user interface.
The call to the ComposeDemoTheme composable function is configured to contain a Surface composable. Surface is a built-in Compose component designed to provide a background for other composables:
ComposeDemoTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
.
.
}In this case, the Surface component is configured to fill the entire screen and with the background set to the standard background color defined by the Android Material Design theme. Material Design is a set of design guidelines developed by Google to provide a consistent look and feel across all Android apps. It includes a theme (including fonts and colors), a set of user interface components (such as button, text, and a range of text fields), icons, and generally defines how an Android app should look, behave and respond to user interactions.
Finally, the Surface is configured to contain a composable function named Greeting which is passed a string value that reads “Android”:
ComposeDemoTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Greeting("Android")
}
}Outside of the scope of the MainActivity class, we encounter our first composable function declaration within the activity. The function is named Greeting and is, unsurprisingly, marked as being composable by the @ Composable annotation:
|
You are reading a sample chapter from Jetpack Compose 1.3 Essentials. Buy the full book now in Print or eBook format. Learn more. |
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}The function accepts a String parameter (labeled name) and calls the built-in Text composable, passing through a string value containing the word “Hello” concatenated with the name parameter. As will soon become evident as you work through the book, composable functions are the fundamental building blocks for developing Android apps using Compose.
The second composable function declared in the MainActivity.kt file reads as follows:
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ComposeDemoTheme {
Greeting("Android")
}
}Earlier in the chapter, we looked at how the Preview panel allows us to see how the user interface will appear without having to compile and run the app. At first glance, it would be easy to assume that the preview rendering is generated by the code in the onCreate() method. In fact, that method only gets called when the app runs on a device or emulator. Previews are generated by preview composable functions. The @Preview annotation associated with the function tells Android Studio that this is a preview function and that the content emitted by the function is to be displayed in the Preview panel. As we will see later in the book, a single activity can contain multiple preview composable functions configured to preview specific sections of a user interface using different data values.
In addition, each preview may be configured by passing parameters to the @Preview annotation. For example, to view the preview with the rest of the standard Android screen decorations, modify the preview annotation so that it reads as follows:
@Preview(showSystemUi = true)
Once the preview has been updated, it should now be rendered as shown in Figure 3-13:
|
You are reading a sample chapter from Jetpack Compose 1.3 Essentials. Buy the full book now in Print or eBook format. Learn more. |
Figure 3-13
Preview updates
One final point worth noting is that the Preview panel is live and will automatically reflect minor changes made to the composable functions that make up a preview. To see this in action, edit the call to the Greeting function in the DefaultPreview() preview composable function to change the name from “Android” to “Compose”. Note that as you make the change in the code editor, it is reflected in the preview.
More significant changes will require a build and refresh before being reflected in the preview. When this is required, Android Studio will display the following notice at the top of the Preview panel:
Figure 3-14
Simply click on the Build & Refresh link to update the preview for the latest changes.
|
You are reading a sample chapter from Jetpack Compose 1.3 Essentials. Buy the full book now in Print or eBook format. Learn more. |
The Preview panel also includes an interactive mode that allows you to trigger events on the user interface components (for example clicking buttons, moving sliders, scrolling through lists, etc.). Since ComposeDemo contains only an inanimate Text component at this stage, it makes more sense to introduce interactive mode in the next chapter.
Summary
In this chapter, we have created a new project using Android Studio’s Empty Compose Activity template and explored some of the code automatically generated for the project. We have also introduced several features of Android Studio designed to make app development with Compose easier. The most useful features, and the places where you will spend most of your time while developing Android apps, are the code editor and Preview panel.
While the default code in the MainActivity.kt file provides an interesting example of a basic user interface, it bears no resemblance to the app we want to create. In the next chapter, we will modify and extend the app by removing some of the template code and writing our own composable functions.
