Click here to Skip to main content
15,888,610 members
Articles / Mobile Apps / Android
Tip/Trick

Google NewsStand Animation Android

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
1 Jul 2020Apache 3.5K   27   1  
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


Written By
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --