In this article, we will learn about android Layer using Kotlin. We will go through various example that demonstrates how to use different attributes of Layer. For example,

In this article, we will get answer to questions like –

• What is Layer?
• Why should we consider Layer while designing ui for any app?
• What are possibilities using Layer while designing ui? etc.

Let’s have a quick demo of things we want to cover in this tutorial –

Output

Getting Started

We can define android Layer widget as below –

Android Layer is a helper view that is used to control visibility and elevation of referenced views.

Android Layer creates virtual layers from referenced views so that we can build animations and applying to all of them together at once. In this tutorial, we will rotate two textView together at once on button click.

Now, how do we use Layer in android application ?

Creating New Project

At first, we will create an application.
So, follow steps below to create any android project in Kotlin –

Newbie in Android ?

Some very important concepts (Recommended to learn before you move ahead)

• Install Android Studio
• Create New Project in Android Studio
• Android Project Structure
• Run / Debug / Test Android App

Before we move ahead, we need to setup for viewBinding to access Android Layer Using Kotlin file without using findViewById() method.

Setup ViewBinding

Add viewBinding true in app/build.gradle file.

 
 android { 
 	// OTHER CODE... 
 	buildFeatures { 
 		viewBinding true 
 	} 
 } 
 

Now, set content in activity using view binding.
Open MainActivity.kt file and write below code in it.

 
 class MainActivity : AppCompatActivity() { 
 	
 	private lateinit var binding: ActivityMainBinding 
 	
 	override fun onCreate(savedInstanceState: Bundle?) { 
 		super.onCreate(savedInstanceState) 
 		binding = ActivityMainBinding.inflate(layoutInflater) 
 		val view = binding.root 
 		setContentView(view) 
 	} 
 } 
 

Now, we can access view in Kotlin file without using findViewById() method.

Using Layer in Kotlin

Follow steps below to use Layer in newly created project –

• Open res/values/strings.xml file. Then, add below code into it.

  <resources>
      <string name="app_name">Layer</string>
      <string name="textview_1">TextView 1</string>
      <string name="textview_2">TextView 2</string>
      <string name="button">Button</string>
  </resources>
  

• Open res/layout/activity_main.xml file. Then, add below code in it –

  <?xml version="1.0" encoding="utf-8"?>
  <androidx.constraintlayout.widget.ConstraintLayout 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"
      tools:context=".MainActivity">
  
      <TextView
          android:id="@+id/textView"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginTop="40dp"
          android:text="@string/textview_1"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toTopOf="parent" />
  
      <TextView
          android:id="@+id/textView2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginTop="100dp"
          android:text="@string/textview_2"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/textView" />
  
      <Button
          android:id="@+id/button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginTop="100dp"
          android:text="@string/button"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/textView2" />
  
      <androidx.constraintlayout.helper.widget.Layer
          android:id="@+id/layer"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:constraint_referenced_ids="textView, textView2"
          tools:ignore="MissingConstraints" />
  
  </androidx.constraintlayout.widget.ConstraintLayout>
  

  Here, we have used two TextViews, one button and Layer . We will rotate two textViews together on button click.

• We need to access button and flow to apply animation and transition to layer so that textViews rotates simultaneously. So, open Kotlin file MainActivity.kt and add below code in it –

  package com.tutorialwing.layer
  
  import android.animation.ValueAnimator
  import androidx.appcompat.app.AppCompatActivity
  import android.os.Bundle
  import com.tutorialwing.layer.databinding.ActivityMainBinding
  
  class MainActivity : AppCompatActivity() {
  
  	private lateinit var binding: ActivityMainBinding
  
  	override fun onCreate(savedInstanceState: Bundle?) {
  		super.onCreate(savedInstanceState)
  
  		binding = ActivityMainBinding.inflate(layoutInflater)
  		setContentView(binding.root)
  
  		setClickListener()
  	}
  
  	private fun setClickListener() {
  		binding.button.setOnClickListener {
  			applyAnimation()
  		}
  	}
  
  	private fun applyAnimation() {
  		ValueAnimator.ofFloat(0F, 360F)
  			.apply {
  				addUpdateListener { animator ->
  					binding.layer.rotation = animator.animatedValue as Float
  				}
  				duration = 2200
  				start()
  			}
  	}
  }
  

  In applyAnimation() method, we have created animation and applied it to Layer with id layer.

Now, run application. We will get output as below –

Different Attributes of Layer in XML

Now, we will see how to use different attributes of Android Layer using Kotlin to customise it –

Set Id of Layer

Many a time, we need id of View to access it in kotlin file or create ui relative to that view in xml file. So, we can set id of Layer using android:id attribute like below –

    <androidx.constraintlayout.helper.widget.Layer
        android:id="@+id/layer_ID"
        />

Here, we have set id of Layer as layer_ID using android:id=”” attribute. So, if we need to reference this Layer, we need to use this id – layer_ID.

Set Width of Layer

We use android:layout_width=”” attribute to set width of Layer.
We can do it as below –

    <androidx.constraintlayout.helper.widget.Layer
        android:id="@+id/layer_ID"
        android:layout_width="wrap_content"
        />

Width can be either “MATCH_PARENT” or “WRAP_CONTENT” or any fixed value (like 20dp, 30dp etc.).

Set Height of Layer

We use android:layout_height=”” attribute to set height of Layer.
We can do it as below –

    <androidx.constraintlayout.helper.widget.Layer
        android:id="@+id/layer_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

Height can be either “MATCH_PARENT” or “WRAP_CONTENT” or any fixed value.

We have seen different attributes of Layer and how to use it. If you wish to visit post to learn more about it

Thus, we have seen what is Layer, how can we use android Layer using Kotlin ? etc. We also went through different attributes of android Layer.