First Time Android App

Question

I am trying to create a four-panel opening tutorial for my application, but since I am new to Android, I want to make sure that I consider all my options before marking this task as “finished”. I know three ways, I can only do this. There are no requirements for this tutorial, but some of the “desired features” would be a sliding action for each panel, it would be nice, and the image and the bottom (navigation circles) would not move, and the title on the top would not move.

One way

4 separate actions and 4 separate layouts

Elements with a red circle of textViews that center horizontally and are discarded from above.

Elements with a white circle imageViews that are located horizontally and vertically.

Purple, surrounded by a circle, imageViews that are horizontally centered and pushed down.

Second way

4 fragments per activity

The fragments were difficult to learn, but the more I read about them / looked at the textbooks on them, they apparently were really used only for tablets. Would this be the right way to do this?

Third way

ViewPager?

http://android-developers.blogspot.com/2011/08/horizontal-view-swiping-with-viewpager.html

I have never used this before, but I know this is an option.

Final question

How is it used more often / what is the right way to implement this? Is there a way to include only the middle part (image), but the title (top) and navigation images (bottom) just change after the image slides in?

Answer 1

Here is some code to do it in a ViewPager way (which is exactly what is being done)

 package com.test.viewpager; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; public class WalkthroughActivity extends Activity { private static final int MAX_VIEWS = 5; ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.walkthrough_activity); mViewPager = (ViewPager) findViewById(R.id.view_pager); mViewPager.setAdapter(new WalkthroughPagerAdapter()); mViewPager.setOnPageChangeListener(new WalkthroughPageChangeListener()); } class WalkthroughPagerAdapter extends PagerAdapter { @Override public int getCount() { return MAX_VIEWS; } @Override public boolean isViewFromObject(View view, Object object) { return view == (View) object; } @Override public Object instantiateItem(View container, int position) { Log.e("walkthrough", "instantiateItem(" + position + ");"); LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); View imageViewContainer = inflater.inflate(R.layout.walkthrough_single_view, null); ImageView imageView = (ImageView) imageViewContainer.findViewById(R.id.image_view); switch(position) { case 0: imageView.setImageResource(R.drawable.image1); break; case 1: imageView.setImageResource(R.drawable.image2); break; case 2: imageView.setImageResource(R.drawable.image3); break; case 3: imageView.setImageResource(R.drawable.image4); break; case 4: imageView.setImageResource(R.drawable.image5); break; } ((ViewPager) container).addView(imageViewContainer, 0); return imageViewContainer; } @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager)container).removeView((View)object); } } class WalkthroughPageChangeListener implements ViewPager.OnPageChangeListener { @Override public void onPageScrollStateChanged(int arg0) { } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageSelected(int position) { // Here is where you should show change the view of page indicator switch(position) { case MAX_VIEWS - 1: break; default: } } } } 

And here is my walkthrough_activity.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_above="@+id/screen_navigation_button" /> <!-- This TextView will not swipe when you swipe in the ViewPager --> <TextView android:id="@id/screen_navigation_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:gravity="center" android:padding="10dip" android:text="Hello, Walkthrough!" android:textSize="18sp" /> </RelativeLayout> 

And walkthrough_single_view.xml is as simple as this -

 <?xml version="1.0" encoding="utf-8"?> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/image_view" android:layout_width="fill_parent" android:layout_height="fill_parent" /> 

Hope this helps :)

Answer 2

ViewPagerIndicator

I recommend you use ViewPager, try the ViewPagerIndicator library, developed by Jake Wharton, because it also provides several different types of tabs that you can choose from, besides being very easy to style.

https://github.com/JakeWharton/Android-ViewPagerIndicator

Here is sample code for the ViewPagerIndicator application also in here

Paging indicator widgets that are compatible with the ViewPager from the Android Support Library to improve content detection.

Try the sample app on Google Play .