Search code examples
androidandroid-imageviewandroid-collapsingtoolbarlayout

How to determine if an ImageView is visible in CollapsingToolbar?


I have a collapsing toolbar layout that looks like this:

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/expanded_toolbar_height"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

       <include layout="@layout/circle_image_view"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </android.support.design.widget.CollapsingToolbarLayout>

where circle_image_view is

<com.example.ui.CircularParseImageView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/iv_circular_backdrop"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_gravity="center"
    android:fitsSystemWindows="true"
    android:scaleType="centerCrop"
    android:transitionName="@string/transition_pic"
    app:layout_collapseMode="parallax" />

This is just a standard image view with a circular mask. When the the collapsing toolbar is expanded, the circular Image view is visible and shows like:

Expanded view

When collapsed, the image view is no longer visible as follows:

Collapsed view

However it seems like the visibility of the image view is still set to Visible even in the collapsed state. When the user presses the back button, I need to determine whether the image is visible or not to perform a shared element transition animation. How can I determine if the image is currently visible or not within the collapsing toolbar?

What I have tried:

getVisibility() remains unchanged

isOpaque() remains unchanged

getImageAlpha() remains unchanged


Solution

  • I was able to resolve the issue by using CollapsingToolbarLayout#getContentScrim() which according to documentation:

    Returns the drawable which is used for the foreground scrim.

    Seems like the image view is always visible but the foreground scrim hides it so using the alpha property getContentScrim().getAlpha() you can determine whether the image is visible or not.