Modify home screen items.

app/src/main/java/no/nordicsemi/android/nrftoolbox/FeatureButton.kt

@@ -5,11 +5,7 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -17,37 +13,64 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import no.nordicsemi.android.theme.view.ScreenSection
 
 @Composable
-fun FeatureButton(@DrawableRes iconId: Int, @StringRes nameId: Int, onClick: () -> Unit) {
-    Row(
+fun FeatureButton(
+    @DrawableRes iconId: Int,
+    @StringRes nameCode: Int,
+    @StringRes name: Int,
+    onClick: () -> Unit
+) {
+    ScreenSection {
+        Column(
             modifier = Modifier
                 .fillMaxWidth()
+                .height(150.dp)
                 .clickable { onClick() }
                 .background(MaterialTheme.colorScheme.background)
                 .padding(16.dp),
-        verticalAlignment = Alignment.CenterVertically
+            horizontalAlignment = Alignment.CenterHorizontally
         ) {
+            Text(
+                text = stringResource(id = nameCode),
+                style = MaterialTheme.typography.labelMedium
+            )
+
+            Spacer(modifier = Modifier.height(8.dp))
+
             Image(
                 painter = painterResource(iconId),
-            contentDescription = stringResource(id = nameId),
+                contentDescription = stringResource(id = name),
                 contentScale = ContentScale.Crop,
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSecondary),
                 modifier = Modifier
                     .size(64.dp)
                     .clip(CircleShape)
-                .background(Color.White)
+                    .background(MaterialTheme.colorScheme.secondary)
+                    .padding(16.dp)
+            )
+
+            Spacer(modifier = Modifier.height(8.dp))
+
+            Text(
+                text = stringResource(id = name),
+                style = MaterialTheme.typography.bodyMedium,
+                textAlign = TextAlign.Center
             )
-        Row(
-            modifier = Modifier
-                .fillMaxWidth(),
-            horizontalArrangement = Arrangement.Center
-        ) {
-            Text(text = stringResource(id = nameId))
         }
     }
 }
+
+@Preview
+@Composable
+private fun FeatureButtonPreview() {
+    FeatureButton(R.drawable.ic_csc, R.string.csc_module, R.string.csc_module_full) { }
+}

app/src/main/java/no/nordicsemi/android/nrftoolbox/HomeScreen.kt

@@ -3,13 +3,11 @@ package no.nordicsemi.android.nrftoolbox
 import android.app.Activity
 import androidx.activity.OnBackPressedCallback
 import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
@@ -60,7 +58,7 @@ internal fun HomeScreen() {
         composable(NavDestination.RSCS.id) { RSCSScreen { viewModel.navigateUp() } }
         composable(NavDestination.CGMS.id) { CGMScreen { viewModel.navigateUp() } }
         composable(NavDestination.REQUEST_PERMISSION.id) { RequestPermissionScreen(continueAction) }
-        composable(NavDestination.BLUETOOTH_NOT_AVAILABLE.id) { BluetoothNotAvailableScreen{ viewModel.finish() } }
+        composable(NavDestination.BLUETOOTH_NOT_AVAILABLE.id) { BluetoothNotAvailableScreen { viewModel.finish() } }
         composable(NavDestination.BLUETOOTH_NOT_ENABLED.id) {
             BluetoothNotEnabledScreen(continueAction)
         }
@@ -91,22 +89,127 @@ fun HomeView(callback: (NavDestination) -> Unit) {
             (context as? Activity)?.finish()
         }
 
-        Column(modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState())) {
-            FeatureButton(R.drawable.ic_csc, R.string.csc_module) { callback(NavDestination.CSC) }
-            Spacer(modifier = Modifier.height(1.dp))
-            FeatureButton(R.drawable.ic_hrs, R.string.hrs_module) { callback(NavDestination.HRS) }
-            Spacer(modifier = Modifier.height(1.dp))
-            FeatureButton(R.drawable.ic_gls, R.string.gls_module) { callback(NavDestination.GLS) }
-            Spacer(modifier = Modifier.height(1.dp))
-            FeatureButton(R.drawable.ic_hts, R.string.hts_module) { callback(NavDestination.HTS) }
-            Spacer(modifier = Modifier.height(1.dp))
-            FeatureButton(R.drawable.ic_bps, R.string.bps_module) { callback(NavDestination.BPS) }
-            Spacer(modifier = Modifier.height(1.dp))
-            FeatureButton(R.drawable.ic_rscs, R.string.rscs_module) { callback(NavDestination.RSCS) }
-            Spacer(modifier = Modifier.height(1.dp))
-            FeatureButton(R.drawable.ic_prx, R.string.prx_module) { callback(NavDestination.PRX) }
-            Spacer(modifier = Modifier.height(1.dp))
-            FeatureButton(R.drawable.ic_cgm, R.string.cgm_module) { callback(NavDestination.CGMS) }
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 16.dp)
+                .verticalScroll(rememberScrollState())
+        ) {
+            Spacer(modifier = Modifier.height(16.dp))
+
+            Row(horizontalArrangement = Arrangement.SpaceEvenly) {
+                Box(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    FeatureButton(
+                        R.drawable.ic_csc,
+                        R.string.csc_module,
+                        R.string.csc_module_full
+                    ) { callback(NavDestination.CSC) }
+                }
+                Spacer(modifier = Modifier.width(16.dp))
+                Box(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    FeatureButton(
+                        R.drawable.ic_hrs, R.string.hrs_module,
+                        R.string.hrs_module_full
+                    ) { callback(NavDestination.HRS) }
+                }
+            }
+
+            Spacer(modifier = Modifier.height(16.dp))
+
+            Row(horizontalArrangement = Arrangement.SpaceEvenly) {
+                Box(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    FeatureButton(
+                        R.drawable.ic_gls, R.string.gls_module,
+                        R.string.gls_module_full
+                    ) { callback(NavDestination.GLS) }
+                }
+                Spacer(modifier = Modifier.width(16.dp))
+                Box(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    FeatureButton(
+                        R.drawable.ic_hts, R.string.hts_module,
+                        R.string.hts_module_full
+                    ) { callback(NavDestination.HTS) }
+                }
+            }
+
+            Spacer(modifier = Modifier.height(16.dp))
+
+            Row(horizontalArrangement = Arrangement.SpaceEvenly) {
+                Box(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    FeatureButton(
+                        R.drawable.ic_bps, R.string.bps_module,
+                        R.string.bps_module_full
+                    ) { callback(NavDestination.BPS) }
+                }
+                Spacer(modifier = Modifier.width(16.dp))
+                Box(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    FeatureButton(
+                        R.drawable.ic_rscs,
+                        R.string.rscs_module,
+                        R.string.rscs_module_full
+                    ) { callback(NavDestination.RSCS) }
+                }
+            }
+
+            Spacer(modifier = Modifier.height(16.dp))
+
+            Row(horizontalArrangement = Arrangement.SpaceEvenly) {
+                Box(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    FeatureButton(
+                        R.drawable.ic_prx, R.string.prx_module,
+                        R.string.prx_module_full
+                    ) { callback(NavDestination.PRX) }
+                }
+                Spacer(modifier = Modifier.width(16.dp))
+                Box(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    FeatureButton(
+                        R.drawable.ic_cgm, R.string.cgm_module,
+                        R.string.cgm_module_full
+                    ) { callback(NavDestination.CGMS) }
+                }
+            }
+
+            Spacer(modifier = Modifier.height(16.dp))
         }
     }
 }

app/src/main/java/no/nordicsemi/android/nrftoolbox/MainActivity.kt

@@ -16,7 +16,7 @@ class MainActivity : NordicActivity() {
 
         setContent {
             NordicTheme {
-                Surface(color = MaterialTheme.colorScheme.background) {
+                Surface(color = MaterialTheme.colorScheme.surface) {
                     HomeScreen()
                 }
             }

app/src/main/res/values/strings.xml

@@ -1,10 +1,18 @@
 <resources>
     <string name="csc_module">CSC</string>
+    <string name="csc_module_full">Cyclic Speed and Cadence</string>
     <string name="hrs_module">HRS</string>
+    <string name="hrs_module_full">Heart Rate</string>
     <string name="gls_module">GLS</string>
+    <string name="gls_module_full">Glucose</string>
     <string name="hts_module">HTS</string>
+    <string name="hts_module_full">Health Thermometer</string>
     <string name="bps_module">BPS</string>
+    <string name="bps_module_full">Blood presure</string>
     <string name="rscs_module">RSCS</string>
+    <string name="rscs_module_full">Running Speed and Cadence</string>
     <string name="prx_module">PRX</string>
+    <string name="prx_module_full">Proximity</string>
     <string name="cgm_module">CGMS</string>
+    <string name="cgm_module_full">Continuous Glucose</string>
 </resources>

lib_theme/src/main/java/no/nordicsemi/android/theme/view/SensorRecordCard.kt

@@ -1,11 +1,9 @@
 package no.nordicsemi.android.theme.view
 
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import no.nordicsemi.android.material.you.Card
 
@@ -14,9 +12,9 @@ fun ScreenSection(content: @Composable () -> Unit) {
     Card(
         backgroundColor = MaterialTheme.colorScheme.background,
         shape = RoundedCornerShape(4.dp),
-        elevation = 0.dp
+        elevation = 0.dp,
     ) {
-        Column(modifier = Modifier.padding(16.dp)) {
+        Column {
             content()
         }
     }

settings.gradle

@@ -78,6 +78,10 @@ include ':lib_service'
 include ':lib_theme'
 include ':lib_utils'
 
+if (file('../Android-Common-Libraries').exists()) {
+    includeBuild('../Android-Common-Libraries')
+}
+
 //if (file('../Android-BLE-Library').exists()) {
 //    includeBuild('../Android-BLE-Library')
 //}