CODEWITHSUNDEEP
androidandroid-layoutlistviewandroid-listview
cyber101
cyber101

Reputation: 2994

Making the Android ListView Row fit the image that it contains, and not bigger

I have a Android list , and I want to make my “ListView” 's row dimensions to match the actual Image that’s inside it. Currently the row is larger than the image inside it, therefore distorting the list.

Please see below:

enter image description here

My activity (ActivitytToyotaOwnersMainListView.java, related code only):


public class ActivitytToyotaOwnersMainListView extends Activity {


    public ListView listView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_toyota_owners_main);

        ListViewItemModelLoader.LoadModel();

        listView = (ListView) findViewById(R.id.toyota_owners_main_list_view);

        if (listView!=null)
        {

        String[] ids = new String[ListViewItemModelLoader.Items.size()];
        for (int i= 0; i < ids.length; i++){

            ids[i] = Integer.toString(i+1);
        }

        ItemAdapter adapter = new ItemAdapter(this,R.layout.main_activity_view_icons, ids);
        listView.setAdapter(adapter);
        }
        else
        {   Log.d("***Class ActivitytToyotaOwnersMainListView, listView: ",
                String.valueOf(listView));

        }


        // OnItemClickListener
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() 
......

ActivitytToyotaOwnersMainListView layout xml (activity_toyota_owners_main.xml)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".ToyotaOwnersMainActivity" >

   <ListView
       android:id="@+id/toyota_owners_main_list_view"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true" >
   </ListView>

</RelativeLayout>

My ItemAdapter (Custom Adapter for displaying images in the list)

package com.toyota.toyotaownerspoc.main;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.AbsListView.LayoutParams;
import java.io.InputStream;

import com.toyota.toyotaownerspoc.R;

public class ItemAdapter extends ArrayAdapter<String> {

    private final Context context;
    private final String[] Ids;
    private final int rowResourceId;

    public ItemAdapter(Context context, int textViewResourceId, String[] objects) {

        super(context, textViewResourceId, objects);

        this.context = context;
        this.Ids = objects;
        this.rowResourceId = textViewResourceId;

    }

    @SuppressWarnings("finally")
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        View rowView = null;
        // get input stream
        InputStream ims = null;
        try {
            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            if (inflater != null) {
                rowView = inflater.inflate(rowResourceId, parent, false);
                if (rowView != null) {
                    ImageView imageView = (ImageView) rowView
                            .findViewById(R.id.main_activity_icons_image_view);

                    if (imageView != null) {
                        int id = Integer.parseInt(Ids[position]);
                        String resourceId = ListViewItemModelLoader.GetbyId(id).resourceFile;

                        // load image as Drawable
                        int resource = context.getResources().getIdentifier(
                                resourceId, "drawable",
                                context.getPackageName());
                        Drawable drawable = context.getResources().getDrawable(
                                resource);

                        // set image to ImageView
                        imageView.setImageDrawable(drawable);

                    } else {
                        Log.d("***Class ItemAdapter , imageView: ",
                                String.valueOf(imageView));

                    }
                } else {
                    Log.d("***Class ItemAdapter , rowView: ",
                            String.valueOf(rowView));
                }
            } else {
                Log.d("***Class ItemAdapter , inflater: ",
                        String.valueOf(inflater));
            }
        } catch (Exception exc) {
            Log.d("***Class ItemAdapter , getView(int position, View convertView, ViewGroup parent): ",
                    exc.getMessage());
        } finally {

            return rowView;
        }

    }

}

The layout of the image that is going to be inside every ListView row (main_activity_view_icons.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:minHeight="64dp">
<ImageView 
    android:id="@+id/main_activity_icons_image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   </ImageView>

</RelativeLayout>

Thanks

Upvotes: 1

Views: 1440

Answers (4)

Slion
Slion

Reputation: 3048

I had a similar problem and ended up having too explicitly specify the height of the ImageView. Basically the ImageView layout_height should specify the same value as your row height from the layout minHeight attribute. In your case that would look like the following:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:minHeight="64dp">
    <ImageView 
        android:id="@+id/main_activity_icons_image_view"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:scaleType="fitCenter">        
   </ImageView>
</RelativeLayout>

scaleType to fitCenter did not do it on its own for me.

Upvotes: 0

Vinay Rathod
Vinay Rathod

Reputation: 91

use..

android:scaleType="fitXY"

inside your ImageView for remove your extra spaces

or

you can scale your image to fit your screen because your image is larger then your screen width..

Upvotes: 0

Mohit
Mohit

Reputation: 11314

You may use this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:minHeight="64dp">
<ImageView 
    android:id="@+id/main_activity_icons_image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

</ImageView>

</RelativeLayout>

Upvotes: 0

Gil Moshayof
Gil Moshayof

Reputation: 16761

I noticed the minHeight parameter inside the RelatiiveLayout of your row layout. Try removing that. Also, try to set the layout width / height of the relative layout and the image view there to "wrap content"

Hope this helps.

Upvotes: 2

Related Questions