Switching between two GridViews in the same Activi

Question

I've been looking around how to solve several problems and got several answers to some of my question, but one thing is still under construction and won't be finished if none of you can help me. :/

I've been trying to zoom in and out of a GridView, but got over to an other solution, since I do only need two states: an overview and a detailed view. Therefor I've made two Gridviews. The first one is the one where the images inside both gridviews are shrunk and displayed without scrolling. The other one is the one where the images are displayed in their original size. You can scroll horizontally and vertically inside that one.

My problem is the switching between those two gridviews. I've tried to "set the visibility" of both to either "gone" or "visible" if i clicked on one of them.

Here's my code:

Starter:

package test.scroll;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;
import android.view.View;
import android.view.View.OnClickListener;

public class TestScrollActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

    final GridView grd_overview = (GridView)this.findViewById(R.id.grd_overview);
    grd_overview.setAdapter(new OverviewImageAdapter(this));
    final GridView grd_detailed = (GridView)this.findViewById(R.id.grd_detailed);
    grd_detailed.setVisibility(2);
    grd_detailed.setAdapter(new DetailedImageAdapter(this));

    grd_overview.setOnClickListener(new OnClickListener() {
        public void onClick(View view) {
            grd_overview.setVisibility(2);
            grd_detailed.setVisibility(0);
        }
    });

    grd_detailed.setOnClickListener(new OnClickListener() {
        public void onClick(View view) {
            grd_detailed.setVisibility(2);
            grd_overview.setVisibility(0);
        }
    });
    }
}

OverviewAdapter:

package test.scroll;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class OverviewImageAdapter extends BaseAdapter {  
     private Context mContext;

        public OverviewImageAdapter(Context c) {
            mContext = c;
        }

        public int getCount() {
            return mThumbIds.length;
        }

        public Object getItem(int position) {
            return null;
        }

        public long getItemId(int position) {
            return 0;
        }

        // create a new ImageView for each item referenced by the Adapter
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView;
            if (convertView == null) {  // if it's not recycled, initialize some attributes
                imageView = new ImageView(mContext);
                imageView.setLayoutParams(new GridView.LayoutParams(82, 82));
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            } else {
                imageView = (ImageView) convertView;
            }

            imageView.setImageResource(mThumbIds[position]);
            return imageView;
        }

        // references to our images
        private Integer[] mThumbIds = {
                R.drawable.memory_1, R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,
                R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,
                R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,
                R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,
                R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,
                R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1,R.drawable.memory_1
        };

    }  

DetailedAdapter:

package test.scroll;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class DetailedImageAdapter extends BaseAdapter {  
     private Context mContext;

        public DetailedImageAdapter(Context c) {
            mContext = c;
        }

        public int getCount() {
            return mThumbIds.length;
        }

        public Object getItem(int position) {
            return null;
        }

        public long getItemId(int position) {
            return 0;
        }

        // create a new ImageView for each item referenced by the Adapter
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView;
            if (convertView == null) {  // if it's not recycled, initialize some attributes
                imageView = new ImageView(mContext);
                imageView.setLayoutParams(new GridView.LayoutParams(82, 82));
            } else {
                imageView = (ImageView) convertView;
            }

            imageView.setImageResource(mThumbIds[position]);
            return imageView;
        }

        // references to our images
        private Integer[] mThumbIds = {
                R.drawable.memory_2, R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,
                R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,
                R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,
                R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,
                R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,
                R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2,R.drawable.memory_2
        };

    }  

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/app_layout" 
        android:orientation="vertical" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        >

        <!-- PLAYGROUND -->
        <test.scroll.TwoDScrollView 
                android:id="@+id/scene_scroller" 
                android:drawingCacheQuality="low" 
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent"
                >
                <LinearLayout
                        android:id="@+id/grds"
                        android:drawingCacheQuality="low"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        >
                        <GridView
                                android:id="@+id/grd_overview"
                                android:drawingCacheQuality="low"
                                android:layout_width="fill_parent"
                                android:layout_height="wrap_content"
                                />
                        <GridView
                                android:id="@+id/grd_detailed"
                                android:drawingCacheQuality="low"
                                android:layout_width="fill_parent"
                                android:layout_height="wrap_content"
                                />

                </LinearLayout>
        </test.scroll.TwoDScrollView>

        <!-- ATTRIBUTES -->
        <Button
                android:id="@+id/btn_cancel"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/scene_scroller"
                android:text="cancel"
                />    

</RelativeLayout>

Do you have any suggestions for me on how to switch between those two gridview? Let me know :)

Basti

Answer 1

You should be able to remove the grid you don't wanna see, from app_layout and add the one you want to see. Example:

RelativeLayout rl = (RelativeLayout) findViewById(R.id.app_layout);
GridView gv = (GridView) findViewById(R.id.grid01); // Replace the ID
GridView gv2 = (GridView) findViewById(R.id.grid02); // Replace too

//...
rl.removeView(gv);
rl.addView(gv2);

// ...
rl.removeView(gv2);
rl.addView(gv);

And so on.

Answer 2

Why not just place both GridViews within a ViewSwitcher/ViewFlipper, and just flip between them that way?

Answer 3

Imho you could really nicely implement a ViewFlipper to switch between your 2 Grids!

From android reference guide:

ViewFlipper is a simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

Here is an example on how to implement this.
Here is another example that demonstrates this ( with animation )