Android Facebook style slide

Question

The new Facebook application and its navigation is so cool. I was just trying to see how it can be emulated in my application.

Anyone has a clue how it can be achieved?

enter image description here

On clicking the the top left button the page slide and the following screen is shown:

enter image description here

YouTube Video

yes a video will also be helpful, to get to know the exact effect. — bool.dev, Dec 28 '11 at 16:56
@bool.dev here is the video: http://www.youtube.com/watch?v=ANLMaL7zn20 — Harsha M V, Dec 29 '11 at 05:02
@HarshaMV:- Try looking this thread.I think may help you somewhat.http://stackoverflow.com/questions/8453320/android-sidebar-like-facebook-or-firefox — Shashank_Itmaster, Dec 29 '11 at 05:34
Very good article about slide-out navigation in Android - http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html. Must read. — AlexKorovyansky, Jul 31 '12 at 07:03
I have implemented my own sliding menu, see here http://stackoverflow.com/a/15880375/1939564 — Muhammad Babar, May 27 '13 at 13:45

score 176 · Answer 1 · edited Dec 25 '12 at 07:36

176

I've had a play with this myself, and the best way I could find was to use a FrameLayout and lay a custom HorizontalScrollView (HSV) on top of the menu. Inside the HSV are your application Views, but there is a transparent View as the first child. This means, when the HSV has zero scroll offset, the menu will show through (and still be clickable surprisingly).

When the app starts up, we scroll the HSV to the offset of the first visible application View, and when we want to show the menu we scroll back to reveal the menu through the transparent View.

The code is here, and the bottom two buttons (called HorzScrollWithListMenu and HorzScrollWithImageMenu) in the Launch activity show the best menus I could come up with:

Android sliding menu demo

Screenshot from emulator (mid-scroll):

Screenshot from emulator (mid-scroll)

Screenshot from device (full-scroll). Note my icon is not as wide as the Facebook menu icon, so the menu view and 'app' view are not aligned.

Screenshot from device (full-scroll)

edited Dec 25 '12 at 07:36

onkar

4,427
10
52
89

answered Dec 29 '11 at 21:41

Paul Grime

14,970
4
36
58

Good application. However I found it particularly difficult to integrate to my app's code base (because the apps activities need to be loaded from an external activity). Anyway, just for my own curiosity, how much time did you need to write this library? – Amokrane Chentir Feb 08 '12 at 11:30
I'm not sure I understand. They are just normal activities and can be launched like any other, either as launch activities or through `startActivity(new Intent(context, CLASSNAME))`. – Paul Grime Feb 09 '12 at 19:57
1

@AmokraneChentir You can use different activities by calling `getDrawingCache()` in your non-menu activities and creating an ImageView from the bitmap. Then call `startActivity(intent)` & `overridePendingTransition(0, 0)` at the `onClick` method of the `ClickListenerForScrolling` class to immediately show the new activity and get the desired effect. – Siklab.ph Feb 20 '12 at 03:16
Never mind guys. I have finally been able to integrate the menu with my project very easily :). Thanks again @PaulGrime! – Amokrane Chentir Feb 20 '12 at 08:55
@GoodGuyGreg could you, please, explain a bit more on how you suggest to call different activity from side menu; the steps involved? – gandharva Feb 29 '12 at 06:27
@AmokraneChentir could you post a skeleton code or explain about how you managed to achieve calling different activities? – gandharva Feb 29 '12 at 06:29
@gkr Ok, I will try to explain (through a Github gist) during lunch time. – Amokrane Chentir Feb 29 '12 at 09:49
@gkr I added an example for handling multiple activities here: https://github.com/mikodsantoss/android-sliding-menu-demo – Siklab.ph Mar 01 '12 at 05:51
@GoodGuyGreg thanks, I haven't got time to go through it. I'll comment more later – gandharva Mar 02 '12 at 07:46
I have a question regarding your answer: It is possible to have a button in the right top corner and scroll the above layout in the other direction (from right to left) ? – Aurelian Cotuna May 02 '12 at 13:27
1

I wonder if the custom HorizontalScrollView can use with ListView since the official document of HorizontalScrollView mentioned that it will force the ListView to display its entire items. – shiami May 03 '12 at 09:33
@AmokraneChentir how did you open up different activities from the menu? can I have an example please? – Hades Jun 18 '12 at 04:55
I am facing a problem, when I implement this code with my activity view are resize by navigation bar when navigation bar is expended – Ashish Dwivedi Aug 07 '12 at 09:31
i would like to to implement a option to drag the menu open beside the onclick (same as FB menu). Any tips how to do this? – Luciano Oct 05 '12 at 11:31
How can we do the same thing vertically? I mean, Menu descends from the top , instead of coming from the right – mOmO Jan 08 '13 at 16:23
@GoodGuyGreg Your link seems like it would be helpful, but is no longer working. – Erik B Feb 25 '13 at 18:01
Perhaps fragments is the only way to "switch out Activities" – Erik B Feb 25 '13 at 18:02
1

[this](https://github.com/mikorobyo/android-sliding-menu-demo) fork switches the activies without using fragments! – Erik B Feb 25 '13 at 19:06
@PaulGrime I'm struggling with the width of the menu. How can I make it only as large as 1/3 of the screen width? – huong May 01 '13 at 08:39
1

Thanks for your help, I was able to use the HorzScrollWithListMenu.java. – KarenAnne Jul 03 '13 at 08:23
2

Thank you very much @PaulGrime ...this is a great simple example and the most awesome thing is in this demo simple easy to understand and easily customize and there is no library project to use. – Naveen Kumar Jul 04 '13 at 06:48
@PaulGrime,Thank you very much Sir!Very easy to implement. – Kalu Khan Luhar Jul 23 '13 at 12:06
This seems like a great implementation! Is it still a good idea to use it, or should one use the Navigation Drawer instead? – Daniel Saidi Aug 01 '13 at 14:26
Hi Daniel. I'm not sure to be honest. I wrote this demo to see what was possible a couple of years ago. There might be (should be) better libraries for this by now I would imagine. I think one of the benefits of this approach is that it works for older versions of Android. But I'm not sure that's an issue in 2013 like it was in 2011. – Paul Grime Aug 03 '13 at 08:37
How current is this thread? Does Google's Android Official Navigation Drawer control provide all that is asked here? Is backwards compatibility offered? – M Rajoy Aug 12 '13 at 10:26
can you make the menu slides by move instead by button? – Saint Robson Feb 07 '14 at 15:39
This should be marked as the correct answer! , well explained :) +1 – Aviram Fireberger Jun 21 '14 at 08:48
i am unable to put right sliding , when i added right icon and trying to sliding side .any idea , how to figure out . would you please add right side image, just like left side image and sliding left list .it will be great helpful. – Horrorgoogle Feb 01 '15 at 21:39
@PaulGrime Can you tell me how we can achieve this with drawerLayout so that it can work with both slide from left or click on button?? – Rahul Jul 31 '17 at 05:28
Hi @RahulAbrol. Sorry, I wrote this years ago and haven't been involved in Android development since. I don't know how this could work with drawerLayout. – Paul Grime Jul 31 '17 at 14:35
@PaulGrime okey not a problem :) – Rahul Aug 01 '17 at 04:47

score 37 · Answer 2 · answered Mar 19 '12 at 10:24

37

I've implemented facebook-like slideout navigation in this library project.

You can easy built it into your application, your UI and navigation. You will need to implement only one Activity and one Fragment, let library know about it - and library will provide all wanted animations and navigation.

Inside the repo you can find demo-project, with how to use the lib to implement facebook-like navigation. Here is short video with record of demo project.

Also this lib should be compatible this ActionBar pattern, because is based on Activities transactions and TranslateAnimations (not Fragments transactions and custom Views).

Right now, the most problem is to make it work well for application, which support both portrait and landscape mode. If you have any feedback, please provide it via github.

All the best,
Alex

answered Mar 19 '12 at 10:24

AlexKorovyansky

4,873
5
37
48

4

Hi, I just figured out that your approach is going to create a large screenshot bitmap every time you open the sidebar. It will grow the heap size and may cause out of memory error. – shiami May 04 '12 at 03:39
3

Thanks dear korovyansk, Its very nice. but Absolute layout is deprecated in new OSs. Can you re code it again? – Hesam May 13 '12 at 07:57
Thanks everybody who gives feedback in github or here. I know about some bugs and have ideas how make the app better. I make it, when I will have free time. – AlexKorovyansky May 14 '12 at 08:17
Hi koroyansk. I am using your library it work well. But I have a little problem. When slide bar list open I am starting the activity on listview item click.Activity start correct but slide-in animation does not work. Code `((MenuActivity) getActivity()).getSlideoutHelper().close(); startActivity(new Intent(getActivity(), MyActivity.class) .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP).putExtra("category", position));` – Sunny Aug 06 '12 at 18:59
in your case, new activity will open immediately without waiting of animation end, you can try to extend library and add callback for end of animation. may be I will add this feature to next version of library. – AlexKorovyansky Aug 07 '12 at 06:55
can you make your apps icon on the action bar the button that slides the menu in and out? – topwik Aug 21 '12 at 13:31
towpse, sorry I don't understand what you mean, can you rephrase? – AlexKorovyansky Aug 25 '12 at 11:00
@korovyansk: Your library is easy to understand, and works good, but did you manage to get a callback for end of animation as u have said u will add this feature later, please let me know bcoz i want to call new activcities on list item click. – Shrikant Mar 13 '13 at 07:20
I recommend you to use this library https://github.com/jfeinstein10/SlidingMenu. My library was one of the first, but now SlidingMenu is much better. So I have no motivation in further development of my initial solution. – AlexKorovyansky Mar 13 '13 at 08:19

score 24 · Answer 3 · edited May 23 '17 at 12:34

24

Here is another lib and seems to be the best in my opinion. I did not write it..

UPDATE:

This code seems to work best for me and it moves the entire Actionbar similar to the G+ app.

How did Google manage to do this? Slide ActionBar in Android application

edited May 23 '17 at 12:34

Community

1
1

answered Jun 03 '12 at 18:19

Patrick Jackson

18,766
22
81
141

7

I wrote this library, glad you like it. It's really basic for now, but I will be improving it over the coming weeks. More than welcome for other people to make changes to it as well. – David Scott Jun 10 '12 at 18:01
This library is absolutely wonderful. It's so simple to use and works perfectly. Thank you. I'd just like to add that the sample only works with ICS (and Honeycomb I think) .. but the library works all the way back to 2.1, I'm using it no problems. – Steven Elliott Jun 22 '12 at 02:00
Not bad, it's pretty simple but works well and the setup is really quick. However, it's not very configurable from outside the library: all items have the same simple layout, and on the go there is no possibility of dynamic listing; both things would be easy to adapt but I really need grouping inside the list and that won't be that easy. – htafoya Jul 01 '13 at 20:31

score 22 · Answer 4 · edited May 07 '12 at 06:39

22

I think facebook app is not written in native code (by native code I mean, using layouts in Android) but they have used webview for it and have used some javascript ui libraries like sencha. It can be easily achieved using sencha framework.

enter image description here

edited May 07 '12 at 06:39

alex

479,566
201
878
984

answered Dec 29 '11 at 05:13

Sanjay Kumar

1,474
14
22

16

+1 The UI can changed without App Update, so it's definitely a web app and the android app is basically a web browser. – Rudy Dec 29 '11 at 06:49
7

I'm not sure this is necessarily the case. The skeleton for the UI can be native (e.g. the actual menu View and other native Views), and the content for those Views loaded dynamically. If the skeleton of the app changes, then an update would likely be required. – Paul Grime Jan 04 '12 at 22:23
2

I don't think that the facebook app is a webapp. Too fluent, quick. I know web/hybrid apps which look good "like native", but there's still a bit of lag compared to native. Not only the skeleton - the lists, map, etc. looks and feels native. At least with the current state of technology. – User Jan 10 '13 at 14:12
Ok, somebody told me that this app wasn't like this for about 2 months - so you're refering to an old version which I don't know. Anyways it might be informative to comment that the current app is definitely native. – User Jan 10 '13 at 14:20

score 20 · Answer 5 · answered Jan 10 '13 at 11:45

20

Here is yet another (very nice) open source library!

The good feature about this one is that it is easily integrated with ActionBarSherlock.

Here's the github project link

Here's the Google Play download link

answered Jan 10 '13 at 11:45

dwbrito

5,194
5
32
48

score 17 · Answer 6 · edited Dec 25 '12 at 07:33

17

I've just implemented similar view for my own project. You can check it here

Here is screen of sample application based on library I wrote: ActionsContentView Example

It is easy to use this custom view as element of XML layout. Here is example:

    <shared.ui.actionscontentview.ActionsContentView
      android:id="@+id/content"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:actions_layout="@layout/actions"
      app:content_layout="@layout/content" />

I you will have any questions about usage of ActionsContentView library I can write a small article at projects Wiki.

Some advantages of this library:

ability to slide view by touch
it is easy to adjust size of actions bar in XML
support of all Android SDK version starting from 2.0 and up

There is one limitation:

all horizontal scrolling views will not work at bounds of this view

Best regards, Steven

edited Dec 25 '12 at 07:33

onkar

4,427
10
52
89

answered Jul 16 '12 at 00:11

rude

2,340
2
14
19

how to set frist UI is as your upload pic? i test it frist UI is webView on the screen. i hope listview is show when app is start. through your lib is 2.0,but your demo is 4.0,i hope you can also use 2.0.that is cool – pengwang Jul 17 '12 at 13:29
@pengwang: I've just pushed some code to support this feature. You can do this while Activity.onResume() by calling viewActionsContentView.showActions(); – rude Jul 17 '12 at 14:17
Is it possible to disable touch events on hidden part ? For instance, when the right part is active then all views on the right are disabled. – Valeriy Dec 20 '13 at 13:28
There is possibility to block content layout while action one is shown. I've emailed you a sample project. – rude Dec 23 '13 at 07:33

score 16 · Answer 7 · answered May 15 '13 at 20:41

16

With android support package revision 13( may 2013), there is DrawerLayout for creating a Navigation Drawer that can be pulled in from the edge of a window. And, navigation drawer is a design pattern now.

v4 support library

navigation drawer design pattern

answered May 15 '13 at 20:41

Wubao Li

1,728
10
13

2

Yes, minimum API level supported is 4. – Wubao Li May 15 '13 at 21:01
1

And the compatibility library lets you use it on older devices. I just developed one for Gingerbread and later. – Tony Maro Sep 26 '13 at 19:18
2

This needs to be further at the top. Too many extraneous third-party libraries in the other answers. – Jason Axelson Oct 04 '13 at 19:44

score 15 · Answer 8 · edited May 23 '17 at 12:18

Did a roundup of an existing implementation and turned it into a library project plus example app. Also added XML parsing as well as autodetection of a possibly present actionbar, so it works with the native as well as a support action bar such as ActionBarSherlock.

This one also slides the action bar away!

The whole thing is a library project together with an example app and is described over at A sliding Menu for Android like google and facebook apps. Thanks to scirocco for the initial idea and code!

SlideMenu on Gingerbread SlideMenu on ICS with ActionBar

score 10 · Answer 9 · answered Jan 02 '13 at 06:17

10

This is simple and elegant: https://github.com/akotoe/android-slide-out-menu.git

Snapshot:

enter image description here

answered Jan 02 '13 at 06:17

Edward

201
3
3

can you help me?? Question related to slider.. Here is the link http://stackoverflow.com/questions/14500927/facebook-like-slider-not-working – moDev Jan 24 '13 at 12:15
does it let you to slide by touching ? (mean swipe) – alicanbatur Mar 27 '13 at 18:02
@Edward I have been working with your sample, I think is great and easy to use but came to a problem, when rotating screen (I'm using android:configChanges="orientation" in the manifest with android 3.1 because I don't want the activity to be restarted) the screen rotates fine but the framelayout keeps its size and it doesn't look good, do you have a way around this? I have tried everything but can't fix it. thanks – zvzej May 30 '13 at 22:10
@Edward here is my question using your sample, please help me or give me some advice thanks. http://stackoverflow.com/questions/16778911/android-framelayout-keeping-the-screen-dimensions-when-the-screen-rotates – zvzej May 30 '13 at 22:35

madlymad · Answer 10 · 2013-04-02T07:53:25.023

10

I think that library does not mentioned:

jfeinstein10 / SlidingMenu

github url:https://github.com/jfeinstein10/SlidingMenu

works fine with action bar ActionBarSherlock which helps in backward compatibility!
Support right slide and not only slide via button!

edited Apr 02 '13 at 07:53

answered Feb 17 '13 at 19:15

madlymad

6,367
6
37
68

score 8 · Answer 11 · answered Apr 20 '12 at 19:26

Can't comment on the answer given by @Paul Grime yet, anyway I've submitted on his github project the fix for the flicker problem....

I'll post the fix here, maybe someone needs it. You just need to add two lines of code. The first one below the anim.setAnimationListener call:

anim.setFillAfter(true);

And the second one after app.layout() call:

app.clearAnimation();

Hope this helps :)

score 6 · Answer 12 · answered Jan 09 '12 at 19:04

6

I've implemented this with AbsoluteLayout and a simple slide controller that moves the view to a negative offset to hide.

If anyone is interested, I can clean up the code/layout and post. I know AbsoluteLayout is deprecated, but it was a very straight forward implementation. Left View/ Right View, and when "sliding open", just move the left view out from a -X offset to the device's width - whatever you want to show of the Right View

answered Jan 09 '12 at 19:04

Rich

61
1

I'll apreciate if you can do it without AbsoluteLayout! Thanks! – Igor May 14 '12 at 15:16

score 4 · Answer 13 · answered Apr 11 '13 at 06:12

4

Hello this is best sample demo app which provides facebook like slide menu. Check the code here

enter image description here

answered Apr 11 '13 at 06:12

Mukesh Y

762
6
16

score 3 · Answer 14 · answered Apr 04 '13 at 10:33

As a part of my Android Common Library (ACL) I implemented own SideBar. Main advantages:

Side bar can be set to any position: left, top, bottom, right
Both main view and sliding view are clickable
Side bar can be partially shown
Stylable attributes for SideBar make easier to change it's style
Artifact in maven repo
Part of a big library

Source code: https://github.com/serso/android-common/tree/master/views/src/main/java/org/solovyev/android/view/sidebar

Usage: https://github.com/serso/android-common/blob/master/samples/res/layout/acl_view_layout.xml

score 3 · Answer 15 · answered May 18 '13 at 23:03

Recently I have worked on my sliding menu implementation version. It uses popular J.Feinstein Android library SlidingMenu.

Please check the source code at GitHub:

https://github.com/baruckis/Android-SlidingMenuImplementation

Download app directly to the device to try:

https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation

Code should be self-explanatory because of comments. I hope it will be helpful! ;)

Dalvinder Singh · Answer 16 · 2017-05-03T06:19:42.800

I found a simplest way for it and its working. Use simple Navigation drawer and call drawer.setdrawerListner() and use mainView.setX() method in on drawerSlide method below or copy my code.

xml file

 <android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >

<RelativeLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

  <ImageView
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:id="@+id/menu"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_marginTop="10dp"
      android:layout_marginLeft="10dp"
      android:src="@drawable/black_line"
      />
</RelativeLayout>


<RelativeLayout
    android:id="@+id/left_drawer"
    android:layout_width="200dp"
    android:background="#181D21"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    >
    </RelativeLayout>
 </android.support.v4.widget.DrawerLayout>

java file

   public class MainActivity extends AppCompatActivity {
DrawerLayout drawerLayout;
RelativeLayout mainView;
ImageView menu;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    menu=(ImageView)findViewById(R.id.menu);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mainView=(RelativeLayout)findViewById(R.id.content_frame);

    menu.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            drawerLayout.openDrawer(Gravity.LEFT);
        }
    });

    drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            mainView.setX(slideOffset * 300);
        }

        @Override
        public void onDrawerOpened(View drawerView) {

        }

        @Override
        public void onDrawerClosed(View drawerView) {

        }

        @Override
        public void onDrawerStateChanged(int newState) {

        }
    });
 }
}

Thank You

score 2 · Answer 17 · answered Apr 03 '14 at 13:32

2

Android added the navigation drawer. Refer this

link

answered Apr 03 '14 at 13:32

Deepak Goel

5,624
6
39
53

And this one: http://developer.android.com/design/patterns/navigation-drawer.html – Khulja Sim Sim Apr 30 '14 at 07:29

score 2 · Answer 18 · answered May 26 '14 at 12:16

2

Here is the design and development guide found in official android documentation no need to add unofficial external library. Only android support library will do. Find the links here.

design and develop.

answered May 26 '14 at 12:16

jai_b

1,113
7
7

score 2 · Answer 19 · answered Dec 28 '11 at 16:34

2

I'm going to make some bold guesses here...

I assume they have a layout that represents the menu that is not visible. When the menu button is tapped, they animate the layout/view on top to move out of the way, and simply enable the visibility of the menu layout. I have not thought about this causing any sort of z-index issues in the views, or how they control that.

answered Dec 28 '11 at 16:34

jlindenbaum

1,891
18
28

if you have used the app.. u can actually see that the layout slides to the right giving way to the menu section. i will try and make a video and upload it. – Harsha M V Dec 28 '11 at 16:40
1

I use the iPhone version, if the Android version is the same, then I doubt it's much different than what I described. I haven't written many animations on Android, so I couldn't tell you what the animation code looks like, but in rough words, I assume it's what I described. – jlindenbaum Dec 28 '11 at 17:09
thank you, http://www.youtube.com/watch?v=ANLMaL7zn20 is it the same effect on iPhone. – Harsha M V Dec 29 '11 at 05:02

score 1 · Answer 20 · edited May 23 '17 at 12:34

1

I've been playing with this the past few days and I've come up with a solution that's quite straightforward in the end, and which works pre-Honeycomb. My solution was to animate the View I want to slide (FrameLayout for me) and to listen for the end of the animation (at which point to offset the View's left/right position). I've pasted my solution here: How to animate a View's translation

edited May 23 '17 at 12:34

Community

1
1

answered Jul 03 '12 at 15:05

Adil Hussain

30,049
21
112
147

score 1 · Answer 21 · edited May 23 '17 at 12:09

1

After a search for several hours, I found Paul Grime's solution probably is the best one. But it has too much functionality in it. So it may be hard to study for beginners. So I would like to provide my implementation which is came from Paul's idea but it is simpler and should be easy to read.

implementation of side menu bar by using java code without XML

edited May 23 '17 at 12:09

Community

1
1

answered Aug 24 '12 at 15:10

Chao

97
1
4

score 1 · Answer 22 · answered Feb 13 '13 at 08:29

I didn't see the amazing SimonVT/android-menudrawer mentioned anywhere in the above answers. So here's a link

https://github.com/SimonVT/android-menudrawer

Its super easy to use and you can put it on left, right, top or bottom. Very well documented with sample code and Apache 2.0 license.

Gunnar Karlsson · Answer 23 · 2012-03-28T10:30:22.150

1

The Facebook Android app is possibly build with Fragments. The menu is one Fragment, the in-depth Activity (Newsfeed/Events/Friends etc) is the other Fragment. Basically a tablet 'master & detail' layout on a phone.

edited Mar 28 '12 at 10:30

answered Mar 28 '12 at 10:15

Gunnar Karlsson

28,350
10
68
71

In this case we need to make actionbar inside fragment, so we cannot use any features of Android framework to build it, right? Actually I cannot be sure about facebook, but for many developers is too hard way to make actionbar without help of framework, I hope this time is already over. – AlexKorovyansky Aug 07 '12 at 07:01

score 1 · Answer 24 · answered Mar 31 '12 at 13:41

For info, as the compatibility library starts with 1.6 and this facebook app is also running on devices with Android 1.5, it could not be done with Fragments.

The way you could do it, is : Create a "base" activity BaseMenuActivity where you put all the logic for the onItemClickListener for your menu list and defines the 2 animation ("open" and "close"). At the end/beginning of the animations, you show/hide the layout of the BaseMenuActivity (lets call it menu_layout). The layout for this activity is simple, its only a list with items + a transparent part at the right of your list. This part will be clickable and its width will be the same width as your "move button". With that, you'll be able to click on this layout to start the animation to let the content_layout slide to the left and take the whole screen. For each option (i.e. item of the menu list), you create a "ContentActivity" which extends the BaseMenuActivity. Then when you click on an item of the list, you start your ItemSelectedContentActivity with the menu visible (which you'll close as soon as your activity starts). The layouts for each ContentActivity are FrameLayout and includes the and . You just need to move the content_layout and make the menu_layout visible when you want.

That's a way to do it, and I hope I've been clear enough.

score 0 · Answer 25 · answered Oct 26 '12 at 07:49

0

In June 2012, Google has added "templates" in the Eclipse ADT plugin, and there is a template called "master/detail flow" which does exactly that (based on fragmets)

answered Oct 26 '12 at 07:49

rds

26,253
19
107
134

1

Master/detail flow is not a sidebar menu in question. It is just two fragments displayed together (tablet) or separately (phone). – tomash Feb 28 '13 at 10:37
Well, in June 2013, Navigation Drawer Layout has been added, which is what more similar to need here, yet the ActionBar won't slide with drawer as Facebook style slider bar need here. – Khulja Sim Sim May 15 '14 at 01:17

Android Facebook style slide

25 Answers25

Linked

Related