Question

I have a vertical LinearLayout with 2 views on top of each other.
The top view should be an expandable panel – if clicked, it should expand down, but without affecting the other view.
I want the bottom view to always be aligned by the “closed” version of the top view.
The top view should animate to the opened version, so I can’t just hide the opened version behind.

How would you accomplish this?

Answer 1

A LinearLayout will not allow what you are asking for. There are no set of layout parameters that will allow children in a LinearLayout to overlap.

You could use a FrameLayout instead. The trick here is getting the layout just right. Here is one example of how you might do it. The ImageViews with ID’s of topview and bottomview are the views you care about, the rest is structure to get the views to be where you want them.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
<LinearLayout 
        android:orientation="vertical" 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="70dip" />
        <ImageView
            android:id="@+id/bottomview"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1"
            android:background="#FFFF0000"/>
</LinearLayout>
<ImageView
            android:id="@+id/topview"
            android:layout_width="fill_parent"
            android:layout_height="70dip" 
            android:background="#FF00FF00"/>
</FrameLayout>

Then you just need to add an onClick listener to the top view and change the layout params. For example, here is a quick example of expanding the view.

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        ImageView i=(ImageView)findViewById(R.id.topview);
        i.setOnClickListener(new OnClickListener() {            
            @Override
            public void onClick(View v) {
                // Make the view bigger
                FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,300);
                v.setLayoutParams(lp);
                v.invalidate();
            }
        });

... more code...

The rest would be adding code to keep track of expand/collapse state and adding animation.

Hope that helps.