Android ViewPager Cube Animation

After trying some libraries in order to make a cube animation for my viewPager, I realized that is pretty easy to do this. Android provides an interface called ViewPager.PageTransformer and you just have to implement its method transformPage().

Below is the code, step by step.

activity_main.xml

view_pager_item.xml

 

And now, the interesting part of the tutorial:

CubeTransformer.java class

Let’s explain a bit this code. As you can see, we created a new class CubeTransformer that implements the interface I mentioned at the beginning of the post, ViewPager.PageTransformer. The tranformPage() method that has to be overridden, is called for each visible page and for its adjacent pages (left and right) and requires a view and position.

  • view: represents either the current view that starts beeing swiped, either the next one
  • position: represents either the position of the current view, either of the next one
    • 0 – is for the current view/page when it fills the screen
    • 1 – is for next view/page that has just been drawn
    • when the user starts to swipe between pages, page one (current) will have positions with negative values, and the next page that has to come in place, will have positions with positive values.

Before going further, we have to mention that in Android the x,y coordinates start from the top left corner.

The animation is done with just 3 lines of code:

  • view.setPivotX(): This is like a pin on the x axis around which the view will be rotated and scaled.

In our code, when position <= 0 (current image) we will set the pivot on the rightmost point of the X axis (view.getWidth()) , and when position > 0, (next image) the pivot is set on the left (origin of the axis) on X axis. This way, the pages will look like the faces of a cube.

  • view.setPivotY(): This is like a pin on the Y axis, around which the view will be rotated and scaled.

In our code, we set this to be on the halfway on Y axis.

  • view.setRotationY(): The view will be rotated vertically around Y axis with 90 degrees on the left multiplied by position.

So, using these 3 lines of code, we can have a cube animation on our viewPager 🙂

Now, the final step of the tutorial, is about how to use the above class.

MainActivity.java

The only new thing in the above code, is this line:

The rest of the code is just the usual implementation of a ViewPager.

Android Lollipop Navigation Drawer Animation Support

In Android 5.0 (Lollipop) the Navigation Drawer has a very nice animation, the drawer icon changes into a back arrow when the slider is opened and changes back to default icon when the slider is closed. So far so good, if you develop an app for devices running only Android 5.0. But what if you want to use this nice animation in apps which run lower versions of Android? Well, you can relax because Android offers support for this in their com.android.support:appcompat.

In this tutorial I will show you how to use the library in order to add the Android L Navigation Drawer animation.

The basic idea is that you have to:

  • use a theme with NO ActionBar (if you already have a custom theme you will have to disable the action bar)

  • The ActionBar is replaced by Toolbar in Android L, so you will have to create a Toolbar and then set
  • And the Navigation Drawer will be created as usual just that you will have to pass the toolbar to its constructor.

Tools:

  • Android Studio 1.0
  • com.android.support:appcompat-v7:21.0.2
  • com.android.support:support-v4:21.0.2

In build.gradle (inside your app module) you should have something like this:

1. Create an empty project with a blank activity and name it MainActivity (it should extend ActionBarActivity)

2. Go to res – layout and add a new xml file called toolbar.xml.  It should look like this:

3. Now make sure you have an xml file named activity_main.xml (it should have been created together with the MainActivity). If you don’t have you can create one. It should contain the following code:

NOTE: In tools:context=”com.example.toolbar.MainActivity, com.example.toolbar is the name of my package. You should use yours. The same for android:name=”com.example.toolbar.NavigationDrawerFragment (NavigationDrawerFragment will be created in the following steps).

4. Now create a new xml for the Navigation Drawer which will contain the list of items and name it fragment_navigation_drawer.xml. You should add the following code to this file:

5. And now create the last xml file and name it item_drawer.xml. This will represent an item in the navigation drawer.

UPDATE*

U1.  Create an xml file for first fragment that will be displayed when the app starts or the first item from navigation drawer will be clicked. Name it “fragment1_layout.xml”

U2.  Now create another xml for the second fragment that will be displayed when the 2nd item from navigation drawer will be clicked. Name it “fragment2_layout.xml” 

6. Now go to res – values directory and make sure you have the following strings in strings.xml file:

7. Still in res – values, add a custom theme in styles.xml file.

NOTE: This step is necessary only if you want to use a custom theme and you need to disable the action bar from your theme. Otherwise you could simply set the Theme.AppCompat.NoActionBar theme directly in your AndroidManifest.xml.

8. Now go to your AndroidManifest.xml to set the custom theme. Below is the code:

9. Now, you should add the Java classes. You should have 3 classes:

  • DrawerAdapter (to set an adapter for the navigation drawer ListView)
  • NavigationDrawerFragment (fragment to handle the NavigationDrawer UI)
  • MainActivity (to create an instance of the NavigationDrawerFragment and display the Navigation Drawer)

9.1 Create DrawerAdapter java class and add the following code:

9.2 Create NavigationDrawerFragment java class and add the following code:

UPDATE*

U1. Create Fragment1 java class:

U2. Create Fragment2 java class:

9.3 UPDATED* Now go to your MainActivity and add the following code:

And that’s it.

Here is a gif animation for the Navigation Drawer.

navigation drawer animation