androidkotlinandroid-layoutdrawerlayoutandroid-drawer

Android need fullwidth drawerlayout. it should appear and disappear when hamburger icon is clicked


xml code

    <?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"
    android:background="@drawable/app_background_01"
    tools:context=".FullscreenActivity">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
         app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <ImageView
            android:id="@+id/actionDrawer"
            android:layout_width="28dp"
            android:layout_height="28dp"
            android:layout_marginStart="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_hamburger" />

        <ImageView
            android:id="@+id/actionHome"
            android:layout_width="28dp"
            android:layout_height="28dp"
            android:layout_marginRight="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_home" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/containerFragments"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/topbar">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fontFamily="sans-serif-condensed"
            android:text="This is Home page"
            android:textAlignment="center"
            android:textColor="#FFFFFF"
            android:textSize="40sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

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

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/topbar">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                android:background="@drawable/app_background_01"
                android:orientation="vertical"
                android:layout_gravity="left">
                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent">
                    <ImageView
                        android:id="@+id/imageView2"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:srcCompat="?android:attr/textSelectHandle" />
                </androidx.constraintlayout.widget.ConstraintLayout>
            </LinearLayout>
    </androidx.drawerlayout.widget.DrawerLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

kotlin code

package com.example.testdrawer

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Gravity
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.core.view.GravityCompat
import com.example.testdrawer.databinding.ActivityFullscreenBinding

class FullscreenActivity : AppCompatActivity() {
    private lateinit var binding: ActivityFullscreenBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityFullscreenBinding.inflate(layoutInflater)
        setContentView(binding.root)
        setListeners()
    }
    private fun setListeners() {
        binding.actionDrawer.setOnClickListener {
            if (binding.drawer.isDrawerOpen(GravityCompat.START)) {
                binding.drawer.closeDrawer(Gravity.LEFT)
            } else {
                binding.drawer.openDrawer(GravityCompat.START)
            }
        }
    }
}

Behaviour Required 1- Home screen comes in start 2- When click on hamburger icon the drawerlayout should come with full height and width also containing hamrbuger and home icons. 3- When click on hamburger icon the drawerlayout should close and the home screen should come.

Issues 1- drawerlayout is not full width and required functionality is not achievable.

The below is the homescreen enter image description here

Want the drawerlayout to fully occupy the screen as in the design its having full background and icons on top. enter image description here

When I tried Drawerlayout constraint in xml toptotopof parents I was not able to click on hamburger icon


Solution

  • you can add negative margin for the sides of your drawer layout to fill the whole screen.

    android:layout_marginRight="-64dp"