How to view images in GridView with its original dimensions - android

I want to display a set of images in GridView (They have the same dimensions).
Below the layout for the GirdView and the GirdView Item ..
Teh problem is that the image height is stretched. why ?
GridView layout :
<GridView
android:id="#+id/gvRecipes"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_below="#+id/include1"
android:layout_margin="0dp"
android:background="#drawable/bg"
android:gravity="right"
android:horizontalSpacing="10dp"
android:padding="0dp"
android:verticalSpacing="5dp" >
</GridView>
GridView item is :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/include21"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:background="#drawable/btn"
android:padding="5dp" >
<ImageView
android:id="#+id/imgRecibeImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/img1" />
<TextView
android:id="#+id/txtRecibeName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_gravity="bottom"
android:background="#80000000"
android:gravity="right"
android:padding="5dp"
android:text="Crispy Chicken and Sandwich"
android:textColor="#ffffff"
android:textSize="17sp" />
</FrameLayout>

In your scale type you have used fitXY:
fitXY: This one should only be used if disproportionate scaling does not affect the graphic. In the case of bitmap graphics, this is almost always bad to use. This sets the width of the source image to the width of the view, and the height of the source image to the height of the view, without maintaining the aspect ratio of the source image.
Now your layout and imageview width is match_parent, so the image will be shown in full width of your parent view, but for height it is wrap_content so the imageView will adjust the actual height of your each and every image.

Related

Prevent Image from scaling even though the imageView height = "match_parent"

I have this linear layout,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:background="#color/white"
android:layout_marginTop="1dp"
android:weightSum="1" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:gravity="left|center"
android:padding="5dp"
android:text="Policy No."
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.2"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Now i want the image to not scale but the ImageView to match the height of the parent, the TextView height is set to wrap content and that cant be changed. Also, i can't set the imageView height as wrap_content, since it'll change the height of the overall Linear Layout and i can't afford that.
![Image of problem]http://imgur.com/gaef828
Now what i want is to have the image's size remain the same as it is the second row, even though the first row's height has increased.
Thanks in advance, any help would be appreciated.
add :
android:scaleType="centerInside"
to your ImageView
To perform no scaling, use
android:scaleType="center"
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
To get what you want, you can do this:
First give your imageviews same fixed height so they won't scale:
android:layout_height="25dp"
Than put gravity to center_vertical:
android:layout_gravity="center_vertical"
So now you have for each imageview:
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="25dp"
android:layout_weight="0.2"
android:src="#drawable/ic_launcher"
android:layout_gravity="center_vertical" />
It now no longer matters how may lines your textview has, your imageview will stay the same!
Ouput:
Hope this will help you with your problem.

Android : Child layouts occupying the whole width of screen

I have a linear layout as a parent layout with three child layouts and I am trying to show the images in child layouts by fetching from webservice.
Some of my images are occupying the whole width of the screen and It should not happen. how to avoid my child layouts occupying the whole width of the screen??
here is my code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:layout_weight="9">
<LinearLayout
android:id="#+id/one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="left"
android:layout_alignParentLeft="true"
android:orientation="vertical"/>
<LinearLayout
android:id="#+id/two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="center"
android:layout_toRightOf="#id/one"
android:orientation="vertical"/>
<LinearLayout
android:id="#+id/three"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="right"
android:layout_alignParentRight="true"
android:orientation="vertical"/>
</LinearLayout>
you have applied weight to your Linear layout,for weight to be applicable change the layout_width to 0dp
There are multiple ways of doing this
Add the imageviews in the layout and assign them width+height in dp
like so
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:layout_weight="9">
<LinearLayout
android:id="#+id/one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="left"
android:layout_alignParentLeft="true"
android:orientation="vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/imageView"
android:layout_gravity="center" />
</LinearLayout>
<LinearLayout
.....
<LinearLayout
.....
</LinearLayout>
Play around with the scale values in
ImageView.ScaleType
CENTER
Center the image in the view, but perform no scaling.
CENTER_CROP
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
CENTER_INSIDE
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
FIT_CENTER
Scale the image using CENTER.
FIT_END
Scale the image using END.
FIT_START
Scale the image using START.
FIT_XY
Scale the image using FILL.
MATRIX
Scale using the image matrix when drawing.
find more details here

android imageView scale

I have an ImageView which is populated from database (the image comes from database). in the database i have images both portrait and landscape!! how can i adjust the imageView to scale it self according to the image width and height. I have tried many ways but no result! any help please!!!!
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/slideshow"
android:orientation="horizontal"
android:padding="0dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginRight="5dp"
android:id="#+id/slide1"
android:src="#drawable/ddd"
/>
Try this code. adjustViewBounds attribute makes the ImageView the same size as image that you put in it.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true" />
If you need specific width or height change the wrap_content value.

show only part of the original image of an image view

I am using a list view and I have an image in it, the image just for example say is 1920 by 1080, and i only want to display the same amount of the image as height of the layout that it is in.
So i have a verticl linearLayout and it's height is 100dp for example, so i want the image that im using in that image view to display whatever 100 dp would translate onto the image? if that makes sense. I want to keep the same resolution and i dont want to shrink it or anything, just show part of the image .
this is the xml as of now:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/example"
/>
</LinearLayout>
</LinearLayout>
Try this:
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="center"
Documentation to "center"
Documentation to "layout_weight"

How to prevent Android ImageView from Overlapping TextView

In my application I have a title(TextView) and an Image. The image is grabbed from the web and most of the images are different sizes. Some of these images are to tall and overlap on top of my textview, covering it up. Is there anyway to prevent this?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/screen"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<android.gesture.GestureOverlayView
android:id="#+id/gestures"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1.0"
>
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=""
android:paddingBottom="10px"
android:layout_weight="1.0"
/>
<ImageView
android:id="#+id/picview"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:padding="10px"
android:cropToPadding="true"
android:layout_weight="0.0"
/>
</android.gesture.GestureOverlayView>
</LinearLayout>
I think problem is at android:layout_height="fill_parent" because you have created imageview whose height is matched with parent view, so pls make it "wrap_content" instead of "fill_parent".
Edit:
If you want the the display dimensions in pixels you can use
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();

Categories

Resources