Dima
Dima

Reputation: 53

How to create facebook style bottom fly in menu

I like to create action bar / menu as Facebook android application . I am talking about (Status | Photo | Check In) menu that appears in bottom pf application.

1.How can I create this kind of menu?

2.How to create fly in affect on that menu ?

Is that action bar ? or Relative layout at bottom ?

Thanks.

Upvotes: 1

Views: 527

Answers (1)

kgandroid
kgandroid

Reputation: 5595

Here is a code of a floating layout.You can customize it to build a menu.

public class MainActivity extends Activity {
LinearLayout ll;
Float startY;
private Animation animUp;
private Animation animDown; 
Button btn_show;
int f=1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         ll = (LinearLayout) findViewById(R.id.slider); 
         btn_show=(Button)findViewById(R.id.btn_show);
         ll.setVisibility(View.GONE); 
         animUp = AnimationUtils.loadAnimation(this, R.anim.anim_up); 
         animDown = AnimationUtils.loadAnimation(this, R.anim.anim_down); 

         btn_show.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(f==1)
                {
                 ll.setVisibility(View.VISIBLE);
                 ll.startAnimation(animUp);
                 f=0;
                }
                else{
                    ll.setVisibility(View.GONE); 
                     ll.startAnimation(animDown);
                     f=1;
                }
            }
        });


    }

    @Override
    public boolean onTouchEvent(MotionEvent event) 
    { 
        switch (event.getAction()) 
        { 
        case MotionEvent.ACTION_DOWN : 
        { 
            startY = event.getY(); 
            break ;
            } 
        case MotionEvent.ACTION_UP: 
            { 
                float endY = event.getY();
                if (endY < startY)
                {
                    System.out.println("Move UP"); 
                    ll.setVisibility(View.VISIBLE);
                    ll.startAnimation(animUp); 
                    } 
                else {
                    ll.setVisibility(View.GONE); 
                     ll.startAnimation(animDown);
                    } 
                } 
            } return true; 
    }


}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@android:color/black">

    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show"
        android:id="@+id/btn_show"
       />

     <LinearLayout android:id="@+id/slider" 
       android:layout_width="match_parent" 
       android:layout_height="50dp" 
       android:layout_alignParentBottom="true" 
       android:layout_alignParentLeft="false"
       android:layout_alignParentTop="false" 
       android:layout_centerInParent="true"
       android:background="@android:color/darker_gray" 
       android:content="@+id/content"
       android:gravity="bottom|center_horizontal"
       android:orientation="vertical" > 


         <TextView android:id="@id/content" 
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content" 
                   android:text="Floating Tab Kaustav"/>
            </LinearLayout>
   </RelativeLayout>

Create a anim folder in res and make 2 xml files:

anim_down.xml

<?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android">
      <translate android:fromYDelta="0%" 
          android:toYDelta="100%" 
          android:duration="400"/>
       </set> 

anim_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <translate android:fromYDelta="100%" 
        android:toYDelta="40%"
         android:duration="400"/> 
         </set> 

Try it.Hope it helps.

Upvotes: 2

Related Questions