Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ipc 470 landscape mode for review screen #640

Open
wants to merge 3 commits into
base: feat(internal-payment-sdk)-Landscape-mode
Choose a base branch
from
Open

Ipc 470 landscape mode for review screen #640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
376f0d4
feat(health-sdk): Added landscape layout for `ReviewFragment`
danicretu Dec 6, 2024
b003289
feat(internal-payment-sdk): Added landscape mode to `ReviewBottomSheet`
danicretu Dec 10, 2024
3bed51e
fix(internal-payment-sdk): Fix `detekt` issue
danicretu Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 80 additions & 69 deletions health-sdk/example-app/src/main/res/layout/fragment_order_details.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
android:background="@color/ghs_payment_input_background_color"
Expand All @@ -12,87 +11,99 @@
android:paddingHorizontal="@dimen/gps_large"
android:theme="@style/Theme.MaterialComponents.NoActionBar">

<LinearLayout
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/gps_large"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent">

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/recipient_input_layout"
style="@style/Example.Widget.MaterialComponents.TextInputLayout.FilledBox"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/gps_medium"
android:hint="@string/recipient"
app:boxBackgroundColor="#ffffff">
android:layout_marginTop="@dimen/gps_large"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/recipient"
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/recipient_input_layout"
style="@style/Example.Widget.MaterialComponents.TextInputLayout.FilledBox"
android:layout_width="match_parent"
style="@style/Example.Widget.TextInputEditText"
android:textColor="@color/black"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/gps_medium"
android:hint="@string/recipient"
app:layout_constraintTop_toTopOf="parent"
app:boxBackgroundColor="#ffffff">

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/iban_input_layout"
style="@style/Example.Widget.MaterialComponents.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/gps_medium"
android:hint="@string/iban"
app:boxBackgroundColor="#ffffff">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/recipient"
android:layout_width="match_parent"
style="@style/Example.Widget.TextInputEditText"
android:textColor="@color/black"
android:layout_height="wrap_content"
android:imeOptions="flagNoExtractUi"/>
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/iban"
style="@style/Example.Widget.TextInputEditText"
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/iban_input_layout"
style="@style/Example.Widget.MaterialComponents.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
android:layout_height="wrap_content"
android:hint="@string/iban"
app:layout_constraintTop_toBottomOf="@id/recipient_input_layout"
app:boxBackgroundColor="#ffffff">

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/amount_input_layout"
style="@style/Example.Widget.MaterialComponents.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/gps_medium"
android:hint="@string/amount"
app:boxBackgroundColor="#ffffff">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/iban"
style="@style/Example.Widget.TextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="flagNoExtractUi"/>
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/amount"
style="@style/Example.Widget.TextInputEditText"
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/amount_input_layout"
style="@style/Example.Widget.MaterialComponents.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/gps_medium"
android:hint="@string/amount"
app:layout_constraintTop_toBottomOf="@id/iban_input_layout"
app:boxBackgroundColor="#ffffff">

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/purpose_input_layout"
style="@style/Example.Widget.MaterialComponents.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/gps_medium"
android:hint="@string/reference_number"
app:boxBackgroundColor="#ffffff">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/amount"
style="@style/Example.Widget.TextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="flagNoExtractUi"/>
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/purpose"
style="@style/Example.Widget.TextInputEditText"
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/purpose_input_layout"
style="@style/Example.Widget.MaterialComponents.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

</LinearLayout>
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/gps_medium"
android:hint="@string/reference_number"
app:layout_constraintTop_toBottomOf="@id/amount_input_layout"
app:boxBackgroundColor="#ffffff">

<Button
android:id="@+id/pay_now_btn"
style="@style/GiniPaymentTheme.Widget.Button.UnelevatedButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/gps_large"
android:text="@string/pay_now"
android:backgroundTint="@color/ghs_accent_01"
app:layout_constraintBottom_toBottomOf="parent" />
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/purpose"
style="@style/Example.Widget.TextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="flagNoExtractUi"/>
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="@+id/pay_now_btn"
style="@style/GiniPaymentTheme.Widget.Button.UnelevatedButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/gps_large"
android:layout_marginTop="@dimen/gps_medium"
android:text="@string/pay_now"
android:backgroundTint="@color/ghs_accent_01"
app:layout_constraintTop_toBottomOf="@id/purpose_input_layout"
app:layout_constraintBottom_toBottomOf="parent" />
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
75 changes: 54 additions & 21 deletions health-sdk/sdk/src/main/java/net/gini/android/health/sdk/review/ReviewFragment.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,16 @@ package net.gini.android.health.sdk.review

import android.os.Build
import android.os.Bundle
import android.transition.ChangeBounds
import android.transition.Transition
import android.transition.TransitionListenerAdapter
import android.transition.TransitionManager
import android.transition.TransitionSet
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.ViewGroup.MarginLayoutParams
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.constraintlayout.widget.ConstraintSet
import androidx.core.view.ViewCompat
Expand All @@ -21,12 +28,7 @@ import androidx.lifecycle.Lifecycle
import androidx.lifecycle.ViewModelProvider
import androidx.lifecycle.lifecycleScope
import androidx.lifecycle.repeatOnLifecycle
import androidx.transition.ChangeBounds
import androidx.transition.Transition
import androidx.transition.TransitionListenerAdapter
import androidx.transition.TransitionManager
import androidx.transition.TransitionSet
import com.google.android.material.math.MathUtils.lerp
import com.google.android.material.animation.AnimationUtils.lerp
import com.google.android.material.snackbar.Snackbar
import com.google.android.material.tabs.TabLayoutMediator
import dev.chrisbanes.insetter.applyInsetter
Expand All @@ -48,6 +50,7 @@ import net.gini.android.internal.payment.utils.autoCleared
import net.gini.android.internal.payment.utils.extensions.getFontScale
import net.gini.android.internal.payment.utils.extensions.getLayoutInflaterWithGiniPaymentThemeAndLocale
import net.gini.android.internal.payment.utils.extensions.getLocaleStringResource
import net.gini.android.internal.payment.utils.extensions.isLandscapeOrientation
import net.gini.android.internal.payment.utils.extensions.wrappedWithGiniPaymentThemeAndLocale
import org.jetbrains.annotations.VisibleForTesting

Expand Down Expand Up @@ -124,7 +127,6 @@ class ReviewFragment private constructor(
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val documentPagerHeight = savedInstanceState?.getInt(PAGER_HEIGHT, -1) ?: -1

viewModel.userPreferences = UserPreferences(requireContext())

with(binding) {
Expand All @@ -138,6 +140,10 @@ class ReviewFragment private constructor(
binding.paymentDetailsInfoBar.updateLayoutParams<ConstraintLayout.LayoutParams> {
bottomMargin = -resources.getDimensionPixelSize(net.gini.android.internal.payment.R.dimen.gps_medium_12)
}

if (resources.isLandscapeOrientation()) {
setupLandscapeBehavior()
}
}

private fun GhsFragmentReviewBinding.setStateListeners() {
Expand Down Expand Up @@ -243,6 +249,7 @@ class ReviewFragment private constructor(
}

private fun GhsFragmentReviewBinding.removePagerConstraintAndSetPreviousHeightIfNeeded(savedHeight: Int) {
if (resources.isLandscapeOrientation()) return
root.post {
ConstraintSet().apply {
clone(constraintRoot)
Expand Down Expand Up @@ -339,24 +346,50 @@ class ReviewFragment private constructor(
}
}

private fun GhsFragmentReviewBinding.hideInfoBarAnimated() {
root.doOnLayout {
if (paymentDetailsInfoBar.isVisible) {
TransitionManager.beginDelayedTransition(root, TransitionSet().apply {
addTransition(ChangeBounds())
addListener(object : TransitionListenerAdapter() {
override fun onTransitionEnd(transition: Transition) {
super.onTransitionEnd(transition)
paymentDetailsInfoBar.isInvisible = true
private fun GhsFragmentReviewBinding.hideInfoBarAnimated() {
root.doOnLayout {
if (!resources.isLandscapeOrientation()) {
if (paymentDetailsInfoBar.isVisible) {
TransitionManager.beginDelayedTransition(root, TransitionSet().apply {
addTransition(ChangeBounds())
addListener(object : TransitionListenerAdapter() {
override fun onTransitionEnd(transition: Transition) {
super.onTransitionEnd(transition)
paymentDetailsInfoBar.isInvisible = true
}
})
})
paymentDetailsInfoBar.updateLayoutParams<ConstraintLayout.LayoutParams> {
topToTop = paymentDetailsScrollview.id
bottomToTop = ConstraintLayout.LayoutParams.UNSET
}
})
})
paymentDetailsInfoBar.updateLayoutParams<ConstraintLayout.LayoutParams> {
topToTop = paymentDetailsScrollview.id
bottomToTop = ConstraintLayout.LayoutParams.UNSET
}
} else {
paymentInfoLabel?.isVisible = false
}
}
}

private fun setupLandscapeBehavior() {
val dragHandle = binding.dragHandle
val fieldsLayout = binding.ghsPaymentDetails.findViewById<View>(net.gini.android.internal.payment.R.id.gps_fields_layout)
val bottomLayout = binding.ghsPaymentDetails.findViewById<View>(net.gini.android.internal.payment.R.id.gps_bottom_layout)

binding.root.post {
setupConstraintsForTabLayout((dragHandle?.height ?: 0) + bottomLayout.height)
}

dragHandle?.setOnTouchListener { v, event ->
fieldsLayout.alpha = if (isVisible) 0f else 1f
fieldsLayout.isVisible = !fieldsLayout.isVisible
false
}
}

private fun setupConstraintsForTabLayout(collapsedBottomSheetHeight: Int) {
val layoutParams = binding.indicator.layoutParams as MarginLayoutParams
layoutParams.bottomMargin = collapsedBottomSheetHeight + 20
binding.indicator.layoutParams = layoutParams
}

private fun getLocaleStringResource(resourceId: Int): String {
Expand Down
Loading
Loading