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'

1	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>

<?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;
    }

}

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

1	<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>

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

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

</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>

<string name="nav_header_title">Android Studio</string>

<string name="nav_header_subtitle">android.studio@android.com</string>

<string name="nav_header_desc">Hoşgeldiniz</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" />

<item name="windowActionBar">false</item>

</style>

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>

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

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

</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>

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

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

<?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;
    }
}

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>

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

1	FragmentManager fragmentManager;

fragmentManager=getFragmentManager();

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

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.

Ünal ZAFER

Bir Gün Bir Kod Gelir ve Bütün Hayatını Değiştirir.

Android Navigation Drawer (Yandan Açılır) Menü

Android: Navigation Drawer

Adım 1

Adım 2

Adım 3

Adım 4

Bunu beğen:

İlgili

İlk yorum yapan olun

Bir yanıt bırakın Cevabı iptal et

Android: Navigation Drawer

Adım 1

Adım 2

Adım 3

Adım 4

Bunu paylaş:

Bunu beğen:

İlgili

İlk yorum yapan olun

Bir yanıt bırakın Cevabı iptal et