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

What is MotionLayout?

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…

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…

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…

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…

Step 1. Implement dependency

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

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

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

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…

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…

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…

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

Interface Declaration

How to use Interface

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