Android: nothing is shown on right of GridView (wrap_content not working?)

Question

I want to create a DialogFragment in android with 2 components: A GridView on the left with images and a big image on the right (which is the bigger version from the selected image in the gridview).

The problem is that I can't see my big image. It seems like GridView is taking all the space.

This is my XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="horizontal" 
android:background="#FFFFFF">

<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/image_overview"
android:layout_width="wrap_content" 
android:layout_height="fill_parent"
android:columnWidth="50dp"
android:numColumns="1"
android:gravity="left"
android:background="#FFFFFF"
/>

<ImageView
android:id="@+id/main_image"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#FFFFFF"
/>
</LinearLayout>

I already tried a lot of the parameters to see if it makes any difference, but nothing helps. My gridview is small (because I put a small size), but the space on the right is empty.

If I remove my gridview, I can see the big image. If I put a specific width for my gridview, I can also see my big image.

So if I change following line for the GridView

    android:layout_width="wrap_content" 

by

    android:layout_width="100dp" 

it works as expected. It looks like wrap_content is setting a much bigger width.

This is the code for creating my topvew (some code is comment because I tried some stuff to see if it has any impact):

    @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    getDialog().setTitle("Title Item");

    //Get complete View
    topView = inflater.inflate(R.layout.something, container, false);
imageAdapter = new ImageAdapter(this.getDialog().getContext());

    //Create the left panel (gridview of small images)
    GridView gridview = (GridView)topView.findViewById(R.id.image_overview);
    gridview.setAdapter(imageAdapter);
    gridview.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
            currentBigImage = imageAdapter.getFilePath(position);
            updateMainImage();
        }

    });

    //gridview.setAdjustViewBounds(true);

    //Create the middle panel (big image)
    imageView = (ImageView)topView.findViewById(R.id.main_image);
    imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
    //imageView.setAdjustViewBounds(true);
    //imageView.setPadding(8, 8, 8, 8);
    updateMainImage();
    //v.invalidate();

    return topView;
}

This is the code from my adapter (creating a single view for the small image):

public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView;
    if (convertView == null) {  // if it's not recycled, initialize some attributes
        imageView = new ImageView(mContext);
        imageView.setLayoutParams(new GridView.LayoutParams(50, 50));
        //imageView.setAdjustViewBounds(true);
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        imageView.setPadding(8, 8, 8, 8);
    } else {
        imageView = (ImageView) convertView;
    }
    imageView.setImageBitmap(BitmapFactory.decodeFile(paths.get(position)));
Log.i("parent.getWidth(): ", ""+parent.getWidth());
    return imageView;
}

As you can see, I'm also printing the width of the parent, which is a very big number. Because the view here is a single item in the gridview, I assume the parent is the gridview? If so, I'm not sure if it's normal that the width is big, because it's configured on wrap_content, but maybe that's normal even with wrap_content if Android creates a dialog with a specific size.

Anybody has an idea how I could use wrap_content instead of fixed size?

Answer 1

First of all, thanks Andy Harris & Dipak Keshariya for your help. It didn't fully solved the problem, but it helped me understanding that android:layout_weight="0" can lead to problems.

Before I posted my answer here, I already tried to configure

android:layout_weight="1"

for the imageview only, but that didn't work. Putting it on 1 for both, does make the ImageView visible, however, it's not correctly displayed. The size of the imageview seems correct, but is shows a part of the image in big (so zoomed in).

I tried to play with ImageView.ScaleType and AdjustViewBounds, but nothing works.

If I configure

android:layout_weight="1"

only for the GridView, it shows the GridView and the ImageView both correctly, but in that case, the gridview takes up all the corresponding width, which makes the dialog as width as the screen of the tablet (changing width of the parentview to match_parent doesn't change that).

So I will keep on using the fixed size for now.

Thanks for the help!

Answer 2

In both the GridView and the ImageView, use:

android:layout_width="0dp"
android:layout_weight="1"

This should fix it. You can try using different weights for each view if you want one view to take up more of the available screen space than the other.