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

MotionLayout is a layout type that helps you manage motion and widget animation in your app. MotionLayout is a subclass of ConstraintLayout and builds upon its rich layout capabilities.

Read more:

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

Basic Knowledge of:

  • Android Development
  • ConstraintLayout
  • Kotlin
  1. Select Empty Activity
  2. Name your app accordingly
  3. Finish
  1. Add this on your build.gradle (app level) dependencies.
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'

2. Sync Gradle Files

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
  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.
  1. Implement this in your MainActivity.kt

2. Do your Compose layout :)

  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

Tutorial Content:

  • Importing Resources
  • Setting up Font
  • Setting up Theme
  • Building the target design

Note: We will use the design of Amjad in his Dribbble post: and tweak some of its elements. This is for tutorial purposes only. The weather-related assets belong to Piqo: . Follow/contact them for this awesome design!

  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:

6. Initialize…

  1. Add mavenCentral() on build.gradle (project level)
repositories {

2. Implement the dependency on build.gradle (app level) . Check the latest version in the repository

dependencies {
implementation "dev.chrisbanes.accompanist:accompanist-coil:<version>"

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"/>
  • Simple Declaration
data = "",
contentDescription = "Random adorable cat"
  • Fill parent with custom size
modifier = Modifier

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

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

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 :

Step 2: Add the Recycler View to the main XML file:

Step 3…

Let’s talk about a class first.

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

Error in Line 5 because you cannot extend the class Shape because it is final by default.

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.

But what if you want a single class that can have both optional and required method to override in a class, you can use Abstract.

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()

How to use Interface

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.

Multiple Interfaces in 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