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

0

I created an androod project with whole kotlin but without the navdrawer layout, now I need to put the navdrawer and include the activities I have in it

If anyone knows how to fit the activities inside their navdrawer would help me a lot

    
asked by anonymous 24.10.2018 / 21:31

1 answer

0

To start using DrawerLayout and NavigationView in your project, you'll need to import the support and Android design. So add them to the build.gradle file of 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 DrawerLayout and NavigationView in the 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've created a DrawerLayout drawerLayout . The tools: openDrawer property is used to display the Navigation Drawer when the XML layout is opened in design view of Android Studio.

After adding DrawerLayout , we have created a child layout that points to toolbar .

Here's my toolbar.xml file 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 NavigationView , you can see that we've added the android: layout_gravity attribute with the start value. This is used to position Navigation Drawer from the left, if you want it to leave the right, use the end value. In our case it will leave the left.

We also include the app attribute that points to nav_header . This will add a View as a navigation menu header.

Here's my nav_header.xml layout file:

<?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 , an ImageView and a TextView

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

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

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

<?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 define a Menu using that 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 . 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 Navigation Drawer .

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

We would ask you to set up a menu using, for example, a ListView . But by setting the Navigation Drawer with a menu, the theme of Material Design is automatically set!

Components Initialization Next, we'll initialize the instances of our DrawerLayout and ActionBarDrawerToggle . And let's do this within the onCreate () method 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();
    }
}
    
25.10.2018 / 19:46