Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android: putting an icon in the top right corner of a collapsingToolbarLayout?

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>
like image 539
Jon Avatar asked Feb 11 '16 10:02

Jon


People also ask

What is collapsingtoolbarlayout in Android?

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.

How to enable collapsingtoolbar scrolling?

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.

What is the status bar on Android?

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.

How to add background image to Android Studio toolbar?

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.


1 Answers

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"
            />
like image 109
Jon Avatar answered Sep 21 '22 13:09

Jon