4: Material You

To help you achieve a Material You themed app, MonetCompat also contains a few Views that implement Monet and follow the Material You styles currently seen in the Android 12 beta. All of the views are implemented in the sample app.

MonetToolbar is a toolbar which has two background states: Window background (with no content below it) and secondary background * 0.95 transparency (with content behind). It can be attached to a RecyclerView or NestedScrollView by calling setupWithScrollableView(ScrollingView), and will automatically animate between these two states depending on the scroll of the view. For this reason, you should put it in a FrameLayout (or ConstraintLayout, CoordinatorLayout, etc.) rather than a LinearLayout, and initially have the scrolling view under the toolbar.

Example video

Note: Do not use MonetToolbar with a CollapsingToolbarLayout / AppBarLayout (or don't call setupWithScrollableView if you must use it), as this will interfere with the collapsing logic.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:orientation="vertical">

    <com.kieronquinn.monetcompat.view.MonetToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:actionBarSize"
        app:extraPadding="16dp" />

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerview" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

MonetSwitch is an AppCompatSwitch that is styled to look like the "primary" switch in the Android 12 settings app:

Example video

<com.kieronquinn.monetcompat.view.MonetSwitch
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Switch" />

In Android 12, scrolling views have a new overscroll effect, which stretches the contents of the view rather than showing a glow effect. MonetCompat provides an optional effect similar to this, which can be applied by calling enableStretchOverscroll() on a RecyclerView or NestedScrollView.

Example video

Note: This effect is rendered in software, unlike in Android 12 where it is hardware rendered. It may therefore cause lag in some situations. It is also not recommended to use it on short lists, as the implementation does not cope well with direction changes, due to limitations in system code.

You can mimic the style of the Collapsing Toolbar Android 12's Settings app with the standard AppBarLayout and CollapsingToolbarLayout. Simply set app:titleCollapseMode="fade" on the CollapsingToolbarLayout, and tweak the scrim to set the collapsed color.

Example video

<com.google.android.material.appbar.AppBarLayout
	android:id="@+id/app_bar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="?attr/colorPrimary"
	app:elevation="0dp">

	<com.google.android.material.appbar.CollapsingToolbarLayout
		android:id="@+id/collapsing_toolbar"
		android:layout_width="match_parent"
		android:layout_height="200dp"
		app:contentScrim="?attr/colorPrimaryVariant"
		app:statusBarScrim="@android:color/transparent"
		app:titleCollapseMode="fade"
		app:scrimAnimationDuration="50"
		app:scrimVisibleHeightTrigger="174dp"
		app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

		<com.google.android.material.appbar.MaterialToolbar
			android:id="@+id/toolbar"
			android:layout_width="match_parent"
			android:layout_height="?android:actionBarSize"
			app:layout_collapseMode="pin"/>

	</com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

To apply Monet colors to the collapsing toolbar, set the content scrim and background colors in code:

collapsingToolbar.setContentScrimColor(monet.getBackgroundColorSecondary(context) ?: monet.getBackgroundColor(context))
collapsingToolbar.setBackgroundColor(monet.getBackgroundColor(context))