feat(Android): Add support for different Top App Bar styles

Example/android/app/src/main/res/values/styles.xml

@@ -1,7 +1,7 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     </style>

FabricExample/android/app/src/main/res/values/styles.xml

@@ -1,7 +1,7 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     </style>

android/build.gradle

@@ -191,7 +191,7 @@ dependencies {
     implementation 'androidx.fragment:fragment:1.3.6'
     implementation 'androidx.coordinatorlayout:coordinatorlayout:1.2.0'
     implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
-    implementation 'com.google.android.material:material:1.6.1'
+    implementation 'com.google.android.material:material:1.9.0'
     implementation "androidx.core:core-ktx:1.8.0"
 
     constraints {

android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt

@@ -16,6 +16,7 @@ abstract class FabricEnabledViewGroup(
 
     private var lastSetWidth = 0f
     private var lastSetHeight = 0f
+    private var lastSetHeaderHeight = 0.0
 
     fun setStateWrapper(wrapper: StateWrapper?) {
         mStateWrapper = wrapper
@@ -42,13 +43,16 @@ abstract class FabricEnabledViewGroup(
         // infinite UpdateState/SetState loop.
         val delta = 0.9f
         if (abs(lastSetWidth - realWidth) < delta &&
-            abs(lastSetHeight - realHeight) < delta
+            abs(lastSetHeight - realHeight) < delta &&
+            abs(lastSetHeaderHeight - headerHeight) < delta
         ) {
             return
         }
 
         lastSetWidth = realWidth
         lastSetHeight = realHeight
+        lastSetHeaderHeight = headerHeight
+
         val map: WritableMap =
             WritableNativeMap().apply {
                 putDouble("frameWidth", realWidth.toDouble())

android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt

@@ -2,11 +2,11 @@ package com.swmansion.rnscreens
 
 import android.annotation.SuppressLint
 import android.content.Context
-import androidx.appcompat.widget.Toolbar
+import com.google.android.material.appbar.MaterialToolbar
 
 // This class is used to store config closer to search bar
 @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
 open class CustomToolbar(
     context: Context,
     val config: ScreenStackHeaderConfig,
-) : Toolbar(context)
+) : MaterialToolbar(context)

android/src/main/java/com/swmansion/rnscreens/Screen.kt

@@ -75,16 +75,15 @@ class Screen(
             val width = r - l
             val height = b - t
 
-            val headerHeight = calculateHeaderHeight()
-            val totalHeight =
-                headerHeight.first + headerHeight.second // action bar height + status bar height
+            // value returned as top will be total height of the header
+            val topToDp = PixelUtil.toDIPFromPixel(t.toFloat()).toDouble()
             if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-                updateScreenSizeFabric(width, height, totalHeight)
+                updateScreenSizeFabric(width, height, topToDp)
             } else {
                 updateScreenSizePaper(width, height)
             }
 
-            notifyHeaderHeightChange(totalHeight)
+            notifyHeaderHeightChange(topToDp)
         }
     }
 
@@ -238,6 +237,23 @@ class Screen(
             }
         }
 
+    val statusBarInset: Double
+        get() {
+            return context.resources
+                    .getIdentifier("status_bar_height", "dimen", "android")
+                    // Count only status bar when it's not hidden
+                    .takeIf { it > 0 && isStatusBarHidden != true }
+                    ?.let { (context.resources::getDimensionPixelSize)(it) }
+                    ?.let { PixelUtil.toDIPFromPixel(it.toFloat()).toDouble() }
+                    ?: 0.0
+        }
+
+    var headerType = HeaderType.Small
+        set(headerType) {
+            field = headerType
+            headerConfig?.onUpdate()
+        }
+
     var navigationBarColor: Int? = null
         set(navigationBarColor) {
             if (navigationBarColor != null) {
@@ -316,31 +332,6 @@ class Screen(
         }
     }
 
-    private fun calculateHeaderHeight(): Pair<Double, Double> {
-        val actionBarTv = TypedValue()
-        val resolvedActionBarSize =
-            context.theme.resolveAttribute(android.R.attr.actionBarSize, actionBarTv, true)
-
-        // Check if it's possible to get an attribute from theme context and assign a value from it.
-        // Otherwise, the default value will be returned.
-        val actionBarHeight =
-            TypedValue
-                .complexToDimensionPixelSize(actionBarTv.data, resources.displayMetrics)
-                .takeIf { resolvedActionBarSize && headerConfig?.isHeaderHidden != true && headerConfig?.isHeaderTranslucent != true }
-                ?.let { PixelUtil.toDIPFromPixel(it.toFloat()).toDouble() } ?: 0.0
-
-        val statusBarHeight =
-            context.resources
-                .getIdentifier("status_bar_height", "dimen", "android")
-                // Count only status bar when action bar is visible and status bar is not hidden
-                .takeIf { it > 0 && isStatusBarHidden != true && actionBarHeight > 0 }
-                ?.let { (context.resources::getDimensionPixelSize)(it) }
-                ?.let { PixelUtil.toDIPFromPixel(it.toFloat()).toDouble() }
-                ?: 0.0
-
-        return actionBarHeight to statusBarHeight
-    }
-
     private fun notifyHeaderHeightChange(headerHeight: Double) {
         val screenContext = context as ReactContext
         val surfaceId = UIManagerHelper.getSurfaceId(screenContext)
@@ -388,4 +379,12 @@ class Screen(
         NAVIGATION_BAR_TRANSLUCENT,
         NAVIGATION_BAR_HIDDEN,
     }
+
+    enum class HeaderType(
+        val isCollapsing: Boolean,
+    ) {
+        Small(false),
+        Medium(true),
+        Large(true),
+    }
 }

android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt

@@ -2,7 +2,9 @@ package com.swmansion.rnscreens
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.content.res.TypedArray
 import android.graphics.Color
+import android.os.Build
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.Menu
@@ -20,14 +22,17 @@ import com.facebook.react.uimanager.PixelUtil
 import com.google.android.material.appbar.AppBarLayout
 import com.google.android.material.appbar.AppBarLayout.ScrollingViewBehavior
 import com.swmansion.rnscreens.utils.DeviceUtils
+import com.google.android.material.R as MaterialR
 
 class ScreenStackFragment :
     ScreenFragment,
     ScreenStackFragmentWrapper {
     private var appBarLayout: AppBarLayout? = null
-    private var toolbar: Toolbar? = null
+    var screenStackHeader = ScreenStackHeader(screen)
+
     private var isToolbarShadowHidden = false
     private var isToolbarTranslucent = false
+    private var isToolbarHidden = false
 
     private var lastFocusedChild: View? = null
 
@@ -44,25 +49,43 @@ class ScreenStackFragment :
     }
 
     override fun removeToolbar() {
-        appBarLayout?.let {
-            toolbar?.let { toolbar ->
-                if (toolbar.parent === it) {
-                    it.removeView(toolbar)
+        isToolbarHidden = true
+
+        appBarLayout?.let { appBarLayout ->
+            screenStackHeader.collapsingToolbarLayout?.let { collapsingToolbar ->
+                if (collapsingToolbar.parent === appBarLayout) {
+                    appBarLayout.removeView(collapsingToolbar)
                 }
             }
         }
-        toolbar = null
+
+        screenStackHeader.removeToolbar()
+
+        // As AppBarLayout may have dimensions of expanded medium / large header,
+        // We need to change its layout params to `WRAP_CONTENT`.
+        appBarLayout?.layoutParams =
+            CoordinatorLayout.LayoutParams(
+                CoordinatorLayout.LayoutParams.MATCH_PARENT,
+                CoordinatorLayout.LayoutParams.WRAP_CONTENT,
+            )
     }
 
     override fun setToolbar(toolbar: Toolbar) {
-        appBarLayout?.addView(toolbar)
-        toolbar.layoutParams =
-            AppBarLayout
-                .LayoutParams(
-                    AppBarLayout.LayoutParams.MATCH_PARENT,
-                    AppBarLayout.LayoutParams.WRAP_CONTENT,
-                ).apply { scrollFlags = 0 }
-        this.toolbar = toolbar
+        isToolbarHidden = false
+        screenStackHeader.toolbar = toolbar as CustomToolbar
+        screenStackHeader.recreateToolbar()
+
+        screenStackHeader.collapsingToolbarLayout?.apply {
+            appBarLayout?.addView(this)
+        }
+
+        // As `setToolbar` may be called after changing header's visibility,
+        // we need to apply correction to layoutParams with proper dimensions.
+        appBarLayout?.layoutParams =
+            CoordinatorLayout.LayoutParams(
+                CoordinatorLayout.LayoutParams.MATCH_PARENT,
+                getHeightOfToolbar(toolbar.context),
+            )
     }
 
     override fun setToolbarShadowHidden(hidden: Boolean) {
@@ -78,6 +101,7 @@ class ScreenStackFragment :
             val params = screen.layoutParams
             (params as CoordinatorLayout.LayoutParams).behavior =
                 if (translucent) null else ScrollingViewBehavior()
+
             isToolbarTranslucent = translucent
         }
     }
@@ -128,19 +152,32 @@ class ScreenStackFragment :
                 // role. On top of that it breaks screens animations when alfa offscreen compositing is off
                 // (which is the default)
                 setBackgroundColor(Color.TRANSPARENT)
+
                 layoutParams =
                     AppBarLayout.LayoutParams(
                         AppBarLayout.LayoutParams.MATCH_PARENT,
-                        AppBarLayout.LayoutParams.WRAP_CONTENT,
+                        getHeightOfToolbar(context),
                     )
+
+                // On Material 3 the elevation is not visible on AppBarLayout.
+                // To prevent this behavior, we're setting outline shadow colors to black.
+                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+                    outlineAmbientShadowColor = Color.BLACK
+                    outlineSpotShadowColor = Color.BLACK
+                }
+
+                screenStackHeader.collapsingToolbarLayout?.let {
+                    addView(recycleView(it))
+                }
             }
 
-        view?.addView(appBarLayout)
+        appBarLayout?.let { view?.addView(it) }
+
         if (isToolbarShadowHidden) {
             appBarLayout?.elevation = 0f
             appBarLayout?.stateListAnimator = null
         }
-        toolbar?.let { appBarLayout?.addView(recycleView(it)) }
+
         setHasOptionsMenu(true)
         return view
     }
@@ -166,6 +203,28 @@ class ScreenStackFragment :
         return super.onCreateOptionsMenu(menu, inflater)
     }
 
+    private fun getHeightOfToolbar(context: Context): Int {
+        if (isToolbarHidden) {
+            return CoordinatorLayout.LayoutParams.WRAP_CONTENT
+        }
+
+        val resolvedSize =
+            when (screen.headerType) {
+                Screen.HeaderType.Medium -> MaterialR.attr.collapsingToolbarLayoutMediumSize.resolveAttribute(context)
+                Screen.HeaderType.Large -> MaterialR.attr.collapsingToolbarLayoutLargeSize.resolveAttribute(context)
+                else -> CoordinatorLayout.LayoutParams.WRAP_CONTENT
+            }
+
+        // For apps that don't support Material 3 it's possible that resolved attribute of
+        // given header type size will return -1. In such case we want to return fallback value of
+        // desired header type.
+        return when (screen.headerType) {
+            Screen.HeaderType.Medium -> if (resolvedSize != -1) resolvedSize else PixelUtil.toPixelFromDIP(112f).toInt()
+            Screen.HeaderType.Large -> if (resolvedSize != -1) resolvedSize else PixelUtil.toPixelFromDIP(152f).toInt()
+            else -> resolvedSize
+        }
+    }
+
     private fun shouldShowSearchBar(): Boolean {
         val config = screen.headerConfig
         val numberOfSubViews = config?.configSubviewsCount ?: 0
@@ -229,6 +288,17 @@ class ScreenStackFragment :
         container.dismiss(this)
     }
 
+    private fun Int.resolveAttribute(context: Context): Int {
+        val textSizeAttr = intArrayOf(this)
+        val indexOfAttrTextSize = 0
+
+        val obtainedAttributesTa: TypedArray = context.obtainStyledAttributes(textSizeAttr)
+        val parsedAttribute = obtainedAttributesTa.getDimensionPixelSize(indexOfAttrTextSize, -1)
+
+        obtainedAttributesTa.recycle()
+        return parsedAttribute
+    }
+
     private class ScreensCoordinatorLayout(
         context: Context,
         private val mFragment: ScreenFragment,