How to Enlarge/change the child imageview dimensions to make the image full size in Scroll view with Android

Question

I have an ImageView inside a Scrollview, below is my fragment code, I need the image to be made full screen or change the width and height of the image view when the user clicks on the image, please help me how this can be achieved or any other better solution.

ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:background="@color/white"
    android:gravity="center_horizontal">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/htab_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <ImageView
            android:id="@+id/product_image"
            android:layout_width="match_parent"
            android:layout_height="192dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="3dp"
            android:adjustViewBounds="true"
            android:gravity="center_horizontal"
            android:scaleType="center" />

        <TextView
            android:id="@+id/product_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:ellipsize="marquee"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:freezesText="true"
            android:gravity="center_horizontal"
            android:marqueeRepeatLimit="marquee_forever"
            android:scrollHorizontally="true"
            android:singleLine="true"
            android:textColor="@color/holo_gray_dark"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/category_discount"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:background="@color/white"
            android:ellipsize="marquee"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:freezesText="true"
            android:gravity="center_horizontal"
            android:marqueeRepeatLimit="marquee_forever"
            android:scrollHorizontally="true"
            android:singleLine="true"
            android:textColor="@color/holo_gray_dark"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/product_description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/product_name"
            android:layout_gravity="left"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:ellipsize="marquee"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:freezesText="true"
            android:textColor="@android:color/background_dark"
            android:textSize="16sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/remove_item"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_gravity="center_vertical|center_horizontal"
                android:background="@color/red"
                android:gravity="center_vertical|center_horizontal"
                android:text="-"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/iteam_amount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:ellipsize="marquee"
                android:focusable="true"
                android:focusableInTouchMode="true"
                android:freezesText="true"
                android:gravity="center"
                android:marqueeRepeatLimit="marquee_forever"
                android:minWidth="70dp"
                android:scrollHorizontally="true"
                android:singleLine="true"
                android:text="0"
                android:textColor="@android:color/background_dark"
                android:textSize="30sp" />

            <TextView
                android:id="@+id/add_item"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_gravity="center_vertical|center_horizontal"
                android:background="@color/holo_green_light"
                android:gravity="center_vertical|center_horizontal"
                android:text="+"
                android:textColor="@color/white"
                android:textSize="30sp"
                android:textStyle="bold" />
        </LinearLayout>

        <TextView
            android:id="@+id/hot_offers"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="15dp"
            android:ellipsize="marquee"
            android:gravity="center_horizontal"
            android:text="@string/similar_product"
            android:textColor="#000"
            android:textSize="20sp" />

        <com.hitesh_sahu.retailapp.view.customview.ClickableViewPager
            android:id="@+id/similar_products_pager"
            android:layout_width="match_parent"
            android:layout_height="280dp"
            android:layout_below="@+id/hot_offers"
            android:layout_marginTop="2dp"
            android:visibility="visible" />

        <TextView
            android:id="@+id/best_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="2dp"
            android:ellipsize="marquee"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:freezesText="true"
            android:gravity="center_horizontal"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:text="Top Selling"
            android:textColor="#000"
            android:textSize="20sp" />

        <com.hitesh_sahu.retailapp.view.customview.ClickableViewPager
            android:id="@+id/top_selleing_pager"
            android:layout_width="match_parent"
            android:layout_height="280dp"
            android:layout_below="@+id/best_value"
            android:layout_marginTop="2dp"
            android:visibility="visible" />
    </LinearLayout>

</ScrollView>

This is my layout,

and here is my onclick listener in my class. please help with the same. i am finding the image size is varying when clicked but the image view dimensions are not changing, how to achieve this/ how to make the image fullscreen

itemImage.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if(isImageFitToScreen) {
        isImageFitToScreen=false;
        ScrollView.LayoutParams layoutParams = new 
        ScrollView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 192);
                    itemImage.setLayoutParams(layoutParams);
                    itemImage.setAdjustViewBounds(true);
        }else{
            isImageFitToScreen=true;
            ScrollView.LayoutParams layoutParams = new 
            ScrollView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 500);
            itemImage.setLayoutParams(layoutParams);
            }
    }
 });

score 0 · Accepted Answer · answered Nov 21 '21 at 18:04

0

Take a look at android:adjustViewBounds. Even though you are changing the size of the ImageView, this attribute is changing it back. I think that you can just delete it.

Also, the size dimension in layoutparams is pixels and not dp. You are treating it like is is dp.

answered Nov 21 '21 at 18:04

Cheticamp

61,413
10
78
131

How to make the image full screen sir? when i click on the imageview, as i am a beginner please help with the same – Naga Nov 22 '21 at 08:03
Also i will check regarding the dimensions – Naga Nov 22 '21 at 08:04
@Naga Regarding making the ImageView full screen, you will need to set it to the width/height of the screen which you can determine with something like [this](https://stackoverflow.com/a/4744499/6287910). If the aspect ratio of the image and screen don't match, you will need to make a decision about how to crop the image probably with [android:scaleType](https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide). – Cheticamp Nov 22 '21 at 12:36
Thanks, i will check it out – Naga Nov 22 '21 at 15:59

How to Enlarge/change the child imageview dimensions to make the image full size in Scroll view with Android

1 Answers1