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     On clicking the the top left button the page slide and the following screen is shown     YouTube Video

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 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

User · Answer

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

User · Answer

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    lt 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   gt    lt RelativeLayout     android id    id content frame      android layout width  match parent      android layout height  match parent      android background   ffffff  gt      lt 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          gt   lt  RelativeLayout gt     lt RelativeLayout     android id    id left drawer      android layout width  200dp      android background   181D21      android layout height  match parent      android layout gravity  start       gt       lt  RelativeLayout gt    lt  android support v4 widget DrawerLayout gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Android added the navigation drawer  Refer this   link

User · Answer

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

User · Answer

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  39 s translation

User · Answer

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

User · Answer

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

User · Answer

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  amp  detail  layout on a phone

User · Answer

This is simple and elegant  https   github com akotoe android-slide-out-menu git  Snapshot

User · Answer

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

User · Answer

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

User · Answer

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    It is easy to use this custom view as element of XML layout  Here is example        lt 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    gt    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

User · Answer

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

[android] Android Facebook style slide

Examples related to android

Examples related to facebook

Examples related to android-side-navigation