improve visuals of payment options view

Author: ajungg

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog  
 All notable changes to this project will be documented in this file.
 
+## [0.34.4]
+
+### Changes
+- Improved visuals on PaymentOptionsView
+
 ## [0.34.3]
 
 ### Fixed

build.gradle

@@ -29,7 +29,7 @@ allprojects {
     }
 
     project.ext {
-        sdkVersion='0.34.3'
+        sdkVersion='0.34.4'
         versionCode=1
 
         compileSdkVersion=30

ui/src/main/java/io/snabble/sdk/ui/payment/PaymentOptionsView.kt

@@ -40,8 +40,6 @@ open class PaymentOptionsView @JvmOverloads constructor(
         recyclerView.adapter = adapter
         recyclerView.layoutManager = LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)
         recyclerView.itemAnimator = null
-        val dividerItemDecoration = DividerItemDecoration(context, LinearLayoutManager.VERTICAL)
-        recyclerView.addItemDecoration(dividerItemDecoration)
         adapter.submitList(getEntries())
 
         val listener = PaymentCredentialsStore.Callback {
@@ -110,6 +108,12 @@ open class PaymentOptionsView @JvmOverloads constructor(
                 it.type == PaymentCredentials.Type.PAYDIREKT
             }
 
+            if (globalList.size > 0) {
+                globalList.add(
+                    Entry(isDivider = true)
+                )
+            }
+
             globalList.add(
                 Entry(
                     text = "Paydirekt",
@@ -137,13 +141,19 @@ open class PaymentOptionsView @JvmOverloads constructor(
 
         projectsWithCreditCards
             .filter { it.brand == null }
-            .forEach { project ->
+            .forEachIndexed { i, project ->
                 val count = credentials.count {
                     it.appId == Snabble.getInstance().config.appId &&
                     it.type == PaymentCredentials.Type.CREDIT_CARD_PSD2 &&
                     it.projectId == project.id
                 }
 
+                if (i > 0) {
+                    projectList.add(
+                        Entry(isDivider = true)
+                    )
+                }
+
                 projectList.add(
                     Entry(
                         text = project.name,
@@ -251,13 +261,16 @@ open class PaymentOptionsView @JvmOverloads constructor(
 
     data class Entry(
         val isSectionHeader: Boolean = false,
-        val text: String,
+        val isDivider: Boolean = false,
+        val text: String? = null,
         val count: Int = 0,
         val icon: Int? = null,
         val project: Project? = null,
         val click: OnClickListener? = null,
     )
 
+    class DividerViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
+
     class HeaderViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
         val text: TextView = itemView.findViewById(R.id.text)
     }
@@ -272,15 +285,28 @@ open class PaymentOptionsView @JvmOverloads constructor(
         companion object {
             const val SECTION_HEADER = 0
             const val ENTRY = 1
+            const val DIVIDER = 2
         }
         override fun getItemViewType(position: Int): Int {
-            return if (getItem(position).isSectionHeader) SECTION_HEADER else ENTRY
+            val item = getItem(position)
+            return when {
+                item.isSectionHeader -> {
+                    SECTION_HEADER
+                }
+                item.isDivider -> {
+                    DIVIDER
+                }
+                else -> {
+                    ENTRY
+                }
+            }
         }
 
         override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
             val inflater = LayoutInflater.from(parent.context)
             return when(viewType) {
                 SECTION_HEADER -> HeaderViewHolder(inflater.inflate(R.layout.snabble_item_payment_options_header, parent, false))
+                DIVIDER -> DividerViewHolder(inflater.inflate(R.layout.snabble_divider, parent, false))
                 else -> EntryViewHolder(inflater.inflate(R.layout.snabble_item_payment_options_entry, parent, false))
             }
         }

ui/src/main/res/layout/snabble_divider.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<View xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="0.5dp"
+    android:background="?android:attr/listDivider" />

ui/src/main/res/layout/snabble_item_payment_options_entry.xml

@@ -6,12 +6,14 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content">
     <ImageView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:minWidth="24dp"
+        android:layout_width="36dp"
+        android:layout_height="36dp"
         android:layout_gravity="center_vertical"
-        android:scaleType="fitStart"
-        android:layout_margin="16dp"
+        android:scaleType="center"
+        android:layout_marginStart="16dp"
+        android:layout_marginEnd="16dp"
+        android:layout_marginTop="8dp"
+        android:layout_marginBottom="8dp"
         android:id="@+id/helper_image"
         tools:src="@drawable/snabble_ic_sepa_small" />