Sunday 7 April 2013

Facebook like slide-in and slide out navifation | Android Slide Navigation


Hello Friends,

Today , I am going to share you my code with the help of which you
can show facebook like slide navigation in your android.

If you are searching for facebook like slide in slide out navigation 
view, or trying to implement facebook like page navigation in your 
android application , then this tutorial definitely helps you. 

facebook slide
android navigation                                               







  











android slide navigartion
facebook



Download the complete source code here

Enjoy Coding..... :)
Cheers...


Mukesh Kumar

Hi Guys I am from Delhi working as Web/Mobile Application Developer(Android Developer), also have knowledge of Roboelctric and Mockito ,android test driven development... Blogging has been my passion and I think blogging is one of the powerful medium to share knowledge and ideas....

69 comments:

  1. Hello mukesh, I can not able to find your source code for this blog. Can you please help me out with that?

    ReplyDelete
  2. Actually the link was broken during upload....No worries ,I will update the link tonight.

    ReplyDelete
  3. Hello Gaurav , Now Check the download link...

    ReplyDelete
    Replies
    1. Plz give me code image slider in android app


      and

      facebook menu type android app

      Delete
  4. Hi Mukesh ,can you provide the link for source code?

    ReplyDelete
  5. Hello Mukesh, there are no source code link there. How can I find this, can you please tell me?

    ReplyDelete
  6. Hello Sohi,

    I have provide complete source code at the end, below the image. Now I made that link in bold....hope you find that.

    ReplyDelete
  7. Hello sarvesh please cross check again at the end I have provided the complete source code for download.
    Let me know you guys found the link or not I am little worried....

    ReplyDelete
  8. What about multiple activity starting from side menu?
    That can share the common left menu?

    ReplyDelete
  9. Hello Hanif,
    by using fragment activity you can do this...

    ReplyDelete
  10. Thanks....great Job.. You have saved our time..

    ReplyDelete
  11. Mukesh the file is downloaded as .exe

    ReplyDelete
  12. Hi.Mukesh, i have use your code for FB style sliding menu and it's working fine.But i have one problem with it when my activity is called every time this menu show first for few seconds then my activity view appear, i don't won't to show that menu what can i do ? plz help me.

    ReplyDelete
  13. hello Chirag,
    You mean the menu button at top left??
    if yes then use visibility gone in your xml.

    ReplyDelete
  14. yes.i got another way ,i have change it programmatically let me put that code.So if anyone have this problem then....

    In MyHorizontalView.java class >>
    in onGlobalLayout() method >>

    in place of for loop for children
    put this code.......

    for (int i = 0; i < children.length; i++) {

    sizeCallback.getViewSize(i, w, h, dims);

    //---------------------------------------------------------
    //[0] means app view which we have to show
    if(i != 0)
    {
    children[i].setVisibility(View.VISIBLE);
    }
    else //[1] means menu view which we don't have to shown
    {
    children[i].setVisibility(View.GONE);
    }
    parent.addView(children[i], dims[0], dims[1]);
    if (i < scrollToViewIdx) {
    scrollToViewPos += dims[0];
    }
    //---------------------------------------------------------

    }

    Thanks for your ans Mukesh

    ReplyDelete
  15. Thanks, Chirag for sharing the code.

    ReplyDelete
  16. Hello Mukesh...
    I have another one issue if you can solve it plz help yaar.
    I have HorizonatlScrollview and it that i have five to six imageviews now when i scroll it and select any button it's working fine.

    Now what i want suppose when i pass 5 from previous view then my horizonatal scrollview autometically scroll at position of imageview 5 for that i have use this code but it's not working.....if you have other solutions then tell me...thanks in advance


    new Handler().post(new Runnable() {

    @Override
    public void run() {
    // TODO Auto-generated method stub

    hrzscroll.scrollBy(200, 0);
    }
    });

    this method call successfully but scrollBy() is not working i have also use scrollTo() but i fail

    ReplyDelete
  17. Hello chirag,
    may be you can do somethink like this,
    Suppose the width of each imageview is 50dp, so total is 50*6=300dp.
    Now , when you are at 6th positon it means width is 50*6 = 300dp.
    When you tap on 5th image , it means width is 50*5 = 250dp.

    then call scrollTo(0,250).

    Check my horizontal listview tutorial(blog), there I am doing the same.
    May be it gives you some Idea.In that blog I am moving the imageview on clicking of left and right arrow icon.

    ReplyDelete
  18. Thanks Mukesh for your ans.I tried your ans but still the same issue i got again.But i have solve it for my ways this is my code

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    hrzscroll.post(new Runnable() {
    @Override
    public void run () {

    categoryId = intent.getExtras().getString("categoryId");

    if(categoryId != null)
    {
    if(categoryId.equalsIgnoreCase("4"))
    {
    Log.v(" [First] Category -> ", categoryId);
    hrzscroll.scrollTo(120, 0);
    }
    else if(categoryId.equalsIgnoreCase("5"))
    {
    Log.v(" [Second] Category -> ", categoryId);
    hrzscroll.scrollTo(180, 0);
    HideNextButton();
    }
    }

    }
    });
    }

    ReplyDelete
  19. Ohhh great!!
    So hrzscroll.scrollTo(120, 0) works....coool :)

    ReplyDelete
  20. yes.but it will works in onWindowFocusChanged() method well rather than others

    ReplyDelete
  21. Hi Mukesh...
    I have one issue...plz can you guide me for that..

    I m doing Webservice call from android to PHP server.In my doInBackground() URL post and getback JSON formate data from server then i just embed that data to my control.
    What i have problem that suppose if there is internet connection slow down and then my loader is just running no untill no response is coming back from server.So after sometimes my app will crash in doInBackground().
    So how can i handle this doInBackground() crash issue by showing alert to user that there is some problem in server plz try again later like that..

    Plz help thanks in advance.. :)

    ReplyDelete
  22. Hello Chirag,
    1.Catch timeout exception:
    try {
    serverCall();
    } catch (Exception e) {
    //Catch timeout exception:
    //do what you want
    }

    2. The other way: suppose in your protected String doInBackground(String... params)
    you are calling the server and getting the stays response eg:

    protected String doInBackground(String... params) {
    try {
    //this method calls my web service method //and expect some response
    // initially my response=null;
    //if n/w is down at that time app crash so //we get uploadstatus=null

    uploadStatus = uploadImage();

    } catch (IOException e) {
    // TODO Auto-generated catch block
    pDialog.dismiss();
    Log.d("Timeout ecxeption:", "Timeout2");
    e.printStackTrace();
    }
    return null;
    }

    Then in your protected void onPostExecute(String result) method check the status

    protected void onPostExecute(String result) {
    if(pDialog.isShowing())
    pDialog.dismiss();

    if(null != uploadStatus) {
    //your controller code
    } else {
    //show network down alert
    }
    }

    <<================================================

    Note:Don't forgot to add catch exception in all your method call

    Hopes , this will helps you

    ReplyDelete
  23. Hi...muskesh i have tried your code it works fine..
    thanks.

    ReplyDelete
  24. Hi Mukesh,
    I have one another issue.
    I m dynamic binding Listview using adapter and dat will be coming from Webservice.
    In that i bind text as well as images all items has seperate logo which also comes from Webservice URL and that URL i download and convert into bitmap rounded corner for that i used your code which you posted on your blog.
    My problem is when my data loads it will bind ti listview and logo will call in doInBackground, when i scroll down listview even sometimes my logo comes and bind also loader is shown i have INVISIBLE loader in onPost().

    Sometimes first item logo will repeat in all items and then above that logo loader image is coming and after sometimes that logo will be changed..

    I think this is Lazy binding process but i don't get proper and plz help me

    Thanks in advance

    ReplyDelete
  25. Hello Chirag,
    First of all let me know ,are you using lazy image loader for imageview or not ??

    ReplyDelete
  26. Check Lazy image loader in android...

    ReplyDelete
  27. My issue is when my first image is bind in first itel of listview then when i scroll down all remaining items have same logo as first item then on that image my loader is playing after some times when logo is loading completely in sequence that old logo is gone and new logo is shown

    ReplyDelete
  28. And this whole process is running in doInBackground() means logo are ::

    1) coming from WS like http://xyz.com/123.png
    2) that convert bitmap
    3) set to my imageview

    ReplyDelete
  29. No i m not using Lazy Image Loader , I m just get and convert URL to Bitmap image and set it to Imageview and bind adapter to listview and this images asyncronously call one by one and bind in listview

    ReplyDelete
  30. @Override
    public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    View myView = convertView;
    NearByHolder holder;
    LayoutInflater inflater;
    //NearByHolder holder = new NearByHolder();
    NearBy mNearBy = nearBy.get(position);
    if (convertView == null) // if it's not recycled, initialize some attributes
    {
    inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    myView = inflater.inflate(R.layout.near_by_info, null);

    holder = new NearByHolder();

    holder.txtMerchantName=(TextView) myView.findViewById(R.id.txtMerchantName);
    holder.txtMerchantName.setTypeface(tf,Typeface.BOLD);
    holder.txtOfferTitle = (TextView) myView.findViewById(R.id.txtOfferTitle);
    holder.txtOfferTitle.setTypeface(tfCalibri);
    holder.txtCategoryName = (TextView) myView.findViewById(R.id.txtCategoryName);
    holder.txtDistance = (TextView) myView.findViewById(R.id.txtDistance);
    holder.txtDistance.setTypeface(tfCalibri);
    holder.imageViewNearByLogo =(ImageView) myView.findViewById(R.id.imgBusiness);
    strLat = Double.parseDouble(mNearBy.getLatitude());
    strLong = Double.parseDouble(mNearBy.getLongitude());

    holder.linearCertificate = (LinearLayout) myView.findViewById(R.id.linearLayoutCertificate);
    holder.linearCertificate.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {
    // TODO Auto-generated method stub
    }
    });

    is_certificate = mNearBy.getIs_certificate();
    if(is_certificate.equalsIgnoreCase("0"))
    {
    holder.linearCertificate.setVisibility(View.INVISIBLE);
    }
    else if(is_certificate.equalsIgnoreCase("1"))
    {
    holder.linearCertificate.setVisibility(View.VISIBLE);
    }
    holder.p = (ProgressBar) myView.findViewById(R.id.myProgressBarLoading);
    myView.setTag(holder);

    }//convertview condition ends here

    holder =(NearByHolder) myView.getTag();
    holder.position = position;
    holder.txtMerchantName.setText(mNearBy.getBusiness_name());
    holder.txtOfferTitle.setText(mNearBy.getOffer_title());
    holder.txtCategoryName.setText(mNearBy.getCategory_name());

    String strDistance = mNearBy.getDistance();
    strDistance = strDistance.substring(0, strDistance.indexOf(".")+2);
    holder.txtDistance.setText(strDistance+" m");

    if(mHash.get(position)==null)
    {
    holder.p.setVisibility(View.VISIBLE);

    //If Logo comes from URL then call AsynkTask
    if(mNearBy.isLogoPresent == true)
    {
    ThumbnailTask lmib = new ThumbnailTask(position,holder,mHash);
    lmib.execute(mNearBy.getLogoUrl());
    }
    else //Set Static Logo in Imageview
    {
    holder.p.setVisibility(View.INVISIBLE);
    BitmapDrawable bmpDrawable = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.default_logo);
    holder.imageViewNearByLogo.setImageBitmap(bmpDrawable.getBitmap());
    }
    }
    else
    {
    holder.p.setVisibility(View.INVISIBLE);
    holder.imageViewNearByLogo.setImageBitmap(mHash.get(position));
    }

    return myView;
    }

    this is my code...

    ReplyDelete
  31. my images are loading onDemand...
    means when i scroll down of listview then getView() call for getting and binding images. So when i scroll down some first image of list item will repeated in all items and above that image loader is moving...and after some times loader will gone.

    ReplyDelete
  32. Hi Muskesh...
    I have one confusion for dynamic binding data in listview What adapter shall I use? HashMap is reliable?

    I m using Hashmap but it will bind random data everytime which i don't want then what i have to do ?

    ReplyDelete
  33. Hello Chirag,
    I suggest you to try the binding of image using lazy image loader ,I am pretty sure that It will solved your problem.

    Regarding, the above hash map issue...try with using linked hashmap.

    But,Its good if you used lazy image loader...please try using it and then let me know if you still facing any issue.

    ReplyDelete
  34. Hi ,Thanks for the code .its the same wt I want to Implement in my project . but after trying hard code is not working up to the mark .sliding function is not working
    Can u provide me ur mail id so that I can send you the project for reference .Its urgent and it will be a great help .

    Anup

    ReplyDelete
  35. Sure, let me check it out that, then back to you ..
    thanks

    ReplyDelete
  36. hello Mukesh Yadav can you give both side navigation facebook navigation (detail & chat)like left & right source code my mail city0666@gmail.com

    ReplyDelete
  37. Hello anup.
    my email id is : mukesh421985@gmail.com

    ReplyDelete
  38. Good Morning Mukesh...
    I have one issue,if you have ans of it.
    I want an event or method which call only ones when my app is launch and also it will be called when my app is comes in foreground after re -openining it.

    Because i have to check user status by calling WS.
    If i get user status block then i have to redirect user on login screen.

    Right now i have call this WS on every activities onResume() method so if user minimize app and then open again app onResume() is called and check user status from WS.

    But right now when i move from one activity to another in every screen onResume() method call and my WS call for user status. i want some deligate method like in iPhone ::

    didbecomeactive()

    Plz let me know if you know any method in android like above method in iPhone.

    ReplyDelete
  39. Good Morning Chirag,
    android onResume() works almost same like iphone
    didbecomeactive() deligate. But your problem is that you want to call your webservice only when your application comes in forground first time not on switching b/w the activity.

    You can do this by making an application level variable or static boolean variable(isStatus) initially set it as false. and in onResume check it like this.

    @override
    onResume() {
    if(isStatus == false) {
    //call your webservice
    }
    }

    ReplyDelete
  40. yes Mukesh i got your point, now after call my webservice i have to change isStatus = true b'cas i don't want again call webservice when i come back same activity from another activity.
    And now my isStatus is became true so it will not call Webservice again in onResume() but suppose i have minimized my app and after 2 days i will open my app then my last viewed activity is onResume() at that time i have to call Websevice. so how can i manage that isStatus variable value ???????

    ReplyDelete
  41. Okay,got it, there are two way
    1. Have you using tabactivity??
    if yes the on the main tab activty you have to forcefully close the instance of your app on back button pressed method and also set the staus = false.

    2. If not using tab activity then on each activity on back button pressed you first check the size of activity stack and
    if(size<1) {
    status = false;
    }

    ReplyDelete
  42. Thanks for your ans....
    First i am not using TabActivity..
    Then suppose user have pressed Home Key of device then my app will also minimize..
    and i have tried to handle Home key event but i m fail i have also do some research on Home button event but all are saying we can't catch Home button event and also i failed to do that...

    ReplyDelete
  43. One more thing mukesh...
    also i am stuck right now it one problem,i have to hold my current activity untill finishing my AsyncTask can we do that ?

    what i have to do, i have to make Webservice call and in response i get some value after i get that response my current activity flow started further meanwhile current activity i have to hold...Is there any event or method which make Asyncrouse task to Syncronous?

    ReplyDelete
  44. Hello Mukesh ,

    U saw my project ? Can you check and tel me wts the problem behind it r can u solve and dend it to me .

    Thanks
    Anup

    ReplyDelete
  45. Hello Mukesh...
    I have one issue...
    Suppose if i making Web service call for parsing data which is asynchronous process and at middle of parsing my device lost internet connection then right now my app will crash.How to handle this situation.

    ReplyDelete
  46. Hello Check,
    You have to use network monitor code which trigger whenever network is down.

    ReplyDelete
  47. where is ur link man to download sample code

    ReplyDelete
  48. Hello apkimaza,

    Please check the above code or point your mouse on "here" text...... on download link

    ReplyDelete
  49. Sir,

    There is no code for downloading. Please send that code on my emailid---- anand1987varanasi@gmail.com

    Thanks.

    ReplyDelete
  50. Hello Anand, please go through the blog I just update the downloaded link.

    ReplyDelete
  51. sorry, i have a problem with config.java when i was imported it, please a guide from u,i am a newbie...

    ReplyDelete
  52. Hello INF,
    Please let me know the issue you are facing.

    ReplyDelete
  53. Hi Mukesh ,
    I am new to android...
    nice titorial but i want the code that should slide from right side rather than existing from left side...

    pl.....

    ReplyDelete
  54. Thanks Mukesh It worked for me........really nice tutorial.

    ReplyDelete
  55. can you help me for same thing but should slide from right side ......apart from existing left side....

    thanks............

    ReplyDelete
  56. Hi Mukesh,

    How do i download that, there is no download option ,
    please help me for download

    ReplyDelete
  57. Hi mukesh. I am using navigation drawer for flipping the menu. can u tell me that how to use activity instead of fragment

    ReplyDelete
  58. Hello Archana..
    you have to remove the code and call of fragment and instead of that om option menu selection you have to do something like this..
    "
    @Override
    public boolean onOptionsItemSelected(final MenuItem item) {
    // The action bar home/up action should open or close the drawer.
    // ActionBarDrawerToggle will take care of this.
    if (mDrawerToggle.onOptionsItemSelected(getMenuItem(item))) {
    return true;
    }

    // Handle action buttons
    switch (item.getItemId()) {
    case R.id.action_second:
    // create intent to perform web search for this planet
    Intent intent = new Intent(this,SecondActivity.class);
    startActivity(intent);
    return true;
    default:
    return super.onOptionsItemSelected(item);
    }
    }
    "

    ReplyDelete
  59. Thanks..bro save lot of time and learns a lot..

    ReplyDelete
  60. Hi Mukesh,
    Thanks for sharing code.It work perfectly.But i want to open slide menu from right side not from left.Can you tell me how to do it.

    ReplyDelete
  61. Hii Mukesh,,
    Plz Give me example of Lazy Image

    ReplyDelete
  62. Do you know how can I put the slide Left-to-Right in your app?

    ReplyDelete
  63. Hello Germanno Teles,
    Use Navigation drawer code which will be available on android developer site.

    ReplyDelete
  64. hello mukesh sir
    my problem is when i click on menu list item another activity inflate in the main page like in facebook app can you tell me how can do that
    thank you

    ReplyDelete
  65. This is fine demo. But this created a major problem for me. In android jelly bean when i run my app using this same code first time sliding menu didn't open means working properly but when i ran this project in kitkat or emulator then at the app start sliding menu was open which i really want. So please can you tell me why this is happening?

    ReplyDelete

 

Copyright @ 2013 Android Developers Blog.