feat: Enhance the UI of the device card similar to google home (#2296)

atm1504 · mariobehling · commit 7a0f74e04d6c · 2019-07-05T11:04:49.000+02:00
* feat: Add manage device section in settings page (#2285) * feat: Add place for manage devices * feat: add manage device page ui * remove finish * feat: Enhance the card of connected devices * feat: Inflate the card from recyclerview * remove hardcoded dimensions * chnage speaker image
diff --git a/app/src/main/java/org/fossasia/susi/ai/device/connecteddevices/adapters/ConnectedDevicesAdapter.kt b/app/src/main/java/org/fossasia/susi/ai/device/connecteddevices/adapters/ConnectedDevicesAdapter.kt
@@ -11,7 +11,7 @@ import org.fossasia.susi.ai.rest.responses.susi.Device
 class ConnectedDevicesAdapter(private val connectedDevicesList: ArrayList<Device>) : RecyclerView.Adapter<ConnectedDevicesAdapter.ViewHolder>() {
 
     override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
-        val view = LayoutInflater.from(viewGroup.context).inflate(R.layout.device_layout, viewGroup, false)
+        val view = LayoutInflater.from(viewGroup.context).inflate(R.layout.item_speaker, viewGroup, false)
         return ViewHolder(view)
     }
 
@@ -20,17 +20,14 @@ class ConnectedDevicesAdapter(private val connectedDevicesList: ArrayList<Device
     }
 
     override fun onBindViewHolder(holder: ViewHolder, p1: Int) {
-        holder.ssid_name.text = connectedDevicesList[p1].name
-        holder.setup_option.text = connectedDevicesList[p1].room
+        holder.speaker_room.text = connectedDevicesList[p1].room.toString().trim() + " Speaker"
     }
 
     inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
-        internal var ssid_name: TextView
-        internal var setup_option: TextView
+        internal var speaker_room: TextView
 
         init {
-            ssid_name = itemView.findViewById(R.id.speakerName)
-            setup_option = itemView.findViewById(R.id.speakerSetUp)
+            speaker_room = itemView.findViewById(R.id.speaker_room)
         }
     }
 }
diff --git a/app/src/main/res/drawable-hdpi/smart_speaker.jpg b/app/src/main/res/drawable-hdpi/smart_speaker.jpg
diff --git a/app/src/main/res/drawable/ic_arrow_right_white_24dp.xml b/app/src/main/res/drawable/ic_arrow_right_white_24dp.xml
@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M8.59,16.34l4.58,-4.59 -4.58,-4.59L10,5.75l6,6 -6,6z"/>
+</vector>
diff --git a/app/src/main/res/layout/item_speaker.xml b/app/src/main/res/layout/item_speaker.xml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_marginBottom="@dimen/margin_moderate"
+    android:layout_height="wrap_content">
+
+    <android.support.v7.widget.CardView
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@color/md_grey_700"
+            android:orientation="vertical">
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="@dimen/height_room_card"
+                android:background="@drawable/smart_speaker"
+                android:orientation="vertical">
+
+                <android.support.v7.widget.AppCompatTextView
+                    android:id="@+id/speaker_room"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:padding="@dimen/padding_large"
+                    android:textColor="@color/blue_grey_300"
+                    android:textSize="@dimen/text_size_extra_large"
+                    android:textStyle="bold"
+                    tools:text="@string/music_services" />
+
+            </LinearLayout>
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@color/colorPrimary"
+                android:orientation="horizontal">
+
+                <android.support.v7.widget.AppCompatTextView
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_weight="6"
+                    android:padding="@dimen/padding_large"
+                    android:text="@string/say_hey_susi"
+                    android:textColor="@color/md_white_1000"
+                    android:textSize="@dimen/text_size_extra_large" />
+
+                <ImageButton
+                    android:layout_width="0dp"
+                    android:layout_height="match_parent"
+                    android:layout_weight="1"
+                    android:background="@color/colorPrimary"
+                    android:src="@drawable/ic_arrow_right_white_24dp" />
+
+            </LinearLayout>
+
+        </LinearLayout>
+
+    </android.support.v7.widget.CardView>
+
+</LinearLayout>
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
@@ -141,5 +141,6 @@
 
     <!-- Manage Devices dimensions -->
     <dimen name="height_width_spotify">40dp</dimen>
+    <dimen name="height_room_card">250dp</dimen>
 
 </resources>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -534,4 +534,6 @@
 
     <!-- Manage Devices -->
     <string name="music_services">Music Services</string>
+    <string name="say_hey_susi">Start with \"Hey Susi\"</string>
+
 </resources>

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ import org.fossasia.susi.ai.rest.responses.susi.Device`
`11`	`11`	`class ConnectedDevicesAdapter(private val connectedDevicesList: ArrayList<Device>) : RecyclerView.Adapter<ConnectedDevicesAdapter.ViewHolder>() {`
`12`	`12`
`13`	`13`	`override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {`
`14`		`- val view = LayoutInflater.from(viewGroup.context).inflate(R.layout.device_layout, viewGroup, false)`
	`14`	`+ val view = LayoutInflater.from(viewGroup.context).inflate(R.layout.item_speaker, viewGroup, false)`
`15`	`15`	`return ViewHolder(view)`
`16`	`16`	`}`
`17`	`17`
`@@ -20,17 +20,14 @@ class ConnectedDevicesAdapter(private val connectedDevicesList: ArrayList<Device`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`override fun onBindViewHolder(holder: ViewHolder, p1: Int) {`
`23`		`- holder.ssid_name.text = connectedDevicesList[p1].name`
`24`		`- holder.setup_option.text = connectedDevicesList[p1].room`
	`23`	`+ holder.speaker_room.text = connectedDevicesList[p1].room.toString().trim() + " Speaker"`
`25`	`24`	`}`
`26`	`25`
`27`	`26`	`inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {`
`28`		`- internal var ssid_name: TextView`
`29`		`- internal var setup_option: TextView`
	`27`	`+ internal var speaker_room: TextView`
`30`	`28`
`31`	`29`	`init {`
`32`		`- ssid_name = itemView.findViewById(R.id.speakerName)`
`33`		`- setup_option = itemView.findViewById(R.id.speakerSetUp)`
	`30`	`+ speaker_room = itemView.findViewById(R.id.speaker_room)`
`34`	`31`	`}`
`35`	`32`	`}`
`36`	`33`	`}`