Introduction: Navigation pattern like in Google News Stand app with transitions
More: Author   ReportBugs   

Navigation pattern like in Google News Stand app with transitions


Getting Started

In your build.gradle

dependencies {
    implementation 'hari.allagi:allagi:0.1.0'
    //or in lower versions:
    //compile 'hari.allagi:allagi:0.1.0'


Choose one of the NoActionBar themes to use in MenuListActivity and override it to define your app color palette.

<style name="AppTheme.MenuListActivity.NoActionBar" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent" >@color/colorAccent</item>

Define the colors for ScrollableMenuActivity too.

<style name="AppTheme.ScrollableMenuActivity.NoActionBar" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

Declare the Allagi activities in AndroidManifest.xml file using your new app themes.

    android:theme="@style/AppTheme.MenuListActivity.NoActionBar" />
    android:theme="@style/AppTheme.ScrollableMenuActivity.NoActionBar" />

Set largeHeap to true in AndroidManifest.xml.


Open Allagi from a activity like so:

ArrayList<String> menuList = new ArrayList<>();     //menu titles
ArrayList<Integer> imagesList = new ArrayList<>();      //menu backgrounds
ArrayList<Fragment> fragmentsList = new ArrayList<>();      //fragments for each menu headers in second activity

menuList.add("UPCOMING");       //add titles
menuList.add("EVENTS");         //limit to 8 items for the animation to work

imagesList.add(R.drawable.upcoming);        //add background images

fragmentsList.add(UpcomingFragment.newInstance());      //add fragment instances

Allagi allagi = Allagi.initialize(MainActivity.this, menuList, imagesList, fragmentsList);
allagi.start();         //start the menu list activity

Change the duration of the animation:

allagi.setTransitionDuration(900);      //default value is 1000 milliseconds

Libraries used in the project


Inspired by and thanks to Aurélien Salomon's Google Newsstand Navigation Pattern


Copyright 2018 hariprasanths

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Support Me
About Me
Google+: Trinea trinea
GitHub: Trinea