How to make ImageView fullscreen programmatically on click?

Question

Here is what I'm trying to do. I have 4 images and they are in one LinearLayout and that LinearLayout is child of RelativeLayout. I have successfully implemented onClickListener. Maybe my question is a little different, but everything is relevant.

I don't know how to extend image to full screen because images are in one LinearLayout which is inside that one RelativeLayout and maybe everything will be clear when I show you guys xml code.

I would like to make ImageView full screen on click and to be able to go back when I click back button. For that I would probably need to use onBackPressed

Images are at the bottom.

So here is the xml code:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android" 
    >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/url"
        android:fillViewport="true"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="5dp"
        android:scrollbars="none" >

        <RelativeLayout                   
            android:id="@+id/relativeLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <!-- Thumbnail Image -->

            <com.dusandimitrijevic.modification.TouchImageView
                android:id="@+id/thumbnail"
                android:layout_width="140dp"
                android:layout_height="220dp"
                android:layout_alignParentLeft="true"
                android:layout_marginRight="8dp"
                android:src="@drawable/ic_horor_filmovi_ikonica" />

            <!-- Naslov Filma -->
            <TextView
                android:id="@+id/naslov"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:textColor="#7F0000"
                android:textSize="@dimen/title_movie"
                android:layout_toRightOf="@id/thumbnail"
                android:layout_toEndOf="@+id/thumbnail" >

            </TextView>
            <!-- Godina izdanja Filma -->
            <TextView
                android:id="@+id/releaseYear"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/naslov"
                android:layout_alignStart="@+id/naslov"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_below="@+id/naslov"
                android:layout_marginTop="3dp"
                android:textColor="@color/dark_red" />

            <ImageView
                android:id="@+id/rating_star"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/thumbnail"
                android:layout_marginBottom="42dp"
                android:layout_toRightOf="@+id/thumbnail"
                android:layout_toEndOf="@+id/thumbnail"
                android:src="@drawable/ic_actions_rating_icon" />

            <Button
                android:id="@+id/url_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/thumbnail"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_toRightOf="@+id/thumbnail"
                android:layout_toEndOf="@+id/thumbnail"
                style="@style/UrlDugme" />

            <TextView
                android:id="@+id/rating"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/rating_star"
                android:layout_alignTop="@+id/rating_star"
                android:layout_toRightOf="@+id/rating_star"
                android:layout_toEndOf="@+id/rating_star"
                android:gravity="center"
                android:textColor="@color/dark_red"
                android:textSize="@dimen/rating" />

            <!-- Opis Filma -->
            <RelativeLayout
                android:id="@+id/relativeLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/thumbnail"
                android:layout_marginTop="14dp"
                android:background="@drawable/layout_round_rect_shape" >

                <TextView
                    android:id="@+id/description"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginLeft="18dp"
                    android:layout_marginTop="16dp"
                    android:scrollbars="vertical"
                    android:textColor="@color/dark_red"
                    android:textSize="18sp" />
            </RelativeLayout>
            <!-- Opis Filma Zavrsetak -->


            <!-- Glumci -->
            <RelativeLayout
                android:id="@+id/relativeLayout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/relativeLayout1"
                android:layout_marginTop="12dp"
                android:background="@drawable/layout_round_rect_shape"
                android:orientation="vertical" >

                <LinearLayout
                    android:id="@+id/linearLayoutActors"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <com.android.volley.toolbox.NetworkImageView
                        android:id="@+id/Image1"
                        android:layout_width="40dp"
                        android:layout_height="140dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="16dp"
                        android:layout_weight="1"
                        android:scaleType="fitCenter"
                        android:src="@drawable/ic_horor_filmovi_ikonica" />

                    <com.android.volley.toolbox.NetworkImageView
                        android:id="@+id/Image2"
                        android:layout_width="40dp"
                        android:layout_height="140dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="16dp"
                        android:layout_weight="1"
                        android:scaleType="fitCenter"
                        android:src="@drawable/ic_horor_filmovi_ikonica" />

                    <com.android.volley.toolbox.NetworkImageView
                        android:id="@+id/Image3"
                        android:layout_width="40dp"
                        android:layout_height="140dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="16dp"
                        android:layout_weight="1"
                        android:scaleType="fitCenter"
                        android:src="@drawable/ic_horor_filmovi_ikonica" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/linearLayoutTextView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/linearLayoutActors"
                    android:orientation="horizontal" >

                    <TextView
                        android:id="@+id/ime1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:text="Ime"
                        android:textColor="#7F0000"
                        android:textSize="16sp" />

                    <TextView
                        android:id="@+id/ime2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:text="Ime"
                        android:textColor="#7F0000"
                        android:textSize="16sp" />

                    <TextView
                        android:id="@+id/ime3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:text="Ime"
                        android:textColor="#7F0000"
                        android:textSize="16sp" />
                </LinearLayout>
            </RelativeLayout>
            <!-- Glumci -->

                    <!-- IMAGES I WANT TO MAKE FULLSCREEN ON CLICK -->
                    <LinearLayout
                        android:layout_marginTop="12dp"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:background="@drawable/layout_round_rect_shape"
                        android:id="@+id/linearLayoutImages"
                        android:layout_below="@+id/relativeLayout2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal" >

                            <com.dusandimitrijevic.modification.TouchImageView
                                android:id="@+id/image1"
                                android:adjustViewBounds="true"
                                android:layout_weight="1"
                                android:layout_width="115dp"
                                android:layout_height="150dp"
                                android:src="@drawable/ic_horor_filmovi_ikonica" >
                            </com.dusandimitrijevic.modification.TouchImageView>    

                            <com.dusandimitrijevic.modification.TouchImageView
                                android:id="@+id/image2"
                                android:adjustViewBounds="true"
                                android:layout_weight="1"
                                android:layout_width="115dp"
                                android:layout_height="150dp"
                                android:src="@drawable/ic_horor_filmovi_ikonica" >
                            </com.dusandimitrijevic.modification.TouchImageView>

                            <com.dusandimitrijevic.modification.TouchImageView
                                android:id="@+id/image3"
                                android:adjustViewBounds="true"
                                android:layout_weight="1"
                                android:layout_width="115dp"
                                android:layout_height="150dp"
                                android:src="@drawable/ic_horor_filmovi_ikonica" >
                           </com.dusandimitrijevic.modification.TouchImageView>     

                            <com.dusandimitrijevic.modification.TouchImageView
                                android:id="@+id/image4"
                                android:adjustViewBounds="true"
                                android:layout_weight="1"
                                android:layout_width="115dp"
                                android:layout_height="150dp"
                                android:src="@drawable/ic_horor_filmovi_ikonica" >
                            </com.dusandimitrijevic.modification.TouchImageView>                                                    

                    </LinearLayout>
                    <!-- IMAGES I WANT TO MAKE FULLSCREEN ON CLICK -->

        </RelativeLayout>

    </ScrollView>       

</RelativeLayout>

And here is onClickListener:

image1.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 115, getResources().getDisplayMetrics());
            int px1 = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 150, getResources().getDisplayMetrics());
            LinearLayout.LayoutParams p = new LinearLayout.
                    LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            p.weight = 1;
            if(isImageFitToScreen) {
                image1.setMinimumWidth(px);
                image1.setMinimumHeight(px1);
                image1.setAdjustViewBounds(true);
                isImageFitToScreen=false;
            }else{
                image1.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
                image1.setScaleType(ImageView.ScaleType.FIT_XY);
                isImageFitToScreen=true;
            }
        }
    });

Answer 1

To offer an alternative to Ben's answer and flesh out my earlier comment, one possibility is to create an ImageView in your xml that occupies the entire screen, with its visibility set to gone. On your button press, load the image into this ImageView, and on a back press set the visibility to gone again.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android" 
    >

    <ScrollView>
        <!-- Everything else! -->
    </ScrollView>       

    <ImageView
        android:id="@+id/full_screen_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />

</RelativeLayout>

Inside your Activity's onCreate() method:

@Override
public void onCreate(Bundle mySavedInstances) {
  ImageView fullScreenContainer = (ImageView) findViewById(R.id.full_screen_container);

  image1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //However it is you load your images
            fullScreenContainer.setImageDrawawble(R.drawable.example);
            fullScreenContainer.setVisibility(View.VISIBLE);
        }
  });
}

@Override
public void onBackPressed() {
    if (fullScreenContainer.getVisibility() == View.VISIBLE) {
        fullScreenContainer.setImageDrawable(null);
        fullScreenContainer.setVisibility(View.GONE);
    } else {
        super.onBackPressed();
    }
}

Answer 2

Welcome to stack overflow Dusan,

I've something very similar, but all I do is just put the full screen image in a new activity & pass the image as bytes & display it in a full screened imageview. As soon as they press back, they're returned to where they were before. I think trying to change the layout parameters is a bit overkill here.