Oluşturduğumuz yazılımların kullanıcı dostu ve ergonomik tasarımlara sahip olması her zaman proje için avantajdır.
Özellikle büyük ekranlı Android cihazlarda kullanılan uygulamaların tasarımında Navigation Bar’ı dikey konumlandırmasıyla ekranda alan kazancı sağlayan NavigationRailView MaterialDesign’ ı makalede anlatacağım.
Örnek uygulamamız;
NavigationRailView; tablet vb. büyük ekranlarda veya telefon yatay konumdayken ekranda alan kazancı sağlayan Navigation Bar’dır. YouTube-Web-App ve birçok oyun uygulamalarının tercih ettiği bir arayüz elamanıdır. 3 ile 7 arasında menü eklemenize olanak sağlamaktadır.
Dilerseniz menü item’lara Alarms menüsündeki gibi badge’lar (kırmızı bölüm) ekleyebilirsiniz. Şimdi örneğimizi uygulamak için ilgili adımlara başlayalım.
1-Projede Bazı Ayarlar
Projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodu yerleştirerek Material Design kütüphanesini yüklüyoruz.
|
1 |
implementation("com.google.android.material:material:1.4.0") |
2- NavigationRailView’da Kullanılacak Menüyü Oluşturma
Uygulamada görünen yapı Android’deki menu yapısıyla oluşturulabilmektedir. Proje ana dizininde app->src->main klasörünün içindeki res dizinine sağ tıklayıp New->Android Resource Directory açın.Type olarak menu seçmelisiniz. İlgili dizin oluşturduktan sonra üstüne sağ tıklayıp New->Menu Resource File seçerseniz menu dosyanız oluşturulur. Ben oluşturduğum nav_menu dosyamdaki menu xml kodumu aşağıda paylaştım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/alarms" android:enabled="true" android:icon="@drawable/ic_alarms" android:title="Alarms" /> <item android:id="@+id/schedule" android:enabled="true" android:icon="@drawable/icon_clock" android:title="Schedules" /> <item android:id="@+id/timer" android:enabled="true" android:icon="@drawable/ic_alarms" android:title="Timer" /> <item android:id="@+id/stopwatch" android:enabled="true" android:icon="@drawable/icon_clock" android:title="Stop Watch" /> </menu> |
Üstteki xml’de her bir item’in başlığını ve uygulamada göstermek istediğiniz ikonu tanımladım. Şimdi ise bu menüyü NavigationRailView arayüz elementi ile bağlantı sağlamalıyız
3- Floating Action Button Oluşturma
NavigationRailView yapısında Floating Action Button ekleyebilmemizi de sağlamışlar.. Floating Action Button ekleyebilmek için bir layout xml i oluşturup aşağıdaki kodu eklemelisiniz. Sonrasında bu layout NavigationRailView’da kullanacağız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab_add" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="?colorPrimary" android:backgroundTint="?colorPrimary" android:contentDescription="@string/add_item" app:borderWidth="0dp" app:fabSize="mini" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/ic_baseline_add_circle_24" /> </androidx.constraintlayout.widget.ConstraintLayout> |
3-NavigationRailView Oluşturulması
NavigationRailView Material Design kütüphanesinde barındığı için xml kodunu ekleyerek bu yapıyı oluşturacağız. Uygulamamızın ana sınıfında kullanacağınız xml dosyasında NavigationRailView arayüz elementi oluşturmayı tercih ettim.
NavigationRailView özellikleri;
- app:menu : Bu özelliğe daha önce oluşturduğumuz nav_menu xml dosyasını ekledim.
- app:menuGravity: Menüdeki item’ların NavigationRailView’da top,center ve bottom hızalamalarında bulunması sağlar.
- app:headerLayout: Alana FloatingActionButton eklemek isterseniz, bu özelliğe FloatingActionButton xml kodunun bulunduğu xml dosyasını eklemelisiniz.
|
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 |
<androidx.constraintlayout.widget.ConstraintLayout 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"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Navigation RailView" android:textColor="#000000" android:textSize="24sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/navigation_rail" app:layout_constraintTop_toTopOf="parent" /> <com.google.android.material.navigationrail.NavigationRailView android:id="@+id/navigation_rail" style="@style/Widget.MaterialComponents.NavigationRailView.Colored.Compact" android:layout_width="wrap_content" android:layout_height="match_parent" app:headerLayout="@layout/nav_header" app:labelVisibilityMode="selected" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:menu="@menu/nav_menu" app:menuGravity="top" /> </androidx.constraintlayout.widget.ConstraintLayout> |
4- Navigation Rail’de Etkileşim
NavigationRailView Badge özelliği bulunmaktadır. Badge, Alarm item’da kırmızı olarak gözüken bölümdür. Kullanıcıya bir tür bildirim göstermeniz gerekiyorsa bildirim sayısını Badge ile belirtebilirsiniz.
Badge özellikleri;
- number: Badge gözükecek sayı belirtilir.
- badgeGravity: Menü item’da gözükecek badge’ın yeri belirlenir. BOTTOM_END, TOP_END, BOTTOM_START, TOP_START şeklindeki tanımlar kullanılır.
- maxCharacterCount: Badge’da görüncek numaranın karakter sayısı belirtilir. Örneğimizde number değeri 999. maxCharacterCount değerini 2 verdiğimiz için 9+ şeklinde görünüyor.
- badgeTextColor: Badge’da görüncek değerin tazı rengini belirleyebiliriz.
- isVisible: Badge görünürlüğünü sağlar.
|
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 |
import android.os.Bundle import android.widget.Toast import androidx.appcompat.app.AppCompatActivity import androidx.core.content.ContextCompat import com.smality.navigationrailview_materialdesign.databinding.ActivityMainBinding import com.google.android.material.badge.BadgeDrawable import com.google.android.material.floatingactionbutton.FloatingActionButton class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val activityMainBinding = ActivityMainBinding.inflate(layoutInflater) setContentView(activityMainBinding.root) //Alarm item'a badge ekleme val badgeDrawable = activityMainBinding.navigationRail?.getOrCreateBadge(R.id.alarms) badgeDrawable?.run { //Badge özellikleri number = 999 badgeTextColor = ContextCompat.getColor(applicationContext, android.R.color.white) maxCharacterCount = 2 badgeGravity = BadgeDrawable.BOTTOM_END isVisible = true } //İlgili Badge'i silme // activityMainBinding.navigationRail?.removeBadge(R.id.alarms) //Floating Action Button'a tıklanma eventi activityMainBinding.navigationRail?.headerView?.findViewById<FloatingActionButton>(R.id.fab_add) ?.setOnClickListener { Toast.makeText(this, "Fab Clicked", Toast.LENGTH_SHORT).show() } //NavigationRailView menu item'lara tıklanma eventi activityMainBinding.navigationRail?.setOnItemSelectedListener { item -> when (item.itemId) { R.id.alarms -> { Toast.makeText(this, "Alarms Clicked", Toast.LENGTH_SHORT).show() true } else -> { Toast.makeText(this, "Other item clicked", Toast.LENGTH_SHORT).show() true } } } } } |
