Android में कस्टम ActionBar/Toolbar बनाना

ActionBar vs Toolbar

ActionBar (डिप्रिकेटेड) पुराना एक्शन बार API है। आधुनिक Android में Toolbar (androidx.appcompat.widget.Toolbar) का उपयोग किया जाता है जो अधिक लचीला है और लेआउट में कहीं भी रखा जा सकता है।

कस्टम Toolbar लागू करना

चरण 1: थीम में डिफ़ॉल्ट ActionBar छुपाएं

<!-- res/values/themes.xml -->
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- NoActionBar थीम उपयोग करें -->
</style>

चरण 2: कस्टम टूलबार लेआउट (res/layout/custom_toolbar.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:id="@+id/customToolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:contentInsetStart="0dp"
    app:contentInsetLeft="0dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="8dp">

        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginEnd="12dp"
            android:src="@drawable/ic_logo" />

        <TextView
            android:id="@+id/toolbarTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="मेरा ऐप"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            android:textStyle="bold" />

        <ImageButton
            android:id="@+id/actionSearch"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="8dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_search"
            android:contentDescription="@string/search" />

        <ImageButton
            android:id="@+id/actionNotifications"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="8dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_notifications"
            android:contentDescription="@string/notifications" />

    </LinearLayout>

</androidx.appcompat.widget.Toolbar>

चरण 3: एक्टिविटी लेआउट में शामिल करें

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <include layout="@layout/custom_toolbar" />

    </com.google.android.material.appbar.AppBarLayout>

    <!-- मुख्य कंटेंट -->
    <include layout="@layout/content_main" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

चरण 4: MainActivity.java में सेटअप

import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // कस्टम टूलबार ढूंढें और सेट करें
        Toolbar toolbar = findViewById(R.id.customToolbar);
        setSupportActionBar(toolbar);

        // डिफ़ॉल्ट शीर्षक छुपाएं (कस्टम टेक्स्टव्यू उपयोग कर रहे हैं)
        if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayShowTitleEnabled(false);
            getSupportActionBar().setDisplayHomeAsUpEnabled(false);
            getSupportActionBar().setElevation(0); // शैडो हटाएं
        }

        // कस्टम व्यूज़ के रेफरेंस
        TextView titleView = findViewById(R.id.toolbarTitle);
        ImageButton searchBtn = findViewById(R.id.actionSearch);
        ImageButton notifBtn = findViewById(R.id.actionNotifications);

        // क्लिक लिस्टनर्स
        titleView.setOnClickListener(v -> 
            Toast.makeText(this, "शीर्षक पर क्लिक किया गया", Toast.LENGTH_SHORT).show()
        );

        searchBtn.setOnClickListener(v -> 
            Toast.makeText(this, "खोज क्लिक", Toast.LENGTH_SHORT).show()
        );

        notifBtn.setOnClickListener(v -> 
            Toast.makeText(this, "सूचनाएं क्लिक", Toast.LENGTH_SHORT).show()
        );
    }

    // मेनू इन्फ्लेट करने के लिए (अगर टूलबार में मेनू उपयोग कर रहे हैं)
    @Override
    public boolean onCreateOptionsMenu(android.view.Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(android.view.MenuItem item) {
        if (item.getItemId() == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

उन्नत कस्टमाइज़ेशन

टूलबार एनिमेशन (Collapsing Toolbar)

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="250dp">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/header_bg"
            app:layout_collapseMode="parallax" />

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

    </com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

डायनामिक टूलबार रंग

// स्क्रॉल के आधार पर रंग बदलें
appBarLayout.addOnOffsetChangedListener((layout, verticalOffset) -> {
    float percentage = Math.abs(verticalOffset) / (float) layout.getTotalScrollRange();
    int alpha = (int) (percentage * 255);
    toolbar.setBackgroundColor(Color.argb(alpha, 255, 0, 0)); // लाल
});

MaterialToolbar (नया)

Material Components लाइब्रेरी में MaterialToolbar शामिल है जो बेहतर थीमिंग और मेनू हैंडलिंग प्रदान करता है:

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/materialToolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:menu="@menu/main_menu"
    app:navigationIcon="@drawable/ic_menu"
    app:title="@string/app_name" />

सर्वोत्तम अभ्यास

• हमेशा Theme.MaterialComponents.*.NoActionBar उपयोग करें
• टूलबार को AppBarLayout के अंदर रखें स्क्रॉल व्यवहार के लिए
• setSupportActionBar() के बाद getSupportActionBar() null चेक करें
• कस्टम व्यूज़ के लिए app:contentInsetStart="0dp" सेट करें
• एक्सेसिबिलिटी के लिए contentDescription जोड़ें