Skip to content

Refactor & simplify StatusBarProtection code sample to use inset size… #836

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ashnohe wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor & simplify StatusBarProtection code sample to use inset size… #836

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 17 additions & 26 deletions ...nippets/src/main/java/com/example/compose/snippets/layouts/SystemBarProtectionSnippets.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
Expand All @@ -29,6 +30,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.windowInsetsTopHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
Expand All @@ -37,10 +39,8 @@ import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
Expand Down Expand Up @@ -74,33 +74,24 @@ class SystemBarProtectionSnippets : ComponentActivity() {
@Composable
private fun StatusBarProtection(
color: Color = MaterialTheme.colorScheme.surfaceContainer,
heightProvider: () -> Float = calculateGradientHeight(),
) {

Canvas(Modifier.fillMaxSize()) {
val calculatedHeight = heightProvider()
val gradient = Brush.verticalGradient(
colors = listOf(
color.copy(alpha = 1f),
color.copy(alpha = .8f),
Color.Transparent
),
startY = 0f,
endY = calculatedHeight
)
drawRect(
brush = gradient,
size = Size(size.width, calculatedHeight),
Box(Modifier.fillMaxSize()) {
Spacer(
Modifier
.fillMaxWidth()
.windowInsetsTopHeight(WindowInsets.statusBars)
.background(
Brush.verticalGradient(
colors = listOf(
color.copy(alpha = 1f),
color.copy(alpha = 0.8f),
Color.Transparent
)
)
Comment on lines +84 to +90
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This refactoring is a great simplification. However, it causes a slight visual regression. The previous implementation made the gradient 20% taller than the status bar for a smoother fade-out. The new implementation, while simpler, creates a harder edge where the gradient ends.

To restore the smoother fade without adding complexity, you can adjust the gradient's color stops to compress the gradient into the top part of the spacer, leaving the bottom part transparent. This mimics the effect of a taller gradient.

Suggested change
Brush.verticalGradient(
colors = listOf(
color.copy(alpha = 1f),
color.copy(alpha = 0.8f),
Color.Transparent
)
)
Brush.verticalGradient(
0.0f to color.copy(alpha = 1f),
0.42f to color.copy(alpha = 0.8f), // 0.5 / 1.2
0.83f to Color.Transparent, // 1.0 / 1.2
1.0f to Color.Transparent
)

)
)
}
}

@Composable
fun calculateGradientHeight(): () -> Float {
val statusBars = WindowInsets.statusBars
val density = LocalDensity.current
return { statusBars.getTop(density).times(1.2f) }
}
// [END android_compose_system_bar_protection]

@Composable
Expand Down
Loading