Gallery only displaying selected pictures

Question

I'm working on Android 2.3.6 and 2.3.1 .

I have an unwanted behavior with Gallery : sides pictures from Gallery Items won't display.

My Gallery take all the space available and the layout containing the ImageView and a TextView is set to WRAP_CONTENT but still occupies all the screen, so sides items are over the bounds...

Here is the gallery's xml

<RelativeLayout xmlns:a="http://schemas.android.com/apk/res/android"
    a:layout_width="match_parent"
    a:layout_height="match_parent"
    a:layout_margin="0dp"
    a:padding="0dp">

    <ImageView
        a:id="@+imagePopup/selected"
        a:layout_width="60dp"
        a:layout_height="35dp"
        a:layout_alignParentLeft="true"
        a:layout_alignParentTop="true"
        a:src="@drawable/ic_cancel"
        a:contentDescription="@string/lng" />
    <TextView
        a:id="@+imagePopup/title"
        a:layout_alignParentTop="true"
        a:layout_toRightOf="@+imagePopup/selected"
        a:layout_alignWithParentIfMissing="true"
        a:layout_width="match_parent"
        a:layout_height="35dp"
        a:background="@drawable/rounded"
        a:text="dynamic text"
        a:textSize="23dp"
        a:textColor="#ffffffff"
        a:gravity="center"
        style="@style/trad"/>
    <Gallery
        a:id="@+imagePopup/gallery"
        a:layout_width="match_parent"
        a:layout_height="match_parent"
        a:layout_below="@+imagePopup/title"
        a:layout_alignWithParentIfMissing="true"
        a:background="#ff000000"/>
</RelativeLayout>

and its content xml

<RelativeLayout xmlns:a="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    a:layout_width="wrap_content"
    a:layout_height="wrap_content"
    a:background="#ffff55ee">

    <ImageView
        a:id="@+imageContent/imageView"
        a:layout_width="wrap_content"
        a:layout_height="wrap_content"
        a:layout_alignParentTop="true"
        a:padding="0dp"
        a:layout_margin="0dp"
        a:src="@drawable/ic_cancel" />

    <TextView
        a:id="@+imageContent/textOver"
        a:layout_width="wrap_content"
        a:layout_height="wrap_content"
        a:layout_alignParentTop="true"
        a:layout_centerHorizontal="true"
        a:layout_marginTop="4dp"
        a:shadowColor="#FF000000"
        a:shadowRadius="4"
        a:textColor="#ffffffff"
        a:textSize="16dp"
        a:textStyle="bold" />

</RelativeLayout>

I put an ugly background color to the picture container's background (RelativeLayout) to show how it behave :

can someone tells me what i'm doing wrong in here... i just can't get rid of it.

Thanks in advance ^^

Answer 1

Finally i found a much better way of doing this, more 'natural' as i needed : here is the modified part of my code :

<RelativeLayout xmlns:a="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    a:layout_width="wrap_content"
    a:layout_height="match_parent"
    tools:ignore="ContentDescription">

    <ImageView
        a:id="@+imageContent/imageView"
        a:layout_width="wrap_content"
        a:layout_height="match_parent"
        a:layout_alignParentTop="true"
        a:scaleType="fitXY"
        a:adjustViewBounds="true"
        a:src="@drawable/ic_cancel" />

scaleType="fitXY" and adjustViewBounds="true" made it in no time, thanks to this question

Answer 2

I think the probelm is with your Image. You are trying to display a huge image which is more likely to cover the entire screen.

You have to provide some pre defined width and height attributes for your Image.

Instead of wrap_content what you have provided like the one below,

  <ImageView
        a:id="@+imageContent/imageView"
        a:layout_width="wrap_content"
        a:layout_height="wrap_content"
        a:layout_alignParentTop="true"
        a:padding="0dp"
        a:layout_margin="0dp"
        a:src="@drawable/ic_cancel" />

Try to provide it something like this,

  <ImageView
    a:id="@+imageContent/imageView"
    a:layout_width="150dip"
    a:layout_height="150dip"
    a:layout_alignParentTop="true"
    a:padding="0dp"
    a:layout_margin="0dp"
    a:src="@drawable/ic_cancel" />

NOTE: The layout width and height I have specified here is just imaginary. You have to provide your own.

And you have to know the difference between wrap_content, fill_parent and actual hard coded width and height.

1. Wrap_cotent - It means that, it will use the width and height of your actual image.

2. fill_parent - Whatever maybe the size of your image , it takes the whole screen.

3. Providing height and width by our own means, what ever may be the size of the image you make it to be displayed uniformly by providing a particular width and height attribute.