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 the concepts of MotionLayout here’s the good read:


  • 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'

2. Sync Gradle Files

Step 3. Create the item’s layout

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

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…

Step 1. Implement dependency

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

Step 2. Add internet permission

<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
Row( modifier = Modifier .fillMaxWidth() .height(300.dp) .padding(bottom = 15.dp) ) { CoilImage( data = "", contentDescription = "Random cute yorkshire", modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Crop, }…

Step 1. Look for your desired font

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

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

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 var weight: Double fun doMeow() = sound.meow()…

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

open class Keyboard{}

Inheritance Declaration

fun main() {

class Mechanical: Keyboard("Mechanical")

open class Keyboard (type: String){
init {
print("Its a $type Keyboard")
Its a Mechanical Keyboard

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

Overriding Methods and…

Classes can be declared in Kotlin using the word class followed by its name and body inside curly braces.

class Moominvalley{
//class body

A class can have one or more Constructors, it can be declared as a Primary or a Secondary Constructor.

Primary Constructor Declaration

The primary constructor is part of the class header.

class Moominvalley(resident: String){//class body}

Secondary Constructor Declaration

class Moominvalley{

constructor(resident: String, kind: String){
print("Resident Name: $resident Kind: $kind")

Initializer Block

init{} will be always initialized

fun main() {
class Moominvalley(resident: String){ constructor(resident: String, kind: String ): this(resident){ println("Resident Name: $resident Kind…

MJ Manaog

Android Developer | Noob

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