https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
r

romainguy

06/03/2020, 9:44 PM
You can do this by setting the theme of the activity in your manifest
g

Guy Bieber

06/03/2020, 9:58 PM
Copy code
<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>
Not sure what to set it to.
v

Vinay Gaba

06/03/2020, 10:02 PM
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
Copy code
<item name="android:windowBackground">color_name</item>
Hopefully Romain was referring to this and not some compose magic that I was unaware about 😅
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?
r

romainguy

06/03/2020, 10:07 PM
Compose doesn’t use the theme from the existing toolkit afaik
👍🏼 1
g

Guy Bieber

06/03/2020, 10:08 PM
Seems like we should be able to set something in the material theme here:
Copy code
var splashView = SplashView()
setContent {
    MaterialTheme {
        splashView.view()
    }
}
I’m not sure what to set the MaterialTheme(colors =?) to for a dark theme
v

Vinay Gaba

06/03/2020, 10:13 PM
you could use the default 
darkColorPalette()
👍 1
g

Guy Bieber

06/03/2020, 10:16 PM
I think it is this:
Copy code
MaterialTheme(colors = darkColorPalette())
Just tried that and fail…
v

Vinay Gaba

06/03/2020, 10:24 PM
typically you would use logic like this to add support for dark mode -
Copy code
val light = lightColorPalette()
val dark = darkColorPalette()

val colors = if (isSystemInDarkTheme()) { dark } else { light }
also could you elaborate on what exactly failed?
g

Guy Bieber

06/03/2020, 10:25 PM
white background on startup and black cursor.
expecting black background and white cursor
v

Vinay Gaba

06/03/2020, 10:26 PM
I’m guessing 
SplashView
is a composable?
g

Guy Bieber

06/03/2020, 10:28 PM
yup
v

Vinay Gaba

06/03/2020, 10:28 PM
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
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
Copy code
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
) {
Notice how it automatically uses the 
MaterialTheme.colors.surface
by default when you don’t give it a color
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
g

Guy Bieber

06/03/2020, 10:31 PM
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.
a

Adam Powell

06/03/2020, 10:51 PM
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)
That xml theme definition is what Android reads and shows to the user before your app code starts running
it'll have a parent declaration that probably looks something like 
@style/Theme.AppCompat.Light.NoActionBar
- get rid of the .
Light
part in there.
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.
g

Guy Bieber

06/04/2020, 3:06 AM
Still get the white flash with this
Copy code
android:theme="@style/AppTheme.NoActionBar">
Might just be noticeable because I am loading from a usb connection instead of installed app.
r

romainguy

06/04/2020, 5:47 AM
How's that theme defined?
a

Adrian Blanco

06/04/2020, 7:34 AM
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
4 Views
Powered by