Jetpack Compose Ep:1— Just Text App

Nowadays, there are many things going on. Likely to be in the mobile industry, with Android, IOS, Flutter, etc. And there is this one more thing called The Jetpack Compose.

In this episode, I’ll discuss the basics of the Jetpack Compose, starting from the making a basic app. The explanation includes:

• What is Jetpack Compose?
• Version of the IDE
• The project’s folder structure
• Necessary libraries and gradle changes
• setContent()
• MaterialTheme()
• Custom Functions
• Text()
• Composable & Preview keyword

What is Jetpack Compose?

Jetpack Compose is a toolkit for building native Android applications without bothering to design the UI separately by using the XML language. Jetpack Compose uses declarative functions to create all the UI components by calling it in a systematic manner. By doing so, it simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

Version of the IDE

The IDE required to build Jetpack Compose applications is Android Studio Canary of version 4.1 or higher.

Note: As the Jetpack Compose is still in development phase, thus it should not be used in a production applications.

Creating the app

Step 1: Click on the create new project option as shown below:

Step 2: Select Empty Compose Activity from the Project Template and then hit next as shown below:

Step 3: Then you will move towards the Configure Your Project Screen, where you will have to change the name of the project to the Just Text App, change the Package name, change the save location as you please, leave the rest as it is and hit the finish button to load the project as shown below:

After the loading process completes, the project will look something like this into your MainActivity.kt file as shown below:

package com.justtextapp

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.Composable
import androidx.ui.core.Text
import androidx.ui.core.setContent
import androidx.ui.material.MaterialTheme
import androidx.ui.tooling.preview.Preview

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Greeting("Android")
            }
        }
    }
}

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

@Preview
@Composable
fun DefaultPreview() {
    MaterialTheme {
        Greeting("Android")
    }
}

As you can see above, the code which I’ve mentioned looks very similar to that of Kotlin. But we will discuss about the code later.

The project’s folder structure

When to open up the project panel from the left-hand side of your IDE, collapse the res folder and you will come to know that there is a layout folder in it, which we used to see in our every Android application project. That clears out that there is no requirement for any xml file to design the UI of the app. The UI and the Logic both will be solely created into MainActivity.kt file only by using the Compose’s functions.

Necessary libraries and gradle changes

Open up your project level build.gradle file and check for the libraries and its versions. If it is as same as shown below or higher than that then there is no need to make any changes over here in this file.

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext.kotlin_version = "1.3.71"
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:4.1.0-alpha05"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Then go to your app-level build.gradle file which looks like as shown below:

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-android-extensions'
}

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.3"

    defaultConfig {
        applicationId "com.justtextapp"
        minSdkVersion 21
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
}

dependencies {

    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.2.0'
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.1.0'
    implementation 'androidx.ui:ui-framework:0.1.0-dev03'
    implementation 'androidx.ui:ui-layout:0.1.0-dev03'
    implementation 'androidx.ui:ui-material:0.1.0-dev03'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev03'
    testImplementation 'junit:junit:4.13'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}

Now here in the dependencies block, we need to make a change in the version of our framework, layout, material and tooling dependencies. Increase their version to 0.1.0-dev08 as shown below.

dependencies {
    
    implementation 'androidx.ui:ui-framework:0.1.0-dev08'
    implementation 'androidx.ui:ui-layout:0.1.0-dev08'
    implementation 'androidx.ui:ui-material:0.1.0-dev08'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev08'

}

Also, check this line into gradle-wrapper.properties file as shown below:

distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip

If the version is as same as the above or higher then it's fine, but if it is lower than there is a need for an upgrade.

Let's move towards the MainActivity.kt file.

setContent() function/block

This function/block is used to define the layout of the activity. It is meant to replace the .xml file which we used to set the layout file into our activity file i.e. like this setContent(R.layout.xml_file_name)

setContent {
    // Code here...
}

MaterialTheme() function/block

This component defines the styling principles from the Material design specification. It includes Material components, as it defines key values such as base colors and typography. Material components such as Button and Checkbox use this definition to set default values.

MaterialTheme {
     //Code here...
}

Custom Functions

The custom functions are those which are created by the developer. The Jetpack Compose gives us the authority to create our own functions. So, here as we see the Greeting function which is the default code of the Jetpack Compose’s template. We will change the name of that function to make it our own.

fun Greeting(name: String) {
    //Code here...
}

Change the name of the function from Greeting() to TextLayout() holding a parameter of name as of String data type.

fun TextLayout(name: String) {
    //Code here...
}

Similarly, make the changes into our MaterialTheme{} block too as it holds this function into it to load the UI and render it on the screen. Also, change the value of the TextLayout() function as shown below:

MaterialTheme {
    TextLayout("Jetpack. This is Just Text App")
}

Text() function

This function is used to display text and thus provides accessibility information. It uses a default style as the currentTextStyle defined by the theme. In addition, if no text color is manually specified in style then the text color will be contentColor.

Text(text = "Hello $name!")

The name word used in the double quotation along with the dollar symbol is used for concatenating the string.

Also, change the import library of the text into the MainActivity.kt file.

Change from:

import androidx.ui.core.Text

To this:

import androidx.ui.foundation.Text

This will resolve the error into the MainActivity.kt file.

Now, with another function, change the name of the function here too with the same value into the parameter.

The DefaultPreview() function is used to render the UI of this app into the Android Studio only. It holds the MaterialTheme’s block to render the UI as same as it will render on that of the emulator or a physical device. It uses the Preview and Composable annotations to make the rendering happen into the editor.

fun DefaultPreview() {
    MaterialTheme {
        TextLayout("Jetpack. This is Just Text App")
    }
}

Composable & Preview keyword

Composable: This keyword is used by applying to a function or lambda to indicate that the function/lambda can be used as part of a composition to describe a transformation from application data into a tree or hierarchy.
Annotating a function or expression with Composable changes the type of that function or expression.

Composable functions can only ever be called from within another Composable function. A useful mental model for Composable functions is that an implicit “composable context” is passed into a Composable function, and is done so implicitly when it is called from within another Composable function. This “context” can be used to store information from previous executions of the function that happened at the same logical point of the tree.

Preview: This keyword is applied to @Composable methods with no parameters to render the UI into the Android Studio.

That’s it. Finally, run the code into your respective emulators or on an Android device.

Note: For the source code of this project, you can visit my GitHub account and you will find a bunch of little projects. But, whoever wants to refer only this project then search for the same named package in my repository. The link is given below:

Akshay-Sawant/Compose-Studio

Do contribute if you think there is a need for any betterment or issue into the code and do provide a response below in the comment section, as I would like to improve myself further. Thank you in advance. Happy coding!