
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?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
1 2 3 4 5 6 7 8 9 |
<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
1 2 3 4 5 6 7 8 |
<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
1 2 3 4 5 6 |
<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
1 2 3 4 5 6 7 8 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?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
1 2 3 4 5 6 7 8 9 |
<?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?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; |
1 2 3 |
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.
Hocam Drawer barı sol taraftan sap tarafa almak istersek nasıl bir yol izlemeliyiz?
Selam. activity_main.xml de tools:openDrawer=”start” yerine tools:openDrawer=”end” yazarsan sağda açılacaktır.
Merhaba. Menuyu istediğimiz activitylere nasıl import edebiliriz?