agorise/crystal-wallet-android
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve transactions UI/UX

Browse source
This commit is contained in:
Severiano Jaramillo 2018-06-21 15:08:50 -05:00
parent f104e49a6c
commit 7084be4696
5 changed files with 240 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/build.gradle
View file

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

46
app/src/main/java/cy/agorise/crystalwallet/views/TransactionViewHolder.java
View file

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

10
app/src/main/res/drawable/ic_arrow_forward_receive.xml Normal file
View file

@ -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>

216
app/src/main/res/layout/transaction_list_item.xml
View file

@ -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" <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_width="match_parent"
@ -18,7 +18,7 @@
android:background="@drawable/transaction_list_item_background"> android:background="@drawable/transaction_list_item_background">
<TextView <TextView
android:id="@+id/fromText" android:id="@+id/tvFrom"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentStart="true" android:layout_alignParentStart="true"
@ -37,7 +37,7 @@
app:srcCompat="@drawable/ic_arrow_forward" /> app:srcCompat="@drawable/ic_arrow_forward" />
<TextView <TextView
android:id="@+id/toText" android:id="@+id/tvTo"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" android:layout_alignParentRight="true"
@ -53,10 +53,10 @@
android:layout_marginBottom="5dp" android:layout_marginBottom="5dp"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_below="@id/fromText"/> android:layout_below="@id/tvFrom"/>
<TextView <TextView
android:id="@+id/tvTransactionDate" android:id="@+id/tvDate"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_below="@id/sAfterFromTo" android:layout_below="@id/sAfterFromTo"
@ -68,17 +68,17 @@
android:textStyle="bold" /> android:textStyle="bold" />
<TextView <TextView
android:id="@+id/tvTransactionHour" android:id="@+id/tvTime"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_below="@id/tvTransactionDate" android:layout_below="@id/tvDate"
android:layout_marginLeft="5dp" android:layout_marginLeft="5dp"
android:layout_toStartOf="@+id/ivArrowFromTo" android:layout_toStartOf="@+id/ivArrowFromTo"
android:ems="10" android:ems="10"
android:text="15:01:18 CET" /> android:text="15:01:18 CET" />
<TextView <TextView
android:id="@+id/tvAmount" android:id="@+id/tvCryptoAmount"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentEnd="true" android:layout_alignParentEnd="true"
@ -93,12 +93,12 @@
android:textStyle="bold" /> android:textStyle="bold" />
<TextView <TextView
android:id="@+id/tvEquivalent" android:id="@+id/tvFiatEquivalent"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentEnd="true" android:layout_alignParentEnd="true"
android:layout_alignWithParentIfMissing="false" android:layout_alignWithParentIfMissing="false"
android:layout_below="@id/tvAmount" android:layout_below="@id/tvCryptoAmount"
android:layout_toEndOf="@+id/ivArrowFromTo" android:layout_toEndOf="@+id/ivArrowFromTo"
android:ems="10" android:ems="10"
android:inputType="text" android:inputType="text"
@ -109,3 +109,199 @@
</RelativeLayout> </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>

11
app/src/main/res/values/colors.xml
View file

@ -15,11 +15,8 @@
<color name="green">#147b00</color> <color name="green">#147b00</color>
<color name="black">#000000</color> <color name="black">#000000</color>
<color name="skyblue">#BFD1FF</color>
<color name="light_blue">#f2f6ff</color>
<color name="greencolor">#70882E</color> <color name="greencolor">#70882E</color>
<color name="red">#ff0000</color> <color name="red">#ff0000</color>
<color name="pinkColor">#FF4081</color>
<color name="redColor">#DD4739</color> <color name="redColor">#DD4739</color>
<color name="textColorPrimary">#FFFFFF</color> <color name="textColorPrimary">#FFFFFF</color>
@ -29,12 +26,8 @@
<color name="bottomBarColor">#dddddd</color> <color name="bottomBarColor">#dddddd</color>
<color name="whiteColor">#ffffff</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_start">#000000</color>
<color name="color_preloader_center">#000000</color> <color name="color_preloader_center">#000000</color>