Improve transactions UI/UX

app/build.gradle

@@ -47,6 +47,7 @@ dependencies {
     implementation 'com.android.support:appcompat-v7:27.1.1'
     implementation 'com.android.support:support-v4:27.1.1'
     implementation 'com.android.support:design:27.1.1'
+    implementation 'com.android.support:cardview-v7:27.1.1'
     implementation 'com.android.support.constraint:constraint-layout:1.1.2'
     implementation 'android.arch.lifecycle:runtime:1.1.1'
     implementation 'android.arch.lifecycle:extensions:1.1.1'

app/src/main/java/cy/agorise/crystalwallet/views/TransactionViewHolder.java

@@ -1,26 +1,20 @@
 package cy.agorise.crystalwallet.views;
 
-import android.arch.lifecycle.LifecycleOwner;
 import android.arch.lifecycle.LiveData;
-import android.arch.lifecycle.Observer;
 import android.arch.lifecycle.ViewModelProviders;
 import android.content.Context;
 import android.content.Intent;
-import android.support.annotation.Nullable;
 import android.support.v4.app.Fragment;
 import android.support.v7.widget.RecyclerView;
 import android.view.View;
-import android.widget.RelativeLayout;
 import android.widget.TextView;
 
 import java.text.DateFormat;
 import java.text.SimpleDateFormat;
-import java.time.LocalDateTime;
 import java.util.TimeZone;
 
 import cy.agorise.crystalwallet.R;
 import cy.agorise.crystalwallet.activities.CryptoCoinTransactionReceiptActivity;
-import cy.agorise.crystalwallet.models.CryptoCoinTransaction;
 import cy.agorise.crystalwallet.models.CryptoCoinTransactionExtended;
 import cy.agorise.crystalwallet.models.CryptoCurrency;
 import cy.agorise.crystalwallet.models.CryptoNetAccount;
@@ -47,10 +41,10 @@ public class TransactionViewHolder extends RecyclerView.ViewHolder {
     /*
      * The view holding the transaction amount
      */
-    private TextView tvAmount;
+    private TextView tvCryptoAmount;
-    private TextView tvEquivalent;
+    private TextView tvFiatEquivalent;
-    private TextView tvTransactionDate;
+    private TextView tvDate;
-    private TextView tvTransactionHour;
+    private TextView tvTime;
     private View rootView;
 
     private Fragment fragment;
@@ -62,13 +56,13 @@ public class TransactionViewHolder extends RecyclerView.ViewHolder {
         //TODO: use ButterKnife to load this
         this.cryptoCoinTransactionId = -1;
 
-        rootView = itemView.findViewById(R.id.rlTransactionItem);
+        rootView = itemView.findViewById(R.id.rootView);
-        tvFrom = (TextView) itemView.findViewById(R.id.fromText);
+        tvFrom = itemView.findViewById(R.id.tvFrom);
-        tvTo = (TextView) itemView.findViewById(R.id.toText);
+        tvTo = itemView.findViewById(R.id.tvTo);
-        tvAmount = (TextView) itemView.findViewById(R.id.tvAmount);
+        tvDate = itemView.findViewById(R.id.tvDate);
-        tvEquivalent = (TextView) itemView.findViewById(R.id.tvEquivalent);
+        tvTime = itemView.findViewById(R.id.tvTime);
-        tvTransactionDate = (TextView) itemView.findViewById(R.id.tvTransactionDate);
+        tvCryptoAmount = itemView.findViewById(R.id.tvCryptoAmount);
-        tvTransactionHour = (TextView) itemView.findViewById(R.id.tvTransactionHour);
+        tvFiatEquivalent = itemView.findViewById(R.id.tvFiatEquivalent);
         this.fragment = fragment;
 
         rootView.setOnClickListener(new View.OnClickListener() {
@@ -104,10 +98,10 @@ public class TransactionViewHolder extends RecyclerView.ViewHolder {
     public void clear(){
         tvFrom.setText("loading...");
         tvTo.setText("");
-        tvAmount.setText("");
+        tvCryptoAmount.setText("");
-        tvEquivalent.setText("");
+        tvFiatEquivalent.setText("");
-        tvTransactionDate.setText("");
+        tvDate.setText("");
-        tvTransactionHour.setText("");
+        tvTime.setText("");
     }
 
     /*
@@ -140,8 +134,8 @@ public class TransactionViewHolder extends RecyclerView.ViewHolder {
             DateFormat hourFormat = new SimpleDateFormat("HH:mm:ss");
             hourFormat.setTimeZone(userTimeZone);
 
-            tvTransactionDate.setText(dateFormat.format(transaction.getDate()));
+            tvDate.setText(dateFormat.format(transaction.getDate()));
-            tvTransactionHour.setText(hourFormat.format(transaction.getDate()));
+            tvTime.setText(hourFormat.format(transaction.getDate()));
 
             tvFrom.setText(transaction.getFrom());
             tvTo.setText(transaction.getTo());
@@ -173,17 +167,17 @@ public class TransactionViewHolder extends RecyclerView.ViewHolder {
 
             String finalAmountText = "";
             if (transaction.getInput()) {
-                tvAmount.setTextColor(itemView.getContext().getResources().getColor(R.color.green));
+                tvCryptoAmount.setTextColor(itemView.getContext().getResources().getColor(R.color.green));
                 finalAmountText = "+ "+amountString
                         + " "
                         + cryptoCurrency.getName();
             } else {
-                tvAmount.setTextColor(itemView.getContext().getResources().getColor(R.color.red));
+                tvCryptoAmount.setTextColor(itemView.getContext().getResources().getColor(R.color.red));
                 finalAmountText = amountString
                         + " "
                         + cryptoCurrency.getName();
             }
-            tvAmount.setText(finalAmountText);
+            tvCryptoAmount.setText(finalAmountText);
             //This will load the transaction receipt when the user clicks this view
             /*itemView.setOnClickListener(new View.OnClickListener() {
                 @Override

app/src/main/res/drawable/ic_arrow_forward_receive.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24.0"
+    android:viewportHeight="24.0">
+    <path
+        android:fillColor="@color/receiveAmount"
+        android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
+</vector>

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

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?> <!--
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
@@ -18,7 +18,7 @@
         android:background="@drawable/transaction_list_item_background">
 
         <TextView
-            android:id="@+id/fromText"
+            android:id="@+id/tvFrom"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentStart="true"
@@ -37,7 +37,7 @@
             app:srcCompat="@drawable/ic_arrow_forward" />
 
         <TextView
-            android:id="@+id/toText"
+            android:id="@+id/tvTo"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentRight="true"
@@ -53,10 +53,10 @@
             android:layout_marginBottom="5dp"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_below="@id/fromText"/>
+            android:layout_below="@id/tvFrom"/>
 
         <TextView
-            android:id="@+id/tvTransactionDate"
+            android:id="@+id/tvDate"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_below="@id/sAfterFromTo"
@@ -68,17 +68,17 @@
             android:textStyle="bold" />
 
         <TextView
-            android:id="@+id/tvTransactionHour"
+            android:id="@+id/tvTime"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_below="@id/tvTransactionDate"
+            android:layout_below="@id/tvDate"
             android:layout_marginLeft="5dp"
             android:layout_toStartOf="@+id/ivArrowFromTo"
             android:ems="10"
             android:text="15:01:18 CET" />
 
         <TextView
-            android:id="@+id/tvAmount"
+            android:id="@+id/tvCryptoAmount"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentEnd="true"
@@ -93,12 +93,12 @@
             android:textStyle="bold" />
 
         <TextView
-            android:id="@+id/tvEquivalent"
+            android:id="@+id/tvFiatEquivalent"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentEnd="true"
             android:layout_alignWithParentIfMissing="false"
-            android:layout_below="@id/tvAmount"
+            android:layout_below="@id/tvCryptoAmount"
             android:layout_toEndOf="@+id/ivArrowFromTo"
             android:ems="10"
             android:inputType="text"
@@ -108,4 +108,200 @@
 
 
     </RelativeLayout>
-</LinearLayout>
+</LinearLayout>
+
+-->
+<android.support.v7.widget.CardView
+    xmlns:card_view="http://schemas.android.com/apk/res-auto"
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_gravity="center"
+    card_view:cardElevation="4dp"
+    card_view:cardCornerRadius="4dp"
+    android:layout_margin="4dp">
+
+    <android.support.constraint.ConstraintLayout
+        android:id="@+id/rootView"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:clickable="true"
+        android:focusable="true"
+        android:foreground="?android:attr/selectableItemBackground">
+
+        <android.support.constraint.Guideline
+            android:id="@+id/firstVerticalGuideline"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:orientation="vertical"
+            app:layout_constraintGuide_percent="0.05"/>
+
+        <android.support.constraint.Guideline
+            android:id="@+id/secondVerticalGuideline"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:orientation="vertical"
+            app:layout_constraintGuide_percent="0.45"/>
+
+        <android.support.constraint.Guideline
+            android:id="@+id/thirdVerticalGuideline"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:orientation="vertical"
+            app:layout_constraintGuide_percent="0.55"/>
+
+        <android.support.constraint.Guideline
+            android:id="@+id/fourthVerticalGuideline"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:orientation="vertical"
+            app:layout_constraintGuide_percent="0.95"/>
+
+        <android.support.constraint.Guideline
+            android:id="@+id/centeredVerticalGuideline"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:orientation="vertical"
+            app:layout_constraintGuide_percent="0.50"/>
+
+        <View
+            android:id="@+id/vPaymentDirection"
+            android:layout_width="8dp"
+            android:layout_height="0dp"
+            android:background="@color/receiveAmount"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toStartOf="parent"/>
+
+        <TextView
+            android:id="@+id/tvFrom"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="16dp"
+            android:maxLines="1"
+            tools:text="denzel-washington"
+            android:textAppearance="@android:style/TextAppearance.Material.Body1"
+            android:textColor="@color/gray"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toEndOf="@id/firstVerticalGuideline"
+            app:layout_constraintEnd_toStartOf="@id/secondVerticalGuideline"/>
+
+        <ImageView
+            android:id="@+id/ivDirectionArrow"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:src="@drawable/ic_arrow_forward_receive"
+            app:layout_constraintTop_toTopOf="@id/tvFrom"
+            app:layout_constraintBottom_toBottomOf="@id/tvFrom"
+            app:layout_constraintStart_toEndOf="@id/secondVerticalGuideline"
+            app:layout_constraintEnd_toStartOf="@id/thirdVerticalGuideline"
+            tools:ignore="ContentDescription" />
+
+        <TextView
+            android:id="@+id/tvTo"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:maxLines="1"
+            tools:text="joes-grocery-13"
+            android:textAppearance="@android:style/TextAppearance.Material.Body1"
+            android:textColor="@color/gray"
+            android:textAlignment="textEnd"
+            app:layout_constraintTop_toTopOf="@id/tvFrom"
+            app:layout_constraintStart_toEndOf="@id/thirdVerticalGuideline"
+            app:layout_constraintEnd_toStartOf="@id/fourthVerticalGuideline"/>
+
+        <View
+            android:id="@+id/vSeparator"
+            android:layout_width="0dp"
+            android:layout_height="1dp"
+            android:layout_marginTop="12dp"
+            android:background="@color/lightGray"
+            app:layout_constraintTop_toBottomOf="@id/tvFrom"
+            app:layout_constraintStart_toEndOf="@id/firstVerticalGuideline"
+            app:layout_constraintEnd_toStartOf="@id/fourthVerticalGuideline" />
+
+        <LinearLayout
+            android:id="@+id/llMemo"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            android:visibility="gone"
+            card_view:layout_constraintTop_toBottomOf="@id/vSeparator"
+            card_view:layout_constraintStart_toEndOf="@id/firstVerticalGuideline"
+            card_view:layout_constraintEnd_toStartOf="@id/fourthVerticalGuideline">
+
+            <TextView
+                android:id="@+id/tvMemo"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="12dp"
+                android:maxLines="2"
+                android:textAppearance="@android:style/TextAppearance.Material.Body1"
+                tools:text="Here is a memo if exists and can span up to 2 lines, if it get lager we will have problems with the rendering"/>
+
+            <View
+                android:layout_width="match_parent"
+                android:layout_height="1dp"
+                android:layout_marginTop="12dp"
+                android:background="@color/lightGray"/>
+
+        </LinearLayout>
+
+        <TextView
+            android:id="@+id/tvDate"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="12dp"
+            android:maxLines="1"
+            tools:text="02 Oct"
+            android:textColor="@color/black"
+            android:textAppearance="@android:style/TextAppearance.Material.Body1"
+            app:layout_constraintTop_toBottomOf="@id/llMemo"
+            app:layout_constraintStart_toEndOf="@id/firstVerticalGuideline"
+            app:layout_constraintEnd_toStartOf="@id/centeredVerticalGuideline"/>
+
+        <TextView
+            android:id="@+id/tvTime"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:maxLines="1"
+            tools:text="15:01:18 CET"
+            android:textAppearance="@android:style/TextAppearance.Material.Body1"
+            android:textColor="@color/gray"
+            app:layout_constraintTop_toBottomOf="@+id/tvDate"
+            app:layout_constraintStart_toEndOf="@id/firstVerticalGuideline"
+            app:layout_constraintEnd_toStartOf="@id/centeredVerticalGuideline"/>
+
+        <TextView
+            android:id="@+id/tvCryptoAmount"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:maxLines="1"
+            tools:text="1234567.1234 BTS"
+            android:textColor="@color/black"
+            android:textAppearance="@android:style/TextAppearance.Material.Body1"
+            android:textAlignment="textEnd"
+            app:layout_constraintTop_toTopOf="@id/tvDate"
+            app:layout_constraintStart_toEndOf="@id/centeredVerticalGuideline"
+            app:layout_constraintEnd_toStartOf="@id/fourthVerticalGuideline" />
+
+        <TextView
+            android:id="@+id/tvFiatEquivalent"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="16dp"
+            android:maxLines="1"
+            tools:text="4119.75 $"
+            android:textAppearance="@android:style/TextAppearance.Material.Body1"
+            android:textColor="@color/gray"
+            android:textAlignment="textEnd"
+            app:layout_constraintTop_toBottomOf="@+id/tvCryptoAmount"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toEndOf="@id/centeredVerticalGuideline"
+            app:layout_constraintEnd_toStartOf="@id/fourthVerticalGuideline"/>
+
+    </android.support.constraint.ConstraintLayout>
+
+</android.support.v7.widget.CardView>

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

@@ -15,11 +15,8 @@
     <color name="green">#147b00</color>
 
     <color name="black">#000000</color>
-    <color name="skyblue">#BFD1FF</color>
-    <color name="light_blue">#f2f6ff</color>
     <color name="greencolor">#70882E</color>
     <color name="red">#ff0000</color>
-    <color name="pinkColor">#FF4081</color>
     <color name="redColor">#DD4739</color>
 
     <color name="textColorPrimary">#FFFFFF</color>
@@ -29,12 +26,8 @@
     <color name="bottomBarColor">#dddddd</color>
 
     <color name="whiteColor">#ffffff</color>
-    <color name="receive_amount">#669900</color>
+    <color name="receiveAmount">#669900</color>
-    <color name="receive_amount_light">#c5e1a5</color>
+    <color name="sendAmount">#DC473A</color>
-    <color name="send_amount">#DC473A</color>
-    <color name="send_amount_light">#ef9a9a</color>
-    <color name="transactionsHeader">#BFE5F5</color>
-    <color name="transactionsseparator">#CCCCCC</color>
 
     <color name="color_preloader_start">#000000</color>
     <color name="color_preloader_center">#000000</color>