Jetpack Compose Guideline Blog – 2

Jetpack Compose Guideline Blog In this post, which is the second in the series, I provide an overview to be able to comprehend how to use the Jetpack Compose implementation that we will cover in the next chapters.I strongly suggest that you go to this previous blog to get a better understanding of “What Compose is ?” and “Why it should be used ?”.

After creating the first Jetpack Compose project Android Studio should have built a minimum sample application project and then started the main window.Android Studio already added some instructions in the MainActivity.kt file, which shows the Text component that displays the text message “Hello Android.”

Jetpack Compose Guideline Blog

Table of Contents

Let’s take a look at some of the key features of Compose when they’re presented within the project.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ReviewingMainActivityTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                        modifier = Modifier.fillMaxSize(),
                        color = MaterialTheme.colors.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    KarlTheme {
        Greeting("Android")

    }
}

Jetpack Compose ComponentActivity

The first thing you will notice there is that MainActiviy class is declared as an instance of ComponentActivity class. As we usually know, MainActivity starts as a subclass of the AppCompatActivity class. Actually there does not matter since AppCompatActivity class inherits by FragmentActivity class. FragmentActivity class inherits from ComponentActivity class. Here is a crucial factor to be considered when using interoperability APIs that we will discuss later in this series (though to get a full review , click this click here ). We are currently using AndroidView to illustrate when we add the view-based user interface to a composite project , and MapView or BannerView reverses.

Following that, like in the past, the MainActivity class implements one method that is called onCreate().When it is the Android runtime system starts an activity it is this method called.The method onCreate() procedure is employed in this case to connect the activity to components of the Compose user interface.

Jetpack Compose SetContent

It is written as the Extension functionality of ComponentActivty. It takes two parameters( parent: The parent composition reference that coordinates the the scheduling of composition updates, and content: A @Composable function that defines that the UI content).It is like inflating layout in View-based Ui which is why we write the code for the UI elements that are projected on the display in the method setContent.

setContentView(  
          ComposeView(this).apply {   
          setContent {     
                  MyComposableContent()   
             } 
      })

Before I go into the MainActivity’s features , I would like to describe the Composable function in some detail.

Composable Functions

If you are dealing with Compose composable functions (also called composables, (also known as components) are distinct Kotlin functions that are utilized to design user interfaces.
The @Composable annotation separates functions that can be composable from Kotlin standard functions that are coded. Additionally, most effective is using PascalCase rather than camelCase .We make use of the composable functions to display Ui(text buttons, text, image…or designs).

To create a hierarchy of components, composable functions are able to be called by other composables. Composable functions are only called by other composable functions.Composable function can also call regular Kotlin functions. Jetpack Compose uses a Kotlin compiler plugin to convert these functions into application’s UI elements.Instead being able to return values in the traditional meaning of the Kotlin function, these functions can use composable functions.

Composable functions convert data into interface elements. As opposed to returning value in the traditional way of Kotlin method, Composables emit user interface elements to Compose’s runtime system to render.

Jetpack Compose Theme

ReviewingMainActivityTheme composable function is defined in the Theme.kt file, which can be found in the Project tool window under “app- package name-ui -theme-theme.kt “. The file, like other files in the ui.theme folder, outlines the color, typography and shape features that will be used in the application and serves as the central location to modify the app’s general theme.

As I stated on the initial post in the initial postof the series Jetpack compose has the Material design theme which is pre-configured. You can easily alter this theme to suit your personal needs.We will provide more details and will offer “Custom Jetpack Compose Themes” in subsequent sections.

@Composable
fun ReviewingMainActivityTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
            colors = colors,
            typography = Typography,
            shapes = Shapes,
            content = content
    )
}

Jetpack Compose Surface ( )

The Surface composable is included in the call to the ReviewingMainActivityTheme composable function. The most important metaphor in the design of materials is the surface of the material. Each surface has its own elevation that affects the way they interact with each other as well as casting shadows.Surface is a Compose component , which acts as a backdrop for other components.

In this case , the container’s surface is using the ‘background color is from background color of the Android Material Design theme.It includes themes (including colors and fonts) and a collection of user interface elements (such as buttons as well as text, along with many text fields) as well as icons. It also generally determines the way an Android application should appear and behave, as well as react to user interaction.

Modifiers: Modifiers can be compared with the xml attributes you typically apply to your UI style. When applied to the right things and using padding and color in various order, we can create many various UI combinations.

Text(): Text(): This displays a text display on the screen. The function described in Compose UI library defines that the Compose UI library shows an image of text across the monitor. (in the xml format, similar to “TextView” )

Jetpack Compose Annotations

The Surface is designed to have the function Greeting, which is composable with an @Composable annotation. It is sent a string value that says “Android”

@Composablefun 
Greeting(name: String) {
  Text(text = “Hello $name!”)}

The second function that is composable within the MainActivity.kt file is DefaultPreview, but prior to that, it has the an @Preview annotation.The @Preview annotation that is associated with the function indicates to Android Studio that this is an example function and the output of the function will appear within the Preview panel.Multiple preview functions that are composable are able to be specified to display different areas of the user interface by using various data values within a single activity.Also Preview functions cat take different parameters.

@Repeatable
annotation class Preview(
        val name: String = "",
        val group: String = "",
        @IntRange(from = 1) val apiLevel: Int = -1,
        // TODO(mount): Make this Dp when they are inline classes
        val widthDp: Int = -1,
        // TODO(mount): Make this Dp when they are inline classes
        val heightDp: Int = -1,
        val locale: String = "",
        @FloatRange(from = 0.01) val fontScale: Float = 1f,
        val showSystemUi: Boolean = false,
        val showBackground: Boolean = false,
        val backgroundColor: Long = 0,
        @UiMode val uiMode: Int = 0,
        @Device val device: String = Devices.DEFAULT
)

Some of them are listed below, but for all parameters, you can go to the website ;

You can make the background disappear by using the showBackground parameter. Additionally, you can alter the background color by using backgroundColor parameter. BackgroundColor parameter.

The parameter group parameter is able to filter previews with the same name as the group.

The dimensions of the widthDp as well as the the heightDp parameters are used to determine the height and width of an image.

You can alter your appearance in a variety of ways using the uiMode parameter.

SUMMARY

We created a brand new project with Android Studio’s Empty Compose Activity template in this section and looked at a portion of the code created by the template automatically to support our project.We learned the basic and essential concepts of Jetpack Compose in detail through these concepts.

We’ll modify and expand the program over the next chapters, replacing parts of the code template, and creating our own methods that are composable.

Read More Tutorial

Tags :ComponentActivity Composable Functions Jetpack Compose Annotations Jetpack Compose SetContent Jetpack Compose Surface Jetpack Compose Theme SetContent

add a comment