ImageView full width and variable height while maintaining aspect ratio

Question

Image could be bigger dimension than the device. I want to scale the image so that it always take full width and variable length of height , while maintaining aspect ratio.

Also I want to set specific min height of Imageview when it is scrolled. after that specified min height ImageView should be pinned.

 <android.support.design.widget.AppBarLayout
        android:id="@+id/foo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/grey_dark_transparent">

        <!--
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/grey_dark_transparent"
            app:layout_collapseMode="parallax"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
            -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/wallpaper_banner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:adjustViewBounds="true"
                android:src="@drawable/wallpaper_placeholder" />
        </android.support.design.widget.CollapsingToolbarLayout>

        <!-- @Banner -->

    </android.support.design.widget.AppBarLayout>

Currently it does not maintaining aspect ratio.

http://stackoverflow.com/questions/2991110/android-how-to-stretch-an-image-to-the-screen-width-while-maintaining-aspect-ra?rq=1 << i found this in related on this question page but idk, u can just get the width and height of image and set image view width and height and make it scrollable — Rico, Mar 22 '17 at 07:15
Try this, http://stackoverflow.com/a/42693248/5471104 , here height is equal to width, you can calculate the aspect ratio and reinitialize height accordingly. But on other note, since you are using collapsing toolbar, make width and height to match parent. This will not spoil the overall appearance of the app. — Mohammed Atif, Mar 22 '17 at 07:15
@Rico I was expecting something which can be done from XML Alone — varuog, Mar 22 '17 at 07:17
@varuog, dynamic transformations in imageview can not be done with xml alone. at least till the latest update of Android tools, it doesnt allow such high level dynamic resizing through xml. Until and unless you are willing to use PercentRelativeLayout. Let me know if you dont have problem in using Additional dependency. — Mohammed Atif, Mar 22 '17 at 07:24
@MohammedAtif no i dont have any problems with dependency. I am already using Glide though. I am not sure it could help or not to solve this. — varuog, Mar 22 '17 at 07:27
Sorry @Varuog, i just checked, even PercentRelativeLayout helps when you have predefined aspect ratio. Dynamic changes works only through code. you can probably create a custom ImageView to handle these changes within the view — Mohammed Atif, Mar 22 '17 at 07:36

score 0 · Answer 1 · answered Mar 22 '17 at 07:15

0

Use ScaleType android:scaleType="centerInside" like below code. Its always handle image Aspect Ratio.

  <ImageView
        android:id="@+id/wallpaper_banner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:adjustViewBounds="true"
        android:src="@drawable/wallpaper_placeholder" />

answered Mar 22 '17 at 07:15

Chetan Joshi

5,582
4
30
43

Are you sure height should be `wrap_content` instead of `match_parent`? – Mohammed Atif Mar 22 '17 at 07:16
Did you cross check? It will take the height of the image and width of the parent by neglecting the aspect ratio – Mohammed Atif Mar 22 '17 at 07:19
but it shouldnt take width of parent, it should take width of image as per OP – Rico Mar 22 '17 at 07:20
@Rico, width is `match_parent` in above xml – Mohammed Atif Mar 22 '17 at 07:21
@Chetan unfortunately Image is stretched in width by doing this. any help? – varuog Mar 22 '17 at 07:21
No `ImageView` takes height of inserting image according its Aspect but image having its Aspect Ratio. Suppose `ImageView` width is match_parent and its takes height 100 but image inside `ImageView` having its Aspect Ratio. – Chetan Joshi Mar 22 '17 at 07:22
but arif if device dimesions are 240x480 and image dimensions are 1900x1200 the OP doesnt want to reduce the image width to 240 , or am i missing something? – Rico Mar 22 '17 at 07:23
Then 'ImageView' Parents having 240 width and according its width height will reduces . – Chetan Joshi Mar 22 '17 at 07:24
@Rico, the example that you gave will practically close the app with an exception of Image too large. – Mohammed Atif Mar 22 '17 at 07:25
no u can always add a scrollview and put image view inside and then set width accordingly – Rico Mar 22 '17 at 07:26
Thats is `OutOfmemory` Problem. – Chetan Joshi Mar 22 '17 at 07:26
No @Chetan, OOM and Image too large are two different exceptions. OOM happens when RAM is full. Image too large exception happens when GPU can not resize high res image for low dp imageview. – Mohammed Atif Mar 22 '17 at 07:28
Yes both are different but when Device does not have in-off space to show image then this exceptions comes . – Chetan Joshi Mar 22 '17 at 07:30
And if image is taken from `drawable` then its must contain same image for all `drawable` folders with less size in. – Chetan Joshi Mar 22 '17 at 07:32
@Chetan, If image is in drawable folder, then you know the aspect ratio before hand and this question as well as answer will not make any sense. – Mohammed Atif Mar 22 '17 at 07:37
@MohammedAtif you are questioning for ImageTolarge and OOM. And above comment is specifc to your comments. – Chetan Joshi Mar 22 '17 at 07:39
Yes, @Chetan, even for that point, I have handled both the exceptions, and the latter has nothing to do with the memory, its directly involved with the processing power of GPU, when I was a beginner, I used to put 1080p images for 24dp icons. It used to work in Samsung and Crash in MI devices. Because MI devices at that time had bad GPU. – Mohammed Atif Mar 22 '17 at 07:40

ImageView full width and variable height while maintaining aspect ratio

1 Answers1