CODEWITHSUNDEEP
androidparallaxandroid-toolbarandroid-design-libraryandroid-coordinatorlayout
Alexander Farber
Alexander Farber

Reputation: 23018

Parallax effect with collapsing toolbar not working, image in header squished

In the blog Design Support Library: Collapsing Toolbar Layout blog article there is a header image with nice parallax effect:

app screenshot

In a simple test project at GitHub I am trying to achieve similar effect - but for some reason the image is squished:

app screenshot

In the activity_main.xml I have tried all possible values for the scaleType but the image stays distorted:

        <ImageView
            android:id="@+id/header_image_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/header"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

What am I missing here please?

UPDATE:

I have tried to change to match_parent as Apurva suggests (thanks +1):

        <ImageView
            android:id="@+id/header_image_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/header2"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

But this does not help - the header image is squished:

app screenshot 1

app screenshot 2

Upvotes: 3

Views: 3634

Answers (2)

tachyonflux
tachyonflux

Reputation: 20211

By default, backgrounds will stretch to fit. You should be setting the android:src rather than the android:background on your ImageView.

<ImageView
    android:id="@+id/header_image_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/header2"
    android:scaleType="centerCrop"
    app:layout_collapseMode="parallax" />

Upvotes: 7

Eli Blokh
Eli Blokh

Reputation: 12293

Did you mention that in the tutorial author uses SquareImageView?

He overrided onMeasure method:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int width = getMeasuredWidth();
    setMeasuredDimension(width, width);
}

Class is implemented here

Upvotes: 2

Related Questions