I want to show a collapsing/expanding toolbar layout that has an icon in the top right corner - both in the expanded and collapsed states. The icon shouldn't move at all.
If I use the layout_gravity and write "top" then the icon isn't visible when the layout is collapsed, and if I write "bottom" then the icon doesn't show at the top when the layout is expanded. How can I solve this?
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="center"
app:expandedTitleGravity="bottom|start"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:id="@+id/backgroundImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@null"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
/>
<FrameLayout
android:id="@+id/shadow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black_40percent_opacity"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
/>
<ImageView
android:id="@+id/iconToShow"
android:layout_width="56dp"
android:layout_height="56dp"
android:src="@drawable/some_drawable"
android:padding="16dp"
android:layout_gravity="top|end"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout.
The scroll flag is key to being able to enable the CollapsingToolbar scrolling. The ordering of flags has no impact. e.g scroll|snap and snap|scroll perform the exact same function.
The status bar on Android is the bar of icons running across the top of your screen. The top right corner is dedicated to the major status of your device, while the left is used for app notifications.
A newer version of Android Studio contains this dependency as default, so you don’t need to add it if you are using the latest version. Copy the image that you want to use as a background image for the toolbar and paste it into the drawable folder. We will be using this image in activity_main.xml file.
The solution turned out to be adding this line to the ImageView - no other changes were necessary:
app:layout_collapseMode="pin"
So now the entire imageview looks like this:
<ImageView
android:id="@+id/someImage"
android:layout_width="56dp"
android:layout_height="wrap_content"
android:src="@drawable/someDrawable"
android:padding="16dp"
android:layout_gravity="top|end"
app:layout_collapseMode="pin"
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With