Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ImageView inside CollapsingToolbarLayout not visible in certain devices

I am using CollapsingToolbarLayout with two images inside, one for the background and one as an upper logo. The idea is to make them both parallax. This thing works fine in Android 5 in physical devices, but not in devices (or emulators) with lower versions. Kind of strange.

This is my layout:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <NestedScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" >

        <FrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="#fff">

            <!--content--> 
        </FrameLayout>

    </NestedScrollView>

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:background="#222">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll">
            <ImageView
                android:id="@+id/header_bk"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/background"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"
                />
            <ImageView
                android:id="@+id/header_logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/ic_logo"
                app:layout_collapseMode="parallax"
                android:background="#44ff0000"
                />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
like image 204
juanmeanwhile Avatar asked Jul 09 '15 09:07

juanmeanwhile


1 Answers

I found a way to make it work. Seems to be something wrong with views with wrap_content inside CollapsingToolbarLayout in <5 Android versions. Changing to match_parent and using scale_type="center" to make the image stay centered did solve my problem.

This is how the image layout changes:

<ImageView
    android:id="@+id/header_logo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="center"
    android:layout_gravity="center"
    android:src="@drawable/ic_adi_logo"
    app:layout_collapseMode="parallax"
    />
like image 129
juanmeanwhile Avatar answered Oct 08 '22 18:10

juanmeanwhile