I need to make 2 screens with custom animation like explained below :
Screen 1 Screen 2
----------------------------- ------------------------------
| | | | | |
| | | | | |
| | | | | |
| List 1 | List2 | ---------> | List 3 | List 4 |
| (75% width) |(25% wid)| |(25%wid)| (75% width) |
| | | | | |
| | | | | |
----------------------------- ------------------------------
- User makes a long touch on an item in List 1 and slides from left to right.
- The view containing List 1 moves from left to right (till the end of the screen) and fades. Screen 2 is shown.
I have put each of the lists in a LinearLayout
and all the LinearLayout
s is contained in a root LinearLayout
. After detecting the left to right swipe on List1
, I do this
AnimationSet set = new AnimationSet(true);
Animation animation = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.75f,
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f
);
animation.setDuration(500);
animation.setZAdjustment(Animation.ZORDER_TOP); // Keep the viewgroup on which this animation applies at the top.
set.addAnimation(animation);
LayoutAnimationController controller =
new LayoutAnimationController(set, 0.0f);
screenOne_layoutOne.setLayoutAnimation(controller);
screenOne_layoutOne.startLayoutAnimation();
I was able to get the animation but the screenOne_layoutOne
(layout containing the List 1
) doesn't stay on top. The animation goes below List2
.
Can anyone tell me where the problem is?
Thanks in advance.
For those of you who are interested, I was able to get this solved by putting the layouts of both the screens in a single layout file and changing the visibility
of the layouts/views. The layout file used is
<LinearLayout android:id="@+id/featured_view_container"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="visible" >
<ListView android:id = "@+id/featured_list"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" />
<ImageView android:layout_height = "match_parent"
android:layout_width="wrap_content"
android:src="@drawable/seperator"/>
<LinearLayout android:id = "@+id/categories"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<!-- Layout for the screen 2-->
<LinearLayout android:id="@+id/category_view_container"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="gone" >
<LinearLayout android:id = "@+id/subcategories"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView android:layout_height = "match_parent"
android:layout_width="wrap_content"
android:src="@drawable/seperator"/>
<ListView android:id = "@+id/subcategory_list"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" />
</LinearLayout>
when I applied the animation(anim
) on list1(featured_list
), it stays on top if I do
anim.setZAdjustment(Animation.ZORDER_TOP)