Tuesday, June 19, 2012

Introducing Android Fly-in App Navigation Library!

This article is to introduce my Android library for Fly-in App Navigation, or Side Navigation, or Slide out Navigation, etc... If you don't know what that is, check it out here!

My implementation allows developers to import this pattern into their apps with nearly no work at all. I handle all laying out of the main and menu views, as well as the animations. Developers can design the menu and main layout completely separate in their own xml definition files, as if they were stand alone layouts (which they are!). You can also specify just how far out you want the menu to slide. If you want it to slide all the way, it can slide all the way. If you want it to slide just enough for icons, go ahead! My implementation gives you complete freedom to make your layouts look how you want.

Some features include:
  • Open and Closing Animations on the Main View
  • Small Open and Closing Animations on the menu to add some reality to it
  • Dropshadow on the Main View to make it appear to be over the menu
  • Smooth animation transitions for a professional, quality animation
  • Empty layouts that allow you to completely design the menu
  • Simple usage
  • Easy injection into your existing projects


If you want to see it in action, check out the app on the Google Play Market!! 


How to Use

Using this library is simple. First, download the project from github (see link below). Then, import that into your Eclipse workspace. Once done, select the project you want to use this in, right click->properties. Go to the android tab and scroll down to add-library. This library should appear in that list. Select it and you're set up, ready to go.

To use the FanView class in xml is simple. Here are the two required things (plus me showing you how to set how big the menu should be!):

<?xml version="1.0" encoding="utf-8"?>
<com.deaux.fan.FanView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/your.package.name"
    android:id="@+id/fan_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    app:menuSize="200dp" />

And that's everything! There is a sample java file in the readme of the github project so check that out as well!

So go to github now and start using it! Here's the link!

If you find any issues please report them in github and I will get to them immeaditely! For the record, this is not meant to be used with Tablet devices. Tablets should refrain from even using a pattern like this. There are many more appropriate patterns like the Split View pattern.

6 comments:

  1. Looks interesting. Does it play well with actionbarsherlock?

    ReplyDelete
  2. Hello, I want to know if the the attribute app:menuSize="200dp"
    can be modified by java and how to do it
    thx

    ReplyDelete
  3. Hello , I also want to know the same thing whether app:menuSize="200dp" can be modified by java and how to do it

    ReplyDelete
    Replies
    1. yes it can be, but the project doesn't seem to load attributes correctly. Look at my fork of this project, it implements both vertical and horizontal fanning:
      https://github.com/Gregadeaux/android-fly-in-app-navigation

      In FanSample/res/layout/test_horizontal.xml you can change the app:menuSize and it will show up

      Delete
    2. i meant:
      https://github.com/StoyanD/android-fly-in-app-navigation/tree/verticalFan

      Delete