CODEWITHSUNDEEP
androidimageviewandroid-linearlayout
Yohanes Nurcahyo
Yohanes Nurcahyo

Reputation: 621

Why is the second identical ImageView inside LinearLayout smaller?

I have two ImageViews with the same image source inside LinearLayout, but why the second image is smaller than the first?

This is the source code:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center_vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/background_landscape" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/background_landscape" />

    </LinearLayout>
</RelativeLayout>

Screenshot ImageView with smaller image on the second image

The error can be reproduced clearly on 800x1280 pixel resolution.

How can make both images have the same size with the second image cropped on the right side of the screen. (NOT SCALED DOWN)

Upvotes: 0

Views: 117

Answers (2)

sergej shafarenka
sergej shafarenka

Reputation: 20426

... why the second image is smaller than the first?

Because the first image gets its real width due to wrap_content value of layout_width attribute. And the second image receives the rest width (width of layout minus width of first image) from LinearLayout, which is obviously smaller, than the real width of the image. That's why it gets scaled down.

How can make both images have the same size with the second image cropped on the right side of the screen. (NOT SCALED DOWN)

You might use ScrollView, which allows children to go out of parent's boundaries.

Update: as mentioned by CommonsWare:

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="false"
    >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="center_vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/background_landscape" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/background_landscape" />

    </LinearLayout>

</HorizontalScrollView>

Upvotes: 1

forcewill
forcewill

Reputation: 1647

Like beworker said the first image is getting its width due to the wrap_content and the second image gets the remaining available horizontal space. Use android:layout_weight="1" in both ImageViews if you want them each to ocuppy half the available screen width

Upvotes: 0

Related Questions