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

What is MotionLayout?

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

Read more:

To know more about the concepts of 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 (app level) dependencies.

2. Sync Gradle Files

Step 3. Create the item’s layout

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

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!

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 folder named
  3. Paste the custom fonts
  4. Under directory, double click the file
  5. Declare the fonts accordingly:

6. Initialize…

Step 1. Implement dependency

  1. Add on

2. Implement the dependency on . Check the latest version in the repository

Step 2. Add internet permission

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

Step 3. Put it where you need it

  • Simple Declaration
  • Fill parent with custom size

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 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 :

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 because it is final by default.

What you can do is add before the keyword to make it inheritable. You can also add the keyword before the 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 .

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

How to use Interface


  • An interface can’t have a constructor and cannot inherit from a class.

Multiple Interfaces in a Class

In Kotlin, classes cannot be inherited, because they are marked as final in default. To make a class inheritable, add the reserved word before the word .

Inheritance Declaration

Here we declared an inheritable class with a primary constructor then we extend this open class using the symbol to the class header so that it can inherit whatever inside the open class.

Overriding Methods and…

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