CODEWITHSUNDEEP
javaandroid
Turma RC
Turma RC

Reputation: 71

ImageView dissapearing when inside Collapsing Toolbar

In my ProfileFragment.java I have a Collapsing Toolbar. When I collapse the toolbar, this problem happens (it's easier to show it in image):

Please, ignore those objects in the right upper corner

example problem

The profile image gets cut. It's the android:id="@+id/picFotoPerfil3" that disappears.

This is my XML:

<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"
android:background="@color/colorWhite"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools">

<android.support.design.widget.AppBarLayout
    android:id="@+id/testeparabackground"
    android:layout_width="match_parent"
    android:layout_height="203dp"
    android:background="?attr/actionBarDivider">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/backgroundcollapsedtoolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="exitUntilCollapsed|scroll">

        <ImageView
            android:id="@+id/imgFotoCapa"
            android:layout_width="446dp"
            android:layout_height="203dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:paddingLeft="-32dp"
            android:visibility="visible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:srcCompat="@drawable/banner_profile"
            tools:layout_editor_absoluteY="1dp" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbarid"
            android:layout_width="match_parent"
            android:layout_height="110dp"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        </android.support.v7.widget.Toolbar>

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

<ImageView
    android:id="@+id/picFotoPerfil3"
    android:layout_width="117dp"
    android:layout_height="103dp"
    android:layout_alignParentBottom="true"

    android:layout_centerHorizontal="true"
    app:layout_anchor="@+id/testeparabackground"
    app:layout_anchorGravity="bottom|center"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@android:color/black" />
</android.support.design.widget.CoordinatorLayout>

Upvotes: 0

Views: 294

Answers (2)

amit
amit

Reputation: 719

use layout_collapseParallaxMultiplier used in CollapsingToolbarLayout as below: 

 <android.support.design.widget.CollapsingToolbarLayout ... >
<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:src="@drawable/random_pattern"
    android:scaleType="fitXY"
    app:layout_collapseMode="parallax"
    app:layout_collapseParallaxMultiplier="0.75"/>
 </android.support.design.widget.CollapsingToolbarLayout>

When scrolling we see the following - appbar image starts hiding under the content and beyond the top edge of the screen. Parameter layout_collapseParallaxMultiplier determines what part of the image (in percent) will be hidden under the bottom content.

So, for example, setting this parameter to value 1.0 means that top boundary of appbar's image is bound to the top edge of the screen and doesn't move when scrolling. And main content is moving up the top of the image.

When the parameter is not set this corresponds to the value 0.5 and image will be overlapped above and below synchronously.

Upvotes: 0

SamyB
SamyB

Reputation: 235

Set the attribute android:elevation="50dp" to your imageview

Upvotes: 1

Related Questions