1 year ago
#336734
Patrick Lang
Apply XML theme to Composable with Mdc3Theme
I am trying to migrate an app from XML layouts to jetpack compose. As the app allows setting different user themes, I wanted to use the XML themes until all files are migrated. However, I just can't get it to work.
Basically I am doing as described in https://material-components.github.io/material-components-android-compose-theme-adapter/#compose-material-3
I have a simple activity with a defined Composable:
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import at.example.myapp.ui.composables.about.About
import com.google.android.material.composethemeadapter3.Mdc3Theme
class AboutActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
setTheme(MainActivity.getUserTheme(this))
super.onCreate(savedInstanceState)
setContent {
// Use MdcTheme instead of MaterialTheme
// Colors, typography, and shape have been read from the
// View-based theme used in this Activity
Mdc3Theme {
About()
}
}
}
}
setTheme(...) correctly loads the theme, the color on the very top is corretly set, but nothing else. All other colors, styles and fonts are not set in the composable. The About() composable itself has nothing special, just a few texts, images and a card.
I am importing the following versions:
//JETPACK COMPOSE
// Integration with activities
implementation 'androidx.activity:activity-compose:1.4.0'
// Compose Material Design
implementation 'androidx.compose.material:material:1.1.1'
// Animations
implementation 'androidx.compose.animation:animation:1.1.1'
// Tooling support (Previews, etc.)
implementation 'androidx.compose.ui:ui-tooling:1.1.1'
// Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.1.1'
// Theme compatibility with XML
implementation "com.google.android.material:compose-theme-adapter-3:1.0.6"
So the compose-theme-adapter-3 should actually do the job (if I understood the documentation correctly). I played around with different combinations and parameters for Mdc3Theme { ... }, but without success, the colors won't just load.
In the resources I have the colors defined as expected by Material 3:
<resources>
<!-- Base application theme. -->
<style name="Theme.MyApp" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorSecondary">@color/md_theme_light_secondary</item> ...
As I couldn't find other examples, I hope that it is correct to just basically load the Theme like this:
setContent {
// Use MdcTheme instead of MaterialTheme
// Colors, typography, and shape have been read from the
// View-based theme used in this Activity
Mdc3Theme {
About()
}
}
Playing around with compose-theme-adapter (for Material 2) also didn't help. I'm really stuck here. Is there anyone who could help or give an example about how to get the Mdc3 Theme applied properly from XML?
EDIT: For completion, here's also the About() Composable:
@Composable
fun About() {
val defaultPadding = 8.dp
val widePadding = 16.dp
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
ImageVector.vectorResource(id = R.drawable.ic_babyfootsteps),
null,
modifier = Modifier
.padding(widePadding)
.size(100.dp, 100.dp)
.background(Color(0xFFFF0077))
)
Text(
stringResource(id = R.string.app_name),
fontSize = 24.sp,
modifier = Modifier.padding(defaultPadding),
)
Text(stringResource(id = R.string.about_app_version, BuildConfig.VERSION_NAME, BuildConfig.VERSION_CODE))
Text(stringResource(id = R.string.about_app_codename, BuildConfig.versionCodename))
Spacer(modifier = Modifier.padding(defaultPadding))
...
android
android-jetpack-compose
mdc-components
0 Answers
Your Answer