How to make an animated presentation activity in Android with ViewPager

- Andrés Cruz

En español
How to make an animated presentation activity in Android with ViewPager

Download

Presentation views are a fundamental element in any application today and especially in mobile applications on Android and it is a common feature that when installing the application there is a simple carousel with its characteristic bullet points in which its use, characteristics, etc. and in this entry we will explain how to create a presentation in Android with some animations using the ViewPager which is a fundamental component that we have already explained previously.

Layout: Defining the interface of our presentation view

The view includes a couple of images that we will show/hide by means of a simple animation and this will NOT be part of the ViewPager but it will be updated depending on the position in which our carousel is with the corresponding images:

<FrameLayout
    android:layout_gravity="top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="88dp">
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:id="@+id/icon_image1"
        android:src="@drawable/intro1"/>
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:id="@+id/icon_image2"/>
 
</FrameLayout>

We will define the ViewPager that allows us to create the typical carousel with the content (text in this experiment) that will be displayed according to the user's swipe:

<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/intro_view_pager"/>

Finally we will define the bullets that will be updated according to the position of the ViewPager:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_pages"
    android:orientation="horizontal"
    android:layout_gravity="bottom|center_horizontal"
    android:layout_marginBottom="26dp">
 
    <FrameLayout
        android:layout_width="5dp"
        android:layout_height="5dp"
        android:background="#bbbbbb"/>
 
    <FrameLayout
        android:layout_width="5dp"
        android:layout_height="5dp"
        android:background="#bbbbbb"
        android:layout_marginLeft="7dp"/>
 
    <FrameLayout
        android:layout_width="5dp"
        android:layout_height="5dp"
        android:background="#bbbbbb"
        android:layout_marginLeft="7dp"/>
 
    <FrameLayout
        android:layout_width="5dp"
        android:layout_height="5dp"
        android:background="#bbbbbb"
        android:layout_marginLeft="7dp"/>
 
    <FrameLayout
        android:layout_width="5dp"
        android:layout_height="5dp"
        android:background="#bbbbbb"
        android:layout_marginLeft="7dp"/>
 
    <FrameLayout
        android:layout_width="5dp"
        android:layout_height="5dp"
        android:background="#bbbbbb"
        android:layout_marginLeft="7dp"/>
 
    <FrameLayout
        android:layout_width="5dp"
        android:layout_height="5dp"
        android:background="#bbbbbb"
        android:layout_marginLeft="7dp"/>
 
</LinearLayout>

Java code: building our presentation view and animating it

Finally we come to the crucial part and it is how we use the previous view to make the animated presentation; first we will define the texts, images and titles of our presentation:

icons = new int[]{
       R.drawable.intro1,
       R.drawable.intro2,
       R.drawable.intro3,
       R.drawable.intro4,
       R.drawable.intro5,
       R.drawable.intro6,
       R.drawable.intro7
};
titles = new int[]{
       R.string.Page1Title,
       R.string.Page2Title,
       R.string.Page3Title,
       R.string.Page4Title,
       R.string.Page5Title,
       R.string.Page6Title,
       R.string.Page7Title
};
messages = new int[]{
       R.string.Page1Message,
       R.string.Page2Message,
       R.string.Page3Message,
       R.string.Page4Message,
       R.string.Page5Message,
       R.string.Page6Message,
       R.string.Page7Message
};

Pictures and other items:

topImage1 = (ImageView) findViewById(R.id.icon_image1);
topImage2 = (ImageView) findViewById(R.id.icon_image2);
bottomPages = (ViewGroup) findViewById(R.id.bottom_pages);

Now we set the ViewPager's listener event that will fire every time a swipe is made on the ViewPager and we validate that it is not being dragged and is in its final position:

@Override
public void onPageScrollStateChanged(int i) {
    // la vista no esta siendo arrastrada || La pagina esta en su posicion final
    if (i == ViewPager.SCROLL_STATE_IDLE || i == ViewPager.SCROLL_STATE_SETTLING) {
        if (lastPage != viewPager.getCurrentItem()) {
            lastPage = viewPager.getCurrentItem();
 
            // oculta/muestra una imagen
            final ImageView fadeoutImage;
            final ImageView fadeinImage;
            if (topImage1.getVisibility() == View.VISIBLE) {
                fadeoutImage = topImage1;
                fadeinImage = topImage2;
 
            } else {
                fadeoutImage = topImage2;
                fadeinImage = topImage1;
            }
 
            fadeinImage.bringToFront();
            fadeinImage.setImageResource(icons[lastPage]);
            fadeinImage.clearAnimation();
            fadeoutImage.clearAnimation();
 
            Animation outAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.icon_anim_fade_out);
            outAnimation.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                }
 
                @Override
                public void onAnimationEnd(Animation animation) {
                    fadeoutImage.setVisibility(View.GONE);
                }
 
                @Override
                public void onAnimationRepeat(Animation animation) {
 
                }
            });
 
            Animation inAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.icon_anim_fade_in);
            inAnimation.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                    fadeinImage.setVisibility(View.VISIBLE);
                }
 
                @Override
                public void onAnimationEnd(Animation animation) {
                }
 
                @Override
                public void onAnimationRepeat(Animation animation) {
 
                }
            });
 
 
            fadeoutImage.startAnimation(outAnimation);
            fadeinImage.startAnimation(inAnimation);
        }
    }
}
});
}

Other functionalities are also carried out here, such as hiding, displaying the image in the header, which, as we indicated at the beginning, are not part of the ViewPager but are updated as the user scrolls through the presentation ViewPager; the images are hiding/showing one at a time and this is due to show a simple animation when making the transition from one image to another; these animations are defined including their listener events and are called from the same ViewPager listener event.

ViewPager adapter to know the position of the ViewPager in the activity

Finally we define an Adapter for our ViewPager which will allow us to color the bullets according to the position in which we find ourselves and to embed (in Android the term is known as "inflate") the presentation view in our ViewPager:

private class IntroAdapter extends PagerAdapter {
    @Override
    public int getCount() {
        return 7;
    }
 
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = View.inflate(container.getContext(), R.layout.intro_view_layout, NULL);
        TextView headerTextView = (TextView) view.findViewById(R.id.header_text);
        TextView messageTextView = (TextView) view.findViewById(R.id.message_text);
        container.addView(view, 0);
 
        headerTextView.setText(getString(titles[position]));
        messageTextView.setText(getString(messages[position]));
 
        return view;
    }
 
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }
 
    @Override
    public void setPrimaryItem(ViewGroup container, int position, Object object) {
        super.setPrimaryItem(container, position, object);
        int count = bottomPages.getChildCount();
        for (int a = 0; a < count; a++) {
            View child = bottomPages.getChildAt(a);
            if (a == position) {
                child.setBackgroundColor(0xff2ca5e0);
            } else {
                child.setBackgroundColor(0xffbbbbbb);
            }
        }
    }
 
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view.equals(object);
    }
 
    @Override
    public void restoreState(Parcelable arg0, ClassLoader arg1) {
    }
 
    @Override
    public Parcelable saveState() {
        return NULL;
    }
 
    @Override
    public void unregisterDataSetObserver(DataSetObserver observer) {
        if (observer != NULL) {
            super.unregisterDataSetObserver(observer);
        }
    }
}

And this is all, with the previous code we can have a fantastic presentation view for our Android application, quite modular and customizable according to needs, which we can even convert into an image gallery, as we will see on another occasion; The previous code was obtained from the resource that corresponds to Telegram.

You can download the source of this experiment at the beginning and end of this post:

Download

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.