feat: new, nicer UI in demo Android app

Author: artus9033

example/AndroidApp/app/src/main/java/com/callstack/brownfield/android/example/MainActivity.kt

@@ -5,20 +5,27 @@ import android.widget.Toast
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -30,70 +37,114 @@ import com.rnapp.brownfieldlib.ReactNativeHostManager
 
 class MainActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
+        super.onCreate(null)
         enableEdgeToEdge()
 
-        ReactNativeHostManager.initialize(this.application) {
-            Toast.makeText(this, "React Native has been loaded", Toast.LENGTH_LONG).show()
+        if (savedInstanceState == null) {
+            ReactNativeHostManager.initialize(application) {
+                Toast.makeText(
+                    this,
+                    "React Native has been loaded",
+                    Toast.LENGTH_LONG
+                ).show()
+            }
         }
 
         setContent {
             AndroidBrownfieldAppTheme {
-                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
-                    Column(modifier = Modifier.padding(innerPadding)) {
-                        Greeting(
-                            name = "Android",
-                            modifier = Modifier
-                                .fillMaxWidth()
-                                .padding(innerPadding)
-                                .padding(vertical = 1.dp),
-                        )
-
-                        ReactNativeView()
-                    }
+                Scaffold(
+                    modifier = Modifier.fillMaxSize()
+                ) { innerPadding ->
+                    MainScreen(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .padding(innerPadding)
+                            .padding(16.dp) // outer margin
+                    )
                 }
             }
         }
     }
 }
 
 @Composable
-fun Greeting(name: String, modifier: Modifier = Modifier) {
-    var counter by remember { mutableStateOf(0) }
-
+private fun MainScreen(modifier: Modifier = Modifier) {
     Column(
         modifier = modifier,
-        horizontalAlignment = Alignment.CenterHorizontally
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally // center top bar content
     ) {
-        Text(
-            text = "Hello $name, you clicked the button $counter time${if (counter == 1) "" else "s"}!",
-            textAlign = TextAlign.Center,
+        GreetingCard(
+            name = "Android",
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        ReactNativeView(
             modifier = Modifier
                 .fillMaxWidth()
+                .clip(RoundedCornerShape(16.dp))
+                .background(MaterialTheme.colorScheme.surface)
         )
+    }
+}
+
+@Composable
+fun GreetingCard(
+    name: String,
+    modifier: Modifier = Modifier
+) {
+    var counter by rememberSaveable { mutableStateOf(0) }
 
-        Button(
-            onClick = { counter++ },
+    Card(
+        modifier = modifier,
+        shape = RoundedCornerShape(16.dp),
+        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
+    ) {
+        Column(
+            modifier = Modifier
+                .padding(16.dp)
+                .fillMaxWidth(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(12.dp)
         ) {
-            Text(text = "Increment counter")
+            Text(
+                text = "Hello native $name 👋",
+                style = MaterialTheme.typography.titleMedium,
+                textAlign = TextAlign.Center
+            )
+
+            Text(
+                text = "You clicked the button $counter time${if (counter == 1) "" else "s"}",
+                textAlign = TextAlign.Center,
+                style = MaterialTheme.typography.bodyMedium
+            )
+
+            Button(onClick = { counter++ }) {
+                Text("Increment counter")
+            }
         }
     }
 }
 
 @Composable
-fun ReactNativeView() {
+fun ReactNativeView(
+    modifier: Modifier = Modifier
+) {
     AndroidFragment<ReactNativeFragment>(
+        modifier = modifier,
         arguments = Bundle().apply {
-            putString(ReactNativeFragmentArgNames.ARG_MODULE_NAME, "RNApp")
-        }, modifier = Modifier
-            .fillMaxSize()
+            putString(
+                ReactNativeFragmentArgNames.ARG_MODULE_NAME,
+                "RNApp"
+            )
+        }
     )
 }
 
 @Preview(showBackground = true)
 @Composable
 fun GreetingPreview() {
     AndroidBrownfieldAppTheme {
-        Greeting("Android")
+        MainScreen()
     }
 }