How to auto-resize imageview for different screen sizes android studio?

Alex Merlin picture Alex Merlin · Oct 11, 2019 · Viewed 11.9k times · Source

I am starting to develop apps for android devices using Android Studio. While I was testing my app for screen size compatibilty I noticed that the imageviews do not auto-resize.

The imageview placement looks completely different in different screen sizes. If the screen is small enough, the imageview will sometimes be placed outside of the viewscope.

I have looked all over the internet but I am a little confused on how to make the app compatible with most screen sizes (not including tablets). I went to the android website and they said to use wrap_content. but if I use this, I wont be able to adjust the height and width of the imageview to how I want it.

Does anyone know how to make imageview auto-resize accordingly to the screen size?

Here are images of what is happening:

This is the layout of the app:

This is the layout

This is how I want it to look like (Pixel 3):

enter image description here

But this is how it looks like in a smaller screen(Nexus 5):

enter image description here

In Xcode there is a feature called auto-resize that automatically resizes the content for you. Does android studio have something similar to that?

This is the xml:

Thank you in advance!

Answer

Tamir Abutbul picture Tamir Abutbul · Oct 12, 2019

the imageviews do not auto-resize

Because you are using a fixed size value on your imageView you are having this problem:

Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 240dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).


How to fix

You can use those attributes to make your image responsive in size:

app:layout_constraintHeight_percent="0.25"
app:layout_constraintWidth_percent="0.25"

You will need to give your image 0dp size both in android:layout_width and android:layout_height

What I did was to tell the view to be equal to 25% both in width and height according to the screen size, this will make you view responsive to all screen size and thus it will "auto-resize"