Curve navigation drawer with animation.

Priyanka Kumari

13 April 2023

Overview to implement a Curve navigation drawer with animation.

In this blog, we are going to learn about how to implement a Curve navigation drawer with animation. We will cover the curve drawer in this blog. So let’s get started.

A Navigation component includes NavigationUI .

We can use the top app bar which provides a consistent place along the top of your app for displaying information and actions from the current screen. Also, we can use the collapsing toolbar.

Let’s understand this with an example.

1.) At the very first, we have to add the toolbar in the XML.

Add a DrawerLayout for your `activity_main.xml` module:

To implement this example within your destination fragments using NavigationUI, first define the app bar in each of your fragment layouts, beginning with the destination fragment that uses a standard toolbar:

<androidx.drawerlayout.widget.DrawerLayout 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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/drawer_bg"
    android:fitsSystemWindows="true"
    tools:openDrawer="end">

    <include
        layout="@layout/toolbar_custom_layout"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <com.google.android.material.navigation.NavigationView
        android:id="@+id/drawer"
        android:layout_width="273dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/drawer_bg"
        android:orientation="vertical">

        <include layout="@layout/drawer_layout" />
    </com.google.android.material.navigation.NavigationView>

</androidx.drawerlayout.widget.DrawerLayout>

<androidx.drawerlayout.widget.DrawerLayout 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/drawerLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/drawer_bg"

android:fitsSystemWindows="true"

tools:openDrawer="end">

<include

layout="@layout/toolbar_custom_layout"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<com.google.android.material.navigation.NavigationView

android:id="@+id/drawer"

android:layout_width="273dp"

android:layout_height="match_parent"

android:layout_gravity="start"

android:background="@color/drawer_bg"

android:orientation="vertical">

</com.google.android.material.navigation.NavigationView>

</androidx.drawerlayout.widget.DrawerLayout>

2.) Here we include the “toolbar_custom_layout” in XML layout

We must have the Toolbar content over there

When the user is at a top-level destination, the Navigation button becomes a drawer icon if the destination uses a DrawerLayout.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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/cardview_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusableInTouchMode="true"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    app:cardElevation="10dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraint_header_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        android:elevation="10dp">

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guidelinestart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintGuide_begin="18sp"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0" />

        <!--Header-->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraint_main_head"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/rounded_bottom"
            android:paddingBottom="@dimen/margin_20"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar1"
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_marginTop="36sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/constraint_header"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dimens_30dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <ImageView
                        android:id="@+id/image_drawer"
                        android:layout_width="18sp"
                        android:layout_height="match_parent"
                        android:layout_marginStart="19dp"
                        android:visibility="gone"
                        android:src="@drawable/ic_menu"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        android:layout_marginLeft="19dp" />


                    <TextView
                        android:id="@+id/text_hea"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="end"
                        android:gravity="start"
                        android:maxLines="1"
                        android:text="Demo"
                        android:textAlignment="viewStart"
                        android:textColor="@android:color/white"
                        android:textSize="20sp"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"/>
                    

                </androidx.constraintlayout.widget.ConstraintLayout>
            </androidx.appcompat.widget.Toolbar>

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

</androidx.cardview.widget.CardView>

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView 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/cardview_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:focusableInTouchMode="true"

android:gravity="center_horizontal"

android:orientation="vertical"

app:cardElevation="10dp">

<androidx.constraintlayout.widget.ConstraintLayout

android:id="@+id/constraint_header_root"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/transparent"

android:elevation="10dp">

<androidx.constraintlayout.widget.Guideline

android:id="@+id/guidelinestart"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintGuide_begin="18sp"

app:layout_constraintHorizontal_bias="0.0"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.0" />

<androidx.constraintlayout.widget.ConstraintLayout

android:id="@+id/constraint_main_head"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/rounded_bottom"

android:paddingBottom="@dimen/margin_20"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent">

<androidx.appcompat.widget.Toolbar

android:id="@+id/toolbar1"

android:layout_width="match_parent"

android:layout_height="30dp"

android:layout_marginTop="36sp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent">

<androidx.constraintlayout.widget.ConstraintLayout

android:id="@+id/constraint_header"

android:layout_width="match_parent"

android:layout_height="@dimen/dimens_30dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent">

<ImageView

android:id="@+id/image_drawer"

android:layout_width="18sp"

android:layout_height="match_parent"

android:layout_marginStart="19dp"

android:visibility="gone"

android:src="@drawable/ic_menu"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

android:layout_marginLeft="19dp" />

<TextView

android:id="@+id/text_hea"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:ellipsize="end"

android:gravity="start"

android:maxLines="1"

android:text="Demo"

android:textAlignment="viewStart"

android:textColor="@android:color/white"

android:textSize="20sp"

android:textStyle="bold"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.appcompat.widget.Toolbar>

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

3.) To implement the curve navigation in MainActivity, create one method inside MainActivity.kt:

You must add the callSideDrawer() event inside onCreate()

    private fun callSideDrawer() {
        cardview_content?.radius = 0f
        actionBarDrawerToggle = object : ActionBarDrawerToggle(this, drawerLayout, toolbar1, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
            private val scaleFactor = 6f
            override fun onDrawerSlide(drawerView: View, slideOffset: Float) {
                super.onDrawerSlide(drawerView, slideOffset)
                val slideX = drawerView.width * slideOffset
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
                        cardview_content?.translationX = slideX
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
                            drawerLayout?.layoutDirection = View.LAYOUT_DIRECTION_LTR
                        }
                    }

                cardview_content?.scaleX = 1 - slideOffset / scaleFactor
                cardview_content?.scaleY = 1 - slideOffset / scaleFactor
                cardview_content?.radius = 30f
                Log.e("qwerty", "onDrawerSlide")
            }

            override fun onDrawerClosed(drawerView: View) {
                super.onDrawerClosed(drawerView)
                cardview_content?.radius = 0f
                Log.e("qwerty", "onDrawerClosed")
            }

            override fun onDrawerOpened(drawerView: View) {
                super.onDrawerOpened(drawerView)
                flagDrawer = true
                cardview_content?.radius = 30f
                Log.e("qwerty", "onDrawerOpened")
            }

            override fun onDrawerStateChanged(newState: Int) {
                super.onDrawerStateChanged(newState)
                if (!flagDrawer) {
                    cardview_content?.radius = 0f
                } else {
                    cardview_content?.radius = 30f
                }
                flagDrawer = false
                Log.e("qwerty", "onDrawerStateChanged")
            }
        }
        if (supportActionBar != null) {
            supportActionBar!!.setHomeButtonEnabled(true)
            supportActionBar!!.setDisplayHomeAsUpEnabled(true)
        }
        drawerLayout!!.setScrimColor(Color.TRANSPARENT)
        drawerLayout!!.drawerElevation = 0f
        drawerLayout!!.addDrawerListener(actionBarDrawerToggle as ActionBarDrawerToggle)
        (actionBarDrawerToggle as ActionBarDrawerToggle).isDrawerSlideAnimationEnabled = true //disable "hamburger to arrow" drawable
        (actionBarDrawerToggle as ActionBarDrawerToggle).isDrawerIndicatorEnabled = true //disable "hamburger to arrow" drawable
        (actionBarDrawerToggle as ActionBarDrawerToggle).syncState()
    }

private fun callSideDrawer() {

cardview_content?.radius = 0f

actionBarDrawerToggle = object : ActionBarDrawerToggle(this, drawerLayout, toolbar1, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {

private val scaleFactor = 6f

override fun onDrawerSlide(drawerView: View, slideOffset: Float) {

super.onDrawerSlide(drawerView, slideOffset)

val slideX = drawerView.width * slideOffset

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {

cardview_content?.translationX = slideX

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {

drawerLayout?.layoutDirection = View.LAYOUT_DIRECTION_LTR

}

cardview_content?.scaleX = 1 - slideOffset / scaleFactor

cardview_content?.scaleY = 1 - slideOffset / scaleFactor

cardview_content?.radius = 30f

Log.e("qwerty", "onDrawerSlide")

}

override fun onDrawerClosed(drawerView: View) {

super.onDrawerClosed(drawerView)

cardview_content?.radius = 0f

Log.e("qwerty", "onDrawerClosed")

}

override fun onDrawerOpened(drawerView: View) {

super.onDrawerOpened(drawerView)

flagDrawer = true

cardview_content?.radius = 30f

Log.e("qwerty", "onDrawerOpened")

}

override fun onDrawerStateChanged(newState: Int) {

super.onDrawerStateChanged(newState)

if (!flagDrawer) {

cardview_content?.radius = 0f

} else {

cardview_content?.radius = 30f

}

flagDrawer = false

Log.e("qwerty", "onDrawerStateChanged")

}

if (supportActionBar != null) {

supportActionBar!!.setHomeButtonEnabled(true)

supportActionBar!!.setDisplayHomeAsUpEnabled(true)

}

drawerLayout!!.setScrimColor(Color.TRANSPARENT)

drawerLayout!!.drawerElevation = 0f

drawerLayout!!.addDrawerListener(actionBarDrawerToggle as ActionBarDrawerToggle)

(actionBarDrawerToggle as ActionBarDrawerToggle).isDrawerSlideAnimationEnabled = true //disable "hamburger to arrow" drawable

(actionBarDrawerToggle as ActionBarDrawerToggle).isDrawerIndicatorEnabled = true //disable "hamburger to arrow" drawable

(actionBarDrawerToggle as ActionBarDrawerToggle).syncState()

}

4.) After that we are adding the full code below in MainActivity.kt

Received all data

When using navigation with the top app bar implementations discussed below, the label you attach to destinations can be automatically populated from the arguments provided to the destination by using the format of {argName} in your label.

NavigationUI provides support for the following top app bar types:

Toolbar
CollapsingToolbarLayout
ActionBar

package com.example.myapplication

import android.graphics.Color
import android.os.Build
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.View
import androidx.appcompat.app.ActionBarDrawerToggle
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.toolbar_custom_layout.*

class MainActivity : AppCompatActivity() {
    private var actionBarDrawerToggle: ActionBarDrawerToggle? = null
    private var flagDrawer = false


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

        callSideDrawer()
    }


    private fun callSideDrawer() {
        cardview_content?.radius = 0f
        actionBarDrawerToggle = object : ActionBarDrawerToggle(this, drawerLayout, toolbar1, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
            private val scaleFactor = 6f
            override fun onDrawerSlide(drawerView: View, slideOffset: Float) {
                super.onDrawerSlide(drawerView, slideOffset)
                val slideX = drawerView.width * slideOffset
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
                        cardview_content?.translationX = slideX
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
                            drawerLayout?.layoutDirection = View.LAYOUT_DIRECTION_LTR
                        }
                    }

                cardview_content?.scaleX = 1 - slideOffset / scaleFactor
                cardview_content?.scaleY = 1 - slideOffset / scaleFactor
                cardview_content?.radius = 30f
                Log.e("qwerty", "onDrawerSlide")
            }

            override fun onDrawerClosed(drawerView: View) {
                super.onDrawerClosed(drawerView)
                cardview_content?.radius = 0f
                Log.e("qwerty", "onDrawerClosed")
            }

            override fun onDrawerOpened(drawerView: View) {
                super.onDrawerOpened(drawerView)
                flagDrawer = true
                cardview_content?.radius = 30f
                Log.e("qwerty", "onDrawerOpened")
            }

            override fun onDrawerStateChanged(newState: Int) {
                super.onDrawerStateChanged(newState)
                if (!flagDrawer) {
                    cardview_content?.radius = 0f
                } else {
                    cardview_content?.radius = 30f
                }
                flagDrawer = false
                Log.e("qwerty", "onDrawerStateChanged")
            }
        }
        if (supportActionBar != null) {
            supportActionBar!!.setHomeButtonEnabled(true)
            supportActionBar!!.setDisplayHomeAsUpEnabled(true)
        }
        drawerLayout!!.setScrimColor(Color.TRANSPARENT)
        drawerLayout!!.drawerElevation = 0f
        drawerLayout!!.addDrawerListener(actionBarDrawerToggle as ActionBarDrawerToggle)
        (actionBarDrawerToggle as ActionBarDrawerToggle).isDrawerSlideAnimationEnabled = true //disable "hamburger to arrow" drawable
        (actionBarDrawerToggle as ActionBarDrawerToggle).isDrawerIndicatorEnabled = true //disable "hamburger to arrow" drawable
        (actionBarDrawerToggle as ActionBarDrawerToggle).syncState()
    }
}

package com.example.myapplication

import android.graphics.Color

import android.os.Build

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.util.Log

import android.view.View

import androidx.appcompat.app.ActionBarDrawerToggle

import kotlinx.android.synthetic.main.activity_main.*

import kotlinx.android.synthetic.main.toolbar_custom_layout.*

class MainActivity : AppCompatActivity() {

private var actionBarDrawerToggle: ActionBarDrawerToggle? = null

private var flagDrawer = false

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

callSideDrawer()

}

private fun callSideDrawer() {

cardview_content?.radius = 0f

actionBarDrawerToggle = object : ActionBarDrawerToggle(this, drawerLayout, toolbar1, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {

private val scaleFactor = 6f

override fun onDrawerSlide(drawerView: View, slideOffset: Float) {

super.onDrawerSlide(drawerView, slideOffset)

val slideX = drawerView.width * slideOffset

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {

cardview_content?.translationX = slideX

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {

drawerLayout?.layoutDirection = View.LAYOUT_DIRECTION_LTR

}

cardview_content?.scaleX = 1 - slideOffset / scaleFactor

cardview_content?.scaleY = 1 - slideOffset / scaleFactor

cardview_content?.radius = 30f

Log.e("qwerty", "onDrawerSlide")

}

override fun onDrawerClosed(drawerView: View) {

super.onDrawerClosed(drawerView)

cardview_content?.radius = 0f

Log.e("qwerty", "onDrawerClosed")

}

override fun onDrawerOpened(drawerView: View) {

super.onDrawerOpened(drawerView)

flagDrawer = true

cardview_content?.radius = 30f

Log.e("qwerty", "onDrawerOpened")

}

override fun onDrawerStateChanged(newState: Int) {

super.onDrawerStateChanged(newState)

if (!flagDrawer) {

cardview_content?.radius = 0f

} else {

cardview_content?.radius = 30f

}

flagDrawer = false

Log.e("qwerty", "onDrawerStateChanged")

}

if (supportActionBar != null) {

supportActionBar!!.setHomeButtonEnabled(true)

supportActionBar!!.setDisplayHomeAsUpEnabled(true)

}

drawerLayout!!.setScrimColor(Color.TRANSPARENT)

drawerLayout!!.drawerElevation = 0f

drawerLayout!!.addDrawerListener(actionBarDrawerToggle as ActionBarDrawerToggle)

(actionBarDrawerToggle as ActionBarDrawerToggle).isDrawerSlideAnimationEnabled = true //disable "hamburger to arrow" drawable

(actionBarDrawerToggle as ActionBarDrawerToggle).isDrawerIndicatorEnabled = true //disable "hamburger to arrow" drawable

Curve navigation drawer with animation.

Overview to implement a Curve navigation drawer with animation.

In this blog, we are going to learn about how to implement a Curve navigation drawer with animation. We will cover the curve drawer in this blog. So let’s get started.

Let’s understand this with an example.

1.) At the very first, we have to add the toolbar in the XML.

Add a DrawerLayout for your `activity_main.xml` module:

To implement this example within your destination fragments using NavigationUI, first define the app bar in each of your fragment layouts, beginning with the destination fragment that uses a standard toolbar:

2.) Here we include the “toolbar_custom_layout” in XML layout

We must have the Toolbar content over there

When the user is at a top-level destination, the Navigation button becomes a drawer icon if the destination uses a DrawerLayout.

3.) To implement the curve navigation in MainActivity, create one method inside MainActivity.kt:

You must add the callSideDrawer() event inside onCreate()

4.) After that we are adding the full code below in MainActivity.kt

Received all data

When using navigation with the top app bar implementations discussed below, the label you attach to destinations can be automatically populated from the arguments provided to the destination by using the format of {argName} in your label.

NavigationUI provides support for the following top app bar types:

Finally, we have implemented the code part of the curve navigation drawer.

You can also check these links.

For more understanding please can go through this link:

That’s all, You can enjoy your square payment integration feature.

Thank you very much.

Overview to implement a Curve navigation drawer with animation.

In this blog, we are going to learn about how to implement a Curve navigation drawer with animation. We will cover the curve drawer in this blog. So let’s get started.

Let’s understand this with an example.

1.) At the very first, we have to add the toolbar in the XML.

Add a DrawerLayout for your activity_main.xml module:

To implement this example within your destination fragments using NavigationUI, first define the app bar in each of your fragment layouts, beginning with the destination fragment that uses a standard toolbar:

2.) Here we include the “toolbar_custom_layout” in XML layout

We must have the Toolbar content over there

When the user is at a top-level destination, the Navigation button becomes a drawer icon if the destination uses a DrawerLayout.

3.) To implement the curve navigation in MainActivity, create one method inside MainActivity.kt:

You must add the callSideDrawer() event inside onCreate()

4.) After that we are adding the full code below in MainActivity.kt

Received all data

When using navigation with the top app bar implementations discussed below, the label you attach to destinations can be automatically populated from the arguments provided to the destination by using the format of {argName} in your label.

NavigationUI provides support for the following top app bar types:

Finally, we have implemented the code part of the curve navigation drawer.

You can also check these links.

For more understanding please can go through this link:

That’s all, You can enjoy your square payment integration feature.

Thank you very much.

Add a DrawerLayout for your `activity_main.xml` module: