Toolbar: ουσία, γραμμή εργαλείων σε εφαρμογές Android

Συγγραφέας: IT Sectr Δημοσιεύτηκε: 2026-02-23 Χρόνος ανάγνωσης: 12 λεπ

Toolbar (γραμμή εργαλείων) — στοιχείο Android που αντικατέστησε το ActionBar, εμφανίζει τον τίτλο οθόνης, στοιχεία πλοήγησης και ενέργειες. Το Toolbar ανήκει στη βιβλιοθήκη Material Design Library και είναι πλήρως προσαρμόσιμο: από τον τυπικό τίτλο έως προσαρμοσμένες προβολές και κινούμενα εικονίδια. Διαβάστε περισσότερα για το στοιχείο στην προδιαγραφή Material Design 3.

Κύρια σημεία

  • Toolbar — προσαρμόσιμη γραμμή εργαλείων Android, διάδοχος του ActionBar από το Material Design
  • ActionBar — γραμμή συστήματος που υπήρχε πριν από το Android 5.0, αντικαταστάθηκε από Toolbar
  • Material 3 — Top App Bar με τρεις παραλλαγές: Center, Small, Medium, Large
  • Menu — XML μενού με action items, ενσωματωμένο στο Toolbar μέσω onCreateOptionsMenu
  • Προσαρμογή — τίτλος, λογότυπο, εικονίδιο πλοήγησης, προσαρμοσμένες προβολές και κινούμενα γραφικά

Τι είναι το Toolbar;

Toolbar — στοιχείο Android από τη βιβλιοθήκη Material Design (androidx.appcompat.widget.Toolbar), που παρέχει μια ευέλικτη γραμμή εργαλείων για την οθόνη εφαρμογής. Το Toolbar αντικατέστησε το ξεπερασμένο ActionBar, δίνοντας στους προγραμματιστές πλήρη έλεγχο πάνω στην εμφάνιση και συμπεριφορά. Μπορεί να τοποθετηθεί οπουδήποτε στη διάταξη, να έχει προσαρμοσμένες θυγατρικές προβολές, να κινείται και να προσαρμόζεται σε διαφορετικά μεγέθη οθόνης.

Το Material Design 3 (2026) ορίζει το Top App Bar — την εξέλιξη του Toolbar — με τέσσερις παραλλαγές: Small (συμπαγές, 48 dp), Center-aligned (τίτλος στο κέντρο), Medium (μεγεθυσμένος τίτλος, 112 dp) και Large (μεγάλος τίτλος, 168 dp). Κάθε παραλλαγή έχει τη δική της συμπεριφορά κατά την κύλιση: το Small παραμένει σταθερό, τα Medium και Large συμπτύσσονται σε Small κατά την κύλιση περιεχομένου προς τα πάνω.

Το Toolbar εμφανίζει τρεις βασικές ζώνες: εικονίδιο πλοήγησης (αριστερά, συνήθως «χάμπουργκερ» ή βέλος «Πίσω»), τίτλος οθόνης (κέντρο ή αριστερά) και action items (δεξιά — εικονίδια ενεργειών, μενού overflow). Το Toolbar μπορεί να περιέχει λογότυπο, subtitle, προσαρμοσμένες View (search view, switch) και κινούμενο CollapsingToolbarLayout σε συνδυασμό με CoordinatorLayout.

ActionBar: ιστορία και εξέλιξη

ActionBar — γραμμή συστήματος Android που εμφανίστηκε στο Android 3.0 (API 11) ως αντικαταστάτης της ξεπερασμένης Title Bar. Το ActionBar ήταν αυστηρά συνδεδεμένο με το Activity, είχε σταθερή θέση στην κορυφή της οθόνης και περιορισμένες δυνατότητες προσαρμογής. Με την κυκλοφορία του Android 5.0 (Lollipop, 2014) και της βιβλιοθήκης AppCompat, η Google παρουσίασε το Toolbar ως ευέλικτη αντικατάσταση.

Τα κύρια μειονεκτήματα του ActionBar που έλυσε το Toolbar: σταθερή θέση (μόνο πάνω), αδυναμία κινούμενων γραφικών, δυσκολίες με προσαρμοσμένες προβολές, προβλήματα με CoordinatorLayout και CollapsingToolbarLayout. Η Google κήρυξε επίσημα το ActionBar ξεπερασμένο (deprecated) το 2015 και συνιστά Toolbar για όλα τα νέα έργα. Από το Android 12 (2021), το ActionBar είναι απενεργοποιημένο από προεπιλογή στα νέα θέματα Material 3.

ΧαρακτηριστικόActionBarToolbar
ΘέσηΣταθερή κορυφήΟπουδήποτε στη διάταξη
ΠροσαρμογήΠεριορισμένη (χρώμα, φόντο)Πλήρης (προβολές, στυλ, κινούμενα)
CollapsingΔεν υποστηρίζεταιCollapsingToolbarLayout
ΚινούμεναΜόνο συστήματοςΟποιαδήποτε (ObjectAnimator, Transition)
Material 3Δεν υποστηρίζεταιSmall / Medium / Large App Bar

Ρύθμιση Toolbar στο Android

Για τη χρήση Toolbar πρέπει: (1) να ορίσετε θέμα χωρίς ActionBar (Theme.Material3.NoActionBar ή Theme.AppCompat.NoActionBar), (2) να προσθέσετε Toolbar στη διάταξη XML, (3) να το ορίσετε ως ActionBar μέσω setSupportActionBar. Μετά από αυτό, το Toolbar λαμβάνει όλες τις λειτουργίες του ActionBar: επεξεργασία Menu, εικονίδιο πλοήγησης, τίτλο από το AndroidManifest.

xml
<!-- activity_main.xml με 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)

        // Ρύθμιση εικονιδίου πλοήγησης
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Προσαρμοσμένος τίτλος
        supportActionBar?.title = "Αρχική"
        supportActionBar?.subtitle = "Γεια σου, χρήστη!"
    }

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

Ενσωμάτωση Menu στο Toolbar

Toolbar ενσωματώνεται με το σύστημα Menu Android μέσω των callback onCreateOptionsMenu και onOptionsItemSelected. Το Menu ορίζει action items — εικονίδια ενεργειών που εμφανίζονται δεξιά στο Toolbar. Εάν τα action items δεν χωρούν, μεταφέρονται αυτόματα στο μενού overflow (τρεις τελείες). Ο προγραμματιστής το ελέγχει μέσω του χαρακτηριστικού 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="Αναζήτηση"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Ειδοποιήσεις"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="Ρυθμίσεις"
        app:showAsAction="never" />
</menu>
kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            Toast.makeText(this, "Αναζήτηση", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_notifications -> {
            openNotifications()
            true
        }
        R.id.action_settings -> {
            openSettings()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Material 3: Center και Large Top App Bar

Material 3 εισάγει τέσσερις παραλλαγές Top App Bar: Small (συμπαγές, 48 dp), Center-aligned (τίτλος στο κέντρο), Medium (112 dp με μεγεθυσμένο τίτλο) και Large (168 dp με μεγάλο τίτλο). Τα Medium και Large App Bar υποστηρίζουν συμπτυσσόμενη συμπεριφορά — κατά την κύλιση περιεχομένου προς τα πάνω, συμπτύσσονται ομαλά σε Small. Η κίνηση διαχειρίζεται από CoordinatorLayout και AppBarLayout.

Center-aligned Top App Bar — νέα παραλλαγή Material 3, όπου ο τίτλος τοποθετείται στο κέντρο του πλαισίου. Αυτό το στυλ χρησιμοποιείται συχνά σε εφαρμογές Google (Play Market, YouTube) και συνιστάται για οθόνες με ελάχιστο αριθμό action items. Small Top App Bar — κλασικό Toolbar, συμβατό με παλαιότερες εκδόσεις Android. Τα Medium και Large είναι κατάλληλα για οθόνες όπου ο τίτλος είναι το βασικό στοιχείο (προφίλ, αρχική σελίδα).

xml
<!-- Material 3 Large Top App Bar με 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="Περιεχόμενο οθόνης..." />
    </NestedScrollView>
</CoordinatorLayout>

Προηγμένη προσαρμογή Toolbar

Toolbar υποστηρίζει πλήρη προσαρμογή: αλλαγή ύψους, κίνηση εμφάνισης/απόκρυψης, προσαρμοσμένες θυγατρικές View, λογότυπο, εικονίδιο πλοήγησης, PopupMenu και ενσωμάτωση με CoordinatorLayout. Για κίνηση απόκρυψης κατά την κύλιση χρησιμοποιείται AppBarLayout με σημαίες scroll, enterAlways, snap. Για εφέ παράλλαξης εικόνας κάτω από το Toolbar — CollapsingToolbarLayout με λειτουργία parallax.

Το λογότυπο και το subtitle ορίζονται μέσω μεθόδων setLogo και setSubtitle. Το εικονίδιο πλοήγησης ρυθμίζεται μέσω setNavigationIcon και setNavigationOnClickListener. Οι προσαρμοσμένες View προστίθενται μέσω addView απευθείας στο Toolbar. Για SearchView χρησιμοποιείται MenuItem με actionViewClass. Για σκοτεινό θέμα, τα χρώματα εφαρμόζονται αυτόματα από χαρακτηριστικά Material 3.

kotlin
// Προηγμένη προσαρμογή Toolbar
with (toolbar) {
    // Λογότυπο και τίτλος
    setLogo(R.drawable.ic_logo)
    setTitle("Η εφαρμογή μου")
    setSubtitle("Έκδοση 2.0")

    // Εικονίδιο πλοήγησης με χειριστή
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Προσαρμοσμένη προβολή — Switch για θέμα
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

    // Προσαρμοσμένο PopupMenu
    setOnMenuItemClickListener { item ->
        Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
        true
    }
}

Συχνές Ερωτήσεις

Ποια είναι η διαφορά μεταξύ Toolbar και ActionBar;

ActionBar — γραμμή συστήματος Android 3.0–4.4 με περιορισμένη προσαρμογή. Toolbar — ευέλικτο στοιχείο Material Design που μπορεί να τοποθετηθεί οπουδήποτε στη διάταξη, να κινηθεί και να γεμίσει με προσαρμοσμένες προβολές. Το Toolbar αντικαθιστά πλήρως το ActionBar μέσω setSupportActionBar.

Πώς να κρύψω το Toolbar κατά την κύλιση;

Χρησιμοποιήστε CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Ρυθμίστε τη σημαία scroll για Toolbar στο layout_scrollBehavior. Κατά την κύλιση προς τα κάτω, το Toolbar κρύβεται, κατά την κύλιση προς τα πάνω, εμφανίζεται με κίνηση. Στο Material 3, το Medium/Large Top App Bar συμπτύσσεται σε Small.

Πόσα action items μπορούν να τοποθετηθούν στο Toolbar;

Ο περιορισμός είναι το φυσικό πλάτος της οθόνης. Συνιστώνται 2–4 action items (εικονίδια). Τα υπόλοιπα μεταφέρονται στο μενού overflow (τρεις τελείες). Ρύθμιση μέσω app:showAsAction: always (πάντα εμφάνιση), ifRoom (αν υπάρχει χώρος), never (στο overflow).

Πώς να προσθέσω SearchView στο Toolbar;

SearchView προστίθεται ως action view στο Menu. Στο XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". Το SearchView συμπτύσσεται αυτόματα σε εικονίδιο αναζήτησης και επεκτείνεται με κλικ. Υποστηρίζει φωνητική αναζήτηση και αυτόματη συμπλήρωση μέσω SearchRecentSuggestionsProvider.

Τι είναι το CollapsingToolbarLayout;

CollapsingToolbarLayout — κοντέινερ για Toolbar που συμπτύσσεται με κίνηση κατά την κύλιση περιεχομένου. Χρησιμοποιείται με CoordinatorLayout και AppBarLayout. Υποστηρίζει λειτουργίες: pin (σταθερό), parallax (εφέ παράλλαξης). Ιδανικό για οθόνες με εικόνα στην κεφαλίδα (προφίλ, σελίδα λεπτομερειών).

Συμπεράσματα

  • Toolbar — ευέλικτη γραμμή εργαλείων Android που αντικατέστησε το ActionBar και είναι πλήρως ενσωματωμένη με το Material Design
  • Material 3 Top App Bar — τέσσερις παραλλαγές: Small, Center-aligned, Medium, Large με διαφορετική συμπεριφορά κατά την κύλιση
  • ActionBar — ξεπερασμένη γραμμή συστήματος, περιορισμένη σε προσαρμογή και κίνηση
  • Menu και action items — ενσωμάτωση μέσω XML μενού με σημαίες always/ifRoom/never για διαχείριση ορατότητας
  • CollapsingToolbarLayout — κινούμενη σύμπτυξη Toolbar κατά την κύλιση για οθόνες με εικόνα στην κεφαλίδα
  • Προσαρμογή — λογότυπο, subtitle, προσαρμοσμένη View, SearchView, PopupMenu και χρώματα Material 3
  • SearchView — ενσωματωμένο action view για αναζήτηση με φωνητική είσοδο και αυτόματη συμπλήρωση

Θα αναπτύξουμε μια εφαρμογή για κινητά έτοιμη για χρήση

Η IT Sectr δημιουργεί εφαρμογές iOS και Android για νεοφυείς επιχειρήσεις και επιχειρήσεις από το 2017. Θα σας συμβουλεύσουμε και θα προτείνουμε την καλύτερη λύση.

Συζήτηση έργου

Διαβάστε επίσης