Skip to content

Commit 168f871

Browse files
huntiehuntie
committed
Redesign DevLoadingView as a floating capsule (Android)
1 parent b1b8e01 commit 168f871

3 files changed

Lines changed: 213 additions & 85 deletions

File tree

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DefaultDevLoadingViewImplementation.kt‎

Lines changed: 186 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,26 @@
77

88
package com.facebook.react.devsupport
99

10-
import android.content.Context
10+
import android.animation.Animator
11+
import android.animation.AnimatorListenerAdapter
12+
import android.animation.AnimatorSet
13+
import android.animation.ObjectAnimator
1114
import android.graphics.Color
12-
import android.graphics.Rect
15+
import android.graphics.drawable.GradientDrawable
16+
import android.os.SystemClock
17+
import android.util.TypedValue
1318
import android.view.Gravity
1419
import android.view.LayoutInflater
20+
import android.view.View
1521
import android.view.ViewGroup
1622
import android.view.WindowManager
23+
import android.view.animation.AccelerateInterpolator
24+
import android.view.animation.DecelerateInterpolator
25+
import android.widget.ImageView
1726
import android.widget.PopupWindow
1827
import android.widget.TextView
28+
import androidx.core.view.ViewCompat
29+
import androidx.core.view.WindowInsetsCompat
1930
import com.facebook.common.logging.FLog
2031
import com.facebook.react.R
2132
import com.facebook.react.bridge.UiThreadUtil
@@ -24,14 +35,16 @@ import com.facebook.react.devsupport.interfaces.DevLoadingViewManager
2435
import java.util.Locale
2536

2637
/**
27-
* Default implementation of Dev Loading View Manager to display loading messages on top of the
28-
* screen. All methods are thread safe.
38+
* Default implementation of Dev Loading View Manager to display loading messages in a capsule at
39+
* the top of the screen. All methods are thread safe.
2940
*/
3041
public class DefaultDevLoadingViewImplementation(
3142
private val reactInstanceDevHelper: ReactInstanceDevHelper,
3243
) : DevLoadingViewManager {
3344
private var devLoadingView: TextView? = null
3445
private var devLoadingPopup: PopupWindow? = null
46+
private var hideAnimator: Animator? = null
47+
private var showTimeMs = 0L
3548

3649
override fun showMessage(message: String) {
3750
showMessage(message, color = null, backgroundColor = null, dismissButton = false)
@@ -78,10 +91,19 @@ public class DefaultDevLoadingViewImplementation(
7891
backgroundColor: Double?,
7992
dismissButton: Boolean,
8093
) {
81-
if (devLoadingPopup?.isShowing == true) {
82-
// already showing
94+
// A new message replaces one that is still animating out.
95+
hideAnimator?.cancel()
96+
showTimeMs = SystemClock.uptimeMillis()
97+
98+
val textColor = color?.toInt() ?: Color.WHITE
99+
val bgColor = backgroundColor?.toInt() ?: Color.rgb(64, 64, 64) // Default grey
100+
101+
val existingPopup = devLoadingPopup
102+
if (existingPopup?.isShowing == true) {
103+
applyContent(existingPopup.contentView, message, textColor, bgColor, dismissButton)
83104
return
84105
}
106+
85107
val currentActivity = reactInstanceDevHelper.currentActivity
86108
if (currentActivity == null) {
87109
FLog.e(
@@ -91,64 +113,52 @@ public class DefaultDevLoadingViewImplementation(
91113
return
92114
}
93115

94-
// PopupWindow#showAtLocation uses absolute screen position. In order for
95-
// loading view to be placed below status bar (if the status bar is present) we need to pass
96-
// an appropriate Y offset.
97116
try {
98-
val rectangle = Rect()
99-
currentActivity.window.decorView.getWindowVisibleDisplayFrame(rectangle)
100-
val topOffset = rectangle.top
101-
val inflater =
102-
currentActivity.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
103-
val rootView = inflater.inflate(R.layout.dev_loading_view, null) as ViewGroup
104-
val textView = rootView.findViewById<TextView>(R.id.loading_text)
105-
textView.text = message
106-
107-
val dismissButtonView = rootView.findViewById<android.widget.Button>(R.id.dismiss_button)
108-
109-
if (dismissButton) {
110-
dismissButtonView.visibility = android.view.View.VISIBLE
111-
} else {
112-
dismissButtonView.visibility = android.view.View.GONE
113-
}
114-
115-
// Use provided colors or defaults (matching iOS behavior)
116-
val textColor = color?.toInt() ?: Color.WHITE
117-
val bgColor = backgroundColor?.toInt() ?: Color.rgb(64, 64, 64) // Default grey
118-
119-
textView.setTextColor(textColor)
120-
rootView.setBackgroundColor(bgColor)
121-
122-
if (dismissButton) {
123-
dismissButtonView.setTextColor(textColor)
124-
125-
// Darken the background color for the button
126-
val red = (Color.red(bgColor) * 0.7).toInt()
127-
val green = (Color.green(bgColor) * 0.7).toInt()
128-
val blue = (Color.blue(bgColor) * 0.7).toInt()
129-
val darkerColor = Color.rgb(red, green, blue)
130-
131-
// Create rounded drawable for button
132-
val drawable = android.graphics.drawable.GradientDrawable()
133-
drawable.setColor(darkerColor)
134-
drawable.cornerRadius = 15 * rootView.resources.displayMetrics.density
135-
dismissButtonView.background = drawable
136-
137-
dismissButtonView.setOnClickListener { hideInternal() }
138-
}
139-
140-
// Allow tapping anywhere on the banner to dismiss
141-
rootView.setOnClickListener { hideInternal() }
117+
val decorView = currentActivity.window.decorView
118+
val inflater = LayoutInflater.from(currentActivity)
119+
val pill = inflater.inflate(R.layout.dev_loading_view, null) as ViewGroup
120+
applyContent(pill, message, textColor, bgColor, dismissButton)
121+
122+
// Sits 12dp below a top inset such as the status bar, or 16dp from the top edge without one,
123+
// centered and kept clear of the side insets with a 16dp margin.
124+
val insets =
125+
ViewCompat.getRootWindowInsets(decorView)
126+
?.getInsets(
127+
WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout()
128+
)
129+
val topInset = insets?.top ?: 0
130+
val sideInset = maxOf(insets?.left ?: 0, insets?.right ?: 0) + dpToPx(pill, 16f)
131+
val textView = pill.findViewById<TextView>(R.id.loading_text)
132+
val dismissButtonView = pill.findViewById<View>(R.id.dismiss_button)
133+
val dismissButtonWidth =
134+
if (dismissButton) {
135+
(dismissButtonView.layoutParams as ViewGroup.MarginLayoutParams).let {
136+
it.width + it.marginStart
137+
}
138+
} else {
139+
0
140+
}
141+
textView.maxWidth =
142+
decorView.width - 2 * sideInset - pill.paddingStart - pill.paddingEnd - dismissButtonWidth
143+
144+
pill.setOnClickListener { hideInternal() }
145+
dismissButtonView.setOnClickListener { hideInternal() }
142146

143147
val popup =
144148
PopupWindow(
145-
rootView,
146-
ViewGroup.LayoutParams.MATCH_PARENT,
149+
pill,
150+
ViewGroup.LayoutParams.WRAP_CONTENT,
147151
ViewGroup.LayoutParams.WRAP_CONTENT,
148152
)
149-
popup.showAtLocation(currentActivity.window.decorView, Gravity.NO_GRAVITY, 0, topOffset)
150-
devLoadingView = textView // Store the TextView for updateProgress()
153+
popup.showAtLocation(
154+
decorView,
155+
Gravity.TOP or Gravity.CENTER_HORIZONTAL,
156+
0,
157+
if (topInset > 0) topInset + dpToPx(pill, 12f) else dpToPx(pill, 16f),
158+
)
159+
devLoadingView = textView
151160
devLoadingPopup = popup
161+
animateIn(pill)
152162

153163
// TODO T164786028: Find out the root cause of the BadTokenException exception here
154164
} catch (e: WindowManager.BadTokenException) {
@@ -159,20 +169,135 @@ public class DefaultDevLoadingViewImplementation(
159169
}
160170
}
161171

172+
private fun applyContent(
173+
pill: View,
174+
message: String,
175+
textColor: Int,
176+
bgColor: Int,
177+
dismissButton: Boolean,
178+
) {
179+
pill.background =
180+
GradientDrawable().apply {
181+
setColor(bgColor)
182+
// Larger than any banner height, so the corners always form a capsule.
183+
cornerRadius = dpToPx(pill, 1000f).toFloat()
184+
}
185+
val textView = pill.findViewById<TextView>(R.id.loading_text)
186+
textView.text = message
187+
textView.setTextColor(textColor)
188+
189+
val dismissButtonView = pill.findViewById<ImageView>(R.id.dismiss_button)
190+
dismissButtonView.visibility = if (dismissButton) View.VISIBLE else View.GONE
191+
// The round button sits closer to the capsule's end than the text would.
192+
pill.setPaddingRelative(
193+
pill.paddingStart,
194+
pill.paddingTop,
195+
dpToPx(pill, if (dismissButton) 9f else 14f),
196+
pill.paddingBottom,
197+
)
198+
dismissButtonView.setColorFilter(textColor)
199+
dismissButtonView.background =
200+
GradientDrawable().apply {
201+
shape = GradientDrawable.OVAL
202+
setColor(
203+
Color.argb(51, Color.red(textColor), Color.green(textColor), Color.blue(textColor))
204+
)
205+
}
206+
}
207+
208+
private fun animateIn(pill: View) {
209+
pill.alpha = 0f
210+
pill.scaleX = HIDDEN_SCALE
211+
pill.scaleY = HIDDEN_SCALE
212+
pill.post {
213+
setHiddenPivot(pill)
214+
pill
215+
.animate()
216+
.alpha(1f)
217+
.scaleX(1f)
218+
.scaleY(1f)
219+
.setDuration(ANIMATION_DURATION_MS)
220+
.setInterpolator(DecelerateInterpolator())
221+
.start()
222+
}
223+
}
224+
162225
private fun hideInternal() {
163226
val popup = devLoadingPopup ?: return
164-
if (popup.isShowing == true) {
165-
popup.dismiss()
166-
devLoadingPopup = null
167-
devLoadingView = null
227+
if (!popup.isShowing || hideAnimator != null) {
228+
return
168229
}
230+
val pill = popup.contentView
231+
setHiddenPivot(pill)
232+
val animator =
233+
AnimatorSet().apply {
234+
playTogether(
235+
ObjectAnimator.ofFloat(pill, View.ALPHA, 0f),
236+
ObjectAnimator.ofFloat(pill, View.SCALE_X, HIDDEN_SCALE),
237+
ObjectAnimator.ofFloat(pill, View.SCALE_Y, HIDDEN_SCALE),
238+
)
239+
// Keeps a message that is shown and hidden in quick succession, such as a fast refresh,
240+
// on screen long enough to read.
241+
startDelay = maxOf(0L, MIN_PRESENTED_TIME_MS - (SystemClock.uptimeMillis() - showTimeMs))
242+
duration = ANIMATION_DURATION_MS
243+
interpolator = AccelerateInterpolator()
244+
addListener(
245+
object : AnimatorListenerAdapter() {
246+
private var canceled = false
247+
248+
override fun onAnimationCancel(animation: Animator) {
249+
canceled = true
250+
}
251+
252+
override fun onAnimationEnd(animation: Animator) {
253+
hideAnimator = null
254+
// A new message canceled the hide, so the banner stays and returns to full size.
255+
if (canceled) {
256+
pill
257+
.animate()
258+
.alpha(1f)
259+
.scaleX(1f)
260+
.scaleY(1f)
261+
.setDuration(ANIMATION_DURATION_MS)
262+
.setInterpolator(DecelerateInterpolator())
263+
.start()
264+
return
265+
}
266+
if (popup.isShowing) {
267+
popup.dismiss()
268+
}
269+
if (devLoadingPopup === popup) {
270+
devLoadingPopup = null
271+
devLoadingView = null
272+
}
273+
}
274+
}
275+
)
276+
}
277+
hideAnimator = animator
278+
animator.start()
169279
}
170280

171281
public companion object {
282+
private const val ANIMATION_DURATION_MS = 200L
283+
private const val MIN_PRESENTED_TIME_MS = 600L
284+
private const val HIDDEN_SCALE = 0.85f
285+
// The hidden state scales about a point this fraction of the banner's height above its center.
286+
private const val HIDDEN_ANCHOR_OFFSET = 0.05f
287+
172288
private var isEnabled = true
173289

174290
public fun setDevLoadingEnabled(enabled: Boolean) {
175291
isEnabled = enabled
176292
}
293+
294+
private fun setHiddenPivot(pill: View) {
295+
pill.pivotX = pill.width / 2f
296+
pill.pivotY = pill.height * (0.5f - HIDDEN_ANCHOR_OFFSET)
297+
}
298+
299+
private fun dpToPx(view: View, dp: Float): Int =
300+
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, view.resources.displayMetrics)
301+
.toInt()
177302
}
178303
}

‎packages/react-native/ReactAndroid/src/main/res/devsupport/drawable/ic_dev_loading_dismiss.xml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
3+
android:width="24dp"
4+
android:height="24dp"
5+
android:viewportWidth="960"
6+
android:viewportHeight="960">
7+
<path
8+
android:fillColor="@android:color/white"
9+
android:pathData="M256,760L200,704L424,480L200,256L256,200L480,424L704,200L760,256L536,480L760,704L704,760L480,536L256,760Z"/>
10+
</vector>

‎packages/react-native/ReactAndroid/src/main/res/devsupport/layout/dev_loading_view.xml‎

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,36 @@
11
<?xml version="1.0" encoding="utf-8"?>
22

33
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
4-
android:layout_width="match_parent"
4+
android:id="@+id/loading_pill"
5+
android:layout_width="wrap_content"
56
android:layout_height="wrap_content"
7+
android:minHeight="40dp"
68
android:orientation="horizontal"
7-
android:background="#404040"
9+
android:gravity="center_vertical"
10+
android:paddingStart="14dp"
11+
android:paddingEnd="14dp"
812
>
913

1014
<TextView
1115
android:id="@+id/loading_text"
12-
android:layout_width="0dp"
16+
android:layout_width="wrap_content"
1317
android:layout_height="wrap_content"
14-
android:layout_weight="1"
15-
android:layout_gravity="center_vertical"
1618
android:gravity="center"
1719
android:paddingTop="10dp"
1820
android:paddingBottom="10dp"
19-
android:paddingStart="8dp"
20-
android:paddingEnd="8dp"
21-
android:textSize="12sp"
22-
android:fontFamily="sans-serif"
21+
android:lineSpacingExtra="2dp"
22+
android:textSize="12.5sp"
23+
android:fontFamily="sans-serif-medium"
2324
/>
2425

25-
<Button
26+
<ImageView
2627
android:id="@+id/dismiss_button"
27-
android:layout_width="wrap_content"
28-
android:layout_height="wrap_content"
29-
android:layout_gravity="center_vertical"
30-
android:layout_marginEnd="10dp"
31-
android:minWidth="0dp"
32-
android:minHeight="0dp"
33-
android:text="@string/catalyst_loading_dismiss"
34-
android:textAllCaps="false"
35-
android:textSize="11sp"
36-
android:fontFamily="sans-serif"
37-
android:paddingStart="16dp"
38-
android:paddingEnd="16dp"
39-
android:paddingTop="3dp"
40-
android:paddingBottom="3dp"
28+
android:layout_width="22dp"
29+
android:layout_height="22dp"
30+
android:layout_marginStart="8dp"
31+
android:padding="5dp"
32+
android:src="@drawable/ic_dev_loading_dismiss"
33+
android:contentDescription="@string/catalyst_loading_dismiss"
4134
/>
4235

4336
</LinearLayout>

0 commit comments

Comments
 (0)