Toolbar: esensya, toolbar sa mga Android application

May-akda: IT Sectr Nai-publish: 2026-02-23 Oras ng pagbabasa: 12 min

Toolbar (toolbar) — komponent ng Android na pumalit sa ActionBar, nagpapakita ng pamagat ng screen, mga elemento ng nabigasyon at mga aksyon. Ang Toolbar ay bahagi ng Material Design Library at ganap na nako-customize: mula sa karaniwang pamagat hanggang sa mga custom na view at animated na icon. Magbasa pa tungkol sa komponent sa detalye ng Material Design 3.

Mga Pangunahing Punto

  • Toolbar — nako-customize na toolbar ng Android, tagapagmana ng ActionBar mula sa Material Design
  • ActionBar — system bar na umiral bago ang Android 5.0, pinalitan ng Toolbar
  • Material 3 — Top App Bar na may tatlong baryasyon: Center, Small, Medium, Large
  • Menu — XML menu na may action items, isinasama sa Toolbar sa pamamagitan ng onCreateOptionsMenu
  • Pag-customize — pamagat, logo, navigation icon, custom na view at animation

Ano ang Toolbar?

Toolbar — komponent ng Android mula sa Material Design library (androidx.appcompat.widget.Toolbar), na nagbibigay ng flexible na toolbar para sa screen ng application. Pinalitan ng Toolbar ang lumang ActionBar, na nagbibigay sa mga developer ng buong kontrol sa hitsura at pag-uugali. Maaaring ilagay kahit saan sa layout, magkaroon ng custom na child view, ma-animate at umangkop sa iba't ibang laki ng screen.

Ang Material Design 3 (2026) ay tumutukoy sa Top App Bar — ebolusyon ng Toolbar — na may apat na baryante: Small (compact, 48 dp), Center-aligned (naka-center na pamagat), Medium (pinalaking pamagat, 112 dp) at Large (malaking pamagat, 168 dp). Ang bawat baryante ay may sariling pag-uugali kapag nag-s scroll: Small ay nananatiling fixed, Medium at Large ay lumiliit patungong Small kapag nag-scroll pataas ang content.

Ang Toolbar ay nagpapakita ng tatlong pangunahing zone: navigation icon (kaliwa, karaniwang "hamburger" o "Bumalik" na arrow), pamagat ng screen (gitna o kaliwa) at action items (kanan — mga action icon, overflow menu). Ang Toolbar ay maaaring maglaman ng logo, subtitle, custom na View (search view, switch) at animated na CollapsingToolbarLayout kasama ng CoordinatorLayout.

ActionBar: kasaysayan at ebolusyon

ActionBar — system bar ng Android na lumitaw sa Android 3.0 (API 11) bilang kapalit ng lumang Title Bar. Ang ActionBar ay mahigpit na nakatali sa Activity, may fixed na posisyon sa itaas ng screen at limitadong kakayahan sa pag-customize. Sa paglabas ng Android 5.0 (Lollipop, 2014) at AppCompat library, ipinakilala ng Google ang Toolbar bilang flexible na kapalit.

Mga pangunahing kahinaan ng ActionBar na nilutas ng Toolbar: fixed na posisyon (itaas lang), hindi posibilidad ng animation, problema sa custom na view, problema sa CoordinatorLayout at CollapsingToolbarLayout. Opisyal na idineklara ng Google na deprecated ang ActionBar noong 2015 at inirerekomenda ang Toolbar para sa lahat ng bagong proyekto. Simula sa Android 12 (2021), ang ActionBar ay naka-default na naka-disable sa mga bagong tema ng Material 3.

TampokActionBarToolbar
PosisyonFixed na itaasKahit saan sa layout
Pag-customizeLimitado (kulay, background)Buong (view, estilo, animation)
CollapsingHindi sinusuportahanCollapsingToolbarLayout
AnimationSistem langKahit ano (ObjectAnimator, Transition)
Material 3Hindi sinusuportahanSmall / Medium / Large App Bar

Pag-configure ng Toolbar sa Android

Para gamitin ang Toolbar kailangan: (1) mag-set ng tema na walang ActionBar (Theme.Material3.NoActionBar o Theme.AppCompat.NoActionBar), (2) magdagdag ng Toolbar sa XML layout, (3) i-set ito bilang ActionBar sa pamamagitan ng setSupportActionBar. Pagkatapos nito, ang Toolbar ay makakatanggap ng lahat ng function ng ActionBar: pagproseso ng Menu, navigation icon, pamagat mula sa AndroidManifest.

xml
<!-- activity_main.xml na may Toolbar -->
<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)

        // Pag-configure ng navigation icon
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Custom na pamagat
        supportActionBar?.title = "Tahanan"
        supportActionBar?.subtitle = "Kumusta, gumagamit!"
    }

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

Integrasyon ng Menu sa Toolbar

Toolbar ay isinasama sa Android Menu system sa pamamagitan ng mga callback na onCreateOptionsMenu at onOptionsItemSelected. Ang Menu ay tumutukoy sa action items — mga action icon na ipinapakita sa kanan sa Toolbar. Kung hindi kasya ang action items, awtomatikong inililipat ang mga ito sa overflow menu (tatlong tuldok). Kinokontrol ito ng developer sa pamamagitan ng attribute na app:showAsAction: 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="Maghanap"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

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

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

Material 3: Center at Large Top App Bar

Material 3 ay nagpapakilala ng apat na baryante ng Top App Bar: Small (compact, 48 dp), Center-aligned (naka-center na pamagat), Medium (112 dp na may pinalaking pamagat) at Large (168 dp na may malaking pamagat). Ang Medium at Large App Bar ay sumusuporta sa collapsible na pag-uugali — kapag nag-scroll pataas ang content, sila ay maayos na lumiliit patungong Small. Ang animation ay pinamamahalaan ng CoordinatorLayout at AppBarLayout.

Center-aligned Top App Bar — bagong baryante ng Material 3, kung saan ang pamagat ay inilalagay sa gitna ng panel. Ang estilo na ito ay madalas na ginagamit sa mga application ng Google (Play Market, YouTube) at inirerekomenda para sa mga screen na may minimal na bilang ng action items. Small Top App Bar — klasikong Toolbar, compatible sa mas lumang bersyon ng Android. Ang Medium at Large ay angkop para sa mga screen kung saan ang pamagat ay pangunahing elemento (profile, pangunahing pahina).

xml
<!-- Material 3 Large Top App Bar na may CollapsingToolbarLayout -->
<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="Nilalaman ng screen..." />
    </NestedScrollView>
</CoordinatorLayout>

Advanced na Pag-customize ng Toolbar

Toolbar ay sumusuporta sa buong pag-customize: pagbabago ng taas, animation ng paglitaw/pagtago, custom na child View, logo, navigation icon, PopupMenu at integrasyon sa CoordinatorLayout. Para sa animation ng pagtago kapag nag-s scroll, ginagamit ang AppBarLayout na may mga flag na scroll, enterAlways, snap. Para sa parallax effect ng imahe sa ilalim ng Toolbar — CollapsingToolbarLayout na may parallax mode.

Ang logo at subtitle ay itinatakda sa pamamagitan ng mga pamamaraang setLogo at setSubtitle. Ang navigation icon ay nako-configure sa pamamagitan ng setNavigationIcon at setNavigationOnClickListener. Ang custom na View ay idinaragdag sa pamamagitan ng addView nang direkta sa Toolbar. Para sa SearchView, ginagamit ang MenuItem na may actionViewClass. Para sa dark theme, awtomatikong inilalapat ang mga kulay mula sa mga attribute ng Material 3.

kotlin
// Advanced na pag-customize ng Toolbar
with (toolbar) {
    // Logo at pamagat
    setLogo(R.drawable.ic_logo)
    setTitle("Aking application")
    setSubtitle("Bersyon 2.0")

    // Navigation icon na may handler
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Custom na view — Switch para sa tema
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

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

Mga Madalas Itanong

Ano ang pagkakaiba ng Toolbar at ActionBar?

ActionBar — system bar ng Android 3.0–4.4 na may limitadong pag-customize. Toolbar — flexible na komponent ng Material Design na maaaring ilagay kahit saan sa layout, i-animate at punuin ng custom na view. Ang Toolbar ay ganap na pumapalit sa ActionBar sa pamamagitan ng setSupportActionBar.

Paano itago ang Toolbar kapag nag-s scroll?

Gamitin ang CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. I-configure ang scroll flag para sa Toolbar sa layout_scrollBehavior. Kapag nag-scroll pababa, ang Toolbar ay nagtatago, kapag nag-scroll pataas, lumilitaw na may animation. Sa Material 3, ang Medium/Large Top App Bar ay lumiliit patungong Small.

Ilang action items ang maaaring ilagay sa Toolbar?

Ang limitasyon ay ang pisikal na lapad ng screen. Inirerekomenda ang 2–4 action items (icon). Ang natitira ay inililipat sa overflow menu (tatlong tuldok). Pag-configure sa pamamagitan ng app:showAsAction: always (palaging ipakita), ifRoom (kung may puwang), never (sa overflow).

Paano magdagdag ng SearchView sa Toolbar?

SearchView ay idinaragdag bilang action view sa Menu. Sa XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". Ang SearchView ay awtomatikong lumiliit sa icon ng paghahanap at lumalawak kapag na-click. Sumusuporta sa voice search at autocomplete sa pamamagitan ng SearchRecentSuggestionsProvider.

Ano ang CollapsingToolbarLayout?

CollapsingToolbarLayout — lalagyan para sa Toolbar na lumiliit nang may animation kapag nag-s scroll ang content. Ginagamit kasama ng CoordinatorLayout at AppBarLayout. Sumusuporta sa mga mode: pin (fixed), parallax (parallax effect). Mainam para sa mga screen na may imahe sa header (profile, pahina ng detalye).

Buod

  • Toolbar — flexible na toolbar ng Android na pumalit sa ActionBar at ganap na isinama sa Material Design
  • Material 3 Top App Bar — apat na baryante: Small, Center-aligned, Medium, Large na may iba't ibang pag-uugali kapag nag-s scroll
  • ActionBar — lumang system bar, limitado sa pag-customize at animation
  • Menu at action items — integrasyon sa pamamagitan ng XML menu na may mga flag na always/ifRoom/never para sa pamamahala ng visibility
  • CollapsingToolbarLayout — animated na pagliit ng Toolbar kapag nag-s scroll para sa mga screen na may imahe sa header
  • Pag-customize — logo, subtitle, custom na View, SearchView, PopupMenu at mga kulay ng Material 3
  • SearchView — built-in na action view para sa paghahanap na may voice input at autocomplete

Gagawa kami ng mobile application na turnkey

Gumagawa ang IT Sectr ng mga iOS at Android application para sa mga startup at negosyo mula noong 2017. Magpapayo kami sa iyo at magmumungkahi ng pinakamahusay na solusyon.

Pag-usapan ang proyekto

Basahin din