Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Mobile / Android

Google NewsStand Animation Android

5.00/5 (1 vote)
1 Jul 2020Apache 3.8K   27  
Navigation pattern like in Google News Stand app with transitions
This is a lightweight Android library to implement the Navigation pattern like in Google News Stand app with transitions.

Using the Code

In Your build.gradle

Java
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.

XML
<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.

XML
<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.

XML
<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.

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

Open Allagi from an activity like so:

Java
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:

Java
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

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0