ViewPager Indicators But "Special Ones" ;)

Hi guys,

ViewPagers are an important part of android UI used to view data in form of multiple pages. User can swipe back and forth between these pages to reveal the data. For example the Photo Gallery in Facebook. Everyone is familiar with it right.? user can swipe through the images to see next or previous photo.

ViewPager Indicator comes in handy when you have to show count of pages to the user or the page user is currently on. Mostly used PageIndicators are either the

"CirclrPageIndicator" : Small dots to show the number of pages and the highlighted one to indicate the current page.
Or
"TabStrinp" : Used when there are tabs associated with ViewPager. A thin colored bar indicates the current tab or page selected.



But aaaeeeeee...Whats the fun in using a view which most of the developers had already used.

So let me introduce you with two more ViewPager Indicator which are unique. Which no one have seen. Which are not so common but are pretty cool. ;)


1) FlipBarIndicator / CircleIndicator

 

FlipBarIndicator : Total no of bars indicates the page count. Bars get  flipped with page swipe/change. The highlighted bar indicates the current page. Here is the link to the LibraryProject with a sample to include it in your own project.

CircleIndicator
Not that unique but a lightweight viewpager indicator, the exect replica of nexus 5 launcher. Here is the link to the LibraryProject with a sample to include it in your own project.


And now Its time for our ShowStoper. Our second unique ViewPager Indicator is

2) RubberIndicator

 
Here is the link to the LibraryProject with a sample to include it in your own project.

• Designed by Valentyn Khenkin
• Here is the CSS version.

Usage

Introduction

APIs offered by RubberIndicator.

APIs	Usage
setCount(int count)	Set the count of indicators
setCount(int count, int focusPos)	Set the count and specify the focusing indicator
setFocusPosition(int pos)	Set focusing indicator
getFocusPosition()	Get focusing indicator
moveToLeft()	Move the focusing indicator to left
moveToRight()	Move the focusing indicator to right

In addition to the APIs listed in the table, RubberIndicator also provides a callback listener - OnMoveListener for the user should be notified when the moving animator finished.

public interface OnMoveListener {
    void onMovedToLeft();
    void onMovedToRight();
}

How to use

Checkout to sample to see how to use RubberIndicator with a GestureDetector.

Thats all folks. :)
Please comment, share, subscribe and show if you like this article or what can i do to improve.
And Remember : "A Beautiful app, is what everyone wants." :) 

Because 'Hamburger Menu' is so MainStream.

Hi guys,

This is my second blog. So, i want to introduce you all with a really unique view. May be some of you are familiar with this, but i bet most of you have never seen this.

I assume, as an android developer you all have encountered with a term "Hamburger Menu". That little three lined burger shaped button on action bar. That is a pretty cool view, Right.?. You press a button and a menu slides in....!! Dude that is so not cool. Everyone is doing that in their apps.

Google felt that non-cool thing too, a while back. So, they introduced another view in material designs named as "Material Menu". This one is pretty good improvement over the old "Hamburger Menu".
Now when you click on the Hamburger menu icon....KAABOOOMMM....It get casted into a back arrow with a beautiful animation.







But everyone has moved to "Material Menu" making it so mainstream. So how can you maintain the uniqueness of your app without loosing the useability of Material Menu.

Guys, leme introduce you with the best and exclusive replacement for "Material Menu". This is called as "Guillotine Menu" by "Yalantis".

Isn't it pretty cool.

Here's the link to "Guillotine Menu" Library-Project

Usage

For a working implementation, have a look at the app module (demo app included with the library project)

1. Include the library as local library project.
2. Your hamburger on navigation menu must have exactly same coordinates as hamburger on ActionBar.
3. In your onCreate method you need to config and build animation with GuillotineAnimation.GuillotineBuilder
   

   new GuillotineAnimation.GuillotineBuilder(guillotineMenu,
                 guillotineMenu.findViewById(R.id.guillotine_hamburger),
                 contentHamburger)
               .setActionBarViewForAnimation(toolbar)
               .build();

   Here setActionBarViewForAnimation method enables bounce effect of ActionBar at the end of the guillotine closing animation.

Misc

Builder allows you to customize start delay, duration, interpolation and you can set listener if you want to do stuff at the moment when menu has been opened or closed.

Compatibility

• Android 4.0.3 Ice Cream Sandwich (API level 15)

Hope you all like it. Will love to hear from you guys.
And Remember : "A Beautiful app, is what everyone wants." :) 

ListBuddies : A Remarkably Beautiful ListView.

Hi guys,

Have you ever seen a view that looks so delicious, that on a very first look you want to add it in your next application. If not than have a look at the homepage of an app named "Expedia". Hats off to the designers and developers of the app for putting such a great effort.

So, while searching about, how i can create a same View or effect of list-views in my app. I stumbled upon a library-project named "ListBuddies" in "Jpardogo" github repo. Thanks to the developer of this library-project, you guys can achieve in an easy way, the behaviour of the home page in the Expedia app, with a pair of auto-scroll circular parallax ListViews.

Here's the link to ListBuddies Library-Project
(Hope you all know how to add a library-project to your project)

A video example of this library is on this youtube video.
And the demo app can be found on the play store.

Usage

You must declare the following view in your xml layout:

    <com.jpardogo.listbuddies.lib.views.ListBuddiesLayout 
         xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/listbuddies"
         android:layout_width="match_parent"
         android:layout_height="match_parent"/>

There are a bunch of optional custom attributes:

    <com.jpardogo.listbuddies.lib.views.ListBuddiesLayout
         xmlns:listbuddies="http://schemas.android.com/apk/res-auto"
         android:id="@+id/listbuddies"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         listbuddies:speed="2"
         listbuddies:gap="@dimen/gap"
         listbuddies:gapColor="@color/frame"
         listbuddies:listsDivider="@drawable/divider"
         listbuddies:listsDividerHeight="@dimen/divider_height"
         listbuddies:autoScrollFaster="right"
         listbuddies:scrollFaster="left"/>

If you prefere to create it dynamically use:

    ListBuddiesLayout listBuddies = new ListBuddiesLayout(this);
    listBuddies.setGap(mMarginDefault)
          .setSpeed(ListBuddiesLayout.DEFAULT_SPEED)
          .setDividerHeight(mMarginDefault)
          .setGapColor(getResources().getColor(R.color.frame))
          .setAutoScrollFaster(
               mScrollConfig[ScrollConfigOptions.RIGHT.getConfigValue()])
          .setManualScrollFaster(
               mScrollConfig[ScrollConfigOptions.LEFT.getConfigValue()])
          .setDivider(getResources().getDrawable(R.drawable.divider));
    ((FrameLayout)findViewById(R.id.<container_id>)).addView(listBuddies);

Attributes

• speed: Sets the auto scroll speed (integer). 0 - no autoScroll
• gap: Space between the lists, the default gap is 3dp (@dimen/default_margin_between_lists).
• gapColor: Defines the color of the gap, if it is not set the gap is transparent
• listDivider: Defines the lists dividers.
• listsDividerHeight: Divider´s height.
• autoScrollFaster: Indicate the ListView that will be faster on the parrallax effect during autoScroll. right/left.
• scrollFaster: Indicate the ListView that will be faster on the parrallax effect during manual scroll. right/left.

This LinearLayout contains two ListViews. So we need to set the adapters of the ListViews calling

     listBuddies.setAdapters(adapter1,adapter2).

         @Override
         public View onCreateView(LayoutInflater inflater

                 , ViewGroup container,Bundle savedInstanceState) {
             View rootView = inflater.inflate(R.layout.fragment_main
                             , container, false);
             ListBuddiesLayout listBuddies = (ListBuddiesLayout) rootView
                                           .findViewById(R.id.listbuddies);
             CircularAdapter adapter = new CircularAdapter(getActivity(), 
                             getResources()

                             .getDimensionPixelSize(R.dimen.image_size1),
                             ImagesUrls.imageUrls_left);
             CircularAdapter adapter2 = new CircularAdapter(getActivity(), 
                             getResources()
                             .getDimensionPixelSize(R.dimen.image_size2),

                             ImagesUrls.imageUrls_right);
             listBuddies.setAdapters(adapter, adapter2);
             return rootView;
         }

Both adapters need to be extend from CircularLoopAdapter. With minimal differences from a BaseAdapter.

      public class CircularAdapter extends CircularLoopAdapter

The first different is that the adapter needs to @Override getCircularCount() instead of getCount().

     @Override
     protected int getCircularCount() {
        return mItems.size();
        }

and instead of get the value of position to get the item from the list. We need to get the position calling getCircularPosition(position), like this:

      @Override
      public String getItem(int position) {
           return mItems.get(getCircularPosition(position));
           }

To receive the callback for the click on the items of the lists, Just call setOnItemClickListener() on your ListBuddiesLayout view and pass and instance of OnBuddyItemClickListener.

public class ListBuddiesFragment extends Fragment  

                implements ListBuddiesLayout.OnBuddyItemClickListener

....

listBuddies.setOnItemClickListener(this);

You will receive the OnItemClick callback in onBuddyItemClicked which is similar to onItemClick but indicate with the parameter int buddy in which of the lists the item clicked is contained. if the value of buddy is 0 the item is on the first list (left) and if it is 1 is on the second list (right).

     @Override
     public void onBuddyItemClicked(AdapterView<?> parent, View view
          , int buddy, int position, long id) {
          //int buddy indicate the list where the item is contain.
          // 0 - left
          // 1 - right
     }

In order to receive touch feedback for the click of the list items, we need to have as a parent of our list item view one of the following layouts:

com.jpardogo.listbuddies.lib.views.containers.FrameLayoutFeedback com.jpardogo.listbuddies.lib.views.containers.RelativeLayoutFeedBack com.jpardogo.listbuddies.lib.views.containers.LinearLayoutFeedBack
This layouts have selectorColor property to define the color of the selector for the feedback.

     <com.jpardogo.listbuddies.lib.views.containers.FrameLayoutFeedback 
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:listbuddies="http://schemas.android.com/apk/res-auto"
         android:layout_height="match_parent"
         android:layout_width="match_parent"
         listbuddies:selectorColor="@color/blue">

    

The color will need some transparency in order to act as the ListView selector:

<color name="blue">#7733B5E5</color>

Although it is just optional.

Including in your project

You can either add the library to your application as a library project or add the following dependency to your build.gradle:

dependencies {
    compile 'com.jpardogo.listbuddies:library:(latest version)'
}

Developed By

Javier Pardo de Santayana Gómez - jpardogo@gmail.com


Hope to see this view, very soon, in some of your apps. :)
And Remember : "A Beautiful app, is what everyone wants."