Refactor DeviceTypeView using jetpack compose

app/build.gradle.kts

@@ -422,6 +422,8 @@ dependencies {
     implementation(libs.androidx.collection.ktx)
     implementation(libs.androidx.compose.foundation)
     implementation(libs.androidx.compose.material3)
+    debugImplementation(libs.androidx.compose.preview)
+    debugImplementation(libs.androidx.compose.ui.tooling)
     implementation(libs.androidx.constraintlayout)
     implementation(libs.androidx.coordinatorlayout)
     implementation(libs.androidx.core.ktx)

app/src/main/java/com/weatherxm/ui/Navigator.kt

@@ -329,40 +329,19 @@ class Navigator(private val analytics: AnalyticsWrapper) {
         )
     }
 
-    fun showClaimWifiFlow(
+    fun showClaimFlow(
         activityResultLauncher: ActivityResultLauncher<Intent>?,
         context: Context,
         deviceType: DeviceType
     ) {
-        val intent = Intent(context, ClaimWifiActivity::class.java)
-            .addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP or Intent.FLAG_ACTIVITY_CLEAR_TOP)
-            .putExtra(ARG_DEVICE_TYPE, deviceType as Parcelable)
-        if (activityResultLauncher == null) {
-            context.startActivity(intent)
-        } else {
-            activityResultLauncher.launch(intent)
+        val activity = when (deviceType) {
+            DeviceType.M5_WIFI, DeviceType.D1_WIFI -> ClaimWifiActivity::class.java
+            DeviceType.PULSE_4G -> ClaimPulseActivity::class.java
+            DeviceType.HELIUM -> ClaimHeliumActivity::class.java
         }
-    }
-
-    fun showClaimHeliumFlow(
-        activityResultLauncher: ActivityResultLauncher<Intent>?,
-        context: Context
-    ) {
-        val intent = Intent(context, ClaimHeliumActivity::class.java)
-            .addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP or Intent.FLAG_ACTIVITY_CLEAR_TOP)
-        if (activityResultLauncher == null) {
-            context.startActivity(intent)
-        } else {
-            activityResultLauncher.launch(intent)
-        }
-    }
-
-    fun showClaimPulseFlow(
-        activityResultLauncher: ActivityResultLauncher<Intent>?,
-        context: Context
-    ) {
-        val intent = Intent(context, ClaimPulseActivity::class.java)
+        val intent = Intent(context, activity)
             .addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP or Intent.FLAG_ACTIVITY_CLEAR_TOP)
+            .putExtra(ARG_DEVICE_TYPE, deviceType as Parcelable)
         if (activityResultLauncher == null) {
             context.startActivity(intent)
         } else {

app/src/main/java/com/weatherxm/ui/claimdevice/selectstation/SelectStationTypeActivity.kt

@@ -3,11 +3,26 @@ package com.weatherxm.ui.claimdevice.selectstation
 import android.app.Activity
 import android.os.Bundle
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Arrangement.spacedBy
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import com.weatherxm.R
 import com.weatherxm.analytics.AnalyticsService
 import com.weatherxm.databinding.ActivityClaimSelectStationBinding
 import com.weatherxm.ui.common.DeviceType
 import com.weatherxm.ui.common.classSimpleName
 import com.weatherxm.ui.components.BaseActivity
+import com.weatherxm.ui.components.compose.CardViewClickable
+import com.weatherxm.ui.components.compose.MediumText
 
 class SelectStationTypeActivity : BaseActivity() {
     private lateinit var binding: ActivityClaimSelectStationBinding
@@ -29,20 +44,47 @@ class SelectStationTypeActivity : BaseActivity() {
             finish()
         }
 
-        binding.m5WifiCard.listener {
-            navigator.showClaimWifiFlow(claimingLauncher, this, DeviceType.M5_WIFI)
-        }
-
-        binding.d1WifiCard.listener {
-            navigator.showClaimWifiFlow(claimingLauncher, this, DeviceType.D1_WIFI)
-        }
-
-        binding.heliumCard.listener {
-            navigator.showClaimHeliumFlow(claimingLauncher, this)
-        }
-
-        binding.pulseCard.listener {
-            navigator.showClaimPulseFlow(claimingLauncher, this)
+        binding.deviceTypes.setContent {
+            Column(
+                verticalArrangement = spacedBy(dimensionResource(R.dimen.margin_normal))
+            ) {
+                Row(
+                    horizontalArrangement = spacedBy(dimensionResource(R.dimen.margin_normal))
+                ) {
+                    Column(Modifier.weight(1F)) {
+                        CardViewClickable(
+                            onClickListener = { startClaimingFlow(DeviceType.M5_WIFI) }
+                        ) {
+                            TypeContent(getString(R.string.m5_wifi), R.drawable.device_type_m5)
+                        }
+                    }
+                    Column(Modifier.weight(1F)) {
+                        CardViewClickable(
+                            onClickListener = { startClaimingFlow(DeviceType.D1_WIFI) }
+                        ) {
+                            TypeContent(getString(R.string.d1_wifi), R.drawable.device_type_d1)
+                        }
+                    }
+                }
+                Row(
+                    horizontalArrangement = spacedBy(dimensionResource(R.dimen.margin_normal))
+                ) {
+                    Column(Modifier.weight(1F)) {
+                        CardViewClickable(
+                            onClickListener = { startClaimingFlow(DeviceType.HELIUM) },
+                        ) {
+                            TypeContent(getString(R.string.helium), R.drawable.device_type_helium)
+                        }
+                    }
+                    Column(Modifier.weight(1F)) {
+                        CardViewClickable(
+                            onClickListener = { startClaimingFlow(DeviceType.PULSE_4G) },
+                        ) {
+                            TypeContent(getString(R.string.pulse_4g), R.drawable.device_type_pulse)
+                        }
+                    }
+                }
+            }
         }
     }
 
@@ -52,4 +94,21 @@ class SelectStationTypeActivity : BaseActivity() {
             AnalyticsService.Screen.CLAIM_DEVICE_TYPE_SELECTION, classSimpleName()
         )
     }
+
+    private fun startClaimingFlow(deviceType: DeviceType) {
+        navigator.showClaimFlow(claimingLauncher, this, deviceType)
+    }
+
+    @Suppress("FunctionNaming")
+    @Composable
+    fun TypeContent(name: String, imageResId: Int) {
+        Column(
+            modifier = Modifier.padding(dimensionResource(R.dimen.padding_normal)),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.margin_small))
+        ) {
+            Image(painter = painterResource(imageResId), contentDescription = null)
+            MediumText(text = name, fontWeight = FontWeight.Bold, colorRes = R.color.darkestBlue)
+        }
+    }
 }

app/src/main/java/com/weatherxm/ui/components/compose/CardView.kt

@@ -0,0 +1,30 @@
+package com.weatherxm.ui.components.compose
+
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.dimensionResource
+import com.weatherxm.R
+
+@Suppress("FunctionNaming")
+@Composable
+fun CardViewClickable(
+    radiusResource: Int = R.dimen.radius_large,
+    elevationResource: Int = R.dimen.elevation_normal,
+    onClickListener: () -> Unit,
+    content: @Composable (ColumnScope.() -> Unit)
+) {
+    Card(
+        colors = CardDefaults.cardColors(
+            containerColor = colorResource(R.color.colorSurface)
+        ),
+        onClick = { onClickListener() },
+        shape = RoundedCornerShape(dimensionResource(radiusResource)),
+        elevation = CardDefaults.cardElevation(dimensionResource(elevationResource))
+    ) {
+        content()
+    }
+}

app/src/main/java/com/weatherxm/ui/components/compose/Texts.kt

@@ -0,0 +1,23 @@
+package com.weatherxm.ui.components.compose
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.text.font.FontWeight
+import com.weatherxm.R
+
+@Suppress("FunctionNaming")
+@Composable
+fun MediumText(
+    text: String,
+    fontWeight: FontWeight = FontWeight.Normal,
+    colorRes: Int = R.color.colorOnSurface
+) {
+    Text(
+        text = text,
+        fontWeight = fontWeight,
+        color = colorResource(colorRes),
+        style = MaterialTheme.typography.bodyMedium
+    )
+}

app/src/main/res/layout/activity_claim_select_station.xml

@@ -43,53 +43,12 @@
             android:textStyle="bold"
             app:layout_constraintTop_toTopOf="parent" />
 
-        <com.weatherxm.ui.components.DeviceTypeCardView
-            android:id="@+id/m5WifiCard"
-            android:layout_width="0dp"
+        <androidx.compose.ui.platform.ComposeView
+            android:id="@+id/deviceTypes"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/margin_normal"
-            android:layout_marginEnd="@dimen/margin_small"
-            app:device_type_image="@drawable/device_type_m5"
-            app:device_type_title="@string/m5_wifi"
-            app:layout_constraintEnd_toStartOf="@id/d1WifiCard"
-            app:layout_constraintStart_toStartOf="parent"
+            android:layout_marginTop="@dimen/margin_large"
             app:layout_constraintTop_toBottomOf="@id/title" />
 
-        <com.weatherxm.ui.components.DeviceTypeCardView
-            android:id="@+id/d1WifiCard"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/margin_small"
-            app:device_type_image="@drawable/device_type_d1"
-            app:device_type_title="@string/d1_wifi"
-            app:layout_constraintBottom_toBottomOf="@id/m5WifiCard"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toEndOf="@id/m5WifiCard"
-            app:layout_constraintTop_toTopOf="@id/m5WifiCard" />
-
-        <com.weatherxm.ui.components.DeviceTypeCardView
-            android:id="@+id/heliumCard"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/margin_normal"
-            android:layout_marginEnd="@dimen/margin_small"
-            app:device_type_image="@drawable/device_type_helium"
-            app:device_type_title="@string/helium"
-            app:layout_constraintEnd_toStartOf="@id/pulseCard"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/m5WifiCard" />
-
-        <com.weatherxm.ui.components.DeviceTypeCardView
-            android:id="@+id/pulseCard"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/margin_small"
-            app:device_type_image="@drawable/device_type_pulse"
-            app:device_type_title="@string/pulse_4g"
-            app:layout_constraintBottom_toBottomOf="@id/heliumCard"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toEndOf="@id/heliumCard"
-            app:layout_constraintTop_toTopOf="@id/heliumCard" />
-
     </androidx.constraintlayout.widget.ConstraintLayout>
 </androidx.coordinatorlayout.widget.CoordinatorLayout>

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

@@ -60,10 +60,6 @@
     <declare-styleable name="RewardsQualityCardView">
         <attr name="reward_quality_title" format="string" />
     </declare-styleable>
-    <declare-styleable name="DeviceTypeCardView">
-        <attr name="device_type_image" format="reference" />
-        <attr name="device_type_title" format="string" />
-    </declare-styleable>
     <declare-styleable name="HeliumSetFrequencyView">
         <attr name="is_on_claiming" format="boolean" />
     </declare-styleable>