Implement Globe-Weis file folder in android

Question

I want to implement the Globe-Weis File Folder, as shown in the figure below, by clicking on the green button, scrolling it smoothly and pressing the green button again, the folder page scrolls smoothly.

what I tried so far is to put three scrollView in a frameLayout , and also open and close it

  if (!underIsOpen) { ObjectAnimator .ofInt(sv_Under, "scrollY", findViewById(R.id.ll_under_botton).getTop()) .setDuration(1000).start(); underIsOpen = true; } else { ObjectAnimator .ofInt(sv_Under, "scrollY", findViewById(R.id.ll_under_s_part).getTop()) .setDuration(1000).start(); underIsOpen = false; } 

but it only works with scrollView , which is on top

my code is:

  @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.test3); ll_under_s_part = (LinearLayout) findViewById(R.id.ll_under_s_part); sv_Under = (ScrollView) findViewById(R.id.scrollView1); sv_Mid = (ScrollView) findViewById(R.id.scrollView2); sv_Top = (ScrollView) findViewById(R.id.scrollView3); } public void onClick_under_left(View v) { Toast.makeText(getApplicationContext(), "under layout", Toast.LENGTH_SHORT).show(); if (!underIsOpen) { ObjectAnimator .ofInt(sv_Under, "scrollY", findViewById(R.id.ll_under_botton).getTop()) .setDuration(1000).start(); underIsOpen = true; } else { ObjectAnimator .ofInt(sv_Under, "scrollY", findViewById(R.id.ll_under_s_part).getTop()) .setDuration(1000).start(); underIsOpen = false; } } public void onClick_mid_left(View v) { Toast.makeText(getApplicationContext(), "mid layout", Toast.LENGTH_SHORT).show(); } public void onClick_top_left(View v) { Toast.makeText(getApplicationContext(), "top layout", Toast.LENGTH_SHORT).show(); if (!topIsOpen) { ObjectAnimator .ofInt(sv_Top, "scrollY", findViewById(R.id.ll_top_botton).getTop()) .setDuration(1000).start(); topIsOpen = true; } else { ObjectAnimator .ofInt(sv_Top, "scrollY", findViewById(R.id.ll_top_s_part).getTop()) .setDuration(1000).start(); topIsOpen = false; } } 

XML:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" > <ScrollView android:id="@+id/scrollView1" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00000000" android:orientation="vertical" > <LinearLayout android:id="@+id/ll_under_s_part" android:layout_width="match_parent" android:layout_height="300dp" android:background="#ccff00" android:orientation="vertical" > </LinearLayout> <Button android:id="@+id/ll_under_botton" android:layout_width="match_parent" android:layout_height="100dp" android:background="#519B57" android:onClick="onClick_under_left" android:orientation="vertical" android:text="BTN" /> <LinearLayout android:id="@+id/ll_under_p_part" android:layout_width="match_parent" android:layout_height="300dp" android:background="#edf5ee" android:orientation="vertical" > </LinearLayout> <LinearLayout android:id="@+id/ll_under_1" android:layout_width="match_parent" android:layout_height="100dp" android:orientation="vertical" > </LinearLayout> <LinearLayout android:id="@+id/ll_under_2" android:layout_width="match_parent" android:layout_height="100dp" android:orientation="vertical" > </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="1000dp" android:orientation="vertical" > </LinearLayout> </LinearLayout> </ScrollView> <ScrollView android:id="@+id/scrollView2" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00000000" android:orientation="vertical" > <LinearLayout android:id="@+id/ll_mid_s_part" android:layout_width="match_parent" android:layout_height="300dp" android:background="#00000000" android:orientation="vertical" > </LinearLayout> <LinearLayout android:id="@+id/ll_mid_3" android:layout_width="match_parent" android:layout_height="100dp" android:orientation="vertical" > </LinearLayout> <Button android:id="@+id/ll_mid_botton" android:layout_width="match_parent" android:layout_height="100dp" android:background="#088da5" android:onClick="onClick_mid_left" android:orientation="vertical" android:text="BTN" /> <LinearLayout android:id="@+id/ll_mid_p_part" android:layout_width="match_parent" android:layout_height="300dp" android:background="#e6f3f6" android:orientation="vertical" > </LinearLayout> <LinearLayout android:id="@+id/ll_mid_1" android:layout_width="match_parent" android:layout_height="100dp" android:orientation="vertical" > </LinearLayout> </LinearLayout> </ScrollView> <ScrollView android:id="@+id/scrollView3" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00000000" android:orientation="vertical" > <LinearLayout android:id="@+id/ll_top_s_part" android:layout_width="match_parent" android:layout_height="300dp" android:background="#00000000" android:orientation="vertical" android:visibility="visible" > </LinearLayout> <LinearLayout android:id="@+id/ll_top_3" android:layout_width="match_parent" android:layout_height="100dp" android:orientation="vertical" > </LinearLayout> <LinearLayout android:id="@+id/ll_top_2" android:layout_width="match_parent" android:layout_height="100dp" android:orientation="vertical" > </LinearLayout> <Button android:id="@+id/ll_top_botton" android:layout_width="match_parent" android:layout_height="100dp" android:background="#D11141" android:onClick="onClick_top_left" android:orientation="vertical" android:text="BTN" /> <LinearLayout android:id="@+id/ll_top_p_part" android:layout_width="match_parent" android:layout_height="300dp" android:background="#fae7ec" android:orientation="vertical" > </LinearLayout> </LinearLayout> </ScrollView> </FrameLayout> </LinearLayout> 

The second method I tried to use was to use the animation, but the result was not successful:

  public void SlideUP(View view, Context context) { view.startAnimation(AnimationUtils.loadAnimation(context, R.anim.slid_up)); } public void SlideDown(View view, Context context) { view.startAnimation(AnimationUtils.loadAnimation(context, R.anim.slid_down)); } 

in any other way that I can implement this?

Answer 1

I don’t think adding so the layout on one screen with scrollbars is a good idea, you can use simple frame layouts and list them accordingly, and when you click on any of the desired folder icons just animate it up and it will also show the contents folders.

https://github.com/kikoso/Swipeable-Cards

you can configure this library for this, I made a similar application and applied the same library with my user changes.