In this tutorial we are going to build up a simple clearing weather animation using MotionLayout.

This animation will contain a changing background color, and 2 moving clouds, which are going to move out to the left and right of the screen.

We are going to implement a click listener also. It means, the animation will start only when we click on it.

When the animation is started and finished, then we gonna show a Toast message. So, we gonna learn how to add events to the states of the Transition as well.

Android WeatherApp Course

This tutorial is part of my WeatherApp course. In this course you can build up a whole application using the OpenWeatherMaps API.
If you would like to do this course, then you can find it under the link: Android WeatherApp course

MotionLayout

MotionLayout is a layout type, where we can animate the views inside of a layout. Because MotionLayout is the subclass of ConstraintLayout, we can use all of its cool features.

In a MotionLayout we can animate not only the transitions between the layouts, we can either animate the layout properties as well.

And one more awesome thing, that we can handle events like click and swipe also. Using this feature we can build up much better user interfaces to reach better user experiences.

MotionLayout uses XML to declare the transitions no matter how complex it is.

Tags

Before we can start the implementation of the tutorial, we should clarify some tags, what we are going to use for this example animation.

These tags are identified in an XML file, which describes the animation. For example the start and the end transitions, moreover the changes of the attributes.

This XML file will be automatically generated by Android Studio when we will convert the ConstraintLayout to MotionLayout.

The name of this XML is MotionScene, which describes the animation.

There are many tags, but from them we gonnna use the below ones

• <Transition>: It specifies the animation duration, trigger and how should the views move.
• <OnClick>: As we have talked about, we can add a click event to the transition…
• <KeyFrameSet>: Inside of this tag we can add some changes to the views and we can specify in which position of the transition should be done the attribute-change.
• <ConstraintSet>: This tag will specify the start and the end constraints of the transition.
• <Constraint>: With this attribute we can match views from the layout XML file to the corresponding ConstraintSet.
• <Layout>: It will describe the above mentioned views.
• <PropertySet> and <Transform>: With these attributes we can specify some properties of the above mentioned views.

It can be that after this description you feel yourself a bit lost, but now we will start to implement the sample transition and these attributes gonna be cleaner, I promise. 😎

Step 1 — Create new project

Our first step is to create a whole new project. For this, launch Android Studio. If you see the “Welcome page”, then click on the “Start a new Android Studio project”. If you have an open project, then from the “File” menu select “New”, then “New Project”. After thet, this window will popup.

Here select the “Empty Activity” option. In the next window, we should provide some information about the newly created app.

This tutorial will be written in Kotlin. So, select from the dropdown list the Kotlin language.

From the next list of the “Minimum SDK” select API 21. In our case API 21 gonna be enough.

If you are done, click on the “Finish” button. The build can take few minutes. Be patient! 😉

When the build has been finished, then you should see the open MainActivity::class and next to this the activity_main.xml files.

Step 2 — Update dependency

We are going to start this chapter by updating the dependencies of ConstraintLayout for the app. First, open the Module build.gradle file from the left Project pane.

Then in the dependencies{} section find this line:

implementation ‘androidx.constraintlayout:constraintlayout:1.1.3’

To start using MotionLayout in our project, we have to update the version of ConstraintLayout at least to version 2.0.0. You can find the highest version under the link: [`Constraintlayout`]

When this tutorial was writen, this version was 2.0.0-rc1, so update the above implementation line to

implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-rc1‘

Next sync the project by clicking on the Sync now button at the top right corner of Android Studio.

That’s all what we have to do to start using `MotionLayout` in our project.

Step 3 — Convert to MotionLayout

Next we will convert ConstraintLayout of the activity_main.xml file to MotionLayout. To do this, open it from the res > layout folders.

Open the design view at the right side of Android Studio. Then go to the Component Tree pane. Click on ConstraintLayout with the right mouse button and select the “Convert to MotionLayout” option.

After the conversation you should have the below window which is the MotionScene of the activity_main.xml file.

1. This layout describes the starter position of the ConstraintSet…
2. … and this is the end.
3. After the conversation, our layout got a new attribute also, which describes the MotionScene of the layout. You can find this XML file in the res > xml folder called activity_main_scene.xml.
4. Using the first icon you can add new ConstraintSets, which is a new state what you can start for example from the end of the current MotionScene. With the second icon you can add transitions and the third icon is for adding click or swipe event to the transitions.
5. This is called Transition. Here you can play with the animation and check what is going to happen with the layout during the animation.

Step 4 — The assets

Before we can start to implement the layout and the MotionScene, we have to add the clouds, the sun and 2 new colors to the colors.xml file. Because this step is not the main part of this clearing weather tutorial, we will just add them by downloading the below ZIP file.
Clearing Weather assets

After downloading, unzip the file into the res folder of your project.

Step 5 — The layout

The next step is the implementation of the starter layout. So, open the activity_main.xml file from the res > layout folders and paste into it the below xml code.

The layout will contain 2 Views, which will be the background and 3 ImageViews representing the clouds and the sun.

activity_main.xml

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:android=”http://schemas.android.com/apk/res/android"
    xmlns:app=”http://schemas.android.com/apk/res-auto"
    xmlns:tools=”http://schemas.android.com/tools"
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    app:layoutDescription=”@xml/activity_main_scene”
    tools:context=”.MainActivity”>

    <View
        android:id=”@+id/view_background_gray”
        android:layout_width=”match_parent”
        android:layout_height=”match_parent”
        android:alpha=”1"
        android:background=”@color/light_grey”/>

    <View
        android:id=”@+id/view_background_blue”
        android:layout_width=”match_parent”
        android:layout_height=”match_parent”
        android:alpha=”0"
        android:background=”@color/light_blue”/>

    <ImageView
        android:id=”@+id/iv_sun”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:src=”@drawable/ic_sun”
        app:layout_constraintBottom_toBottomOf=”parent”
        app:layout_constraintLeft_toLeftOf=”parent”
        app:layout_constraintRight_toRightOf=”parent”
        app:layout_constraintTop_toTopOf=”parent” />

    <ImageView
        android:id=”@+id/iv_cloud_white”
        android:layout_width=”200dp”
        android:layout_height=”200dp”
        android:elevation=”1dp”
        android:src=”@drawable/ic_cloud_white”
        app:layout_constraintBottom_toBottomOf=”parent”
        app:layout_constraintLeft_toLeftOf=”parent”
        app:layout_constraintHorizontal_bias=”0.2"
        app:layout_constraintVertical_bias=”0.45"
        app:layout_constraintRight_toRightOf=”parent”
        app:layout_constraintTop_toTopOf=”parent” />

    <ImageView
        android:id=”@+id/iv_cloud_grey”
        android:layout_width=”150dp”
        android:layout_height=”150dp”
        android:src=”@drawable/ic_cloud_gray”
        app:layout_constraintBottom_toBottomOf=”parent”
        app:layout_constraintLeft_toLeftOf=”parent”
        app:layout_constraintVertical_bias=”0.55"
        app:layout_constraintHorizontal_bias=”0.8"
        app:layout_constraintRight_toRightOf=”parent”
        app:layout_constraintTop_toTopOf=”parent” />

</androidx.constraintlayout.motion.widget.MotionLayout>

Step 6 — The clearing weather animation

Finally in this step, we can start the implementation of the clearing weather animation.

There are 2 ways to do thet. Before Android Studio 4.0 you could do that only using the XML file. From version 4.0 the developers can use a graphical interface, which is the MotionScene. About this we have talked already. You can open this screen when you open the activity_main.xml file and switch to the design view using the icons at the top right corner of Android Studio.

In this tutorial we gonna do that manually. So we gonna use the design view.

The start ConstraintSet

As you can see, the starter ConstraintSet is already done, because we have inserted the above layout. Note the alpha property of the view_background_gray View.

The start ConstraintSet

Now select the end ConstraintSet.

First, we gonna change the transparency of the 2 views. We can do that by setting their alpha property.

From the ConstraintSet table, what you can find below of the above screens, select the view_background_gray and from the Attributes pane change the alpha from 1 to 0.

Similarly, change the alpha of view_background_blue from 0 to 1.

Next, select the iv_cloud_white ImageView. From its attributes remove the horizontal and the vertical bias lines. You can do it easyily in the right Attributes pane.

Then remove it’s right to right and the left ot left alignments.

Finally add the left to right alignment with value of parent. You can do in the desing mode if you click in the Attributes pane on the plus icon.

The result is that, the ImageView gonna be out from the screen at the right side.

The last change on the end ConstraintSet is to modify the attributes of the iv_cloud_grey ImageView as well. So, remove also the bias lines and the left to left — right to right constraints. Thenafter add the right to left constraint with the values of parent.

The Transition

The last thing what we have to set before the first run of the app, is to set the click event.

This click event will start the transition. We can add it to the Transition by clicking on it. You can open it if you click on the arrow which connects the start and the end ConstraintSets.

Thenafter from the Attributes pane, in the OnClick part click on the + icon and add the below attributes with their values.

• clickActioin -> toggle
• targetId -> @id/iv_cloud_grey

The XML code of the MotionScene

If you are stucked, then just copy the below code into the activity_main_scene.xml file, what you can find in the res > xml folders.

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
       <KeyFrameSet>
       </KeyFrameSet>
        <OnClick motion:clickAction="toggle"
            motion:targetId="@id/iv_cloud_grey" />
    </Transition>

    <ConstraintSet android:id="@+id/start"/>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/view_background_gray"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="0" />
        <Constraint
            android:id="@+id/view_background_blue"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="1" />
        <Constraint
            android:id="@+id/iv_cloud_white"
            android:elevation="1dp"
            android:layout_width="200dp"
            android:layout_height="200dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintLeft_toRightOf="parent" />
        <Constraint
            android:id="@+id/iv_cloud_grey"
            android:layout_width="150dp"
            android:layout_height="150dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintRight_toLeftOf="parent" />
    </ConstraintSet>
</MotionScene>

Run the app

Now its time to test the app. Connect your real device or start an emulator and run the app.

When it is loaded, then click on the clouds. The animation needs to run as you can see on this picture.

Step 6 — The Transition listener

In the last step of this tutorial we are going to implement the Transition listener. Using this listener we can add some actions to the start / end transitions and of course we can specify actions during the transition as well.

In our tutorial we are going to show a Toast message when the transition has been started and when it is finished.

First we have to add an id to the MotionLayout viewgroup in the activity_main.xml file. So open it from the res > layout folders and add the below line to the MotionLayout viewgroup.

android:id=“@+id/motionLayout”

Next, open up the MainActivity::class file from the main source set.

We can use the setTransitionListener() method to add actions to the transition.

So, copy and paste the below line into the onCreate() method.

val motionLayout = findViewById(R.id.motionLayout)

motionLayout.setTransitionListener(object : MotionLayout.TransitionListener {
    override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) {
    }
    override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int)
    {
        Toast.makeText(this@MainActivity, "onTransitionStarted", Toast.LENGTH_SHORT).show()
    }
    override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
    }
    override fun onTransitionCompleted(p0: MotionLayout?, p1: Int)
    {
        Toast.makeText(this@MainActivity, "onTransitionCompleted", Toast.LENGTH_SHORT).show()
    }
})

First in the code we have to find the view of the MotionLayout. Thenafter we use its setTransitionListener() method.

As you can see, it has 4 methods. From them we are going to use only 2, So, we have added a Toast to the onTransitionStarted() and onTransitionCompleted() methods.

Run the app

Run again the app. When you start the transition and when it is finished, then you will have a `Toast` message on the screen.

Congratulations! 😎

You just created a cool animation, what maybe you can use in your next app. 😊

Run the app

The source code is available on GitHub, check it out and download it using the below link.

GitHub

Android WeatherApp course

Did you like this short tutorial, then check out my Android WeatherApp course as well.

Questions

I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

Step 1: Create a new project

Frist of all, create a new Android Studio project.

Step 2: Create a layout

The second step is to create a very simple layout. In our case it will contain only an EditText and a Button.

Copy and paste the below code into the activity_main.xml file.

Step 3: Create an icon

Our Toast message will have an icon as well. So, create a checkmark with the below detailes into the drawable folder.

• Search for done to find the icon
• Create a color in the colors.xml file with the name of green: #78C257

Step 4: Create a shape

The custom Toast message will have

• a green border
• a light green background
• and rounded corners

So, create a new shape in the drawable folder and paste into it the below lines.

The Hex-code for the light_green color: #B9D7AC

Step 5: Create the layout

The next is to create the custom layout for the Toast message. So, create a new layout file in the res-layout folder with the name of “custom_toast”. Then paste into it the below lines.

Step 6: Create the extension function

In this step first, we have to create a new package and file.

• New Package: util
• New file: ViewExt.kt

Copy and paste the below code into the new ViewExt.kt file

Notes

1. Using the LayoutInflater we gonna make instance about the layout
2. Set the text of the TextView
3. Then we can call the apply scope function to set the gravity, the duration and the view.

Step 7: Set the click listener

The last step is to show our custom Toast message when we click on the Button. So, open the MainActivity and paste the below code into the onCreate() method.

Run the app

Run and test the app. ;)

More detailes

The whole tutorial is available on my website

Custom Toast - Inspire Coding - Android development in Kotlin

And you can check the source code on GitHub as well.

inspire-coding/CustomToastDemo

Have a nice day :)

Step 1: Create a new project

Frist of all, create a new Android Studio project.

Step 2: Create a layout

The second step is to create a very simple layout. In our case it will contain only an EditText and a Button.

Copy and paste the below code into the activity_main.xml file.

Step 3: Create an icon

Our Toast message will have an icon as well. So, create a checkmark with the below detailes into the drawable folder.

• Search for done to find the icon
• Create a color in the colors.xml file with the name of green: #78C257

Step 4: Create a shape

The custom Toast message will have

• a green border
• a light green background
• and rounded corners

So, create a new shape in the drawable folder and paste into it the below lines.

The Hex-code for the light_green color: #B9D7AC

Step 5: Create the layout

The next is to create the custom layout for the Toast message. So, create a new layout file in the res-layout folder with the name of “custom_toast”. Then paste into it the below lines.

Step 6: Create the Toast

Next, we are going to create a method to inflate, position and set the text of the Toast message.

The below method goes into the MainActivity::class after the onCreate() method.

Step 7: Fire up the method

The last step is call the above created method in the click listener of our only Button.

The below lines go into the onCreate() method.

Run the app

That’s all, now you can run the app and test it.

More detailes

You can find in much more detailes this tutorial on my website.

Custom Toast - Inspire Coding - Android development in Kotlin

And the whole source code is available on my GitHub page.

inspire-coding/CustomToastDemo

If you have any questions, then leave me a comment below. ;)

Have a nice day :)

In this tutorial I would like to show you how you can create a password checker with a modern dark user interface.

This tutorial is available with more description in Kotlin on inspirecoding.app. If you are looking for the Java version, then you can find it here: uigitdev.com

The layout will be very fancy, it will follow the nowdays valid design patterns and it will use dark colors. For this we are going to use very few type of user interface elements, eg TextViews, EditTexts.

Step 1 — Create new project

Our first step is to create a whole new project. For this, launch Android Studio and create a new project. If you see the “Welcome page” of Android Studio, then click on the “Start a new Android Studio project”.

1. File — New — New Project
2. Empty Activity
3. Select Kotlin
4. Finish

Step 2 — Add the needed dependencies

The dependencies

We are going ot define the dependencies in the build.gradle (Module: app) file.

Copy and paste into the dependencies{} section in the build.gradle (Module: app) file the below lines.

/** Material design **/
implementation “com.google.android.material:$material_version”

/** CardView **/
implementation “androidx.cardview:cardview:$cardView_version”

The versions

The versions will be defined in the build.gradle (Project: app).

You can find this file next the build.gradle (Module: app) file.

At the top of the file, inside of the buildscript{} section you should have the version of Kotlin.

After it paste the needed versions. After thet the versions should look like below.

ext.cardView_version = '1.0.0'
ext.kotlin_version = '1.3.72'
ext.material_version = 'material:1.1.0'

Sync the project

Step 3 — The ressources

We are going to use some extra icons and values. You can download them from Google Drive using the below link.

Download ressources

Paste the files into your project’s res folder.

Step 4 — Build up the user interface

Next step is to build up the user interface.

We are going to separate the views in three parts.

• The email
• The password with the conditions
• The register button

So, open the activity_main.xml file from the res->layout folders.

Remove the current code with the below one.

Step 5 — Build up the code

Alone the above created layout is also pretty cool, but with some line of code it is going to be much better. ;)

So, from open the MainActivity.kt file from the left Project tab.

We have some member variable, which will be partly the view, partly soom Boolean variables, which are used to check the correctness of the fields.

Then a method to init the view, then the next is to listen to the input in the fields.

The third method will check the format and the content of the email and password fields.

The last method will be click listener for the Button, which will be pushed by the user in a real app. If something is wrong, then an error message will be visible under the email and/or password fields, and the user can correct them based on the hint below them.

The source below goes into the MainActivity::class.

Run the app

The last step is to check whether the app is running.

I hope you liked this very short article. If you have question, then leave me a comment below.

You can find other tutorials like this in Java.

Android Source Codes | UI Elements

… and in Kotlin

Welcome 😉 - Inspire Coding

In this short tutorial I would like to show you how you can create a very simple loading animation for Android application. This tutorial will be written in Kotlin.

This tutorial assumes you’re already familiar with the basics of Android development.

Step 1 — Create a new project

The first step is to create a whole new Android Studio project.

Step 2 — Add Data Binding

In this project we are going to use Data Binding to bind in the code the views.

Go to the build.gradle (Module: app) from the left Project tab.

Paste the below code at the top of the file to enable the Kotlin annotation for our project.

apply plugin: 'kotlin-kapt'

˛Then enable Data Binding in the android {} section.

android {

    ...

    /** Data Binding **/
    dataBinding {
        enabled true
    }
}

Convert layout

Before we can using Data Binding, we have to convert the activity_main.xml layout to use it. So open it from the res - layout folders

Put your cursor to the rootview, which is in our case a ConstraintLayout. Press there Alt+Enter if you’re using Windows, or Control/Option+Enter on Mac. From the Context Actions menu select the “Convert to data binding layout” option.

Now the layout should look like below.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

<data>

</data>

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Now, go to the MainActivity::class. and add there the binding member variable.

private lateinit var binding: ActivityMainBinding

Then, we are going to init the variable in the onCreate() function.

override fun onCreate(savedInstanceState: Bundle?)
{
    super.onCreate(savedInstanceState)
    binding = DataBindingUtil.setContentView(
        this,
        R.layout.activity_main
    )
}

Step 3 — Add views to the layout

Next, we are going to extend the activity_main.xml layout file with an ImageView and a Button.

<ImageView
    android:id="@+id/iv_loading"
    android:layout_width="195dp"
    android:layout_height="34dp"
    android:text="Hello World!"
    android:visibility="invisible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/btn_startStopAnimation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/start"
    android:layout_marginTop="40dp"
    app:layout_constraintTop_toBottomOf="@+id/iv_loading"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

The strings are created in the strings.xml file.

Step 4 — Add the loading images

For the loading animation, we will need 5 images. You can download the SVG files using the below Google Drive link.

icons_loading.zip

Import them into Android Studio as Vector assets.

If you are not familiar how to import Vector assets in Android Studio, then check out this.
Import Vector Assets in Android Studio

Step 5 — Create the animation

Go to the res-drawable folder and create there a new Drawable Ressource File and name it as “anim_loading”.

Paste there the below code.

<?xml version="1.0" encoding="utf-8"?>
<animation-list 
    xmlns:android="http://schemas.android.com/apk/res/android">

<item
        android:drawable="@drawable/ic_loading_1"
        android:duration="200"/>
    <item
        android:drawable="@drawable/ic_loading_2"
        android:duration="200"/>
    <item
        android:drawable="@drawable/ic_loading_3"
        android:duration="200"/>
    <item
        android:drawable="@drawable/ic_loading_4"
        android:duration="200"/>
    <item
        android:drawable="@drawable/ic_loading_5"
        android:duration="300"/>
    <item
        android:drawable="@drawable/ic_loading_4"
        android:duration="200"/>
    <item
        android:drawable="@drawable/ic_loading_3"
        android:duration="200"/>
    <item
        android:drawable="@drawable/ic_loading_2"
        android:duration="200"/>
    <item
        android:drawable="@drawable/ic_loading_1"
        android:duration="200"/>

</animation-list>

Step 6— Create the animation

Now, open the MainActivity.kt file and the below member variable to it.

private lateinit var loadingAnimation: AnimationDrawable

Thenafter a Boolean variable, which will be the state of the animation. When it is true, the loading is running, but if it is false, then logically it doesn’t run.

private var isLoading = false

Init cart loading animation

Next, we are going to create a new function, which will init the animation and we are going to call it from the onCreate() method.

private fun initCartLoadingAnimation()
{
    binding.ivLoading.setBackgroundResource(R.drawable.anim_loading)
    loadingAnimation = binding.ivLoading.background as AnimationDrawable
}

The start function

When we click on the Button, then regarding the value of the isLoading variable, the animation will be started or stopped. The next function will start it. Paste it after the onCreated() method.

private fun startLoadingAnimation()
{
    isLoading = true
    binding.btnStartStopAnimation.text = getString(R.string.stop)
    binding.ivLoading.visibility = View.VISIBLE
    loadingAnimation.start()
}

The stop function

Thenafter the stop function

private fun stopLoadingAnimation()
{
    isLoading = false
    binding.btnStartStopAnimation.text = getString(R.string.start)
    binding.ivLoading.visibility = View.INVISIBLE
    loadingAnimation.stop()
}

The click listener of the Button

binding.btnStartStopAnimation.setOnClickListener {
    if (isLoading)
    {
        stopLoadingAnimation()
    }
    else
    {
        startLoadingAnimation()
    }
}

Run the app

Finaly, run the app. :)
If you made everything correctly, then the animation should looke like on the picture below.

GitHub

inspire-coding/LoadingAnimationDemo

inspirecoding.app

The whole tutorial is availabel under the link with more detailes.

Loading animation - Inspire Coding - Android development - Kotlin