Refactor relay list item to add keyboard support

2 files changed, 51 insertions, 36 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/relaylist/RelayItemHolder.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/relaylist/RelayItemHolder.kt
index e375bf2113..a215930194 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/relaylist/RelayItemHolder.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/relaylist/RelayItemHolder.kt
@@ -2,6 +2,7 @@ package net.mullvad.mullvadvpn.relaylist
 
 import android.support.v7.widget.RecyclerView.ViewHolder
 import android.view.View
+import android.view.ViewGroup.MarginLayoutParams
 import android.widget.ImageButton
 import android.widget.ImageView
 import android.widget.TextView
@@ -14,6 +15,8 @@ class RelayItemHolder(
 ) : ViewHolder(view) {
     private val name: TextView = view.findViewById(R.id.name)
     private val chevron: ImageButton = view.findViewById(R.id.chevron)
+    private val clickArea: View = view.findViewById(R.id.click_area)
+    private val relayStatus: View = view.findViewById(R.id.status)
     private val relayActive: ImageView = view.findViewById(R.id.relay_active)
     private val selectedIcon: View = view.findViewById(R.id.selected)
 
@@ -42,7 +45,7 @@ class RelayItemHolder(
 
     init {
         chevron.setOnClickListener { toggle() }
-        view.setOnClickListener { adapter.selectItem(item, this) }
+        clickArea.setOnClickListener { adapter.selectItem(item, this) }
     }
 
     private fun updateView() {
@@ -71,7 +74,7 @@ class RelayItemHolder(
                 }
             }
 
-            view.setEnabled(item.active)
+            clickArea.setEnabled(item.active)
 
             when (item.type) {
                 RelayItemType.Country -> setViewStyle(countryColor, countryPadding)
@@ -98,19 +101,17 @@ class RelayItemHolder(
 
     private fun setViewStyle(rowColor: Int, padding: Int) {
         var backgroundColor = rowColor
-        val paddingLeft = padding
-        val paddingTop = view.paddingTop
-        val paddingRight = view.paddingRight
-        val paddingBottom = view.paddingBottom
 
         if (selected) {
             backgroundColor = selectedColor
         }
 
-        view.apply {
-            setBackgroundColor(backgroundColor)
-            setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom)
+        (relayStatus.layoutParams as? MarginLayoutParams)?.let { parameters ->
+            parameters.leftMargin = padding
+            relayStatus.layoutParams = parameters
         }
+
+        view.setBackgroundColor(backgroundColor)
     }
 
     private fun toggle() {
diff --git a/android/src/main/res/layout/relay_list_item.xml b/android/src/main/res/layout/relay_list_item.xml
index c8af318778..e0b084901c 100644
--- a/android/src/main/res/layout/relay_list_item.xml
+++ b/android/src/main/res/layout/relay_list_item.xml
@@ -1,34 +1,48 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
-              android:paddingLeft="@dimen/country_row_padding"
               android:background="@color/blue"
-              android:orientation="horizontal"
-              android:gravity="center">
-    <FrameLayout android:layout_width="wrap_content"
-                 android:layout_height="wrap_content"
-                 android:layout_weight="0">
-        <ImageView android:id="@+id/relay_active"
-                   android:layout_width="wrap_content"
-                   android:layout_height="wrap_content"
-                   android:layout_gravity="center"
-                   android:src="@drawable/icon_relay_active" />
-        <ImageView android:id="@+id/selected"
-                   android:layout_width="wrap_content"
-                   android:layout_height="wrap_content"
-                   android:src="@drawable/icon_tick"
-                   android:visibility="invisible" />
-    </FrameLayout>
-    <TextView android:id="@+id/name"
-              android:layout_width="wrap_content"
-              android:layout_height="wrap_content"
-              android:layout_weight="1"
-              android:layout_marginHorizontal="8dp"
-              android:layout_marginVertical="14dp"
-              android:textColor="@color/white"
-              android:textSize="@dimen/text_medium_plus"
-              android:textStyle="bold"
-              android:text="" />
+              android:orientation="horizontal">
+    <RelativeLayout android:layout_width="wrap_content"
+                    android:layout_height="match_parent"
+                    android:layout_weight="1">
+        <View android:id="@+id/click_area"
+              android:layout_width="match_parent"
+              android:layout_height="match_parent"
+              android:layout_alignParentLeft="true"
+              android:layout_alignParentRight="true"
+              android:focusable="true"
+              android:clickable="true"
+              android:background="?android:attr/selectableItemBackground" />
+        <FrameLayout android:id="@+id/status"
+                     android:layout_width="wrap_content"
+                     android:layout_height="wrap_content"
+                     android:layout_alignParentLeft="true"
+                     android:layout_centerVertical="true"
+                     android:layout_marginLeft="@dimen/country_row_padding">
+            <ImageView android:id="@+id/relay_active"
+                       android:layout_width="wrap_content"
+                       android:layout_height="wrap_content"
+                       android:layout_gravity="center"
+                       android:src="@drawable/icon_relay_active" />
+            <ImageView android:id="@+id/selected"
+                       android:layout_width="wrap_content"
+                       android:layout_height="wrap_content"
+                       android:src="@drawable/icon_tick"
+                       android:visibility="invisible" />
+        </FrameLayout>
+        <TextView android:id="@+id/name"
+                  android:layout_width="wrap_content"
+                  android:layout_height="wrap_content"
+                  android:layout_marginHorizontal="8dp"
+                  android:layout_marginVertical="14dp"
+                  android:layout_alignParentRight="true"
+                  android:layout_toRightOf="@id/status"
+                  android:textColor="@color/white"
+                  android:textSize="@dimen/text_medium_plus"
+                  android:textStyle="bold"
+                  android:text="" />
+    </RelativeLayout>
     <ImageButton android:id="@+id/chevron"
                  android:layout_width="wrap_content"
                  android:layout_height="match_parent"