implement Globe-Weis File Folder in android
Asked Answered
M

1

1

i want to implement Globe-Weis File Folder like picture below which by clicking on green button it scrolling smoothly up and by clicking on the green button again ,the folder page scrolling down smoothly.

enter image description here

enter image description here

what i try so far was putting three scrollView in a frameLayout , and to 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 just work on the 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="B T N" />

                <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="B T N" />

                <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="B T N" />

                <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 way i tried was using animation but no success to result i am looking for :

    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));
}

any other way that i can implement this?

Martica answered 13/1, 2016 at 7:18 Comment(0)
R
0

I don't think adding so may layout on a single screen with scrollbars is a good idea, you can apply simple frame layouts and list them accordingly and when clicking on any of the desired folder icons just animate it towards top, and it will also show the content of the folder.

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

you could customize this library to do that, I have done a similar kind of app and applied the same library with my custom changes.

Ringe answered 4/8, 2016 at 10:9 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.