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.

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

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

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

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

res>values>dimens.xml

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

<string name="Close">Kapalı</string>

res>values>styles.xml

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

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>

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

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

1	FragmentManager fragmentManager;

fragmentManager=getFragmentManager();

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

Yazıyı okuduğunuz için teşekkürler, artık medium üzerinde yazılarımı yayınlayacağım.
Medium hesabımı takip etmeyi unutmayın.
İlk yazımı yayınladım ulaşmak için tıklayınız.
Medium : https://medium.com/@unalzafer

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.

İlgili

Ömer
Ağustos 11, 2019 tarihinde, saat 8:19 am

Hocam Drawer barı sol taraftan sap tarafa almak istersek nasıl bir yol izlemeliyiz?

Cevapla
- admin
  Ağustos 12, 2019 tarihinde, saat 7:24 am
  
  Selam. activity_main.xml de tools:openDrawer=”start” yerine tools:openDrawer=”end” yazarsan sağda açılacaktır.
  
  Cevapla

Ü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

2 yorum

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

2 yorum

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