65.9K
CodeProject is changing. Read more.
Home

Google NewsStand Animation Android

starIconstarIconstarIconstarIconstarIcon

5.00/5 (1 vote)

Jul 1, 2020

Apache
viewsIcon

3780

downloadIcon

27

Navigation pattern like in Google News Stand app with transitions

Using the Code

In Your build.gradle

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

Usage

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>
</style>

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>
</style>

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

<activity
    android:name="hari.allagi.MenuListActivity"
    android:theme="@style/AppTheme.MenuListActivity.NoActionBar" />
<activity
    android:name="hari.allagi.ScrollableMenuActivity"
    android:theme="@style/AppTheme.ScrollableMenuActivity.NoActionBar" />

Set largeHeap to true in AndroidManifest.xml.

<application
  ...
  android:largeHeap="true"/>

Open Allagi from an 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
imagesList.add(R.drawable.events);
...

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

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

Credits

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

History

  • 1st July, 2020: Initial version