Improving App’s UX with Flip Animation

An app’s UI can lead it to be either the most-used app in the app store or to be the worst app ever developed. UI is a vital portion of app development. Flip animations can help in enhancing the app and move its UI from the boring page to a great visual experience. It can be used to build a more enhanced effect for an app by making it more playful, especially when displaying notifications. Flip animations, if used properly, can boost up an app’s UI. In this article, we will show, how to add flip animations to the app. All the coding will be done in Android Studio.

1. Creating the views

We need to create two layouts for each side of the card to create the flipping effect. For that, create 2 layouts, a back layout, and a front layout. The back view will contain a description, whereas the front view will contain an image. Add the following code to the back layout XML file, back.xml. In this layout, we’ll have the description of the front side image.

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#a6c"
    android:padding="16dp"
    android:gravity="bottom">
    <TextView android:id="@android:id/text1"
        style="?android:textAppearanceLarge"
        android:textStyle="bold"
        android:textColor="#fff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="YUMMY" />   
</LinearLayout>

Now, add the following code to the front layout XML file, front.xml. In this layout, we’ll display an image only.

<ImageView xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/dessert"
    android:scaleType="centerCrop"
    android:contentDescription="YUMMY" />

You May Also Like:

Top VR Gaming Apps for Android

2. Creating the Animators

In Android app development, animators are used for controlling the visual elements. Here, we’ll create four animators which are used when the card animates:
(a) Outwards to the left
(b) Outwards to the right
(c) Inwards to the right
(d) Inwards to the left.

Copy the following code in the XML for res/animator/left_in.xml:

<set xmlns:android="https://schemas.android.com/apk/res/android">
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="-180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="3000" />
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="1500"
        android:duration="1" />
</set>

Paste the code below to create the next animator. It’ll rotate the card’s front out of view. Put the following XML in animator/left_out.xml:

<set xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="3000" />
    <!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="1500"
        android:duration="1" />
</set>

The third animator rotates the front of the card into view. Copy the following code in animator/right_in.xml:

<set xmlns:android="https://schemas.android.com/apk/res/android">
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="3000" />
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="1500"
        android:duration="1" />
</set>

The last animator will be used to rotate the back of the card into the view. Copy the following code to the XML for animator/right_out.xml:

<set xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="-180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="3000" />
    <!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="1500"
        android:duration="1" />
</set>

3. Creating Fragments and animating the Flips

Now, we need to create the back and front fragment classes. A layout to display the fragments also needs to be coded. We also need to set the fragment that will be displayed by default when the activity launches. Following is the code for the layout of fragments to be displayed in the runtime. Copy the following code in layout/activity_flip.xml:

<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Below are the fragment classes for the back and front of the card:

public class FlipActivity extends Activity {
    ...
    public static class CardFrontFragment extends Fragment {
        public CardFrontFragment() {}
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_front, container, false);
        }
    }
    public static class CardBackFragment extends Fragment {
        public CardBackFragment() {}
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_back, container, false);
        }
    }
}

In the code of FlipActivity, set content view to be the FrameLayout we just created. Choose which card you want to display by default according to the scenario of your app. Here, we are going to display the front of the card.

public class FlipActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flip);
        if (savedInstanceState == null) {
            getFragmentManager()
                .beginTransaction()
                .add(R.id.container, new CardFrontFragment())
                .commit();
        }
        ...
    }

Front of the card containing the image will be displayed when the app is used for the first time. Let’s configure an action that shall display the back of the card. Copy the following code to display the other side of the card and incorporate the following actions:

a) Sets the created animations for the fragment transitions.
b) Replaces the currently displayed fragment with a new fragment and animates this event with the created animations.
c) Add previously displayed fragment to the fragment back pile consequently until the user presses the Back button.
private void flipCard() {
    if (mShowingBack) {
        getFragmentManager().popBackStack();
        return;
    }
    // Flip to the back.

    mShowingBack = true;
    getFragmentManager()
        .beginTransaction()
        .setCustomAnimations(
            R.animator.right_in, R.animator.right_out,
            R.animator.left_in, R.animator.left_out)
        .replace(R.id.container, new CardBackFragment())
        // Add this transaction to the back stack, allowing users to press Back
        // to get to the front of the card.
        .addToBackStack(null)
        // Commit the transaction.
        .commit();
}

In order to create menu items which will display flip animations when clicked. Copy the following code to the menu/main.xml:

<menu xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_add_item"
        android:title="@string/action_add_item"
        android:icon="@drawable/ic_action_new"
        android:showAsAction="ifRoom" />
</menu>

Define menu item Id’s for instantiating bar items is necessary. Create a values resource (values/action.xml) and copy the following XML code to it:

<resources>
    <item type="id" name="action_next" />
    <item type="id" name="action_flip" />
</resources>

For updating of Activity class with items we created, copy the following code:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    super.onCreateOptionsMenu(menu);
    MenuItem item = menu.add(Menu.NONE, R.id.action_flip, Menu.NONE,
        mShowingBack ? R.string.action_photo :
        R.string.action_info);
    item.setIcon(mShowingBack ?
        R.drawable.ic_action_photo :
        R.drawable.ic_action_info);
    item.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
    return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            NavUtils.navigateUpTo(this, new Intent(this, FlipActivity.class));
            return true;
        case R.id.action_flip:
            flipCard();
            return true;
    }
    return super.onOptionsItemSelected(item);
}

The final code for the activity (FlipActivity.java) will look like this:

package com.example.vaatiesther.flipactionanimation;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.NavUtils;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
public class FlipActivity extends Activity
implements FragmentManager.OnBackStackChangedListener {
    private boolean mShowingBack = false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flip);
        if (savedInstanceState == null) {
            getFragmentManager()
                .beginTransaction()
                .add(R.id.container, new CardFrontFragment())
                .commit();
        } else {
            mShowingBack = (getFragmentManager().getBackStackEntryCount() > 0);
        }
        getFragmentManager().addOnBackStackChangedListener(this);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        MenuItem item = menu.add(Menu.NONE, R.id.action_flip, Menu.NONE,
            mShowingBack ?
            R.string.action_photo :
            R.string.action_info);
        item.setIcon(mShowingBack ?
            R.drawable.ic_action_photo :
            R.drawable.ic_action_info);
        item.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                // Navigate "up" the demo structure to the launchpad activity.
                // See https://developer.android.com/design/patterns/navigation.html for more.
                NavUtils.navigateUpTo(this, new Intent(this, FlipActivity.class));
                return true;
            case R.id.action_flip:
                flipCard();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
    private void flipCard() {
        if (mShowingBack) {
            getFragmentManager().popBackStack();
            return;
        }
        // Flip to the back.
        mShowingBack = true;
        getFragmentManager()
            .beginTransaction()
            .setCustomAnimations(
                R.animator.right_in, R.animator.right_out,
                R.animator.left_in, R.animator.left_out)
            .replace(R.id.container, new CardBackFragment())
            // Add this transaction to the back stack, allowing users to press Back
            // to get to the front of the card.
            .addToBackStack(null)
            // Commit the transaction.
            .commit();
    }
    @Override
    public void onBackStackChanged() {
        mShowingBack = (getFragmentManager().getBackStackEntryCount() > 0);
        // When the back stack changes, invalidate the options menu (action bar).
        invalidateOptionsMenu();
    }
    public static class CardFrontFragment extends Fragment {
        public CardFrontFragment() {}
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_front, container, false);
        }
    }
    public static class CardBackFragment extends Fragment {
        public CardBackFragment() {}
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_back, container, false);
        }
    }
}

Using flip animation , u’ll be able to create UI like this:

Leave A Reply

Your email address will not be published.

android 1, android, android studio, android device manager, android pie, android games, android one, android emulator, android versions, android emulator for pc, android apps, android app development, android authority, android apk, android arsenal, android apps on pc, android auto, android activity lifecycle, android app download, android architecture, android codes, android color codes, android central, android cdc driver, android car stereo, android course, android camera, android omponents, android box, android beta, android best games, android beam, android backup, android backup to pc, android basics, android games, android games apk, android games free download, android go, android gamer, android games 2018, android games on pc, android glide, android game development, android emulator online, android emulator download, android emulator for mac, android emulator for windows 10, android file transfer, android file host, android framework, android flash tool, android firmware, android hacking tools, android hd wallpapers, android hard reset, android heavy games, android data recovery, android keyboard, android kitkat, android keyboard apk, android keylogger, android imei check, android multi tools, android manager, android material design, android mobile games, android modded games, android latest version, android lollipop, android nougat, android oreo, android pie, android play store, android pc suite, android pie update, android police, android programming, android questions, android ringtones, android root, android root apk, android root apps, android tv box, android themes, android tools, android wallpapers, android wallpapers hd, android usb driver, android ui design, android update 8.0, android update 9.0, android studio, android sdk manager, android secret codes, android vidmate, android youtube downloader, android youtube downloader apk, android youtube background play, android zapya