Android Studio - How to make transparent status bar like ChatGPT official android App?

ChiragThummar
July 29, 2023
178 views
0 votes
2 Answers

I am developing an Android application using Jetpack Compose.

I wanted to add Side Navigation Drawer. Which is working fine. But One Problem I am facing is the status bar is just spoiling the game.

So I wanted to make a status bar like OpenAI ChatGPT officially made and build using Jetpack Compose.

My Approach

I have added WindowCompat.setDecorFitsSystemWindows(window, false) so that I can customized as per my choice.

My theme File Content

 <style name="Theme.JetpackComposePlayGround" parent="Theme.Material3.Light.NoActionBar">
     <item name="android:statusBarColor">@color/purple_700</item>
 </style>

My Output
It look ugly white

My Expected Output
this is ChatGPT Android App

Answers

You can use this code to acheive the same behaviour

fun Window.fitSystemWindowsWithAdjustResize() {
    setFlags(
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
    )

    WindowCompat.setDecorFitsSystemWindows(this, true)

    ViewCompat.setOnApplyWindowInsetsListener(decorView) { view, insets ->
        val bottom = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom

        WindowInsetsCompat
            .Builder()
            .setInsets(
                WindowInsetsCompat.Type.systemBars(),
                Insets.of(0, 0, 0, bottom)
            )
            .build()
            .apply { ViewCompat.onApplyWindowInsets(view, this) }
    }
}

Then invoke it in MainActivity.OnCreate(), below setContent function.

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
          ...
        }
        
        // If you call it before `setContent` it won't work
        window.fitSystemWindowsWithAdjustResize()
    }
}

Actually, it’s not a transparent status bar, it’s just filled with the proper color defined in the app theme.
With Jetpack Compose you could change the statusBar color globally in a custom Theme by adding the following lines:

val window = (view.context as Activity).window
window.statusBarColor = colorScheme.background.toArgb()
WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme

The whole code:


@Composable
fun AppTheme(
    darkTheme: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.background.toArgb()
            window.navigationBarColor = colorScheme.surfaceColorAtElevation(4.dp).toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
            WindowCompat.getInsetsController(window, view).isAppearanceLightNavigationBars = !darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(color = MaterialTheme.colorScheme.background)
        ) {
            content()
        }
    }
}