Bottom Navigation: temeller, BottomNavigationView ve TabView

Bottom Navigation Nedir?

Bottom Navigation, ana uygulama bölümlerine ekranın alt kısmındaki bir panel aracılığıyla erişilebilen bir navigasyon modelidir. Bu model, tek elle kullanım kolaylığı sayesinde mobil tasarım standardı haline gelmiştir. Yan menüden (Drawer) farklı olarak, Bottom Navigation her zaman görünürdür ve açmak için ekstra jestler gerektirmez.

Material Design 3 (2026), Navigation Bar'ı üç durumlu bir bileşen olarak tanımlar: default (simge + etiket), labeled (büyütülmüş etiket, bir aktif sekme) ve unlabeled (yalnızca simgeler). Google, 3–5 eşdeğer bölümü olan uygulamalar için Navigation Bar'ı önerir. 6+ bölüm için — Navigation Drawer. iOS SwiftUI'da TabView, otomatik olarak sistem stilinde bir alt panel kullanır.

UX Movement (2025) tarafından yapılan bir araştırma, Bottom Navigation'ın kayar menüye kıyasla görev tamamlama süresini %27 iyileştirdiğini gösterdi, çünkü kullanıcı ekstra işlem yapmadan tüm mevcut bölümleri görür. Büyük dokunma hedefleri (Android'de minimum 48x48 dp, iOS'ta 44x44 pt) sayesinde yanlış dokunma sayısı %34 azalır.

Android'de BottomNavigationView (Material 3)

Android'de BottomNavigationView, Material 3 Kütüphanesi'nin (com.google.android.material.navigation.NavigationBarView) bir bileşenidir. Material 2'deki eski BottomNavigationView'ın yerini almış ve Material You dinamik renkleri, animasyonlu aktif sekme göstergesi ve yerleşik rozetler için destek eklemiştir. Bileşen XML menüsü aracılığıyla yapılandırılır ve Navigation Component ile tam uyumludur.

// BottomNavigationView ve NavHostFragment ile Aktivite
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navView = findViewById<NavigationBarView>(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        // Otomatik navigasyon senkronizasyonu
        navView.setupWithNavController(navController)

        // Rozet kurulumu
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// Bottom Navigation için XML menüsü (res/menu/bottom_nav_menu.xml)
// <?xml version="1.0" encoding="utf-8"?>
// <menu xmlns:android="http://schemas.android.com/apk/res/android">
//   <item android:id="@+id/navigation_home"
//     android:icon="@drawable/ic_home"
//     android:title="Ana Sayfa" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Sohbetler" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Profil" />
// </menu>

Material 3 NavigationBarView üç labelVisibilityMode modunu destekler: LABEL_VISIBILITY_AUTO (varsayılan — etiket aktif sekme için gösterilir), LABEL_VISIBILITY_LABELED (herkes için etiketler), LABEL_VISIBILITY_UNLABELED (yalnızca simgeler). Animasyonlu aktif sekme göstergesi, özel dalga efektiyle itemActiveIndicatorStyle aracılığıyla yapılandırılır.

iOS için SwiftUI'da TabView

TabView, alt navigasyon oluşturmak için SwiftUI'nın yerleşik kapsayıcısıdır. Her sekme, .tabItem değiştiricisi ile bir simge ve metin kullanılarak tanımlanır. TabView, arka planda otomatik olarak bir UITabBarController oluşturur ve tüm yerel panel özelliklerini destekler: rozetler, rozet rengi, geçiş animasyonu ve Dynamic Type uyarlaması.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("Ana Sayfa", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("Ara", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("Bildirimler", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("Profil", systemImage: "person.circle.fill")
                }
        }
    }
}

TabView, .badge değiştiricisini (iOS 15+) destekler; Int (sayısal rozet) veya String (metin rozeti) kabul eder. Rozet rengi .badgeProminence(.increased) aracılığıyla değiştirilebilir — rozeti daha parlak yapar. Sekme geçiş animasyonu .tabViewStyle(.automatic) veya özel stiller aracılığıyla yapılandırılır. Programatik geçiş kontrolü için selection ile @State kullanılır.

Alt ve Yığın Navigasyonunun Kombinasyonu

Bottom Navigation nadiren tek başına kullanılır — her sekme genellikle bir yığın gezgini (SwiftUI'da NavigationView/NavigationStack, Android'de NavHostFragment) içerir. Bu kombinasyon, kullanıcıya hem bölümlere hızlı erişim (Sekme) hem de her bölüm içinde derin navigasyon (Yığın) sağlar. Bu, üretim uygulamaları için standart mimaridir.

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("Ana Sayfa", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Ara", systemImage: "magnifyingglass")
            }
        }
    }
}

// HomeView içinde — yığın navigasyonu
struct HomeView: View {
    var body: some View {
        List(items) { item in
            NavigationLink("\(item.title)", value: item)
        }
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

Android'de aynı kombinasyon, her sekme için NavHostFragment aracılığıyla uygulanır. Navigation Component, her sekme için geri yığını oluşturmayı otomatikleştirir: sekmeler değiştirildiğinde yığın durumu korunur ve geri dönüldüğünde geri yüklenir. Bu, Google sistem uygulamalarındaki (Play Market, YouTube) gibi kesintisiz bir UX sağlar.

Material 3: dinamik renkler ve animasyonlar

Material 3 (Material You), Bottom Navigation'da önemli bir değişiklik getirir — kullanıcının duvar kağıdından oluşturulan dinamik renkler. Sistem, duvar kağıdından baskın renkleri çıkarır ve 5 ana tondan oluşan bir palet oluşturur. NavigationBarView bu renkleri otomatik olarak uygular: aktif sekme birincil rengi alır, pasif sekmeler — onSurface varyantını.

Aktif sekme göstergesi animasyonu akıcı hale geldi: geçiş sırasında gösterge, enterpolasyonla yeni sekmeye doğru hareket eder. Dokunma dalga efekti ikincil rengi kullanır. Material 3'te Bottom Navigation ayrıca itemActiveIndicatorStyle aracılığıyla özel animasyonları destekler — geliştirici şekli (oval, dikdörtgen), kenar boşluklarını ve gösterge rengini ayarlayabilir.

<!-- NavigationBarView'ın aktif gösterge stili -->
<style name="Widget.MyApp.NavigationBarView.ActiveIndicator"
    parent="Widget.Material3.NavigationBarView.ActiveIndicator">
    <item name="android:height">32dp</item>
    <item name="android:width">64dp</item>
    <item name="android:marginHorizontal">8dp</item>
    <item name="shapeAppearance">
        @style/ShapeAppearance.Material3.Corner.Full
    </item>
    <item name="color">@color/primary_container</item>
</style>

Bottom Navigation için UX Önerileri

Bottom Navigation tasarlarken, kullanılabilirlik araştırması dikkate alınmalıdır. NN Group (2026): alt panel en az 56 dp yüksekliğinde olmalı, dokunma hedefleri — en az 48 dp. Etiket metni — maksimum 12 karakter (Latin) veya 8 karakter (Kiril). Aktif sekme yalnızca renk olarak değil, simge durumu olarak da (dolu vs anahat) farklılık göstermelidir.

Material Design 3 şu modelleri önerir: 4 sekme — kolay tarama için en uygun; ortada "+" simgesi (FloatingActionButton) — ana eylem için; rozetler — yalnızca kullanıcı eylem sayaçları için. Kaçınılması gerekenler: 2 sekmeyle Bottom Navigation kullanmak (bunun yerine Tab Layout kullanın), sekmelerin sırasını dinamik olarak değiştirmek, iç içe ekranlarda paneli gizlemek.

• Yükseklik — rahat başparmak erişimi için minimum 56 dp
• Kontrast — aktif sekme ayırt edilebilir olmalı (renk + simge dolgusu)
• Etiketler — kısa, 1-2 kelime, kesintisiz (12 karakterden fazla olmamalı)
• Sıra — sabit, en önemliden en az önemliye doğru
• Sayaçlar — yalnızca kullanıcı bildirimleri için, pazarlama için değil