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:
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter