How to show a transparent app background in jetpack compose

Question

I am trying to make a simple launcher and I'm trying to show the app's background completely transparent or partially transparent. Could you guys help me out on how to do that?

Answer 1

Yes, it is possible to do it, but not everything is on Compose side. There are a couple of things you need to do:

1- In your theme, you need to tell the system to show the wallpaper, make the window background transparent and tint all the bars transparent:

<style name="Theme.MyLauncher" parent="android:Theme.Material.Light.NoActionBar">
    <item name="android:windowShowWallpaper">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>

    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

2- Lastly, make your main surface transparent:

Surface(
    modifier = Modifier.fillMaxSize(),
    color = Color.Transparent
) {
    [...]
}

This should give you a nice and very transparent activity.

For bonus, check how to turn off the decor fitting system windows and you'll be able to draw anywhere in the window, giving you more flexibility. Cheers!

Answer 2

Yeah actually Android doesn't work that way. Your app is not open literally on top of the homescreen, pretty much like one activity is not opened above the previous one, it's just the animation and perception. However, if you want to create a launcher with a transparent background, there MAY be a way to get to know the current home screen background (although I doubt). Why not just set s default one of your own? Or maybe provide the user with a choice to customize it for your app?