10
0

[MWA-5265] Meta Demo: Theming via xml

{Update demo app UI and theming}
This commit is contained in:
andre 2025-11-18 12:50:35 +01:00
parent e4ccb2c425
commit e64d3f6577
6 changed files with 78 additions and 79 deletions

View File

@ -57,6 +57,7 @@ dependencies {
implementation 'androidx.appcompat:appcompat:1.6.1' implementation 'androidx.appcompat:appcompat:1.6.1'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4' implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
implementation 'androidx.compose.material3:material3:1.4.0' implementation 'androidx.compose.material3:material3:1.4.0'
implementation 'androidx.compose.foundation:foundation-layout:1.9.4'
testImplementation 'junit:junit:4.13.2' testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.5' androidTestImplementation 'androidx.test.ext:junit:1.1.5'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1' androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'

View File

@ -1,5 +1,7 @@
package de.webidsolutions.metaplugindemo.scenes package de.webidsolutions.metaplugindemo.scenes
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
@ -62,12 +64,13 @@ fun MetaPluginDemoScreen(
) { ) {
Text( Text(
text = stringResource(R.string.choose_plugins), text = stringResource(R.string.choose_plugins),
style = MaterialTheme.typography.bodyLarge style = MaterialTheme.typography.headlineSmall,
modifier = Modifier.padding(start = 10.dp)
) )
Spacer(modifier = Modifier.height(10.dp)) Spacer(modifier = Modifier.height(10.dp))
Column(modifier = Modifier.padding(start = 10.dp)) { Column {
CheckboxWithLabel( CheckboxWithLabel(
checked = useAutoIdent, checked = useAutoIdent,
onCheckedChange = { useAutoIdent = it }, onCheckedChange = { useAutoIdent = it },
@ -97,18 +100,17 @@ fun MetaPluginDemoScreen(
Text( Text(
text = stringResource(R.string.choose_theming), text = stringResource(R.string.choose_theming),
style = MaterialTheme.typography.bodyLarge, style = MaterialTheme.typography.headlineSmall,
modifier = Modifier.padding(start = 10.dp)
) )
Spacer(modifier = Modifier.height(10.dp)) Spacer(modifier = Modifier.height(10.dp))
Column ( Column {
modifier = Modifier.padding(start = 10.dp),
) {
CheckboxWithLabel( CheckboxWithLabel(
checked = themingChoice == ThemingChoice.COMPOSE, checked = themingChoice == ThemingChoice.COMPOSE,
onCheckedChange = { themingChoice = ThemingChoice.COMPOSE }, onCheckedChange = { themingChoice = ThemingChoice.COMPOSE },
label = "Code-Theming" label = "Compose-Theming"
) )
CheckboxWithLabel( CheckboxWithLabel(
@ -122,18 +124,17 @@ fun MetaPluginDemoScreen(
Text( Text(
text = stringResource(R.string.log_headline), text = stringResource(R.string.log_headline),
style = MaterialTheme.typography.bodyLarge, style = MaterialTheme.typography.headlineSmall,
modifier = Modifier.padding(start = 10.dp)
) )
Spacer(modifier = Modifier.height(10.dp)) Spacer(modifier = Modifier.height(10.dp))
Surface( Box(
modifier = Modifier modifier = Modifier
.weight(1f) .weight(1f)
.fillMaxWidth() .fillMaxWidth()
.padding(horizontal = 10.dp), .padding(horizontal = 10.dp)
color = MaterialTheme.colorScheme.surfaceVariant,
shape = MaterialTheme.shapes.small
) { ) {
val scrollState = rememberScrollState() val scrollState = rememberScrollState()
@ -141,40 +142,44 @@ fun MetaPluginDemoScreen(
scrollState.animateScrollTo(scrollState.maxValue) scrollState.animateScrollTo(scrollState.maxValue)
} }
Text( Surface(
text = logText.ifEmpty { stringResource(R.string.log_placeholder) }, modifier = Modifier.fillMaxSize(),
modifier = Modifier shape = MaterialTheme.shapes.small
.fillMaxSize() ) {
.verticalScroll(scrollState) Text(
.padding(16.dp), text = logText.ifEmpty { stringResource(R.string.log_placeholder) },
style = MaterialTheme.typography.bodyMedium modifier = Modifier
) .fillMaxSize()
} .verticalScroll(scrollState)
.padding(16.dp)
Spacer(modifier = Modifier.height(10.dp)) .padding(bottom = 80.dp),
style = MaterialTheme.typography.bodyMedium
Button(
onClick = {
onStartClicked(
useAutoIdent,
usePayOnServer,
useEidOnServer,
useVideo,
themingChoice
) )
}, }
modifier = Modifier
.fillMaxWidth() Button(
.height(60.dp) onClick = {
.padding(horizontal = 10.dp), onStartClicked(
colors = ButtonDefaults.buttonColors( useAutoIdent,
containerColor = Color(0xFF05B1FB) usePayOnServer,
) useEidOnServer,
) { useVideo,
Text( themingChoice
text = stringResource(R.string.start_button), )
color = Color.White },
) modifier = Modifier
.align(Alignment.BottomCenter)
.fillMaxWidth()
.height(60.dp),
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFF05B1FB)
)
) {
Text(
text = stringResource(R.string.start_button),
color = Color.White
)
}
} }
} }
} }

View File

@ -9,5 +9,5 @@
<string name="core_sdk_creation_successful">Core SDK erfolgreich erstellt</string> <string name="core_sdk_creation_successful">Core SDK erfolgreich erstellt</string>
<string name="validate_action_id">Validiere Vorgangsnummer…</string> <string name="validate_action_id">Validiere Vorgangsnummer…</string>
<string name="action_id_not_valid">Fehler: Die Vorgangsnummer (Action-ID) wurde in der Datei „MainActivity.kt“ nicht auf eine 9-stellige Zahlenfolge gesetzt.</string> <string name="action_id_not_valid">Fehler: Die Vorgangsnummer (Action-ID) wurde in der Datei „MainActivity.kt“ nicht auf eine 9-stellige Zahlenfolge gesetzt.</string>
<string name="choose_theming">Designauswahl</string> <string name="choose_theming">Designauswahl:</string>
</resources> </resources>

View File

@ -3,47 +3,36 @@
<style name="WebId.PluginTheme" parent="Theme.AppCompat.Light.NoActionBar"> <style name="WebId.PluginTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- ===== Action Colors ===== --> <item name="actionPrimary">#FF0000</item> <!-- Rot -->
<item name="actionPrimary">#FF3B30</item> <item name="actionPrimaryPressed">#00FF00</item> <!-- Grün -->
<item name="actionPrimaryPressed">#FF3B30</item> <item name="actionPrimaryHover">#0000FF</item> <!-- Blau -->
<item name="actionPrimaryHover">#FF3B30</item> <item name="actionPrimaryInvert">#FFFF00</item> <!-- Gelb -->
<item name="actionPrimaryInvert">#FF3B30</item> <item name="actionDisabled">#FF00FF</item> <!-- Magenta -->
<item name="actionDisabled">#FF3B30</item>
<!-- ===== Background Colors ===== --> <!-- ===== Background Colors ===== -->
<item name="backgroundPrimary">#FF3B30</item> <item name="backgroundPrimary">#00FFFF</item> <!-- Cyan -->
<item name="backgroundSecondary">#FF3B30</item> <item name="backgroundSecondary">#FFA500</item> <!-- Orange -->
<!-- ===== Text Colors ===== --> <!-- ===== Text Colors ===== -->
<item name="textHeadline">@color/white</item> <item name="textHeadline">#FFFFFF</item> <!-- Weiß -->
<item name="textSubtitle">@color/white</item> <item name="textSubtitle">#000000</item> <!-- Schwarz -->
<item name="textBodyPrimary">@color/white</item> <item name="textBodyPrimary">#808080</item> <!-- Grau -->
<item name="textBodySecondary">@color/white</item> <item name="textBodySecondary">#800000</item> <!-- Dunkelrot -->
<item name="textBodyTertiary">@color/white</item>
<!-- ===== Brand Colors ===== -->
<item name="brandPrimary">#FF3B30</item>
<item name="brandSecondary">#FF3B30</item>
<item name="brandInvert">#FF3B30</item>
<!-- ===== Border Colors ===== --> <!-- ===== Border Colors ===== -->
<item name="borderPrimary">@color/white</item> <item name="borderPrimary">#A52A2A</item> <!-- Brown -->
<item name="borderSecondary">@color/white</item> <item name="borderSecondary">#2F4F4F</item> <!-- DarkSlateGray -->
<!-- ===== Signal Colors ===== --> <!-- ===== Signal Colors ===== -->
<item name="signalDefault">#FF3B30</item> <item name="signalDefault">#FFD700</item> <!-- Gold -->
<item name="signalPositive">#FF3B30</item> <item name="signalPositive">#7CFC00</item> <!-- LawnGreen -->
<item name="signalPositiveText">#FF3B30</item> <item name="signalPositiveText">#006400</item> <!-- DarkGreen -->
<item name="signalNegative">#FF3B30</item> <item name="signalNegative">#8B0000</item> <!-- DarkRed -->
<item name="signalNegativeText">#FF3B30</item> <item name="signalNegativeText">#FF4500</item> <!-- OrangeRed -->
<item name="signalWarning">#FF3B30</item> <item name="signalWarning">#FF8C00</item> <!-- DarkOrange -->
<item name="signalWarningText">#FF3B30</item> <item name="signalWarningText">#B8860B</item> <!-- DarkGoldenRod -->
<item name="signalInvert">#FF3B30</item> <item name="signalInvert">#F5FFFA</item> <!-- MintCream -->
<!-- Global font family -->
<!-- <item name="fontFamily">@string/font_family</item>-->
<!-- Font sizes -->
<item name="headlineMediumFontSize">24sp</item> <item name="headlineMediumFontSize">24sp</item>
<item name="headlineSmallFontSize">20sp</item> <item name="headlineSmallFontSize">20sp</item>
<item name="subheadlineFontSize">18sp</item> <item name="subheadlineFontSize">18sp</item>

View File

@ -8,5 +8,5 @@
<string name="core_sdk_creation_successful">Core SDK creation successful</string> <string name="core_sdk_creation_successful">Core SDK creation successful</string>
<string name="validate_action_id">Validate Action-ID…</string> <string name="validate_action_id">Validate Action-ID…</string>
<string name="action_id_not_valid">Failure: The transaction number (Action-ID) was not set to 9-digit number string in MainActivity.kt file.</string> <string name="action_id_not_valid">Failure: The transaction number (Action-ID) was not set to 9-digit number string in MainActivity.kt file.</string>
<string name="choose_theming">Choose theming</string> <string name="choose_theming">Choose Theming:</string>
</resources> </resources>

View File

@ -44,6 +44,10 @@
<item name="buttonFontSize">14sp</item> <item name="buttonFontSize">14sp</item>
<item name="buttonSmallFontSize">12sp</item> <item name="buttonSmallFontSize">12sp</item>
<item name="captionFontSize">10sp</item> <item name="captionFontSize">10sp</item>
<item name="FontFamily">casual</item>
<item name="headlineFontFamily">casual</item>
<item name="fontFamily">casual</item>
</style> </style>
</resources> </resources>