Toolbar: Android uygulamalarında araç çubuğu

Yazar: IT Sectr Yayınlanma: 2026-02-23 Okuma süresi: 12 dk

Toolbar (araç çubuğu), ActionBar'ın yerini alan, ekran başlığını, gezinme öğelerini ve eylemleri görüntüleyen bir Android bileşenidir. Toolbar, Material Design Library'nin bir parçasıdır ve standart bir başlıktan özel görünümlere ve animasyonlu simgelere kadar tamamen özelleştirilebilir. Bileşen hakkında daha fazla bilgi için Material Design 3 özelliklerine bakın.

Önemli noktalar

  • Toolbar — özelleştirilebilir Android araç çubuğu, Material Design'daki ActionBar'ın halefi
  • ActionBar — Android 5.0'dan önce var olan sistem çubuğu, Toolbar ile değiştirildi
  • Material 3 — Top App Bar'ın dört çeşidi: Small, Center-aligned, Medium, Large
  • Menu — action items içeren XML menüsü, onCreateOptionsMenu ile Toolbar'a entegre
  • Özelleştirme — başlık, logo, gezinme simgesi, özel görünümler ve animasyonlar

Toolbar nedir?

Toolbar, Material Design kütüphanesinden (androidx.appcompat.widget.Toolbar) bir Android bileşenidir ve uygulama ekranı için esnek bir araç çubuğu sağlar. Toolbar, eski ActionBar'ın yerini alarak geliştiricilere görünüm ve davranış üzerinde tam kontrol sağlar. Yerleşimin herhangi bir yerine yerleştirilebilir, özel alt görünümlere, animasyonlara sahip olabilir ve farklı ekran boyutlarına uyum sağlayabilir.

Material Design 3 (2026), Top App Bar'ı — Toolbar'ın evrimi — dört çeşitle tanımlar: Small (kompakt, 48 dp), Center-aligned (ortalanmış başlık), Medium (genişletilmiş başlık, 112 dp) ve Large (büyük başlık, 168 dp). Her çeşidin kendi kaydırma davranışı vardır: Small sabit kalır, Medium ve Large içerik yukarı kaydırıldığında Small'a daralır.

Toolbar üç ana bölge görüntüler: gezinme simgesi (solda, genellikle hamburger menü veya Geri oku), ekran başlığı (ortada veya solda) ve action items (sağda — eylem simgeleri, overflow menüsü). Toolbar; logo, alt başlık, özel görünümler (arama görünümü, switch) ve CoordinatorLayout ile birlikte animasyonlu CollapsingToolbarLayout içerebilir.

ActionBar: tarihçe ve evrim

ActionBar, Android 3.0'da (API 11) eski Title Bar'ın yerini almak üzere ortaya çıkan bir sistem Android çubuğudur. ActionBar, Activity'ye sıkı sıkıya bağlıydı, ekranın üst kısmında sabit bir konuma ve sınırlı özelleştirme seçeneklerine sahipti. Android 5.0 (Lollipop, 2014) ve AppCompat kütüphanesinin yayınlanmasıyla Google, Toolbar'ı esnek bir alternatif olarak tanıttı.

ActionBar'ın Toolbar'ın çözdüğü başlıca eksiklikleri: sabit konum (yalnızca üstte), animasyon imkansızlığı, özel görünümlerde zorluk, CoordinatorLayout ve CollapsingToolbarLayout ile sorunlar. Google, 2015'te ActionBar'ı resmen kullanımdan kaldırılmış (deprecated) ilan etti ve tüm yeni projeler için Toolbar'ı önermektedir. Android 12'den (2021) itibaren ActionBar, yeni Material 3 temalarında varsayılan olarak devre dışıdır.

ÖzellikActionBarToolbar
KonumÜstte sabitYerleşimde herhangi bir yerde
ÖzelleştirmeSınırlı (renk, arka plan)Tam (görünümler, stiller, animasyonlar)
DaralmaDesteklenmezCollapsingToolbarLayout
AnimasyonSadece sistemHerhangi (ObjectAnimator, Transition)
Material 3DesteklenmezSmall / Medium / Large App Bar

Android'de Toolbar ayarlama

Toolbar'ı kullanmak için: (1) ActionBar'sız bir tema ayarlayın (Theme.Material3.NoActionBar veya Theme.AppCompat.NoActionBar), (2) XML yerleşimine Toolbar'ı ekleyin, (3) setSupportActionBar ile ActionBar olarak ayarlayın. Bundan sonra Toolbar, ActionBar'ın tüm özelliklerini alır: Menü işleme, gezinme simgesi, AndroidManifest'ten başlık.

xml
<!-- Toolbar ile activity_main.xml -->
<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="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        app:titleTextColor="@android:color/white"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
kotlin
class MainActivity : AppCompatActivity() {

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

        val toolbar = findViewById<Toolbar>(R.id.toolbar)
        setSupportActionBar(toolbar)

        // Gezinme simgesi ayarlama
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Özel başlık
        supportActionBar?.title = "Ana sayfa"
        supportActionBar?.subtitle = "Merhaba, kullanıcı!"
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.toolbar_menu, menu)
        return true
    }
}

Menüyü Toolbar'a entegre etme

Toolbar, onCreateOptionsMenu ve onOptionsItemSelected geri çağrıları aracılığıyla Android Menü sistemiyle entegre olur. Menü, action items'ları — Toolbar'da sağda görüntülenen eylem simgelerini tanımlar. Action items sığmazsa, otomatik olarak overflow menüsüne (üç nokta) taşınır. Geliştirici bunu app:showAsAction özelliğiyle kontrol eder: always, ifRoom, never.

xml
<!-- res/menu/toolbar_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="Ara"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Bildirimler"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="Ayarlar"
        app:showAsAction="never" />
</menu>
kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            Toast.makeText(this, "Ara", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_notifications -> {
            openNotifications()
            true
        }
        R.id.action_settings -> {
            openSettings()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Material 3: Center ve Large Top App Bar

Material 3, Top App Bar'ın dört çeşidini tanıtır: Small (kompakt, 48 dp), Center-aligned (ortalanmış başlık), Medium (genişletilmiş başlıklı 112 dp) ve Large (büyük başlıklı 168 dp). Medium ve Large App Bar, daraltılabilir davranışı destekler — içerik yukarı kaydırıldığında yumuşak bir şekilde Small'a daralır. Animasyon CoordinatorLayout ve AppBarLayout aracılığıyla kontrol edilir.

Center-aligned Top App Bar, başlığın çubuğun ortasına yerleştirildiği yeni bir Material 3 çeşididir. Bu stil genellikle Google uygulamalarında (Play Store, YouTube) kullanılır ve minimum sayıda action items olan ekranlar için önerilir. Small Top App Bar, eski Android sürümleriyle uyumlu klasik Toolbar'dır. Medium ve Large, başlığın önemli bir öğe olduğu ekranlar (profil, ana sayfa) için uygundur.

xml
<!-- CollapsingToolbarLayout ile Material 3 Large Top App Bar -->
<CoordinatorLayout
    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.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="168dp"
            app:contentScrim="?attr/colorPrimary"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="Ekran içeriği..." />
    </NestedScrollView>
</CoordinatorLayout>

Gelişmiş Toolbar özelleştirmesi

Toolbar tam özelleştirmeyi destekler: yükseklik değişikliği, görünme/gizlenme animasyonları, özel alt görünümler, logo, gezinme simgesi, PopupMenu ve CoordinatorLayout ile entegrasyon. Kaydırma sırasında gizleme animasyonu için scroll, enterAlways, snap bayraklarıyla AppBarLayout kullanılır. Toolbar'ın altındaki görüntü için paralaks efekti için — mode parallax ile CollapsingToolbarLayout.

Logo ve alt başlık setLogo ve setSubtitle yöntemleriyle ayarlanır. Gezinme simgesi setNavigationIcon ve setNavigationOnClickListener ile yapılandırılır. Özel görünümler addView ile doğrudan Toolbar'a eklenir. SearchView için actionViewClass ile MenuItem kullanılır. Koyu tema için Material 3 özelliklerinin renkleri otomatik olarak uygulanır.

kotlin
// Gelişmiş Toolbar özelleştirmesi
with (toolbar) {
    // Logo ve başlık
    setLogo(R.drawable.ic_logo)
    setTitle("Uygulamam")
    setSubtitle("Sürüm 2.0")

    // İşleyici ile gezinme simgesi
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Özel görünüm — Tema için Switch
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

    // Özel PopupMenu
    setOnMenuItemClickListener { item ->
        Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
        true
    }
}

Sıkça sorulan sorular

Toolbar ve ActionBar arasındaki fark nedir?

ActionBar, Android 3.0–4.4'ün sınırlı özelleştirmeye sahip bir sistem çubuğudur. Toolbar, yerleşimin herhangi bir yerine yerleştirilebilen, canlandırılabilen ve özel görünümlerle doldurulabilen esnek bir Material Design bileşenidir. Toolbar, setSupportActionBar ile ActionBar'ı tamamen değiştirir.

Kaydırma sırasında Toolbar nasıl gizlenir?

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout kullanın. layout_scrollBehavior'da Toolbar için scroll bayrağını ayarlayın. Aşağı kaydırırken Toolbar gizlenir; yukarı kaydırırken animasyonla görünür. Material 3'te Medium/Large Top App Bar Small'a daralır.

Toolbar'a kaç action item yerleştirilebilir?

Sınırlama ekranın fiziksel genişliğidir. 2–4 action items (simge) önerilir. Geri kalanı overflow menüsüne (üç nokta) taşınır. app:showAsAction ile yapılandırma: always (her zaman göster), ifRoom (yer varsa), never (overflow'da).

Toolbar'a SearchView nasıl eklenir?

SearchView, Menüde action view olarak eklenir. XML menüsünde: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView otomatik olarak arama simgesine daralır ve dokunulduğunda genişler. SearchRecentSuggestionsProvider aracılığıyla sesli arama ve otomatik tamamlamayı destekler.

CollapsingToolbarLayout nedir?

CollapsingToolbarLayout, içerik kaydırıldığında animasyonlu olarak daralan bir Toolbar kapsayıcısıdır. CoordinatorLayout ve AppBarLayout ile kullanılır. Modları destekler: pin (sabit), parallax (paralaks efekti). Üstbilgi görüntüsü olan ekranlar (profil, detay sayfası) için idealdir.

Özet

  • Toolbar, ActionBar'ın yerini alan ve Material Design ile tamamen entegre esnek bir Android araç çubuğudur
  • Material 3 Top App Bar — dört çeşit: Small, Center-aligned, Medium, Large farklı kaydırma davranışlarıyla
  • ActionBar kullanımdan kaldırılmış bir sistem çubuğudur, özelleştirme ve animasyon konusunda sınırlıdır
  • Menü ve action items — görünürlük kontrolü için always/ifRoom/never bayraklarıyla XML menü üzerinden entegrasyon
  • CollapsingToolbarLayout — üstbilgi görüntüsü olan ekranlar için kaydırmada Toolbar'ın animasyonlu daralması
  • Özelleştirme — logo, alt başlık, özel görünümler, SearchView, PopupMenu ve Material 3 renkleri
  • SearchView — sesli giriş ve otomatik tamamlama ile arama için yerleşik action view

Anahtar teslim bir mobil uygulama geliştireceğiz

IT Sectr, 2017'den beri girişimler ve işletmeler için iOS ve Android uygulamaları oluşturmaktadır. Size danışmanlık yapacak ve en iyi çözümü önereceğiz.

Projeyi tartış

Ayrıca okuyun