Two images shown differently using the same XML layout

Question

I have a question regarding an issue that I have detected in my current Android app. There is a list view with custom list items. This is the XML layout:

<?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="wrap_content"
    android:background="@color/blanco"
    android:orientation="horizontal"
    android:padding="5dip" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="@color/fondo"
        android:orientation="vertical"
      >

        <TextView
            android:id="@+id/dia"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="12"
            android:textColor="@color/negro"
            android:textColorHint="@color/negro"
            android:textSize="40sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/mes"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="Diciembre"
            android:textColor="@color/blanco"
            android:textColorHint="@color/blanco"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/hora"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="TextView"
            android:textColor="@color/negro"
            android:textSize="25sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/linearLayout1"
        android:layout_below="@+id/linearLayout2"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/titulo"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:lines="1"
            android:text="TextView"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/lugar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="TextView"
            android:textSize="14sp" />


    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/linearLayout1"
        android:layout_alignTop="@+id/linearLayout1"
        android:layout_toRightOf="@+id/linearLayout1"

        android:orientation="vertical" >

        <ImageView
            android:id="@+id/imagen"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:background="@color/negro"
            android:scaleType="fitCenter"
            android:src="@drawable/bolera" />

    </LinearLayout>

</RelativeLayout>

And this is a screenshot from the app running on the simulator.In this case I am showing you two rows of the list. The image id in the layout is android:id="@+id/imagen"

As you can see, both images are shown differently, but both images have same height, width and resolution, both are 528x201px jpg files.

I would need to find a solution or the reason why they are shown differently.

Thank you.

Answer 1

    <ImageView
        android:id="@+id/imagen"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:background="@color/negro"
        android:scaleType="fitCenter"
        android:src="@drawable/bolera" />

this will help fix your problem, your are using android:scaleType="fitCenter" and what FIT_CENTER does is Scale the image using CENTER. and what is that center ? well, it Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. The result is centered inside dst.. and that's what you are having..right now.. the first image took x axis, and the second y axis.. to fix it, allocate a specific image dimension on your imageview and use FIT_XY.. how does it work ? well fit_xy Scale the image using FILL and FILL Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src . reference

    <ImageView
        android:id="@+id/imagen"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/negro"
        android:scaleType="fit_xy"
        android:src="@drawable/bolera" />

that should give you uniform aspects.. also correct the code formats okay.. some might be wrong.. hope it's helpful..

Answer 2

In your layout, you have three separate LinearLayouts defined and no two have the same set of elements. One has 3 TextViews, One has 2 TextViews, and One has 1 ImageView. I have noticed that you last Imageview is of height

android:layout_height="match_parent"

where as most other things in your code are

android:layout_height="wrap_content"

I cannot guarantee that this will fix your problems and knowing how layout pieces interact with each other is very intricate sometimes. Hopefully this will start to shed some light on potential problems created.

Happy coding! If you have any questions, leave them in the comments.