Android: Navigation Drawer

 

Merhabalar Yandan Açılan Menü dediğimiz Navigation Drawer’ı projemize nasıl ekleriz onu basit bir şekilde açıklamaya çalışacağım. Şuan Android Studio sürümü olarak 3.1.3 kullanıyoruz ve hazır olarak başlangıçta bize bunu oluşturmak için seçimlerde veriyor. İsterseniz hazır olarak da oluşturabilirsiniz fakat bu yazı daha sonrasında projesine eklemek isteyenler için kısa bir anlatımdır.

Adım 1

Projemizde eğer yok ise Gradle Module:app in içerisine aşağıdaki kütüphane yok ise ekleyelim. Sürüm numarasını projenizle uyumlu hale getirin.

implementation 'com.android.support:design:27.1.1'

Adım 2

Eğer hazır oluşturulmuş bir MainActivity var ise içerisine ekleyin. Eğer Yok ise proje dosyalarınıza sağ tıklayıp New>Activity>Empty Activity ‘ye tıklayıp yeni MainActivity veya farklı bir isimlendirme yapabilirsiniz. Şimdi  activity_main.xml içerisine aşağıdaki kodu kopyalayıp yapıştırın.

activity_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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#fff"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navigation_header"
        app:itemIconTint="#FF5722"
        app:itemTextColor="#4d4c4b"
        app:menu="@menu/navigation_menu" />

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

MainActivity.java

package com.unalzafer.example;

import android.app.FragmentManager;
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.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

import java.io.IOException;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);


        setTitle("Anasayfa");
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.Open, R.string.Close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);

    }
    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
    @SuppressWarnings("StatementWithEmptyBody")
    public boolean onNavigationItemSelected(MenuItem item) {
        // menuden tıklama yapıldığında
        int id = item.getItemId();

        if (id == R.id.description) {
            //ilk tıklanan menu 
//bu bölümde fragment çağırabilirsiniz veya diğer tıklama işlemleri.
        } else if (id == R.id.transactions) {
            
        } else if (id == R.id.reports) {
            
        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }

}

 

Eğer manifest dosyasında action bar’ı kaldırmamış iseniz aşağıdaki kodu kullanıp sadece main activity den kaldırabilirsiniz. Karşılaşacağınız hatalar olacaktır ileriki adımlarda düzelecekler.

<activity android:name=".MainActivity" android:theme="@style/AppTheme.NoActionBar"/>

Adım 3

res klasörü altında yeni bir layout oluşturuyoruz New>Layout resource file  yolunu izleyerek ve ismi navigation_header.xml olarak yazıp kaydediyoruz. Aşağıdaki kodları ekliyoruz.

navigation_header.xml

<?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:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/nav_header_desc"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@mipmap/ic_launcher_round" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="@string/nav_header_title"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/nav_header_subtitle" />

</LinearLayout>

Yukarıdaki xml de bazı kısımlar hatalı görülecektir. ağaıdakileri eklerseniz hatalar tamamen gidecektir. Sizin eklemeniz gereken yerler olursa düzenlersiniz.Eklenecek klasörleri de belirttim.

res>drawable altına xml olarak ekleyin isteyenler tek renk de verebilir.
side_nav_bar.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="135"
        android:centerColor="#009688"
        android:endColor="#00695C"
        android:startColor="#4DB6AC"
        android:type="linear" />
</shape>

res>values>dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="nav_header_vertical_spacing">8dp</dimen>
    <dimen name="nav_header_height">176dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
</resources>

Mevcut olan dosya içerisine aşağıdaki kodları ekleyin.
res>values>strings.xml

<string name="nav_header_title">Android Studio</string>
<string name="nav_header_subtitle">android.studio@android.com</string>
<string name="connect_to_internet"></string>
<string name="nav_header_desc">Hoşgeldiniz</string>
<string name="Open">Açık</string>
<string name="Close">Kapalı</string>

res>values>styles.xml

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

res>layout>content_main.xml oluşturun

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:background="#ffcd27"
    tools:context=".MainActivity"
    tools:showIn="@layout/app_bar_main">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="8dp">


    </FrameLayout>

</RelativeLayout>

res>layout>app_bar_main.xml oluşturun

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>

Adım 4

Şimdi menülerimizi ekleme vakti ve bunun için öncelikle menu dosyasını açmamız gerekiyor.
res klasörüne sağ tıklayıp New>Android Resource Directory’e tıklayıp orda menu seçimi yapmalıyız ve tamamlayıp projede menu klasörü oluşmuş oluyor. Menu klasörüne sağ tıklayıp New>Menu resource file ‘a tıklıyoruz ve navigation_menu.xml dosyasını ekliyoruz ve aşağıdaki kodları yazıyoruz.

navigation_menu.xml

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

    <group
        android:id="@+id/menu"
        android:checkableBehavior="single">
    <item
        android:id="@+id/description"
        android:icon="@drawable/@mipmap/ic_launcher"
        android:title="Tanımlar" />
    <item
        android:id="@+id/transactions"
        android:icon="@drawable/@mipmap/ic_launcher"
        android:title="İşlemler" />
    <item
        android:id="@+id/reports"
        android:icon="@drawable/@mipmap/ic_launcher"
        android:title="Raporlar" />

    </group>

</menu>

main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="Ayarlar"
        app:showAsAction="never" />
</menu>

 

Eğer fragment eklemek istiyorsanız;

sağ tıklayıp yeni bir Main_Fragment .java oluşturun.

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class Main_Fragment extends Fragment {

    View views;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        views= inflater.inflate(R.layout.activity_main_fragment,container,false);

        return  views;
    }
}

activity_main_fragment.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#bf1e2e"
    tools:context=".Main_Fragment">

    <TextView
        android:layout_width="wrap_content"
        android:text="Fragment | Tanımlar"
        android:textSize="26dp"
        android:textColor="#ffffff"
        android:layout_height="wrap_content" />

</LinearLayout>

Main_Activity.java dosyasında buton tık olayına ilk butona tıklanınca şu kodu çalıştırın.

FragmentManager fragmentManager;

fragmentManager=getFragmentManager();

fragmentManager.beginTransaction().replace(R.id.content_frame, new Main_Fragment()).commit();

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Navigation Drawer eklemek bu kadar basit arkadaşlar. Tasarım ve Düzenleme için de yakında bir yazı yazmayı düşünüyorum. Takipte kalın. Herkese iyi çalışmalar.