Android: replace one view with another

Question

What I need in general: replace(hide) one view with another by a button click

Let's go deep in details: I use ViewPager, which consists of 100 images.

Layout of ViewPager

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"           
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"        
        android:layout_alignParentLeft="true"       
        android:background="#ffffff" >

    </android.support.v4.view.ViewPager>

    <ImageButton
        android:id="@+id/imagePlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/imageRight"
        android:layout_alignTop="@+id/imageList"        
        android:src="@drawable/list" />

    </RelativeLayout>

Layout of Image

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="1dip"
    android:background="#ffffff">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"        
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
     /> 
</RelativeLayout>

It works - no problems. But I need to add button to the viewpager and after tapping image in the viewpager should be changed to the gif. It looks like gifs preview and after onclick play - gif starts to play.

Custom layout for gifs:

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageList"
        android:layout_marginRight="28dp"
        android:layout_toLeftOf="@+id/imageRight" >

            <com.basv.gifmoviewview.widget.GifMovieView
                android:id="@+id/gif1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 />

    </LinearLayout>

How it should be resolved? It's pretty simple for me to open another activity after tapping to the button, but the issue is to play gif in the same Fragment

Any ideas?

Answer 1

I'd simply add your com.basv.gifmoviewview.widget.GifMovieView somewhere to your root RelativeLayout (perhaps you may need to wrap both ViewPager and GifMovieView in additional FrameLayout) and simply show/hide it when needed using ordinary setVisibility().

EDIT

I suppose it's not the best solution for phones' memory usage

I quickly looked into the sources and there's no much code really. So if you bother memory usage you can always dynamically create widget prior showing it (and destroy once hidden) or, as I cannot see the method to "unload" a GIF, you can always use "1x1 px" empty Gif to ensure last one you just stopped showing is no longer occupying precious memory if not needed.