Android में पारदर्शी स्टेटस बार और एक्शन बार कैसे बनाएं?

Android में ट्रांसपेरेंट स्टेटस बार और एक्शन बार

यह ट्यूटोरियल दिखाता है कि कैसे स्टेटस बार और एक्शन बार को पारदर्शी बनाया जाता है ताकि कंटेंट उनके पीछे तक फैल सके - मॉडर्न ऐप डिज़ाइन के लिए आवश्यक।

चरण 1: प्रोजेक्ट बनाएं

Android Studio में नया प्रोजेक्ट बनाएं।

चरण 2: लेआउट - फुलस्क्रीन कंटेंट

res/layout/activity_main.xml - कंटेंट को फुलस्क्रीन बनाएं:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#222222"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="हैलो वर्ल्ड!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

चरण 3: स्टाइल्स में ट्रांसपेरेंट थीम

res/values/styles.xml (या themes.xml):

<resources>
    <!-- बेस थीम -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryDark">@color/purple_700</item>
        <item name="colorAccent">@color/teal_200</item>
    </style>

    <!-- ट्रांसपेरेंट एक्शन बार स्टाइल -->
    <style name="AppTheme.TransparentActionBar" parent="AppTheme">
        <item name="android:windowContentOverlay">@null</item>
        <item name="windowActionBarOverlay">true</item>
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="colorPrimaryDark">@android:color/transparent</item>
    </style>

    <!-- फुल ट्रांसपेरेंट (नो एक्शन बार) -->
    <style name="AppTheme.FullscreenTransparent" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    </style>
</resources>

चरण 4: मैनिफेस्ट में थीम लागू करें

AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.app.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:theme="@style/AppTheme.TransparentActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

चरण 5: Java कोड में रनटाइम कंट्रोल (API 21+)

src/MainActivity.java:

package com.app.sample;

import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        makeStatusBarTransparent();
    }

    private void makeStatusBarTransparent() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            
            // ड्रॉ सिस्टम बार बैकग्राउंड्स इनेबल करें
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            
            // स्टेटस बार कलर ट्रांसपेरेंट
            window.setStatusBarColor(Color.TRANSPARENT);
            
            // नेविगेशन बार भी ट्रांसपेरेंट (वैकल्पिक)
            window.setNavigationBarColor(Color.TRANSPARENT);
            
            // लेआउट को सिस्टम बार्स के पीछे फैलाएं
            View decorView = window.getDecorView();
            int flags = View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION;
            decorView.setSystemUiVisibility(flags);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            // KitKat के लिए ट्रांसलूसेंट स्टेटस बार
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }
}

वर्जन-वाइज व्यवहार

लाइट/डार्क आइकन्स कंट्रोल करें

// डार्क आइकन्स (लाइट बैकग्राउंड के लिए)
decorView.setSystemUiVisibility(flags | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);

// लाइट आइकन्स (डार्क बैकग्राउंड के लिए) - डिफॉल्ट
decorView.setSystemUiVisibility(flags);

आम समस्याएं और समाधान

• कंटेंट सिस्टम बार्स के नीचे छुप जाता है: रूट लेआउट में android:fitsSystemWindows="true" या पैडिंग जोड़ें
• कीबोर्ड खुलने पर लेआउट शिफ्ट होता है: मैनिफेस्ट में android:windowSoftInputMode="adjustResize" सेट करें
• एक्शन बार शैडो दिखती है: windowContentOverlay को @null सेट करें