Android – Move Views Out of The Way with Kotlin

We have seen many views within our android application that change their position with respect to other views to adjust them within the screen. We can get to see when we are displaying a snack bar along with the Floating action button. When the SnackBar is displayed the floating action button is slightly moved upwards. For implementing this behavior for the custom views within our application we can use the Coordinator layout within our application. In this article, we will take a look at How to Move Views Out of the Way with dodgeInsetEdges within our Android application using Kotlin. 

Note: If you are looking to implement dodgeInsetEdges within your android application using Java. Check out the following article: How to Move Views Out of the Way With dodgeInsetEdges in Android using Java

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--on below line we are creating a
         text for heading of our app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="4dp"
        android:text="Android Development"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="18sp"
        android:textStyle="bold" />

    <!--on below line we are creating an image view-->
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="100dp"
        android:src="@drawable/android" />

    <!--button to expand the view-->
    <Button
        android:id="@+id/idBtnExpand"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|start"
        android:layout_margin="16dp"
        android:text="Expand"
        android:textAllCaps="false"
        app:layout_dodgeInsetEdges="bottom" />

    <!--Nested scroll view to display
        bottom scrolled layout-->
    <androidx.core.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:background="@color/purple_500"
        app:behavior_hideable="true"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="@string/bottom_sheet_behavior"
        app:layout_insetEdge="bottom">

        <!--we will be displaying a simple text
            view in that nested scroll view-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp"
            android:text="@string/androidDesc"
            android:textColor="@color/white"
            android:textSize="16sp"
            android:textStyle="bold" />
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step 3: Working with MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.os.Bundle
import android.view.View
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.bottomsheet.BottomSheetBehavior

class MainActivity : AppCompatActivity() {

    // on below line we are creating
    // a variable for our button
    lateinit var expandBtn: Button
    var isExpanded = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // on below line we are initializing
        // our views with their ids.
        expandBtn = findViewById(R.id.idBtnExpand)

        // initializing view for our bottom sheet below.
        // initializing view for our bottom sheet below.
        val bottomSheet: View = findViewById(R.id.bottom_sheet)

        // initializing bottom sheet behaviour
        // with our bottom sheet view.
        val bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);

        // on below line we are adding click listener for our settings button
        expandBtn.setOnClickListener {
            // below line is use to expand our view on button click in android.
            if (isExpanded) {
                isExpanded = false
                expandBtn.text = "Expand"
                // on below line we are collapsing our layout
                bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
            } else {
                isExpanded = true
                expandBtn.text = "Collapse"
                // on below line we are expanding our layout.
                bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
            }
        }
    }
}

Now run your application to see the output of it. 

Output: