Improve transactions UI/UX
This commit is contained in:
parent
f104e49a6c
commit
7084be4696
5 changed files with 240 additions and 46 deletions
|
@ -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'
|
||||
|
|
|
@ -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 tvEquivalent;
|
||||
private TextView tvTransactionDate;
|
||||
private TextView tvTransactionHour;
|
||||
private TextView tvCryptoAmount;
|
||||
private TextView tvFiatEquivalent;
|
||||
private TextView tvDate;
|
||||
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);
|
||||
tvFrom = (TextView) itemView.findViewById(R.id.fromText);
|
||||
tvTo = (TextView) itemView.findViewById(R.id.toText);
|
||||
tvAmount = (TextView) itemView.findViewById(R.id.tvAmount);
|
||||
tvEquivalent = (TextView) itemView.findViewById(R.id.tvEquivalent);
|
||||
tvTransactionDate = (TextView) itemView.findViewById(R.id.tvTransactionDate);
|
||||
tvTransactionHour = (TextView) itemView.findViewById(R.id.tvTransactionHour);
|
||||
rootView = itemView.findViewById(R.id.rootView);
|
||||
tvFrom = itemView.findViewById(R.id.tvFrom);
|
||||
tvTo = itemView.findViewById(R.id.tvTo);
|
||||
tvDate = itemView.findViewById(R.id.tvDate);
|
||||
tvTime = itemView.findViewById(R.id.tvTime);
|
||||
tvCryptoAmount = itemView.findViewById(R.id.tvCryptoAmount);
|
||||
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("");
|
||||
tvEquivalent.setText("");
|
||||
tvTransactionDate.setText("");
|
||||
tvTransactionHour.setText("");
|
||||
tvCryptoAmount.setText("");
|
||||
tvFiatEquivalent.setText("");
|
||||
tvDate.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()));
|
||||
tvTransactionHour.setText(hourFormat.format(transaction.getDate()));
|
||||
tvDate.setText(dateFormat.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
|
||||
|
|
10
app/src/main/res/drawable/ic_arrow_forward_receive.xml
Normal file
10
app/src/main/res/drawable/ic_arrow_forward_receive.xml
Normal 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>
|
|
@ -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>
|
|
@ -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="receive_amount_light">#c5e1a5</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="receiveAmount">#669900</color>
|
||||
<color name="sendAmount">#DC473A</color>
|
||||
|
||||
<color name="color_preloader_start">#000000</color>
|
||||
<color name="color_preloader_center">#000000</color>
|
||||
|
|
Loading…
Reference in a new issue