@amazon-devices/react-native-screens 2.0.1758683737

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

@@ -0,0 +1,282 @@
+package com.swmansion.rnscreens
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Color
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.Menu
+import android.view.MenuInflater
+import android.view.MenuItem
+import android.view.View
+import android.view.ViewGroup
+import android.view.animation.Animation
+import android.view.animation.AnimationSet
+import android.view.animation.Transformation
+import android.widget.LinearLayout
+import androidx.appcompat.widget.Toolbar
+import androidx.coordinatorlayout.widget.CoordinatorLayout
+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
+
+class ScreenStackFragment : ScreenFragment, ScreenStackFragmentWrapper {
+    private var mAppBarLayout: AppBarLayout? = null
+    private var mToolbar: Toolbar? = null
+    private var mShadowHidden = false
+    private var mIsTranslucent = false
+
+    private var mLastFocusedChild: View? = null
+
+    var searchView: CustomSearchView? = null
+    var onSearchViewCreate: ((searchView: CustomSearchView) -> Unit)? = null
+
+    @SuppressLint("ValidFragment")
+    constructor(screenView: Screen) : super(screenView)
+
+    constructor() {
+        throw IllegalStateException(
+            "ScreenStack fragments should never be restored. Follow instructions from https://github.com/software-mansion/react-native-screens/issues/17#issuecomment-424704067 to properly configure your main activity."
+        )
+    }
+
+    override fun removeToolbar() {
+        mAppBarLayout?.let {
+            mToolbar?.let { toolbar ->
+                if (toolbar.parent === it) {
+                    it.removeView(toolbar)
+                }
+            }
+        }
+        mToolbar = null
+    }
+
+    override fun setToolbar(toolbar: Toolbar) {
+        mAppBarLayout?.addView(toolbar)
+        toolbar.layoutParams = AppBarLayout.LayoutParams(
+            AppBarLayout.LayoutParams.MATCH_PARENT, AppBarLayout.LayoutParams.WRAP_CONTENT
+        ).apply { scrollFlags = 0 }
+        mToolbar = toolbar
+    }
+
+    override fun setToolbarShadowHidden(hidden: Boolean) {
+        if (mShadowHidden != hidden) {
+            mAppBarLayout?.targetElevation = if (hidden) 0f else PixelUtil.toPixelFromDIP(4f)
+            mShadowHidden = hidden
+        }
+    }
+
+    override fun setToolbarTranslucent(translucent: Boolean) {
+        if (mIsTranslucent != translucent) {
+            val params = screen.layoutParams
+            (params as CoordinatorLayout.LayoutParams).behavior =
+                if (translucent) null else ScrollingViewBehavior()
+            mIsTranslucent = translucent
+        }
+    }
+
+    override fun onContainerUpdate() {
+        screen.headerConfig?.onUpdate()
+    }
+
+    override fun onViewAnimationEnd() {
+        super.onViewAnimationEnd()
+        notifyViewAppearTransitionEnd()
+    }
+
+    private fun notifyViewAppearTransitionEnd() {
+        val screenStack = view?.parent
+        if (screenStack is ScreenStack) {
+            screenStack.onViewAppearTransitionEnd()
+        }
+    }
+
+    override fun onStart() {
+        mLastFocusedChild?.requestFocus()
+        super.onStart()
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        val view: ScreensCoordinatorLayout? =
+            context?.let { ScreensCoordinatorLayout(it, this) }
+
+        screen.layoutParams = CoordinatorLayout.LayoutParams(
+            LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT
+        ).apply { behavior = if (mIsTranslucent) null else ScrollingViewBehavior() }
+
+        view?.addView(recycleView(screen))
+
+        mAppBarLayout = context?.let { AppBarLayout(it) }?.apply {
+            // By default AppBarLayout will have a background color set but since we cover the whole layout
+            // with toolbar (that can be semi-transparent) the bar layout background color does not pay a
+            // 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
+            )
+        }
+
+        view?.addView(mAppBarLayout)
+        if (mShadowHidden) {
+            mAppBarLayout?.targetElevation = 0f
+        }
+        mToolbar?.let { mAppBarLayout?.addView(recycleView(it)) }
+        setHasOptionsMenu(true)
+        return view
+    }
+
+    override fun onStop() {
+        if (DeviceUtils.isPlatformAndroidTV(context))
+            mLastFocusedChild = findLastFocusedChild()
+
+        super.onStop()
+    }
+
+    override fun onPrepareOptionsMenu(menu: Menu) {
+        updateToolbarMenu(menu)
+        return super.onPrepareOptionsMenu(menu)
+    }
+
+    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
+        updateToolbarMenu(menu)
+        return super.onCreateOptionsMenu(menu, inflater)
+    }
+
+    private fun shouldShowSearchBar(): Boolean {
+        val config = screen.headerConfig
+        val numberOfSubViews = config?.configSubviewsCount ?: 0
+        if (config != null && numberOfSubViews > 0) {
+            for (i in 0 until numberOfSubViews) {
+                val subView = config.getConfigSubview(i)
+                if (subView.type == ScreenStackHeaderSubview.Type.SEARCH_BAR) {
+                    return true
+                }
+            }
+        }
+        return false
+    }
+
+    private fun updateToolbarMenu(menu: Menu) {
+        menu.clear()
+        if (shouldShowSearchBar()) {
+            val currentContext = context
+            if (searchView == null && currentContext != null) {
+                val newSearchView = CustomSearchView(currentContext, this)
+                searchView = newSearchView
+                onSearchViewCreate?.invoke(newSearchView)
+            }
+            menu.add("").apply {
+                setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS)
+                actionView = searchView
+            }
+        }
+    }
+
+    private fun findLastFocusedChild(): View? {
+        var view: View? = screen
+        while (view != null) {
+            if (view.isFocused) return view
+            view = if (view is ViewGroup) view.focusedChild else null
+        }
+
+        return null
+    }
+
+    override fun canNavigateBack(): Boolean {
+        val container: ScreenContainer? = screen.container
+        check(container is ScreenStack) { "ScreenStackFragment added into a non-stack container" }
+        return if (container.rootScreen == screen) {
+            // this screen is the root of the container, if it is nested we can check parent container
+            // if it is also a root or not
+            val parentFragment = parentFragment
+            if (parentFragment is ScreenStackFragment) {
+                parentFragment.canNavigateBack()
+            } else {
+                false
+            }
+        } else {
+            true
+        }
+    }
+
+    override fun dismiss() {
+        val container: ScreenContainer? = screen.container
+        check(container is ScreenStack) { "ScreenStackFragment added into a non-stack container" }
+        container.dismiss(this)
+    }
+
+    private class ScreensCoordinatorLayout(
+        context: Context,
+        private val mFragment: ScreenFragment
+    ) : CoordinatorLayout(context) {
+        private val mAnimationListener: Animation.AnimationListener =
+            object : Animation.AnimationListener {
+                override fun onAnimationStart(animation: Animation) {
+                    mFragment.onViewAnimationStart()
+                }
+
+                override fun onAnimationEnd(animation: Animation) {
+                    mFragment.onViewAnimationEnd()
+                }
+
+                override fun onAnimationRepeat(animation: Animation) {}
+            }
+
+        override fun startAnimation(animation: Animation) {
+            // For some reason View##onAnimationEnd doesn't get called for
+            // exit transitions so we explicitly attach animation listener.
+            // We also have some animations that are an AnimationSet, so we don't wrap them
+            // in another set since it causes some visual glitches when going forward.
+            // We also set the listener only when going forward, since when going back,
+            // there is already a listener for dismiss action added, which would be overridden
+            // and also this is not necessary when going back since the lifecycle methods
+            // are correctly dispatched then.
+            // We also add fakeAnimation to the set of animations, which sends the progress of animation
+            val fakeAnimation = ScreensAnimation(mFragment).apply { duration = animation.duration }
+
+            if (animation is AnimationSet && !mFragment.isRemoving) {
+                animation.apply {
+                    addAnimation(fakeAnimation)
+                    setAnimationListener(mAnimationListener)
+                }.also {
+                    super.startAnimation(it)
+                }
+            } else {
+                AnimationSet(true).apply {
+                    addAnimation(animation)
+                    addAnimation(fakeAnimation)
+                    setAnimationListener(mAnimationListener)
+                }.also {
+                    super.startAnimation(it)
+                }
+            }
+        }
+
+        /**
+         * This method implements a workaround for RN's autoFocus functionality. Because of the way
+         * autoFocus is implemented it dismisses soft keyboard in fragment transition
+         * due to change of visibility of the view at the start of the transition. Here we override the
+         * call to `clearFocus` when the visibility of view is `INVISIBLE` since `clearFocus` triggers the
+         * hiding of the keyboard in `ReactEditText.java`.
+         */
+        override fun clearFocus() {
+            if (visibility != INVISIBLE) {
+                super.clearFocus()
+            }
+        }
+    }
+
+    private class ScreensAnimation(private val mFragment: ScreenFragment) : Animation() {
+        override fun applyTransformation(interpolatedTime: Float, t: Transformation) {
+            super.applyTransformation(interpolatedTime, t)
+            // interpolated time should be the progress of the current transition
+            mFragment.dispatchTransitionProgressEvent(interpolatedTime, !mFragment.isResumed)
+        }
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragmentWrapper.kt

@@ -0,0 +1,15 @@
+package com.swmansion.rnscreens
+
+import androidx.appcompat.widget.Toolbar
+
+interface ScreenStackFragmentWrapper : ScreenFragmentWrapper {
+    // Toolbar management
+    fun removeToolbar()
+    fun setToolbar(toolbar: Toolbar)
+    fun setToolbarShadowHidden(hidden: Boolean)
+    fun setToolbarTranslucent(translucent: Boolean)
+
+    // Navigation
+    fun canNavigateBack(): Boolean
+    fun dismiss()
+}

package/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt

@@ -0,0 +1,398 @@
+package com.swmansion.rnscreens
+
+import android.content.Context
+import android.graphics.PorterDuff
+import android.os.Build
+import android.text.TextUtils
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.View.OnClickListener
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.appcompat.app.AppCompatActivity
+import androidx.appcompat.widget.Toolbar
+import androidx.fragment.app.Fragment
+import com.facebook.react.ReactApplication
+import com.facebook.react.bridge.JSApplicationIllegalArgumentException
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.views.text.ReactTypefaceUtils
+import com.swmansion.rnscreens.events.HeaderAttachedEvent
+import com.swmansion.rnscreens.events.HeaderDetachedEvent
+
+class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
+    private val mConfigSubviews = ArrayList<ScreenStackHeaderSubview>(3)
+    val toolbar: CustomToolbar
+    private var headerTopInset: Int? = null
+    private var mTitle: String? = null
+    private var mTitleColor = 0
+    private var mTitleFontFamily: String? = null
+    private var mDirection: String? = null
+    private var mTitleFontSize = 0f
+    private var mTitleFontWeight = 0
+    private var mBackgroundColor: Int? = null
+    private var mIsHidden = false
+    private var mIsBackButtonHidden = false
+    private var mIsShadowHidden = false
+    private var mDestroyed = false
+    private var mBackButtonInCustomView = false
+    private var mIsTopInsetEnabled = true
+    private var mIsTranslucent = false
+    private var mTintColor = 0
+    private var mIsAttachedToWindow = false
+    private val mDefaultStartInset: Int
+    private val mDefaultStartInsetWithNavigation: Int
+    private val mBackClickListener = OnClickListener {
+        screenFragment?.let {
+            val stack = screenStack
+            if (stack != null && stack.rootScreen == it.screen) {
+                val parentFragment = it.parentFragment
+                if (parentFragment is ScreenStackFragment) {
+                    if (parentFragment.screen.nativeBackButtonDismissalEnabled) {
+                        parentFragment.dismiss()
+                    } else {
+                        parentFragment.dispatchHeaderBackButtonClickedEvent()
+                    }
+                }
+            } else {
+                if (it.screen.nativeBackButtonDismissalEnabled) {
+                    it.dismiss()
+                } else {
+                    it.dispatchHeaderBackButtonClickedEvent()
+                }
+            }
+        }
+    }
+
+    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+        // no-op
+    }
+
+    fun destroy() {
+        mDestroyed = true
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        mIsAttachedToWindow = true
+        val surfaceId = UIManagerHelper.getSurfaceId(this)
+        UIManagerHelper.getEventDispatcherForReactTag(context as ReactContext, id)
+            ?.dispatchEvent(HeaderAttachedEvent(surfaceId, id))
+        // we want to save the top inset before the status bar can be hidden, which would resolve in
+        // inset being 0
+        if (headerTopInset == null) {
+            headerTopInset = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M)
+                rootWindowInsets.systemWindowInsetTop
+            else
+            // Hacky fallback for old android. Before Marshmallow, the status bar height was always 25
+                (25 * resources.displayMetrics.density).toInt()
+        }
+        onUpdate()
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        mIsAttachedToWindow = false
+        val surfaceId = UIManagerHelper.getSurfaceId(this)
+        UIManagerHelper.getEventDispatcherForReactTag(context as ReactContext, id)
+            ?.dispatchEvent(HeaderDetachedEvent(surfaceId, id))
+    }
+
+    private val screen: Screen?
+        get() = parent as? Screen
+    private val screenStack: ScreenStack?
+        get() = screen?.container as? ScreenStack
+    val screenFragment: ScreenStackFragment?
+        get() {
+            val screen = parent
+            if (screen is Screen) {
+                val fragment: Fragment? = screen.fragment
+                if (fragment is ScreenStackFragment) {
+                    return fragment
+                }
+            }
+            return null
+        }
+
+    fun onUpdate() {
+        val stack = screenStack
+        val isTop = stack == null || stack.topScreen == parent
+
+        if (!mIsAttachedToWindow || !isTop || mDestroyed) {
+            return
+        }
+
+        val activity = screenFragment?.activity as AppCompatActivity? ?: return
+        if (mDirection != null) {
+            if (mDirection == "rtl") {
+                toolbar.layoutDirection = LAYOUT_DIRECTION_RTL
+            } else if (mDirection == "ltr") {
+                toolbar.layoutDirection = LAYOUT_DIRECTION_LTR
+            }
+        }
+
+        // orientation and status bar management
+        screen?.let {
+            // we set the traits here too, not only when the prop for Screen is passed
+            // because sometimes we don't have the Fragment and Activity available then yet, e.g. on the
+            // first setting of props. Similar thing is done for Screens of ScreenContainers, but in
+            // `onContainerUpdate` of their Fragment
+            val reactContext = if (context is ReactContext) {
+                context as ReactContext
+            } else {
+                it.fragmentWrapper?.tryGetContext()
+            }
+            ScreenWindowTraits.trySetWindowTraits(it, activity, reactContext)
+        }
+
+        if (mIsHidden) {
+            if (toolbar.parent != null) {
+                screenFragment?.removeToolbar()
+            }
+            return
+        }
+
+        if (toolbar.parent == null) {
+            screenFragment?.setToolbar(toolbar)
+        }
+
+        if (mIsTopInsetEnabled) {
+            headerTopInset.let {
+                toolbar.setPadding(0, it ?: 0, 0, 0)
+            }
+        } else {
+            if (toolbar.paddingTop > 0) {
+                toolbar.setPadding(0, 0, 0, 0)
+            }
+        }
+
+        activity.setSupportActionBar(toolbar)
+        // non-null toolbar is set in the line above and it is used here
+        val actionBar = requireNotNull(activity.supportActionBar)
+
+        // Reset toolbar insets. By default we set symmetric inset for start and end to match iOS
+        // implementation where both right and left icons are offset from the edge by default. We also
+        // reset startWithNavigation inset which corresponds to the distance between navigation icon and
+        // title. If title isn't set we clear that value few lines below to give more space to custom
+        // center-mounted views.
+        toolbar.contentInsetStartWithNavigation = mDefaultStartInsetWithNavigation
+        toolbar.setContentInsetsRelative(mDefaultStartInset, mDefaultStartInset)
+
+        // hide back button
+        actionBar.setDisplayHomeAsUpEnabled(
+            screenFragment?.canNavigateBack() == true && !mIsBackButtonHidden
+        )
+
+        // when setSupportActionBar is called a toolbar wrapper gets initialized that overwrites
+        // navigation click listener. The default behavior set in the wrapper is to call into
+        // menu options handlers, but we prefer the back handling logic to stay here instead.
+        toolbar.setNavigationOnClickListener(mBackClickListener)
+
+        // shadow
+        screenFragment?.setToolbarShadowHidden(mIsShadowHidden)
+
+        // translucent
+        screenFragment?.setToolbarTranslucent(mIsTranslucent)
+
+        // title
+        actionBar.title = mTitle
+        if (TextUtils.isEmpty(mTitle)) {
+            // if title is empty we set start  navigation inset to 0 to give more space to custom rendered
+            // views. When it is set to default it'd take up additional distance from the back button
+            // which would impact the position of custom header views rendered at the center.
+            toolbar.contentInsetStartWithNavigation = 0
+        }
+
+        val titleTextView = titleTextView
+        if (mTitleColor != 0) {
+            toolbar.setTitleTextColor(mTitleColor)
+        }
+
+        if (titleTextView != null) {
+            if (mTitleFontFamily != null || mTitleFontWeight > 0) {
+                val titleTypeface = ReactTypefaceUtils.applyStyles(
+                    null, 0, mTitleFontWeight, mTitleFontFamily, context.assets
+                )
+                titleTextView.typeface = titleTypeface
+            }
+            if (mTitleFontSize > 0) {
+                titleTextView.textSize = mTitleFontSize
+            }
+        }
+
+        // background
+        mBackgroundColor?.let { toolbar.setBackgroundColor(it) }
+
+        // color
+        if (mTintColor != 0) {
+            toolbar.navigationIcon?.setColorFilter(mTintColor, PorterDuff.Mode.SRC_ATOP)
+        }
+
+        // subviews
+        for (i in toolbar.childCount - 1 downTo 0) {
+            if (toolbar.getChildAt(i) is ScreenStackHeaderSubview) {
+                toolbar.removeViewAt(i)
+            }
+        }
+
+        var i = 0
+        val size = mConfigSubviews.size
+        while (i < size) {
+            val view = mConfigSubviews[i]
+            val type = view.type
+            if (type === ScreenStackHeaderSubview.Type.BACK) {
+                // we special case BACK button header config type as we don't add it as a view into toolbar
+                // but instead just copy the drawable from imageview that's added as a first child to it.
+                val firstChild = view.getChildAt(0) as? ImageView
+                    ?: throw JSApplicationIllegalArgumentException(
+                        "Back button header config view should have Image as first child"
+                    )
+                actionBar.setHomeAsUpIndicator(firstChild.drawable)
+                i++
+                continue
+            }
+            val params = Toolbar.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT)
+            when (type) {
+                ScreenStackHeaderSubview.Type.LEFT -> {
+                    // when there is a left item we need to disable navigation icon by default
+                    // we also hide title as there is no other way to display left side items
+                    if (!mBackButtonInCustomView) {
+                        toolbar.navigationIcon = null
+                    }
+                    toolbar.title = null
+                    params.gravity = Gravity.START
+                }
+                ScreenStackHeaderSubview.Type.RIGHT -> params.gravity = Gravity.END
+                ScreenStackHeaderSubview.Type.CENTER -> {
+                    params.width = LayoutParams.MATCH_PARENT
+                    params.gravity = Gravity.CENTER_HORIZONTAL
+                    toolbar.title = null
+                }
+                else -> {}
+            }
+            view.layoutParams = params
+            toolbar.addView(view)
+            i++
+        }
+    }
+
+    private fun maybeUpdate() {
+        if (parent != null && !mDestroyed) {
+            onUpdate()
+        }
+    }
+
+    fun getConfigSubview(index: Int): ScreenStackHeaderSubview = mConfigSubviews[index]
+
+    val configSubviewsCount: Int
+        get() = mConfigSubviews.size
+
+    fun removeConfigSubview(index: Int) {
+        mConfigSubviews.removeAt(index)
+        maybeUpdate()
+    }
+
+    fun removeAllConfigSubviews() {
+        mConfigSubviews.clear()
+        maybeUpdate()
+    }
+
+    fun addConfigSubview(child: ScreenStackHeaderSubview, index: Int) {
+        mConfigSubviews.add(index, child)
+        maybeUpdate()
+    }
+
+    private val titleTextView: TextView?
+        get() {
+            for (i in 0 until toolbar.childCount) {
+                val view = toolbar.getChildAt(i)
+                if (view is TextView) {
+                    if (view.text == toolbar.title) {
+                        return view
+                    }
+                }
+            }
+            return null
+        }
+
+    fun setTitle(title: String?) {
+        mTitle = title
+    }
+
+    fun setTitleFontFamily(titleFontFamily: String?) {
+        mTitleFontFamily = titleFontFamily
+    }
+
+    fun setTitleFontWeight(fontWeightString: String?) {
+        mTitleFontWeight = ReactTypefaceUtils.parseFontWeight(fontWeightString)
+    }
+
+    fun setTitleFontSize(titleFontSize: Float) {
+        mTitleFontSize = titleFontSize
+    }
+
+    fun setTitleColor(color: Int) {
+        mTitleColor = color
+    }
+
+    fun setTintColor(color: Int) {
+        mTintColor = color
+    }
+
+    fun setTopInsetEnabled(topInsetEnabled: Boolean) {
+        mIsTopInsetEnabled = topInsetEnabled
+    }
+
+    fun setBackgroundColor(color: Int?) {
+        mBackgroundColor = color
+    }
+
+    fun setHideShadow(hideShadow: Boolean) {
+        mIsShadowHidden = hideShadow
+    }
+
+    fun setHideBackButton(hideBackButton: Boolean) {
+        mIsBackButtonHidden = hideBackButton
+    }
+
+    fun setHidden(hidden: Boolean) {
+        mIsHidden = hidden
+    }
+
+    fun setTranslucent(translucent: Boolean) {
+        mIsTranslucent = translucent
+    }
+
+    fun setBackButtonInCustomView(backButtonInCustomView: Boolean) {
+        mBackButtonInCustomView = backButtonInCustomView
+    }
+
+    fun setDirection(direction: String?) {
+        mDirection = direction
+    }
+
+    private class DebugMenuToolbar(context: Context, config: ScreenStackHeaderConfig) : CustomToolbar(context, config) {
+        override fun showOverflowMenu(): Boolean {
+            (context.applicationContext as ReactApplication)
+                .reactNativeHost
+                .reactInstanceManager
+                .showDevOptionsDialog()
+            return true
+        }
+    }
+
+    init {
+        visibility = GONE
+        toolbar = if (BuildConfig.DEBUG) DebugMenuToolbar(context, this) else CustomToolbar(context, this)
+        mDefaultStartInset = toolbar.contentInsetStart
+        mDefaultStartInsetWithNavigation = toolbar.contentInsetStartWithNavigation
+
+        // set primary color as background by default
+        val tv = TypedValue()
+        if (context.theme.resolveAttribute(R.attr.colorPrimary, tv, true)) {
+            toolbar.setBackgroundColor(tv.data)
+        }
+        toolbar.clipChildren = false
+    }
+}