Changed balance view UI

common/src/main/java/io/novafoundation/nova/common/view/ExpandableView.kt

@@ -5,7 +5,6 @@ import android.content.Context
 import android.graphics.Rect
 import android.util.AttributeSet
 import android.view.View
-import android.view.ViewGroup
 import android.view.animation.AccelerateDecelerateInterpolator
 import androidx.annotation.DrawableRes
 import androidx.constraintlayout.widget.ConstraintLayout
@@ -29,14 +28,16 @@ class ExpandableView @JvmOverloads constructor(
     defStyle: Int = 0,
 ) : ConstraintLayout(context, attrs, defStyle) {
 
+    private var supportAnimation: Boolean = true
+    private var collapsedByDefault: Boolean = false
     private var chevronResId: Int? = null
     private var expandablePartResId: Int? = null
 
-    private var chevron: View? = null
-    private var expandablePart: View? = null
-
     private val expandCollapseAnimator = ValueAnimator()
 
+    private val chevron: View? by lazy { findViewByIdOrNull(chevronResId) }
+    private val expandablePart: View? by lazy { findViewByIdOrNull(expandablePartResId) }
+
     init {
         applyAttributes(attrs)
         setOnClickListener { toggle() }
@@ -58,6 +59,16 @@ class ExpandableView @JvmOverloads constructor(
         }
     }
 
+    override fun onFinishInflate() {
+        super.onFinishInflate()
+
+        if (collapsedByDefault) {
+            collapseImmediate()
+        } else {
+            expandImmediate()
+        }
+    }
+
     fun setImage(@DrawableRes imageRes: Int) {
         bannerImage.setImageResource(imageRes)
     }
@@ -74,10 +85,17 @@ class ExpandableView @JvmOverloads constructor(
         chevron?.rotation = -180f
     }
 
+    fun expandImmediate() {
+        expandablePart?.makeVisible()
+        chevron?.rotation = 0f
+    }
+
     private fun applyAttributes(attrs: AttributeSet?) {
         attrs?.let {
             val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ExpandableView)
 
+            supportAnimation = typedArray.getBoolean(R.styleable.ExpandableView_supportAnimation, true)
+            collapsedByDefault = typedArray.getBoolean(R.styleable.ExpandableView_collapsedByDefault, false)
             chevronResId = typedArray.getResourceIdOrNull(R.styleable.ExpandableView_chevronId)
             expandablePartResId = typedArray.getResourceIdOrNull(R.styleable.ExpandableView_expandableId)
 
@@ -94,26 +112,26 @@ class ExpandableView @JvmOverloads constructor(
     }
 
     private fun collapse() {
-        expandCollapseAnimator.removeAllListeners()
-        expandCollapseAnimator.setFloatValues(0f, -1f)
-        expandCollapseAnimator.doOnEnd { expandablePart?.makeGone() }
-        expandCollapseAnimator.start()
+        if (supportAnimation) {
+            expandCollapseAnimator.removeAllListeners()
+            expandCollapseAnimator.setFloatValues(0f, -1f)
+            expandCollapseAnimator.doOnEnd { expandablePart?.makeGone() }
+            expandCollapseAnimator.start()
+        } else {
+            collapseImmediate()
+        }
     }
 
     private fun expand() {
-        expandCollapseAnimator.removeAllListeners()
-        expandCollapseAnimator.setFloatValues(-1f, 0f)
-        expandCollapseAnimator.doOnStart { expandablePart?.makeVisible() }
-        expandCollapseAnimator.start()
-    }
-
-    override fun addView(child: View, params: ViewGroup.LayoutParams?) {
-        if (child.id == expandablePartResId) {
-            expandablePart = child
-        } else if (child.id == chevronResId) {
-            chevron = child
+        if (supportAnimation) {
+            expandCollapseAnimator.removeAllListeners()
+            expandCollapseAnimator.setFloatValues(-1f, 0f)
+            expandCollapseAnimator.doOnStart { expandablePart?.makeVisible() }
+            expandCollapseAnimator.start()
+        } else {
+            expandImmediate()
         }
-
-        super.addView(child, params)
     }
+
+    private fun findViewByIdOrNull(id: Int?): View? = id?.let { findViewById(it) }
 }

common/src/main/res/drawable/bg_chip_oval.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <solid android:color="@color/chips_background" />
+</shape>

common/src/main/res/values/attrs.xml

@@ -258,8 +258,10 @@
     </declare-styleable>
 
     <declare-styleable name="ExpandableView">
+        <attr name="supportAnimation" format="boolean" />
         <attr name="chevronId" format="reference" />
         <attr name="expandableId" format="reference" />
+        <attr name="collapsedByDefault" format="boolean" />
     </declare-styleable>
 
     <declare-styleable name="PromoBannerView">

feature-assets/src/main/java/io/novafoundation/nova/feature_assets/presentation/balance/detail/AssetDetailBalancesView.kt

@@ -12,8 +12,6 @@ class AssetDetailBalancesView @JvmOverloads constructor(
     defStyle: Int = 0,
 ) : BalancesView(context, attrs, defStyle) {
 
-    val total = item(R.string.common_total)
-
     val transferable = item(R.string.wallet_balance_transferable)
 
     val locked = item(R.string.wallet_balance_locked).apply {

feature-assets/src/main/java/io/novafoundation/nova/feature_assets/presentation/balance/detail/BalanceDetailFragment.kt

@@ -20,6 +20,7 @@ import io.novafoundation.nova.feature_assets.presentation.receive.view.LedgerNot
 import io.novafoundation.nova.feature_assets.presentation.transaction.history.showState
 import io.novafoundation.nova.feature_buy_api.presentation.mixin.BuyMixinUi
 import io.novafoundation.nova.feature_wallet_api.presentation.model.AssetPayload
+import io.novafoundation.nova.feature_wallet_api.presentation.view.setTotalAmount
 import io.novafoundation.nova.feature_wallet_api.presentation.view.showAmount
 import kotlinx.android.synthetic.main.fragment_balance_detail.balanceDetaiActions
 import kotlinx.android.synthetic.main.fragment_balance_detail.balanceDetailBack
@@ -128,7 +129,7 @@ class BalanceDetailFragment : BaseFragment<BalanceDetailViewModel>() {
             balanceDetailRateChange.setTextColorRes(asset.token.rateChangeColorRes)
             balanceDetailRateChange.text = asset.token.recentRateChange
 
-            balanceDetailsBalances.total.showAmount(asset.total)
+            balanceDetailsBalances.setTotalAmount(asset.total)
             balanceDetailsBalances.transferable.showAmount(asset.transferable)
             balanceDetailsBalances.locked.showAmount(asset.locked)
         }

feature-wallet-api/src/main/java/io/novafoundation/nova/feature_wallet_api/presentation/view/BalancesView.kt

@@ -8,15 +8,16 @@ import androidx.annotation.StringRes
 import io.novafoundation.nova.common.domain.ExtendedLoadingState
 import io.novafoundation.nova.common.utils.dp
 import io.novafoundation.nova.common.utils.setTextColorRes
-import io.novafoundation.nova.common.utils.updatePadding
-import io.novafoundation.nova.common.utils.useAttributes
+import io.novafoundation.nova.common.utils.setTextOrHide
 import io.novafoundation.nova.common.view.TableCellView
 import io.novafoundation.nova.common.view.shape.getBlockDrawable
 import io.novafoundation.nova.common.view.showLoadingState
 import io.novafoundation.nova.common.view.showValueOrHide
 import io.novafoundation.nova.feature_wallet_api.R
 import io.novafoundation.nova.feature_wallet_api.presentation.model.AmountModel
-import kotlinx.android.synthetic.main.view_balances.view.viewBalancesTitle
+import kotlinx.android.synthetic.main.view_balances.view.viewBalanceExpandableContainer
+import kotlinx.android.synthetic.main.view_balances.view.viewBalanceFiat
+import kotlinx.android.synthetic.main.view_balances.view.viewBalanceToken
 
 abstract class BalancesView @JvmOverloads constructor(
     context: Context,
@@ -28,25 +29,12 @@ abstract class BalancesView @JvmOverloads constructor(
         View.inflate(context, R.layout.view_balances, this)
         orientation = VERTICAL
 
-        val commonPadding = 16.dp(context)
-
-        updatePadding(
-            top = commonPadding,
-            start = commonPadding,
-            end = commonPadding,
-            bottom = 8.dp(context)
-        )
-
-        attrs?.let {
-            applyAttributes(it)
-        }
-
         background = context.getBlockDrawable()
     }
 
-    private fun applyAttributes(attributes: AttributeSet) = context.useAttributes(attributes, R.styleable.BalancesView) {
-        val title = it.getString(R.styleable.BalancesView_title)
-        viewBalancesTitle.text = title
+    fun setTotalBalance(token: CharSequence, fiat: CharSequence?) {
+        viewBalanceToken.text = token
+        viewBalanceFiat.setTextOrHide(fiat)
     }
 
     protected fun item(@StringRes titleRes: Int): TableCellView {
@@ -55,16 +43,22 @@ abstract class BalancesView @JvmOverloads constructor(
 
             valueSecondary.setTextColorRes(R.color.text_secondary)
             title.setTextColorRes(R.color.text_secondary)
+            setPadding(16.dp, 0, 16.dp, 0)
 
+            isClickable = true // To not propagate parent state to children. isDuplicateParentState not working in this case
             setTitle(titleRes)
         }
 
-        addView(item)
+        viewBalanceExpandableContainer.addView(item)
 
         return item
     }
 }
 
+fun BalancesView.setTotalAmount(amountModel: AmountModel) {
+    setTotalBalance(amountModel.token, amountModel.fiat)
+}
+
 fun TableCellView.showAmount(amountModel: AmountModel) {
     showValue(amountModel.token, amountModel.fiat)
 }

feature-wallet-api/src/main/res/layout/view_balances.xml

@@ -3,18 +3,79 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
+    android:layout_height="wrap_content"
     android:orientation="vertical">
 
-    <TextView
-        android:id="@+id/viewBalancesTitle"
-        style="@style/TextAppearance.NovaFoundation.Regular.SubHeadline"
-        android:layout_width="wrap_content"
+    <io.novafoundation.nova.common.view.ExpandableView
+        android:id="@+id/swapMainSettingsDetails"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:textColor="@color/text_secondary"
-        android:layout_marginBottom="14dp"
-        android:includeFontPadding="false"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        tools:text="@string/common_balance" />
+        android:paddingTop="16dp"
+        app:chevronId="@+id/viewBalanceChevron"
+        app:collapsedByDefault="true"
+        app:expandableId="@+id/viewBalanceExpandableContainer"
+        app:supportAnimation="false">
+
+        <TextView
+            android:id="@+id/viewBalanceTitle"
+            style="@style/TextAppearance.NovaFoundation.Regular.SubHeadline"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="16dp"
+            android:text="@string/wallet_your_balance"
+            android:textColor="@color/text_secondary"
+            app:layout_constraintStart_toStartOf="parent" />
+
+        <TextView
+            android:id="@+id/viewBalanceToken"
+            style="@style/TextAppearance.NovaFoundation.Bold.Title2"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="16dp"
+            android:layout_marginTop="8dp"
+            android:textColor="@color/text_primary"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/viewBalanceTitle"
+            tools:text="100 DOT" />
+
+        <TextView
+            android:id="@+id/viewBalanceFiat"
+            style="@style/TextAppearance.NovaFoundation.Regular.SubHeadline"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="16dp"
+            android:layout_marginTop="4dp"
+            android:textColor="@color/text_secondary"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/viewBalanceToken"
+            tools:text="500 $" />
+
+        <!--We use it to add extra space in bottom when balance is collapsed-->
+        <Space
+            android:layout_width="match_parent"
+            android:layout_height="16dp"
+            app:layout_constraintTop_toBottomOf="@+id/viewBalanceFiat" />
+
+        <ImageView
+            android:id="@+id/viewBalanceChevron"
+            android:layout_width="32dp"
+            android:layout_height="32dp"
+            android:layout_marginEnd="16dp"
+            android:background="@drawable/bg_chip_oval"
+            android:scaleType="centerInside"
+            android:src="@drawable/ic_chevron_up"
+            app:layout_constraintBottom_toBottomOf="@+id/viewBalanceToken"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="@+id/viewBalanceToken"
+            app:tint="@color/icon_secondary" />
+
+        <LinearLayout
+            android:id="@+id/viewBalanceExpandableContainer"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="4dp"
+            android:orientation="vertical"
+            app:layout_constraintTop_toBottomOf="@+id/viewBalanceFiat" />
+
+    </io.novafoundation.nova.common.view.ExpandableView>
 </merge>

feature-wallet-api/src/main/res/values/attrs.xml

@@ -8,10 +8,6 @@
         <attr name="actionIcon" />
     </declare-styleable>
 
-    <declare-styleable name="BalancesView">
-        <attr name="title" />
-    </declare-styleable>
-
     <declare-styleable name="PriceSectionView">
         <attr name="sectionTitle" />
     </declare-styleable>