How to Increase the size of Image View in Android

user707165 picture user707165 · Jan 17, 2012 · Viewed 15.6k times · Source

I am working on a project that requires me to implement two horizontal scroll views with an image view in between them. I would like to extend the size of the image view to fill up the gap in between the scroll view. I went through the sample code, but it doesn't seem to mention anywhere in the size of the image view. I've enclosed the code below after the Image describing my problem.

enter image description here

public class Gallery2DemoActivity extends Activity {
private Gallery gallery,gallery1;
private ImageView imgView;

private Integer[] Imgid = {
    R.drawable.a_1, R.drawable.a_2, R.drawable.a_3, R.drawable.a_4, R.drawable.a_5, R.drawable.a_6, R.drawable.a_7
};

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

gallery = (Gallery) findViewById(R.id.examplegallery);
gallery.setAdapter(new AddImgAdp(this));

gallery1 = (Gallery)findViewById(R.id.examplegallery1);
gallery1.setAdapter(new AddImgAdp(this));

imgView = (ImageView)findViewById(R.id.ImageView01);    
imgView.setImageResource(Imgid[0]);


 gallery.setOnItemClickListener(new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
        imgView.setImageResource(Imgid[position]); 
    }
});

}

public class AddImgAdp extends BaseAdapter {
int GalItemBg;
private Context cont;

public AddImgAdp(Context c) {
    cont = c;
    TypedArray typArray = obtainStyledAttributes(R.styleable.GalleryTheme);
    GalItemBg =  typArray.getResourceId(R.styleable.GalleryTheme_android_galleryItemBackground, 0);
    typArray.recycle();
}

public int getCount() {
    return Imgid.length;
}

public Object getItem(int position) {
    return position;
}

public long getItemId(int position) {
    return position;
}

public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imgView = new ImageView(cont);

    imgView.setImageResource(Imgid[position]);
    imgView.setLayoutParams(new Gallery.LayoutParams(110, 100));
    imgView.setScaleType(ImageView.ScaleType.FIT_XY);
    imgView.setBackgroundResource(GalItemBg);

    return imgView;
}
}

This is my XML main file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Gallery
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/examplegallery"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />
<ImageView
    android:id="@+id/ImageView01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:layout_weight="1"/>
<Gallery
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/examplegallery1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />
</LinearLayout>

Below is my Attributes file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="GalleryTheme">
    <attr name="android:galleryItemBackground" />
</declare-styleable>
</resources>

Answer

Fuzzical Logic picture Fuzzical Logic · Jan 17, 2012

Vinner,

The issue here is really two issues:

  1. The size of the ImageView is based on the parent, which means that it shares its width and height.

  2. The Image is resized to match the most limiting dimension (width).

The easiest way to handle this is to set the ScaleType of the ImageView. There are a number of Scaling Types, but the one you probably want is Center Crop. In code, this is done by view_name.setScaleType(ImageView.ScaleType.CENTER_CROP). You may also do this in XML for your ImageView with the attribute android:scaleType="centerCrop". Mind you, this will resize your Image and maintain your aspect ratio, but it will cut off the sides.

Just add the above attribute to your ImageView in your XML, (probably under your layout_weight), and it should do what you want.

Hope this helps,

FuzzicalLogic