In this tutorial, our goal is to create this project I’ve made recently:

What is MotionLayout?

To know more about the concepts of MotionLayout here’s the good read:


Basic Knowledge of:

  • Android Development
  • ConstraintLayout
  • Kotlin

Getting Started

Step 1. Create a new Android project

  1. Select Empty Activity
  2. Name your app accordingly
  3. Finish

Step 2. Implement dependency

  1. Add this on your build.gradle (app level) dependencies.
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'

Step 3. Create the item’s layout

We need to achieve this layout using the ConstraintLayout , to do…

So you wanted to create an app using Jetpack Compose with AdMob. What’s the easiest way?


  1. Setup your AdMob account
  2. Setup AdMob dependencies in your Android app project

I. XML Setup

  1. Create an empty activity (eg. MainActivity.kt & activity_main.xml)
  2. Implement this layout in your XML file:
  • In activity_main.xml we put the ComposeView inside the ConstraintLayout that matches the parent’s width and height with the bottom constraint above the AdView.

II. MainActivity Setup

  1. Implement this in your MainActivity.kt



  1. Since we used the XML file, it will follow the declarations in values (colors, strings, themes) in your res

What we want to achieve in this tutorial:

What you will need:

  • Basic knowledge of Android Development using Kotlin
  • Overview about Jetpack Compose
  • Installed latest version of Android Studio Arctic Fox
  • Emulator / Physical Device
  • Importing Resources
  • Setting up Font
  • Setting up Theme
  • Building the target design

Getting Started

  1. Create a new Empty Compose Project using Android Studio Preview
  2. Wait until the Gradle finished syncing
  3. While waiting, you can…

Note: The assets and design specs can be found here:

In this part, we need to setup our fonts, colors, shape, and themes that will be reused across our application.

By doing this, we can avoid repetitive declaration of a specific values of a certain styles and it will be easier for us to debug and modify it in any way we want.

Adding Custom Font

  1. Copy the custom fonts — (eg. nunito_sans_bold.ttf, nunito_sans_light.ttf, nunito_sans_semi_bold.ttf)
  2. Create new directory under res folder named font
  3. Paste the custom fonts
  4. Under ui/theme directory, double click the Type.kt file
  5. Declare the fonts accordingly:

Step 1. Implement dependency

  1. Add mavenCentral() on build.gradle (project level)
repositories {
dependencies {
implementation "dev.chrisbanes.accompanist:accompanist-coil:<version>"

Step 2. Add internet permission

In your app’s AndroidManifest.xml add the internet permission inside the <manifest> tag (preferably, place it above the <application> tag):

<uses-permission android:name="android.permission.INTERNET"/>

Step 3. Put it where you need it

  • Simple Declaration
data = "",
contentDescription = "Random adorable cat"
  • Fill parent with custom size
modifier = Modifier

Step 1. Look for your desired font

You may choose any font here in Google Fonts for free.

In this scenario, we will download this supa-friendly font — Quicksand

Step 2. Copy the font’s .ttf file(s)

I will only copy the regular and bold .ttf files for me. (You may copy yours accordingly)

Populating a list with a custom format is quite tiring when we do it the usual way in Android.

Note: This is just a quick comparison and discussion on how Jetpack Compose made our lives easier.

For example, we need to create a custom list like this in a usual way.

PS: The actual app is not laggy. I just converted the video to gif and reduce frames and size.

Step 1: We need to create an XML file for the card design item_character :

Let’s talk about a class first.

In Kotlin, all classes are final and public in nature.

What you can do is add open before the class keyword to make it inheritable. You can also add the open keyword before the fun in declaring a method to override it in the subclass.

What does it mean? For…

An application can have multiple threads, but the most important thread is the UI Thread / the main thread which is created when an application launched.

To simplify, the main thread will be the one who’s responsible for rendering what you see, the user interface, and the possible interaction between the user and the application (onClick, onKeyDown, etc).

But the main thread has its own limit just like your patience.

An interface is like an abstract class, the difference is that an interface cannot store state.

Interface Declaration

interface Cats{
fun doMeow()
interface Cat {
val sound: Sound
fun doMeow() = sound.meow()

class Siamese: Cat{
override val sound: Sound = Sound()
class Persian: Cat{
override val sound: Sound = Sound()

class Sound{
fun meow(){
print("Meow meow")
  • An interface can’t have a constructor and cannot inherit from a class.
interface Cat {
val sound: Sound
var color: String…

MJ Manaog

Android Developer | Newbie

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store