You can do this by setting the theme of the activity in your manifest

# compose

[romainguy]

You can do this by setting the theme of the activity in your manifest

[Guy Bieber]

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    tools:replace="android:theme"
    android:theme ="@style/AppTheme">
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:theme="@style/AppTheme.NoActionBar">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

    <service android:name="com.nikolamotor.bluetoothle.BluetoothLeService" />
</application>

[Guy Bieber]

Not sure what to set it to.

[Vinay Gaba]

basically this isn’t compose related necessarily and you would use the existing android style system to get this functionality.

You would essentially create a custom theme and override this property

<item name="android:windowBackground">color_name</item>

Hopefully Romain was referring to this and not some compose magic that I was unaware about 😅

[Vinay Gaba]

Which brings me to another question which potentially has been answered before - how do themes in compose & the existing way of creating themes in android interplay with each other? What’s the order of preference if I were to apply a theme to an activity in AndroidManifest and also use a different MaterialTheme inside the activity ? I’m guessing MaterialTheme would be what the user sees on the screen?

[romainguy]

Compose doesn’t use the theme from the existing toolkit afaik

[Guy Bieber]

Seems like we should be able to set something in the material theme here:

var splashView = SplashView()
setContent {
    MaterialTheme {
        splashView.view()
    }
}

[Guy Bieber]

I’m not sure what to set the MaterialTheme(colors =?) to for a dark theme

[Vinay Gaba]

you could use the default darkColorPalette()

[Guy Bieber]

I think it is this:

MaterialTheme(colors = darkColorPalette())

[Guy Bieber]

Just tried that and fail…

[Vinay Gaba]

typically you would use logic like this to add support for dark mode -

val light = lightColorPalette()
val dark = darkColorPalette()

val colors = if (isSystemInDarkTheme()) { dark } else { light }

[Vinay Gaba]

also could you elaborate on what exactly failed?

[Guy Bieber]

white background on startup and black cursor.

[Guy Bieber]

expecting black background and white cursor

[Vinay Gaba]

I’m guessing SplashView is a composable?

[Guy Bieber]

yup

[Vinay Gaba]

In order for it to take the appropriate colors from the theme, you need to either use the Material elements like Card or Surface, or explicitly set the color using the theme color. So something like MaterialTheme.colors.surface or MaterialTheme.colors.primaryColor

[Vinay Gaba]

when you use the Material elements, their default behavior is configured to use the colors from the theme automatically. So when you look at implementation of Card, you will see this

fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.medium,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: Border? = null,
    elevation: Dp = 1.dp,
    content: @Composable () -> Unit
) {

[Vinay Gaba]

Notice how it automatically uses the MaterialTheme.colors.surface by default when you don’t give it a color

[Vinay Gaba]

if you aren’t using the Material elements, you need to give it a similar behavior for it to pick up the colors from the theme. Maybe you were already doing this but just didn’t share it in the code snippets

[Guy Bieber]

My splash screen comes up with the correct colors, however briefly before that a white screen is displayed. Also the cursor shows up as black by default. I am trying to change that.

[Adam Powell]

If you ctrl (or cmd) click on the @style/AppTheme.NoActionBar theme declaration from the activity element in your manifest, it'll take you over to the resource xml file that holds that theme in your app. (probably res/values/styles.xml if you're using the default project template)

[Adam Powell]

That xml theme definition is what Android reads and shows to the user before your app code starts running

[Adam Powell]

it'll have a parent declaration that probably looks something like @style/Theme.AppCompat.Light.NoActionBar - get rid of the .Light part in there.

[Adam Powell]

this all happens at a pretty low-level within Android, since this window background is what Android shows as it's still loading your apk's code to show responsiveness to the user launching the app. this usually takes a couple hundred milliseconds from a cold process start.

[Guy Bieber]

Still get the white flash with this

android:theme="@style/AppTheme.NoActionBar">

[Guy Bieber]

Might just be noticeable because I am loading from a usb connection instead of installed app.

[romainguy]

How's that theme defined?

[Adrian Blanco]

When I did this, defining windowBackground in the main theme was enough to solve the white screen on startup. However I also had to define day / night color resources so it would pick the correct colors based on current mode