Improve dual pods layout

2026-09-15 10:46:12 -04:00 · 2022-01-23 19:04:23 +01:00
parent 1d5e13cc24
commit 9cd4cea63d
18 changed files with 501 additions and 60 deletions
@@ -2,6 +2,7 @@ package eu.darken.capod.main.ui.overview.cards.pods

 import android.graphics.Typeface
 import android.view.ViewGroup
+import androidx.core.view.isInvisible
 import eu.darken.capod.R
 import eu.darken.capod.common.lists.binding
 import eu.darken.capod.databinding.OverviewPodsAppleDualItemBinding
@@ -40,45 +41,49 @@ class DualApplePodsCardVH(parent: ViewGroup) :
            reception.append("\n(${getString(R.string.pods_yours)})")
        }

-        podLeft.apply {
-            val sb = StringBuilder(context.getString(R.string.pods_dual_left_label))
-            sb.append("\n").append(device.getBatteryLevelLeftPod(context))
-            when {
-                device.isLeftPodCharging -> sb.append("\n").append(getString(R.string.pods_charging_label))
-                device.isLeftPodInEar -> sb.append("\n").append(getString(R.string.pods_inear_label))
-                else -> {}
-            }
-            text = sb
+        // Left Pod
+        device.apply {
+            podLeftBatteryIcon.setImageResource(getBatteryDrawable(batteryLeftPodPercent))
+            podLeftBatteryLabel.text = getBatteryLevelLeftPod(context)
+
+            podLeftChargingIcon.isInvisible = !isLeftPodCharging
+            podLeftChargingLabel.isInvisible = !isLeftPodCharging
+
+            podLeftMicrophoneIcon.isInvisible = microPhonePod != Pod.LEFT
+            podLeftMicrophoneLabel.isInvisible = microPhonePod != Pod.LEFT
+
+            podLeftWearIcon.isInvisible = !isLeftPodInEar
+            podLeftWearLabel.isInvisible = !isLeftPodInEar
        }

-        podRight.apply {
-            val sb = StringBuilder(getString(R.string.pods_dual_right_label))
-            sb.append("\n").append(device.getBatteryLevelRightPod(context))
-            when {
-                device.isRightPodCharging -> sb.append("\n").append(getString(R.string.pods_charging_label))
-                device.isRightPodInEar -> sb.append("\n").append(getString(R.string.pods_inear_label))
-                else -> {}
-            }
-            text = sb
+        // Right Pod
+        device.apply {
+            podRightBatteryIcon.setImageResource(getBatteryDrawable(batteryRightPodPercent))
+            podRightBatteryLabel.text = getBatteryLevelRightPod(context)
+
+            podRightChargingIcon.isInvisible = !isRightPodCharging
+            podRightChargingLabel.isInvisible = !isRightPodCharging
+
+            podRightMicrophoneIcon.isInvisible = microPhonePod != Pod.RIGHT
+            podRightMicrophoneLabel.isInvisible = microPhonePod != Pod.RIGHT
+
+            podRightWearIcon.isInvisible = !isRightPodInEar
+            podRightWearLabel.isInvisible = !isRightPodInEar
        }

-        when (device.microPhonePod) {
-            Pod.LEFT -> podLeft.append("\n(${context.getString(R.string.pods_microphone_label)})")
-            Pod.RIGHT -> podRight.append("\n(${context.getString(R.string.pods_microphone_label)})")
-        }
+        // Case
+        device.apply {
+            podCaseBatteryIcon.setImageResource(getBatteryDrawable(batteryCasePercent))
+            podCaseBatteryLabel.text = getBatteryLevelCase(context)

-        podCase.apply {
-            val sb = StringBuilder(getString(R.string.pods_case_label))
-            sb.append("\n").append(device.getBatteryLevelCase(context))
-            if (device.isCaseCharging) sb.append("\n").append(getString(R.string.pods_charging_label))
-            when (device.caseLidState) {
-                LidState.OPEN -> sb.append("\n").append(context.getString(R.string.pods_case_status_open_label))
-                LidState.CLOSED -> sb.append("\n").append(context.getString(R.string.pods_case_status_closed_label))
-                LidState.NOT_IN_CASE,
-                LidState.UNKNOWN -> {
-                }
+            podCaseChargingIcon.isInvisible = !isCaseCharging
+            podCaseChargingLabel.isInvisible = !isCaseCharging
+
+            podCaseLidLabel.text = when (device.caseLidState) {
+                LidState.OPEN -> context.getString(R.string.pods_case_status_open_label)
+                LidState.CLOSED -> context.getString(R.string.pods_case_status_closed_label)
+                else -> context.getString(R.string.general_value_unknown_label)
            }
-            text = sb
        }

        status.apply {
@@ -1,8 +1,10 @@
 package eu.darken.capod.main.ui.overview.cards.pods

 import android.view.ViewGroup
+import androidx.annotation.DrawableRes
 import androidx.annotation.LayoutRes
 import androidx.viewbinding.ViewBinding
+import eu.darken.capod.R
 import eu.darken.capod.common.lists.BindableVH
 import eu.darken.capod.common.lists.differ.DifferItem
 import eu.darken.capod.common.lists.modular.ModularAdapter
@@ -15,6 +17,19 @@ abstract class PodDeviceVH<D : PodDeviceVH.Item, B : ViewBinding>(
    parent: ViewGroup
 ) : ModularAdapter.VH(layoutId, parent), BindableVH<D, B> {

+    @DrawableRes
+    fun getBatteryDrawable(percent: Float?): Int = when {
+        percent == null -> R.drawable.ic_baseline_battery_unknown_24
+        percent > 0.95f -> R.drawable.ic_baseline_battery_full_24
+        percent > 0.80f -> R.drawable.ic_baseline_battery_6_bar_24
+        percent > 0.65f -> R.drawable.ic_baseline_battery_5_bar_24
+        percent > 0.50f -> R.drawable.ic_baseline_battery_4_bar_24
+        percent > 0.35f -> R.drawable.ic_baseline_battery_3_bar_24
+        percent > 0.20f -> R.drawable.ic_baseline_battery_2_bar_24
+        percent > 0.05f -> R.drawable.ic_baseline_battery_1_bar_24
+        else -> R.drawable.ic_baseline_battery_0_bar_24
+    }
+
    interface Item : OverviewAdapter.Item {

        val now: Instant
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M17,5v16c0,0.55 -0.45,1 -1,1H8c-0.55,0 -1,-0.45 -1,-1V5c0,-0.55 0.45,-1 1,-1h2V2h4v2h2C16.55,4 17,4.45 17,5zM15,6H9v14h6V6z" />
+</vector>
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M17,5v16c0,0.55 -0.45,1 -1,1H8c-0.55,0 -1,-0.45 -1,-1V5c0,-0.55 0.45,-1 1,-1h2V2h4v2h2C16.55,4 17,4.45 17,5zM15,6H9v12h6V6z" />
+</vector>
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M17,5v16c0,0.55 -0.45,1 -1,1H8c-0.55,0 -1,-0.45 -1,-1V5c0,-0.55 0.45,-1 1,-1h2V2h4v2h2C16.55,4 17,4.45 17,5zM15,6H9v10h6V6z" />
+</vector>
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M17,5v16c0,0.55 -0.45,1 -1,1H8c-0.55,0 -1,-0.45 -1,-1V5c0,-0.55 0.45,-1 1,-1h2V2h4v2h2C16.55,4 17,4.45 17,5zM15,6H9v8h6V6z" />
+</vector>
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M17,5v16c0,0.55 -0.45,1 -1,1H8c-0.55,0 -1,-0.45 -1,-1V5c0,-0.55 0.45,-1 1,-1h2V2h4v2h2C16.55,4 17,4.45 17,5zM15,6H9v6h6V6z" />
+</vector>
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M17,5v16c0,0.55 -0.45,1 -1,1H8c-0.55,0 -1,-0.45 -1,-1V5c0,-0.55 0.45,-1 1,-1h2V2h4v2h2C16.55,4 17,4.45 17,5zM15,6H9v4h6V6z" />
+</vector>
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M17,5v16c0,0.55 -0.45,1 -1,1H8c-0.55,0 -1,-0.45 -1,-1V5c0,-0.55 0.45,-1 1,-1h2V2h4v2h2C16.55,4 17,4.45 17,5zM15,6H9v2h6V6z" />
+</vector>
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33v15.33C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V5.33C17,4.6 16.4,4 15.67,4z" />
+</vector>
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal"
+    android:autoMirrored="true">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M15.67,4L14,4L14,2h-4v2L8.33,4C7.6,4 7,4.6 7,5.33v15.33C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33L17,5.33C17,4.6 16.4,4 15.67,4zM12.95,17.95h-1.9v-1.9h1.9v1.9zM14.3,12.69s-0.38,0.42 -0.67,0.71c-0.48,0.48 -0.83,1.15 -0.83,1.6h-1.6c0,-0.83 0.46,-1.52 0.93,-2l0.93,-0.94c0.27,-0.27 0.44,-0.65 0.44,-1.06 0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5L9,11c0,-1.66 1.34,-3 3,-3s3,1.34 3,3c0,0.66 -0.27,1.26 -0.7,1.69z" />
+</vector>
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M3,3v8h8L11,3L3,3zM9,9L5,9L5,5h4v4zM3,13v8h8v-8L3,13zM9,19L5,19v-4h4v4zM13,3v8h8L21,3h-8zM19,9h-4L15,5h4v4zM13,13v8h8v-8h-8zM19,19h-4v-4h4v4z"
+        android:fillType="evenOdd" />
+</vector>
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M17,20c-0.29,0 -0.56,-0.06 -0.76,-0.15 -0.71,-0.37 -1.21,-0.88 -1.71,-2.38 -0.51,-1.56 -1.47,-2.29 -2.39,-3 -0.79,-0.61 -1.61,-1.24 -2.32,-2.53C9.29,10.98 9,9.93 9,9c0,-2.8 2.2,-5 5,-5s5,2.2 5,5h2c0,-3.93 -3.07,-7 -7,-7S7,5.07 7,9c0,1.26 0.38,2.65 1.07,3.9 0.91,1.65 1.98,2.48 2.85,3.15 0.81,0.62 1.39,1.07 1.71,2.05 0.6,1.82 1.37,2.84 2.73,3.55 0.51,0.23 1.07,0.35 1.64,0.35 2.21,0 4,-1.79 4,-4h-2c0,1.1 -0.9,2 -2,2zM7.64,2.64L6.22,1.22C4.23,3.21 3,5.96 3,9s1.23,5.79 3.22,7.78l1.41,-1.41C6.01,13.74 5,11.49 5,9s1.01,-4.74 2.64,-6.36zM11.5,9c0,1.38 1.12,2.5 2.5,2.5s2.5,-1.12 2.5,-2.5 -1.12,-2.5 -2.5,-2.5 -2.5,1.12 -2.5,2.5z" />
+</vector>
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M6.03,3.2C7.15,2.44 8.51,2 10,2c3.93,0 7,3.07 7,7c0,1.26 -0.38,2.65 -1.07,3.9c-0.02,0.04 -0.05,0.08 -0.08,0.13l-1.48,-1.48C14.77,10.69 15,9.8 15,9c0,-2.8 -2.2,-5 -5,-5C9.08,4 8.24,4.26 7.5,4.67L6.03,3.2zM17.21,14.38l1.43,1.43C20.11,13.93 21,11.57 21,9c0,-3.04 -1.23,-5.79 -3.22,-7.78l-1.42,1.42C17.99,4.26 19,6.51 19,9C19,11.02 18.33,12.88 17.21,14.38zM10,6.5c-0.21,0 -0.4,0.03 -0.59,0.08l3.01,3.01C12.47,9.4 12.5,9.21 12.5,9C12.5,7.62 11.38,6.5 10,6.5zM21.19,21.19L2.81,2.81L1.39,4.22l2.13,2.13C3.19,7.16 3,8.05 3,9h2c0,-0.36 0.05,-0.71 0.12,-1.05l6.61,6.61c-0.88,0.68 -1.78,1.41 -2.27,2.9c-0.5,1.5 -1,2.01 -1.71,2.38C7.56,19.94 7.29,20 7,20c-1.1,0 -2,-0.9 -2,-2H3c0,2.21 1.79,4 4,4c0.57,0 1.13,-0.12 1.64,-0.35c1.36,-0.71 2.13,-1.73 2.73,-3.55c0.32,-0.98 0.9,-1.43 1.71,-2.05c0.03,-0.02 0.05,-0.04 0.08,-0.06l6.62,6.62L21.19,21.19z" />
+</vector>
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M12,15c1.66,0 2.99,-1.34 2.99,-3L15,6c0,-1.66 -1.34,-3 -3,-3S9,4.34 9,6v6c0,1.66 1.34,3 3,3zM17.3,12c0,3 -2.54,5.1 -5.3,5.1S6.7,15 6.7,12L5,12c0,3.42 2.72,6.23 6,6.72L11,22h2v-3.28c3.28,-0.48 6,-3.3 6,-6.72h-1.7z" />
+</vector>
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M16.01,7L16,3h-2v4h-4V3H8v4h-0.01C7,6.99 6,7.99 6,8.99v5.49L9.5,18v3h5v-3l3.5,-3.51v-5.5c0,-1 -1,-2 -1.99,-1.99z" />
+</vector>
@@ -87,61 +87,334 @@
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="top"
-            app:constraint_referenced_ids="pod_left,pod_case,pod_right" />
+            app:constraint_referenced_ids="pod_left_container,pod_case_container,pod_right_container" />

-        <com.google.android.material.textview.MaterialTextView
-            android:id="@+id/pod_left"
-            style="@style/TextAppearance.MaterialComponents.Body2"
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/pod_left_container"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="8dp"
-            android:gravity="center_horizontal"
-            app:drawableTopCompat="@drawable/ic_airpod_left_24"
+            android:minHeight="108dp"
            app:layout_constraintBottom_toTopOf="@id/barrier_bottom"
-            app:layout_constraintEnd_toStartOf="@id/pod_case"
+            app:layout_constraintEnd_toStartOf="@id/pod_case_container"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/barrier_top"
-            app:layout_constraintVertical_bias="0.0"
-            tools:text="Left pod\n100%\n(Primary)" />
+            app:layout_constraintVertical_bias="0.0">

-        <com.google.android.material.textview.MaterialTextView
-            android:id="@+id/pod_case"
-            style="@style/TextAppearance.MaterialComponents.Body2"
+            <ImageView
+                android:id="@+id/pod_left_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_airpod_left_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_left_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_left_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_left_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:text="@string/pods_dual_left_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_left_icon"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <ImageView
+                android:id="@+id/pod_left_battery_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_baseline_battery_unknown_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_left_battery_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_left_battery_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_left_battery_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="2dp"
+                android:text="@string/general_value_unknown_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_left_battery_icon"
+                app:layout_constraintTop_toBottomOf="@id/pod_left_label" />
+
+            <ImageView
+                android:id="@+id/pod_left_charging_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_baseline_power_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_left_charging_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_left_charging_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_left_charging_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="2dp"
+                android:text="@string/pods_charging_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_left_charging_icon"
+                app:layout_constraintTop_toBottomOf="@id/pod_left_battery_label" />
+
+            <ImageView
+                android:id="@+id/pod_left_microphone_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_baseline_keyboard_voice_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_left_microphone_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_left_microphone_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_left_microphone_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="2dp"
+                android:text="@string/pods_microphone_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_left_microphone_icon"
+                app:layout_constraintTop_toBottomOf="@id/pod_left_charging_label" />
+
+            <ImageView
+                android:id="@+id/pod_left_wear_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_baseline_hearing_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_left_wear_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_left_wear_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_left_wear_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="2dp"
+                android:text="@string/pods_inear_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_left_wear_icon"
+                app:layout_constraintTop_toBottomOf="@id/pod_left_microphone_label" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/pod_case_container"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="8dp"
-            android:gravity="center_horizontal"
-            app:drawableTopCompat="@drawable/ic_airpod_case_24"
            app:layout_constraintBottom_toTopOf="@id/barrier_bottom"
-            app:layout_constraintEnd_toStartOf="@id/pod_right"
-            app:layout_constraintStart_toEndOf="@id/pod_left"
+            app:layout_constraintEnd_toStartOf="@id/pod_right_container"
+            app:layout_constraintStart_toEndOf="@id/pod_left_container"
            app:layout_constraintTop_toBottomOf="@id/barrier_top"
-            app:layout_constraintVertical_bias="0.0"
-            tools:text="Case\n50%" />
+            app:layout_constraintVertical_bias="0.0">

-        <com.google.android.material.textview.MaterialTextView
-            android:id="@+id/pod_right"
-            style="@style/TextAppearance.MaterialComponents.Body2"
+            <ImageView
+                android:id="@+id/pod_case_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_airpod_case_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_case_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_case_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_case_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:text="@string/pods_case_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_case_icon"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <ImageView
+                android:id="@+id/pod_case_battery_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_baseline_battery_unknown_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_case_battery_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_case_battery_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_case_battery_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="2dp"
+                android:text="@string/general_value_unknown_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_case_battery_icon"
+                app:layout_constraintTop_toBottomOf="@id/pod_case_label" />
+
+            <ImageView
+                android:id="@+id/pod_case_charging_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_baseline_power_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_case_charging_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_case_charging_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_case_charging_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="2dp"
+                android:text="@string/pods_charging_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_case_charging_icon"
+                app:layout_constraintTop_toBottomOf="@id/pod_case_battery_label" />
+
+            <ImageView
+                android:id="@+id/pod_case_lid_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_baseline_grid_view_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_case_lid_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_case_lid_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_case_lid_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="2dp"
+                android:text="@string/pods_case_status_closed_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_case_lid_icon"
+                app:layout_constraintTop_toBottomOf="@id/pod_case_charging_label" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/pod_right_container"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="16dp"
-            android:gravity="center_horizontal"
-            app:drawableTopCompat="@drawable/ic_airpod_right_24"
            app:layout_constraintBottom_toTopOf="@id/barrier_bottom"
            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toEndOf="@id/pod_case"
+            app:layout_constraintStart_toEndOf="@id/pod_case_container"
            app:layout_constraintTop_toBottomOf="@id/barrier_top"
-            app:layout_constraintVertical_bias="0.0"
-            tools:text="R 90%" />
+            app:layout_constraintVertical_bias="0.0">
+
+            <ImageView
+                android:id="@+id/pod_right_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_airpod_right_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_right_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_right_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_right_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:text="@string/pods_dual_right_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_right_icon"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <ImageView
+                android:id="@+id/pod_right_battery_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_baseline_battery_unknown_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_right_battery_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_right_battery_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_right_battery_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="2dp"
+                android:text="@string/general_value_unknown_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_right_battery_icon"
+                app:layout_constraintTop_toBottomOf="@id/pod_right_label" />
+
+
+            <ImageView
+                android:id="@+id/pod_right_charging_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_baseline_power_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_right_charging_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_right_charging_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_right_charging_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="2dp"
+                android:text="@string/pods_charging_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_right_charging_icon"
+                app:layout_constraintTop_toBottomOf="@id/pod_right_battery_label" />
+
+            <ImageView
+                android:id="@+id/pod_right_microphone_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_baseline_keyboard_voice_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_right_microphone_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_right_microphone_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_right_microphone_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="2dp"
+                android:text="@string/pods_microphone_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_right_microphone_icon"
+                app:layout_constraintTop_toBottomOf="@id/pod_right_charging_label" />
+
+            <ImageView
+                android:id="@+id/pod_right_wear_icon"
+                style="@style/MiniTextIcon"
+                android:src="@drawable/ic_baseline_hearing_24"
+                app:layout_constraintBottom_toBottomOf="@id/pod_right_wear_label"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/pod_right_wear_label" />
+
+            <com.google.android.material.textview.MaterialTextView
+                android:id="@+id/pod_right_wear_label"
+                style="@style/TextAppearance.MaterialComponents.Body2"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="2dp"
+                android:text="@string/pods_inear_label"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/pod_right_wear_icon"
+                app:layout_constraintTop_toBottomOf="@id/pod_right_microphone_label" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
+

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier_bottom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="bottom"
-            app:constraint_referenced_ids="pod_left,pod_case,pod_right" />
+            app:constraint_referenced_ids="pod_left_container,pod_case_container,pod_right_container" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/status"
@@ -6,4 +6,10 @@
        <item name="android:layout_marginStart">8dp</item>
        <item name="android:layout_marginEnd">8dp</item>
    </style>
+
+    <style name="MiniTextIcon">
+        <item name="android:layout_height">20dp</item>
+        <item name="android:layout_width">20dp</item>
+        <item name="android:layout_marginEnd">8dp</item>
+    </style>
 </resources>