View Flow for Android

In a project I’m currently working on we had the need of scrolling through a bunch of views in a horizontal fashion. I wanted the ViewGroup to be backed up with an Adapter, pretty much like the ListView does it. In my case, the items were to be populated from an online data source. I did find a few different takes on a view switcher but none of them were backed with an Adapter. So I decided to base my work on one of them, but instead extend the AdapterView class in the Android SDK (instead of simply the ViewGroup).

If you’ve implemented a ListView you’ve probably already come across the Adapter concept. An Adapter in Android is more or less a collection of elements of some sort. The Adapter is capable of providing views for each of the elements when asked to. A Listview does, of course, not load a View for each of the elements in the Adapter at once. That would be completly irresponsible as it would eat up the memory in no-time. Instead it loads the view for each element only when that element is visible on the screen. While scrolling down a Listview, top elements will be removed once they move out of the visible area and new Views will be inflated from below. Or even better. The elements removed will, if possible, be recycled by the new elements entering the visible area.

I wanted the ViewFlow (as I later named the library) to work just like that. Having a fixed number of Views loaded at a time and re-use Views whenever possible. Since ViewFlow extends the AdapterView (which in turn extends ViewGroup it is accessible in your layout XML like so:

<com.indianic.viewflowDemo.widget.ViewFlow
        android:id="@+id/viewflow" android:layout_width="fill_parent"
        android:layout_height="fill_parent" app:sidebuffer="3"/>

The sidebuffer attribute is optional and defines the number of views buffered on each side of the currently centered View. Then in your activity you set your adapter on the ViewFlow instance:

ViewFlow viewFlow = (ViewFlow) findViewById(R.id.viewflow);
viewFlow.setAdapter(myAdapter);

The Viewflow should now automatically load the inital elements (four in this case, 1 + 3 buffered on the right side) from the adapter and center on the first one. If you ever need to listen on view switch events you will want to implement ViewFlow.

viewFlow.setOnViewSwitchListener(new ViewSwitchListener() {
    public void onSwitched(View v, int position) {
        // Your code here
    }
});

Title Flow Indicator

This indicator presents the title of the previous, current and next View in the adapter (see screenshot below).

<com.indianic.viewflowDemo.widget.TitleFlowIndicator android:id="@+id/viewflowindic" 

android:layout_height="wrap_content"
android:layout_width="fill_parent"
app:footerLineHeight="2dp"
app:footerTriangleHeight="10dp" 

app:textColor="#FFFFFFFF" 

app:selectedColor="#FFFFC445"
app:footerColor="#FFFFC445" 

app:titlePadding="10dp" 

app:textSize="11dp"

app:selectedSize="12dp"
android:layout_marginTop="10dip"
app:clipPadding="5dp" />

And then you'll need to connect your Viewflow with the FlowIndicator:

TitleFlowIndicator indicator = (TitleFlowIndicator) findViewById(R.id.viewflowindic);
indicator.setTitleProvider(myTitleProvider);
viewFlow.setFlowIndicator(indicator);

Here One Sample Project for ViewFlow Demo :)