Search code examples
androidandroid-layoutandroid-navigationview

How to bring / design navigation drawer layout on top of MaterialCardView by clicking on ImageView

I am trying to design the layout that drags navigation drawer layout from right to left by clicking on ImageView which is menu icon.

Functionality is working without any issue. But, from UI perspective, navigation drawer layout is being visible below the MaterialCardView and wrapping content as the card size. How can i bring navigation drawer on top of card and full screen.

Below is my layout file: activity_main.xml

<?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">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:cardBackgroundColor="#1835d9"
        style="@style/CustomCardCorners"
        android:layout_alignParentEnd="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true">

        <ImageView
            android:id="@+id/navigation_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/menu"
            android:layout_gravity="top|end"
            android:contentDescription="@string/app_name"/>

    </com.google.android.material.card.MaterialCardView>

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:openDrawer="right"
        android:layout_gravity="right"
        android:layout_alignParentEnd="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true">

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            app:menu="@menu/my_navigation_items"/>

    </androidx.drawerlayout.widget.DrawerLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Below is my themes.xml:

<!-- Customize your theme here. -->
<style name="CustomCardCorners" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearance_custom_corners</item>
</style>

<style name="ShapeAppearance_custom_corners" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeBottomLeft">40dp</item>
    <item name="cornerSizeBottomRight">40dp</item>
</style>

Below is my my_navigation_items.xml:

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

<item android:title="Test"/>
<item android:title="Second"/>
<item android:title="Third"/>

</menu>

Below is my MainActivity.java file:

public class MainActivity extends AppCompatActivity implements View.OnClickListener, 
NavigationView.OnNavigationItemSelectedListener {

ImageView imageView;
DrawerLayout drawerLayout;
NavigationView navigationView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);//will hide the title
    this.getSupportActionBar().hide();
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
    WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.activity_main);


    imageView = findViewById(R.id.navigation_icon);
    imageView.setOnClickListener(MainActivity.this);
    setUp();

}

private void setUp() {
    drawerLayout = findViewById(R.id.drawer_layout);
    navigationView = findViewById(R.id.navigation);

    navigationView.setNavigationItemSelectedListener(MainActivity.this);
}


@Override
public void onClick(View v) {
    switch (v.getId())
    {
        case R.id.navigation_icon:
            drawerLayout.openDrawer(Gravity.RIGHT);
    }
}

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    Toast.makeText(MainActivity.this, ""+ item.getItemId(), Toast.LENGTH_SHORT).show();
    drawerLayout.closeDrawers();
    return true;
}
}

Below is the image with toast displaying the id of navigation item

Solution

  • The chronology of the views is causing issues. As mentioned in the official docs, the correct chronology is

    <DrawerLayout> 

<RootView> <!--root view of main content-->

<!--other child views-->

</RootView>

<NavigationView/> <!--view for navigation menu-->

</DrawerLayout>

    so try the following layout instead

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

<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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_gravity="right"
    android:fitsSystemWindows="true"
    tools:openDrawer="right">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.card.MaterialCardView
                android:id="@+id/toolbar"
                style="@style/CustomCardCorners"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_alignParentEnd="true"
                app:cardBackgroundColor="#1835d9">

                <ImageView
                    android:id="@+id/navigation_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|end"
                    android:contentDescription="@string/app_name"
                    android:onClick="onClick"
                    android:src="@drawable/ic_launcher_background" />

            </com.google.android.material.card.MaterialCardView>
        </RelativeLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        app:menu="@menu/my_navigation_items" />
</androidx.drawerlayout.widget.DrawerLayout>