Add navigation-Drawer layout to a project with activitys already created

Question

I created an androod project with all Kotlin, but without the navdrawer layout, now I need to put the navdrawer and include the Activity I have in it

If anyone knows how to fit the Acesvity into their navdrawer it would help me a lot

Answer 1

To start using the Drawerlayout and the Navigationview in your project, you will need to import the Android support and design libraries. Therefore, add them to the file build.Gradle from your module to import them.

dependencies {
implementation 'com.android.support:design:27.0.2'
implementation 'com.android.support:support-v4:27.0.2'
}

In addition, include the Drawerlayout and also the Navigationview in the archive res/layout/activlty_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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:fitsSystemWindows="true"
    tools:openDrawer="start">
    <include layout="@layout/toolbar" />
    <android.support.design.widget.NavigationView
        android:id="@+id/navView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/menu_nav" />

</android.support.v4.widget.DrawerLayout>

Here we create a Drawerlayout with the ID drawerLayout. The estate tools:openDrawer is used to display the Navigation Drawer when the XML layout opens in the design preview of Android Studio.

After adding the Drawerlayout, create a child layout that points to @layout/Toolbar.

Here is my file Toolbar.xml. This file simply has a Linearlayout and a Toolbar.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</LinearLayout>

In the Navigationview, you can see that we added the attribute android:layout_gravity with the start value. This is used to position the Navigation Drawer leaving the left, if you want it to leave the right use the end value. In our case it will leave the left.

We also included the attribute app: headerLayout that points to @layout/nav_header. This will add a View as a navigation menu header.

Here is my layout file nav_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/nav_header"
              android:layout_width="match_parent"
              android:layout_height="160dp"
              android:background="@color/colorAccent"
              android:clickable="true"
              android:focusable="true"
              android:foreground="?attr/selectableItemBackgroundBorderless"
              android:gravity="bottom"
              android:orientation="vertical"
              android:padding="16dp"
              android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
            android:id="@+id/nav_header_imageView"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:src="@mipmap/ic_launcher" />

    <TextView
            android:id="@+id/nav_header_textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="16dp"
            android:text="AndroidPro"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
</LinearLayout>

This layout file simply has a Linearlayout, one Imageview and a Textview.

To include menu items for on Navigation Drawer, we can use the attribute app:menu with a value pointing to a menu file.

<android.support.design.widget.NavigationView
        app:menu="@menu/menu_nav" />

Here is the menu file res/menu/menu_nav.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group>
        <item android:id="@+id/nav_item_one"
            android:icon="@android:drawable/ic_menu_add"
            android:title="Item 1" />
        <item android:id="@+id/nav_item_two"
            android:icon="@android:drawable/ic_menu_agenda"
            android:title="Item 2" />
        <item android:id="@+id/nav_item_three"
            android:icon="@android:drawable/ic_menu_call"
            android:title="Item 3" />
    </group>
    <group android:id="@+id/group_menu">
        <item android:id="@+id/nav_item_four"
            android:title="Item 4" />
        <item android:id="@+id/nav_item_five"
            android:title="Item 5" />
    </group>
    <item android:title="Title 1">
        <menu>
            <item android:id="@+id/nav_item_six"
                android:icon="@android:drawable/ic_menu_camera"
                android:title="Item 6" />
            <item android:id="@+id/nav_item_seven"
                android:icon="@android:drawable/ic_menu_compass"
                android:title="Item 7" />
        </menu>
    </item>
</menu>

We have defined a Menu using the which serves as a container for menu items. A creates a Menuitem, which represents a single item in a menu.

We then set our first menu group using the . A serves as an invisible container for elements . Each of the elements has an ID, an Icon and a Title. Note that a horizontal line will be drawn at the end of each when shown in Navigation Drawer.

A may also contain a nested element to create a submenu - we did just that in our last . Note that the latter has a title property.

We could set up a menu using, for example, a Listview. But by configuring the Navigation Drawer with a menu, the Thema of the Material Design!

Initialization of Components Then let’s initialize the instances of our Drawerlayout and Actionbardrawertoggle. And we’ll do it in the method onCreate() of Mainactivity.

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private DrawerLayout drawerLayout;
    private NavigationView navigationView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open_drawer, R.string.close_drawer);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();
    }
}