Merge pull request #161 from NordicSemiconductor/improvement/scanner

Scanner icons redesigned

Author: philips77

scanner-ble/src/main/java/no/nordicsemi/android/common/scanner/ScannerScreen.kt

@@ -33,6 +33,7 @@
 
 package no.nordicsemi.android.common.scanner
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -42,11 +43,13 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import no.nordicsemi.android.common.scanner.view.DeviceListItem
 import no.nordicsemi.android.common.scanner.view.FilterDialog
 import no.nordicsemi.android.common.scanner.view.ScannerAppBar
 import no.nordicsemi.android.common.scanner.view.ScannerView
 import no.nordicsemi.kotlin.ble.client.android.ScanResult
+import kotlin.time.Duration
 
 /**
  * A scanner screen with an AppBar and a list of devices.
@@ -56,6 +59,7 @@ import no.nordicsemi.kotlin.ble.client.android.ScanResult
  * @param modifier Modifier to be applied to the screen.
  * @param state The state of the scan filter. Use this to set a static filter and dynamic filters.
  * @param title Composable function to display the title of the App Bar.
+ * @param timeout The duration after which the scan will stop. Defaults to [Duration.INFINITE].
  * @param deviceItem Composable function to display each device in the list.
  */
 @Composable
@@ -64,7 +68,9 @@ fun ScannerScreen(
     onResultSelected: (ScannerScreenResult) -> Unit,
     modifier: Modifier = Modifier,
     state: ScanFilterState = rememberFilterState(),
+    timeout: Duration = Duration.INFINITE,
     title: @Composable () -> Unit = { Text(stringResource(id = R.string.scanner_screen)) },
+    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(8.dp),
     deviceItem: @Composable (ScanResult) -> Unit = { scanResult ->
         DeviceListItem(scanResult)
     },
@@ -94,8 +100,10 @@ fun ScannerScreen(
 
         ScannerView(
             state = state,
+            timeout = timeout,
             onScanningStateChanged = { isScanning = it },
             onScanResultSelected = { onResultSelected(DeviceSelected(it)) },
+            verticalArrangement = verticalArrangement,
             deviceItem = deviceItem,
         )
     }

scanner-ble/src/main/java/no/nordicsemi/android/common/scanner/view/ScanErrorView.kt

@@ -32,7 +32,6 @@
 package no.nordicsemi.android.common.scanner.view
 
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -47,14 +46,17 @@ import no.nordicsemi.android.common.ui.view.WarningView
 internal fun ScanErrorView(
     error: String?,
 ) {
-    val message = error ?: "Unknown reason"
+    var message = error ?: "Unknown reason"
+    if (!message.endsWith(".")) {
+       message += "."
+    }
     WarningView(
         modifier = Modifier
             .fillMaxSize()
             .padding(16.dp),
         painterResource = painterResource(R.drawable.outline_bluetooth_searching_24),
         title = stringResource(id = R.string.scan_failed_title),
-        hint = stringResource(id = R.string.scan_failed_info, message),
+        hint = message,
     )
 }
 

scanner-ble/src/main/java/no/nordicsemi/android/common/scanner/view/ScannerView.kt

@@ -34,6 +34,7 @@
 package no.nordicsemi.android.common.scanner.view
 
 import androidx.annotation.DrawableRes
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -44,7 +45,7 @@ import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.union
@@ -54,6 +55,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedCard
 import androidx.compose.material3.Text
 import androidx.compose.material3.pulltorefresh.PullToRefreshBox
 import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
@@ -70,6 +72,7 @@ import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -86,19 +89,25 @@ import no.nordicsemi.android.common.scanner.viewmodel.ScanningState
 import no.nordicsemi.android.common.scanner.viewmodel.UiState
 import no.nordicsemi.android.common.ui.view.CircularIcon
 import no.nordicsemi.android.common.ui.view.RssiIcon
+import no.nordicsemi.kotlin.ble.client.android.AdvertisingData
 import no.nordicsemi.kotlin.ble.client.android.ScanResult
-import kotlin.time.Duration.Companion.seconds
+import no.nordicsemi.kotlin.ble.client.android.preview.PreviewPeripheral
+import no.nordicsemi.kotlin.ble.core.Phy
+import no.nordicsemi.kotlin.ble.core.PrimaryPhy
+import kotlin.time.Duration
 import kotlin.uuid.ExperimentalUuidApi
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ScannerView(
     onScanResultSelected: (ScanResult) -> Unit,
     state: ScanFilterState = rememberFilterState(),
+    timeout: Duration = Duration.INFINITE,
     onScanningStateChanged: (Boolean) -> Unit = {},
+    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(8.dp),
     deviceItem: @Composable (ScanResult) -> Unit = { scanResult ->
         DeviceListItem(scanResult)
-    }
+    },
 ) {
     val viewModel = hiltViewModel<ScannerViewModel>()
     viewModel.setFilterState(state)
@@ -117,7 +126,7 @@ fun ScannerView(
                 // This would start scanning on each orientation change,
                 // but there is a flag set in the ViewModel to prevent that.
                 // User needs to pull to refresh to start scanning again.
-                viewModel.initiateScanning(timeout = 4.seconds)
+                viewModel.initiateScanning(timeout = timeout)
             }
 
             val pullToRefreshState = rememberPullToRefreshState()
@@ -132,6 +141,7 @@ fun ScannerView(
                     }
                 },
                 state = pullToRefreshState,
+                modifier = Modifier.background(MaterialTheme.colorScheme.background)
             ) {
                 val uiState by viewModel.uiState.collectAsStateWithLifecycle()
                 DisposableEffect(uiState.isScanning) {
@@ -144,7 +154,8 @@ fun ScannerView(
                     isLocationRequiredAndDisabled = isLocationRequiredAndDisabled,
                     uiState = uiState,
                     onClick = onScanResultSelected,
-                    deviceItem = deviceItem
+                    verticalArrangement = verticalArrangement,
+                    deviceItem = deviceItem,
                 )
             }
         }
@@ -156,6 +167,7 @@ internal fun ScannerContent(
     isLocationRequiredAndDisabled: Boolean,
     uiState: UiState,
     onClick: (ScanResult) -> Unit,
+    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(8.dp),
     deviceItem: @Composable (ScanResult) -> Unit,
 ) {
     when (uiState.scanningState) {
@@ -172,8 +184,9 @@ internal fun ScannerContent(
                     modifier = Modifier.fillMaxSize(),
                     contentPadding = WindowInsets.displayCutout
                         .only(WindowInsetsSides.Horizontal)
-                        .union(WindowInsets(left = 8.dp, right = 8.dp, top = 8.dp, bottom = 8.dp))
-                        .asPaddingValues()
+                        .union(WindowInsets(left = 16.dp, right = 16.dp, top = 16.dp, bottom = 16.dp))
+                        .asPaddingValues(),
+                    verticalArrangement = verticalArrangement,
                 ) {
                     DeviceListItems(
                         devices = uiState.scanningState.result,
@@ -197,7 +210,7 @@ internal fun LazyListScope.DeviceListItems(
     items(devices) { device ->
         Box(
             modifier = Modifier
-                .clip(RoundedCornerShape(16.dp))
+                .clip(RoundedCornerShape(4.dp))
                 .clickable { onScanResultSelected(device.latestScanResult) }
         ) {
             deviceItem(device.latestScanResult)
@@ -233,35 +246,129 @@ fun DeviceListItem(
     subtitle: String,
     trailingContent: @Composable () -> Unit = { },
 ) {
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(16.dp),
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(16.dp)
-    ) {
-        peripheralIcon?.let {
-            CircularIcon(
-                painter = it,
-                iconSize = 30.dp
-            )
-        }
-        Column(
-            verticalArrangement = Arrangement.spacedBy(4.dp),
-            modifier = Modifier.weight(1.0f)
+    OutlinedCard {
+        Row(
+            modifier = Modifier
+                .heightIn(min = 80.dp)
+                .padding(all = 16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(16.dp)
         ) {
-            Text(
-                text = title,
-                color = MaterialTheme.colorScheme.onSurface,
-                maxLines = 2,
-                overflow = TextOverflow.Ellipsis,
-                style = MaterialTheme.typography.titleMedium,
-            )
-            Text(
-                text = subtitle,
-                style = MaterialTheme.typography.bodyMedium,
-            )
+            peripheralIcon?.let {
+                CircularIcon(
+                    painter = it,
+                )
+            }
+            Column(
+                verticalArrangement = Arrangement.spacedBy(4.dp),
+                modifier = Modifier.weight(1.0f)
+            ) {
+                Text(
+                    text = title,
+                    color = MaterialTheme.colorScheme.onSurface,
+                    maxLines = 2,
+                    overflow = TextOverflow.Ellipsis,
+                    style = MaterialTheme.typography.titleMedium,
+                )
+                Text(
+                    text = subtitle,
+                    style = MaterialTheme.typography.bodyMedium,
+                    maxLines = 1,
+                )
+            }
+            trailingContent()
         }
-        trailingContent()
     }
 }
+
+@Preview
+@Composable
+private fun DeviceListItemPreview() {
+    DeviceListItem(
+        peripheralIcon = painterResource(R.drawable.outline_bluetooth_24),
+        title = "Nordic HRM",
+        subtitle = "12:34:56:78:9A:BC",
+        trailingContent = {
+            RssiIcon(rssi = -60)
+        }
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun ScannerContentPreview_empty() {
+    ScannerContent(
+        isLocationRequiredAndDisabled = false,
+        uiState = UiState(
+            isScanning = true,
+            scanningState = ScanningState.Loading,
+        ),
+        onClick = {},
+        deviceItem = { DeviceListItem(it) }
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun ScannerContentPreview_error() {
+    ScannerContent(
+        isLocationRequiredAndDisabled = false,
+        uiState = UiState(
+            isScanning = true,
+            scanningState = ScanningState.Error("Internal error"),
+        ),
+        onClick = {},
+        deviceItem = { DeviceListItem(it) }
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun ScannerContentPreview() {
+    val scope = rememberCoroutineScope()
+
+    ScannerContent(
+        isLocationRequiredAndDisabled = false,
+        uiState = UiState(
+            isScanning = true,
+            scanningState = ScanningState.DevicesDiscovered(
+                result = listOf(
+                    ScannedPeripheral(
+                        scanResult = ScanResult(
+                            peripheral = PreviewPeripheral(
+                                scope = scope,
+                                name = "Nordic HRM",
+                                address = "12:34:56:78:9A:BC",
+                            ),
+                            isConnectable = true,
+                            advertisingData = AdvertisingData(raw = byteArrayOf(0x02, 0x01, 0x06)),
+                            rssi = -60,
+                            txPowerLevel = null,
+                            primaryPhy = PrimaryPhy.PHY_LE_1M,
+                            secondaryPhy = Phy.PHY_LE_1M,
+                            timestamp = System.currentTimeMillis(),
+                        ),
+                    ),
+                    ScannedPeripheral(
+                        scanResult = ScanResult(
+                            peripheral = PreviewPeripheral(
+                                scope = scope,
+                                name = "A device with a very long name",
+                                address = "00:11:22:33:44:55",
+                            ),
+                            isConnectable = true,
+                            advertisingData = AdvertisingData(raw = byteArrayOf(0x02, 0x01, 0x06)),
+                            rssi = -60,
+                            txPowerLevel = null,
+                            primaryPhy = PrimaryPhy.PHY_LE_1M,
+                            secondaryPhy = Phy.PHY_LE_1M,
+                            timestamp = System.currentTimeMillis(),
+                        ),
+                    )
+                )
+            ),
+        ),
+        onClick = {},
+        deviceItem = { DeviceListItem(it) }
+    )
+}

scanner-ble/src/main/res/values/strings.xml

@@ -32,15 +32,14 @@
 <resources>
     <string name="scanner_screen">Scanner</string>
     <string name="scan_empty_title">"CAN\'T SEE YOUR DEVICE?"</string>
-    <string name="no_device_guide_info">1. Make sure the device is <b>turned on</b> and is connected to
-		a power source.\n\n2. Make sure the appropriate firmware and SoftDevice are flashed.</string>
+    <string name="no_device_guide_info">1. Make sure the device is connected to a power source and
+        <b>powered on</b>.\n\n2. Make sure the appropriate firmware and SoftDevice are flashed.</string>
     <string name="no_device_guide_location_info">3. Location is turned off. Most Android phones
         require it in order to scan for Bluetooth LE devices. If you are sure your
         device is advertising and it doesn\'t show up here, click the button below to
         enable Location.</string>
 
     <string name="scan_failed_title">SCANNING FAILED</string>
-    <string name="scan_failed_info"> Scanning failed with %s</string>
     <string name="enable_location">Enable location</string>
 
     <string name="filter_title">Filter</string>

ui/src/main/java/no/nordicsemi/android/common/ui/view/CircularIcon.kt

@@ -69,7 +69,7 @@ fun CircularIcon(
     modifier: Modifier = Modifier,
     backgroundColor: Color = MaterialTheme.colorScheme.secondary,
     enabled: Boolean = true,
-    size: Dp = 40.dp,
+    size: Dp = 36.dp,
     iconSize: Dp = 24.dp,
 ) {
     val padding = (size - iconSize) / 2