Full width image in a ListView - android

I am using this ImageLoader Library for my ListView. It by default decodes the file to a 70px bitmap. But then I changed it to 1000, and the image I get is proper. The only problem is displaying the image in the ImageView.
The ImageView in the ListItem is like this:
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:scaleType="centerInside" />
This displays an image which is centered in the ImageView, with proper aspect ration(no stretching etc..) and has empty spaces on all sides. The empty spaces might be because of the lower dimensions of the image.
I want the image to take complete width of the screen, and maintain the aspect ration. How do I get it?
I tried:
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY" />
But then the image is stretched horizontally and completely out of aspect ration. Looks like its taking the height same as the actual image height but width as fill_parent.
Thank You

Try this:
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/name"
/>

Make android:layout_width="match_parent".
Set height to some arbit but legit value to begin with like android:layout_height="0dp".
And for height, since there is no appropriate scaleType to get the aspect ratio the way you desire (i believe - confirm that developer.android.com/reference/android/widget/…), what you will have to do is in the java file, get the image's width and then set the height according to aspect ratio you need (0.6 in your case).

Try adding this
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>

Related

ImageView Scale Only Height and keep width match_parent

I want to ImageView Scale Only Height and keep width match_parent so that width can be taken as it
Here is my code can you please give me suggestion.
<androidx.cardview.widget.CardView
android:id="#+id/card_view_image"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="140dp"
card_view:elevation="0dp"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="0dp"
android:layout_marginTop="15dp"
card_view:layout_constraintTop_toBottomOf="#+id/user_name"
tools:ignore="MissingConstraints">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="140dp">
</ImageView>
</androidx.cardview.widget.CardView>
I want to give height as 140 fix and image should scale to that height.
I think you ask the scale type. You can use
android:scaleType="fitXY"
If I understand the problem correctly, you can fix it by adding the above code.
If this is not the solution, you will understand the subject more clearly if you examine the link.
From what I understood,
If you use a linear layout for the parent then you can use the android:layout_weight and assign it a value of 1 and keep the android:layout_height to 0dp. This will allow your image to scale as much as possible as it will not allow any space to be left unused on the screen.
<LinearLayout>
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
the scaleY attribute used to scale the view in Y-direction, you can check it out by giving it an integer value greater than one.
SEE BELOW CODE.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:scaleY="3"
app:layout_constraintStart_toStartOf="parent"
android:src="#drawable/ic_launcher_background"
/>
But it may stretch your imageView which will look ugly so try to use scaleType attribute as shown below:
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:scaleType="fitCenter"
app:layout_constraintStart_toStartOf="parent"
android:src="#drawable/ic_launcher_background"
/>
if you use the following setting
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="140dp">
The image view will take full match parent as width and 140dp as height but the image inside ImageView will still maintain its aspect ratio and will stretch to only either end (either to width or to height) while maintaining the aspect ratio.
For example: if you have 100*70 dimension image then your image after rendering in the ImageView will be taking 140dp height and 200dp width to maintain aspect ratio despite having a lot of extra room available in width(width been match_parent)
But if you want your image to take full space of your Imageview without worrying about aspect ratio then you can use
android:scaleType="fitXY"
fitXY make sure the image is stretched to full available space.
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="140dp">
For example: if you have the same 100*70 dimension image then your image after rendering in the ImageView will be taking 140dp height and width will depend upon the dimension of the device as available width is full width allocated to parent view (width been match_parent) and the image will be stretched and will be out of aspect ratio.

Resize ImageView's height to match original image's aspect ratio using Glide

I have an ImageView in GridLayout that is showing an image loaded from Url. GridLayout has 2 columns and it is all stretched to the entire screen. I need an entire image to be visible without any changes to the aspect ratio. Since the screen width can vary on many devices, I need the height to be calculated from the width of ImageView (which needs to fill the GridLayout) and from the aspect ratio of the downloaded image.
My idea was to set the width of ImageView to match_parent and height to wrap_content and then tell Glide that I wanna the height to be calculated to fit the aspect ratio of the image, but I am struggling to do that.
So far I have this in the layout:
<ImageView
android:id="#+id/list_item_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter" />
And this in adapter:
Glide.with(viewHolder.imageView.getContext())
.load(item.getImageUrl())
.apply(new RequestOptions().error(R.color.black_one))
.into(viewHolder.imageView);
I found the solution in this article. Using a ConstraintLayout there is an option to use app:layout_constraintDimensionRatio parameter. You need to set one of the dimensions to 0dp and then you just choose whatever ratio you want and that is it.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:src="#drawable/top_image"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>
I belive what you are looking for is to load images like instagram feed does, dynamic height with fixed width, without cropping the content. Then set the height to wrap content, width to match parent and set adjustViewBounds to true.
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:minHeight="200dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
The android:adjustViewBounds parameter does the magic of setting the imageview height dynamically.

Image with same resolution not fit on layout imageview

Problem: trying to give multi device support screen for a simple layout but in Nexus 6 its creating the problem,means not showing fit.
It's side is cutting down where as per as docs for nexus-6 resolution is 1440*2560 and image should be in drawable-xxxhdpi .so i keep a image with resolution of 1440*2560.
<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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:id="#+id/imv" />
</RelativeLayout>
if i ll give match_parent so obvious it will stretch the image.
Please help me to get out of it.
Here is screen shots of screen -
http://s10.postimg.org/43od5j5h5/screen_shot_layout.png
Set the width of the Image to fill_parent (you can set margins if you want a bit smaller imageView or you could also just set a fixed width)
Use android:adjustViewBounds to keep aspect ratio
Set height to wrap_content (it will take whatever it takes to maintain aspect ratio)
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/icon"
android:id="#+id/imv"
android:scaleType="fitCenter" />
If you want to fit the image on the imageview, replace android:src with android:background in the ImageView in the xml code.
Try to use these lines of code in the layout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:scaleType="fitXY"
android:id="#+id/imv" />

How to maintain the aspect ratio of the image and fill the screen width?

I am trying to resize an image by keeping the aspect ratio. It should be just large enough to fill the screen width and if necessary some of the image should be off-screen.
here is a picture of what I want
I tried
android:adjustViewBounds
but when the image is larger than screen it fits image into imageView and not filling the width.
And I also don't want to use :
android:scaleType="centerCrop"
Here is my complete code:
<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">
<ImageView
android:id="#+id/imageBackgroundAboutFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/about_us_background"/>
</RelativeLayout>
Use android:scaleType="fitXY" with android:adjustViewBounds
UPDATE
I think you should do some trial and errors :
How to scale an Image in ImageView to keep the aspect ratio
Scale Image to fill ImageView width and keep aspect ratio
So many possible fix, but i dont really sure which one will work for you (my answer working for me but not for you - for example).
updtae your imageview like this..
remove scaleType and adjustViewBounds.. and make layout_height as match_parent
<ImageView
android:id="#+id/imageBackgroundAboutFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/about_us_background"/>

ImageView - how to force scaling the width uniformly having defined the height

I defined two ImageViews and set the background like this:
int tmpID = findViewById(R.id.mypng)
ImageView tmpIV.setBackgroundResource(tmpID);
And this is the xml with the Image views:
<RelativeLayout
android:id="#+id/myDisplay"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="0dp" >
<ImageView
android:id="#+id/b1"
android:layout_width="300dp"
android:layout_height="match_parent"
android:contentDescription="#string/anyStringValue"
android:scaleType="fitCenter" />
<ImageView
android:id="#+id/b2"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/b1"
android:contentDescription="#string/anyStringValue"
android:scaleType="fitCenter" />
Now all that should happen is that when I set the background of the imageviews, the png adjusts uniformly its size to the parents 100dp height while the width should scale uniformly - down or up.
I tried to set the width smaller and larger. When its set to 300dp for example then it stretches the png width to 300 and 100 height while it should only stretch it's width so far that the height reaches 100.
I thought "fitCenter" would do that. I also tried all the other attribute values, but without luck.
Thanks!
android:scaleType only take care about the android:src why don't you use that param?? do you really want use background and don't set a source?
Maybe yoy can have one RelativeLayout with two ImageView for each imageView, one with the "background scaled" and the der with the real source.

Categories

Resources