Strech To Fit Volley NetworkImageView - android

I'm using NetworkImageView to display images , the problem is the width and the height of the image is not fitting with the NetworkImageView , and the image will take it's original size and a white space will appear in the NetworkImageView . I don't wan't to change the image size as well ..
<com.android.volley.toolbox.NetworkImageView
android:layout_gravity="top"
android:id="#+id/thumb2"
android:layout_width="match_parent"
android:layout_height="170dp" />

If you want the image size to stay same then set layout_width & height to wrap_content.
android:layout_width="wrap_content"
android:layout_height="wrap_content"
otherwise just add android:scaleType with appropriate value that suits you.
android:scaleType="fitCenter"
or
android:scaleType="centerCrop"
You can see full list of available values here http://developer.android.com/reference/android/widget/ImageView.ScaleType.html

Related

ImageView src moves the image to center leaving sides visible when changing width and height

Please don't mark this a duplicate, as I am unable to find the solution.
Hi, I am trying to add src image with some background color
Here is what I am doing
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:background="#drawable/bg_layout_corners"
android:backgroundTint="#color/color_fbfbfa"
android:gravity="center">
<ImageView
android:id="#+id/iv_dashboard_niggle"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:background="#color/colorAccent"
android:src="#drawable/niggle2_3_3_3" />
</RelativeLayout>
and here is the output I am getting
When I try to decrease the width or height of imageView, the actual image is placing at the center and some border is visible.
I also checked for scaleType="center", this is also not working
Please help me.
Hope this solves your problem.
iv_dashboard_niggle.setScaleType(ImageView.ScaleType.fitXY);
Set wrap_content as height for your relative layout.
Then the space will go.
The image that you wanted to set in a image view needed to be in the same aspect ratio to fit exactly without applying scaleType...
for example
If you want to set a square image that have height and width ratio 1:1 then ImageView ratio needs to be 1:1
Well but also we have ScaleType if images not according ratio then we can set scale type to match the size of image view by resizing our image
In your case it's completely depend on what you want to show.
If you don't want background border then simply set background color to transparent by using
android:background="#android:color/transparent"
Best way is define ImageView size according aspect ratio if you don't want to use scale type

How to Put an image and text overlapped when the TextView height is wrap content?

I am working in an Android studio project. Here I am used an imageview and an TextView. I want to put some text on am image.
There are different texts taken from a database. The size of the texts vary.
The problem is when the size of the texts are too long it exceeds the size of the image, thus exceeds the image. The image size I have given is fixed. And the size of the TextView is wrap content.
Is there any way to make it possible that whatever the size of the texts, the image size will match accordingly? (I can use different images in case the size of the texts varies too much).
Thank you in advance.
You can use a relativeLayout to achieve the desired result. Make the imageView alignLeft and alignRight to the textView, so that it will match the width of the textView. Use scaleType = "fitXY" to fit the image src to the width of the imageView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignLeft="#id/text_view"
android:layout_alignRight="#id/text_view"
android:scaleType="fitXY" />
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text here" />
</RelativeLayout>

Fitting image width to match parent and adjust height according to aspect ratio in ImageView

I have an ImageView in my xml -
<ImageView
android:id="#+id/image"
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
I am using Glide library to fetch image from an url and set that into the ImageView.
All i want is to match the width of image with parent width and then adjust the height of image without affecting the aspect ratio.
if the image dimension is very less, it should be expanded to match parent width and if image dimension are more than screen size it should be shrinked to match parent width.
ImageView img = (ImageView) findViewById("image");
Glide.with(this).load("url here").into(img);
Which scaleType should i use ?
Is it possible in XML or it needs java code ?
Thanks in advance. :)
It is possible from the xml. I achieved it using the following code.
<ImageView
android:id="#+id/ivImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"/>
Scale XY scales the image using FILL and adjust view bounds preserves the aspect ratio.
I do not think you need center horizontal property.
After this I called a photo loader library to just download the image into the image view.
It helps me. Just use in imageView xml
android:adjustViewBounds="true"
And add override in glide:
GlideApp.with(context)
.load(url)
.override(Resources.getSystem().getDisplayMetrics().widthPixels)
.into(imageView)
use android:scaleType:fitXY
<ImageView
android:id="#+id/image"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
and java code
Glide.with(this).load(url)
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(img);
You may use ConstraintLayout for this purpose.
You can set the view size to a ratio such as 16:9 if at least one of the view dimensions is set to "match constraints" (0dp)
As quoted from android developers. Also you can refer this medium article for reference on how to achieve this ratio thing.

9-patch - Conservation of the height/width ratio of the non-stretchable area when scaling down

I have the following 9 patch file as background of a cardview:
To scale the image to the background I use the scale type "fitXY" on my ImageView :
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/background_player_right_elo"
android:scaleType="fitXY"/>
It works well when the dimension of the card is greater than the image. However, in my case the height of the image is lower than the height of the image (45dp) and the result is distored :
I can reduce the size of the image but it gives a pixelated image.
I can't use standard image instead of 9-patch since the width of the card depends of the device screen width.
Is it possible to conserve the ratio height/width of the non-stretchable area when scaling down a 9-patch image?
Otherwise, is there another way of obtaining the desired result?
Thanks in advance!
There are several possible answers depending on the constraints:
Reduce the size of the 9-patch image if the result is not too pixelated;
Increase the size of the CardView if you don't mind;
Otherwise, you can use two ImageView:
The first with scaleType "fitXY" that will contain a 9-patch image with the strechable background;
The second with scaleType "centerInside" that will only contain the logo (which is not a 9-patch) and a transparent background.
Exemple:
<!-- ImageView for the 9-patch background -->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/background"
android:scaleType="fitXY"/>
<!-- ImageView for the non 9-patch logo -->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/logo"
android:scaleType="centerInside"/>

android - loaded image's height it bigger than actual image

I am loading an image from the web with a AsyncTask class and set it to a imageview in my code.
// loading of the image into the ImageView
new DownloadImageTask(MyImageView).execute("ImageURL");
the problem is, every time I load an image, the height of it is different, even though the width and height of the ImageView is warp_content.
I added sort of a border line with the Background and padding to see the actual height of it.
Here is the xml
<ImageView
android:id="#+id/ivBigRecipeImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:layout_toRightOf="#+id/ingredientsTitle"
android:background="#52D017"
android:contentDescription="food"
android:padding="1dp" />
in here are the pics
sometimes this happens:
and sometimes this happens:
Any ideas? I want to just have it exactly the actual size of it
thanks!
Try to add android:adjustViewBounds="true" to your ImageView, and it should work.

Categories

Resources