Switching 2 rows in a tablelayout in android

Question

I have a tablelayout in Android like this:

1) Row == IMAGEVIEW | TEXTVIEW
2) Row == IMAGEVIEW | SPINNER

Now what I need to do is switch the TEXTVIEW/SPINNER. The one from row 2 goes to row 1 and the one from 1 goes to 2.

Would be awesome to have a little animation also. I've seen Viewswitcher and Viewflipper but This doesn't seem to be what I am looking for. Anyone got a good idea how to get this to work?

My layout (a piece of it) looks like this:

<TableRow>
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/left_layout_controlls"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
                <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="wrap_content" 
                    android:stretchColumns="*"
                    android:id="@+id/top_controlls"
                    android:layout_height="wrap_content">

                    <TableRow>
                        <ImageView
                           android:id="@+id/fromCountry_img" 
                           android:src="@drawable/tc_rt_from"
                           android:layout_width="wrap_content"
                           android:layout_gravity="center_horizontal"
                           android:layout_height="fill_parent"
                           />

                        <TextView
                            android:id="@+id/fromCountry"
                            android:layout_marginTop="2px"
                            android:layout_marginLeft="2px"
                            android:background="@drawable/round_edges_main_controll"

                            android:layout_marginRight="2px"
                            android:layout_height="38px"
                            android:layout_width="160dip"/>
                        </TableRow>
                     </TableLayout>

                    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:layout_width="wrap_content" 
                        android:stretchColumns="*"
                        android:layout_below="@id/top_controlls"
                        android:layout_height="wrap_content">
                        <TableRow>
                             <ImageView 
                               android:src="@drawable/tc_rt_to"
                               android:layout_width="wrap_content"
                               android:layout_gravity="center_horizontal"
                               android:layout_height="fill_parent"
                               android:layout_below="@id/fromCountry_img"
                               />

                            <Spinner 
                                android:id="@+id/toCountry"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="2px"
                                android:layout_marginBottom="2px"
                                android:layout_marginRight="2px"
                                android:layout_width="160dip"
                                android:layout_weight="1"
                                android:drawSelectorOnTop="true"/>
                        </TableRow>
                    </TableLayout>

Update:

I've tried to switch the controlls like this, and the animation works, but when the animation ends, the controlls will jump back into their old position.

Any idea why?

LinearLayout layout1 = ((LinearLayout) DataHolder.activityHolder.findViewById(R.id.top_controll));
            LinearLayout layout2 = ((LinearLayout) DataHolder.activityHolder.findViewById(R.id.bottom_controll));
DataHolder.activityHolder.findViewById(R.id.toCountry));
TranslateAnimation a = new TranslateAnimation(
Animation.ABSOLUTE,0,Animation.ABSOLUTE,0,
Animation.ABSOLUTE,0,Animation.ABSOLUTE, 40);
a.setDuration(1200);

TranslateAnimation b = new TranslateAnimation(
Animation.ABSOLUTE,0,Animation.ABSOLUTE,0,
Animation.ABSOLUTE,0,Animation.ABSOLUTE, -40);
b.setDuration(1200);

layout1.startAnimation(a);
layout2.startAnimation(b);

I merged your old account into your registered one so you can edit your posts and leave comments. — Bill the Lizard, Jul 30 '11 at 11:13

score 0 · Accepted Answer · answered Jul 27 '11 at 18:04

0

Simplest way to do this is to have Spinner with visibility GONE(which does not take place in the container) where you have the TextView and TextView where you have Spinner. Then just switch the visibilities. This solution is not practical one.

answered Jul 27 '11 at 18:04

Nikola Despotoski

49,966
15
119
148

score 0 · Answer 2 · answered Jul 27 '11 at 18:19

Honestly, I think using a TableLayout for this situation is impractical. Although the view you provided implies a TableLayout is the most practical, TableLayouts are designed to be fairly static. I do not know that there is a method to remove or animate TableRows within a TableLayout.

I would suggest using this following:

<LinearLayout android:orientation="vertical" ... >
    <LinearLayout android:orientation="horizontal" ... > 
        CONTENTLAYOUTS
    </LinearLayout> 
    ... MORE LINEARLAYOUTS FOR MORE ROWS
</>

You could then manipulate the positions of these items.

For example, you could store the current positions as such:

LinearLayout layout1 = (LinearLayout) findViewById(R.id.layout1);
int position1 = layout1.getTop();

LinearLayout layout2 = (LinearLayout) findViewById(r.id.layout2);
int position2 = layout2.getTop();

AnimationSet animSet = new AnimationSet(...);
//define your animations here, or load them from resources
//to move each view to each of the two positions, changing the 
//Y coordinate of the Views

Make sure to use an AnimationSet in order to have both animations be performed at the same time.

I hope this helps! Let me know if any of this was confusing, and I'll try to clear it up.

score 0 · Answer 3 · answered Jul 29 '11 at 09:20

0

grmpf,

got it to work. thanks. the error was that I frogot this:

setFillAfter(true);

this will persist the change after the animation ends

answered Jul 29 '11 at 09:20

Christian

6,961
10
54
82

Switching 2 rows in a tablelayout in android

Update:

3 Answers3