Basic issue with layout of imageView in ScrollView

Question

I have a ScrollView that contain one imageView I want this imageView matching the parent width, full width of the screen and then keep ratio aspect, so wrapping the height.

My options where : - layout_widht : match_parent - layout_height : wrap_content - scaletype : centerCrop

Here is the code

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fillViewport="true" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/cellarWineImageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/etiquette_unknown" />
    </LinearLayout>

</ScrollView>

Here is the result

enter image description here

If I just put a fixe height 348dp the result is here

enter image description here

After fighting, I suspect that the wrap content, consider the original height of the image, doesn't matter if the size change due to match parent of the width. Please help for such basic topic. And I hope we can handle this without making any code...

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Based on Akshat Agarwal great answer, we can use simple stuff by extending ImageView into a a new component : AspectRatioImageView, and then reusing it directly in the layout.

package com.yourpackage.widgets;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;

public class AspectRatioImageView extends ImageView {

    public AspectRatioImageView(Context context) {
        super(context);
    }

    public AspectRatioImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public AspectRatioImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

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

        if (getDrawable() == null)
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        else {
            int width = MeasureSpec.getSize(widthMeasureSpec);
            int height = width * getDrawable().getIntrinsicHeight() / getDrawable().getIntrinsicWidth();
            setMeasuredDimension(width, height);
        }
    }
}

Now to use it in the XML:

<com.yourpackage.widgets.AspectRatioImageView android:layout_centerHorizontal="true"
    android:src="@drawable/yourdrawable" android:id="@+id/image"
    android:layout_alignParentTop="true" android:layout_height="wrap_content"
    android:layout_width="match_parent" android:adjustViewBounds="true" />

This works great on my project, by just changing curent ImageView, by this new packageName. Then everything worked perfectly.

I've set android:src in my layout yet getDrawable() is returning null. When I check for null it's crashing anyway: java.lang.IllegalStateException: onMeasure() did not set the measured dimension by calling setMeasuredDimension() — Makalele, Sep 19 '15 at 22:24
@Makalele at the beginning, it seems the drawable is null, before the content is set, or inflated, probably the normal life cycle. So you can just do the job as soon as the drawable is present. That work fine for me. — Anthony, Sep 21 '15 at 08:47

score 0 · Answer 2 · answered Jul 16 '14 at 21:28

0

Try putting on LinearLayout, ImageView and ScrollView your android:layout_height="fill_parent" to see if works.

answered Jul 16 '14 at 21:28

Leonardo

3,141
3
31
60

He should probably remove the 'center crop' in his ImageView also – AmmarCSE Jul 16 '14 at 21:38
Yeah, I didn't see that, but I guess you are right ! – Leonardo Jul 16 '14 at 21:39
I used match_parent (which is recommend, I hope is the same), that look better, but it is a fake, the ratio aspect is not preserved. To better checked, I put 2 images view, one after the other, and one is hidden by the other. – Anthony Jul 17 '14 at 08:07

Haresh Chhelana · Answer 3 · 2014-07-17T08:32:49.787

0

Try this way,hope this will help you to solve your problem.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <ImageView
        android:id="@+id/cellarWineImageView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher"
        android:scaleType="fitXY" />
</LinearLayout>

edited Jul 17 '14 at 08:32

answered Jul 17 '14 at 04:18

Haresh Chhelana

24,720
5
57
67

Thanks @Haresh, but the image is not wrapping to its maximum size (the screen width). The view wrap width well, but the image inside is small. The height has not really sense (2/5 of the screen height) – Anthony Jul 17 '14 at 08:05

score 0 · Answer 4 · answered Jul 17 '14 at 09:42

change the layout like this

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
     android:minHeight="348dp"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/cellarWineImageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
          android:minHeight="348dp"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

Thanks but this picture was an example, si I can have many different size to display during runtime — Anthony, Jul 21 '14 at 15:45

Basic issue with layout of imageView in ScrollView

4 Answers4