Search code examples
androidxmlimageview

Android change imageview size dynamically by image size


Hi I have a ImageView which displays image from url. The images are of different sizes. They may be either square shaped or portrait shaped or landscape shaped. I need to set the image view size accordingly with out stretching or cropping.

Say if the image size is 512x512 then the ImageView should be in square shape and aligned center of the screen.

If the image size is something like 1024x800 then the ImageView size should be in horizontal rectangle shape and aligned center of the screen.

In all case the width should match parent but height should adjust accordingly. How can I do this?

Below in my xml code.

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:maxHeight="400dp"
        android:maxWidth="300dp"
        android:layout_margin="10dp"
        app:cardBackgroundColor="@color/white">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <android.support.v4.widget.NestedScrollView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scrollbars="none">
                <ImageView
                    android:id="@+id/image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:scaleType="fitXY"
                    android:minWidth="260dp"
                    tools:ignore="ContentDescription" />
            </android.support.v4.widget.NestedScrollView>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/grey_light" />

            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:layout_gravity="right"
                android:layout_margin="@dimen/space_small_low"
                android:background="@drawable/transparent_bg"
                android:textColor="@color/orange" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</FrameLayout>

Solution

  • set width of imageView to match_parent in the xml and calculate height of the image at runtime to maintain the aspect ratio using below code:

    Display display = getActivity().getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    int newWidth = size.x;
    
    //Get actual width and height of image
    int width = bitmap.getWidth();
    int height = bitmap.getHeight();
    
    // Calculate the ratio between height and width of Original Image
    float ratio = (float) height / (float) width;
    float scale = getApplicationContext().getResources().getDisplayMetrics().density;
    int newHeight = (int) (width * ratio)/scale;
    

    Pass this newHeight and newWidth to resize your image by calling .resize function of your image processing library.