I am new to android and I need some basic explanation on how to create a tutorial with circle indicator as shown on image below
I have used ViewPager but it moves whole screen together with my image of the circles which does not look good. I was reading about JakeWhatron's viewPageIndicator but I after core solution for my problem.
This is how you can get circle indicator with text using Jake Whatron's library
add this to build.gradle file
compile 'com.viewpagerindicator:library:2.4.1@aar'
put your desired image as background of your main layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/hello_layour"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/login_background_image" // add your background image here
tools:context=".HelloActivity">
</RelativeLayout>
add this where you want the indicator and the text
<LinearLayout
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_centerHorizontal="true"
android:orientation="vertical">
<android.support.v4.view.ViewPager // the actual text you want will be shows here
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<com.viewpagerindicator.CirclePageIndicator // this is the circular indicator
android:id="@+id/indicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip" />
</LinearLayout>
Create a new class add the following data (this is the adapter for the viewpager):
package com.your.packagename;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class WelcomePagerAdapter extends PagerAdapter {
// Declare Variables
private Context context;
private String[] title;
private String[] description;
private LayoutInflater inflater;
public WelcomePagerAdapter(Context context, String[] title, String[] description) {
this.context = context;
this.title= title;
this.description= description;
}
@Override
public int getCount() {
return title.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == ((RelativeLayout) object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// Declare Variables
TextView titleView;
TextView descriptionView;
inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
// layout inflator
View itemView = inflater.inflate(R.layout.welcome_pager, container,
false);
// title text holder
titleView = (TextView) itemView.findViewById(R.id.welcome_title);
titleView.setText(title[position]);
// description text holder
descriptionView= (TextView) itemView.findViewById(R.id.welcome_description);
descriptionView.setText(description[position]);
// add viewpager_item.xml to ViewPager
((ViewPager) container).addView(itemView);
return itemView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// Remove viewpager_item.xml from ViewPager
((ViewPager) container).removeView((RelativeLayout) object);
}
}
create an xml file for the layout of the viewpager item..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/welcome_title"
android:paddingTop="15dp"
android:textSize="25sp"
android:textColor="#fff"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_below="@+id/welcome_title"
android:id="@+id/welcome_description"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:padding="15sp"
android:textColor="#fff" />
</RelativeLayout>
Now finally just add this to the onCreate() section of your tutorial activity:
// pager titles
String[] titles = new String[]{"Random Title One", "Random Title Two",
"Random Title Three", "Random Title Four"};
// pager descriptions
String[] descriptions= new String[]{"random small description example", "random small description example",
"random small description example", "random small description example"};
// Locate the ViewPager in viewpager_main.xml
ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
// Pass results to ViewPagerAdapter Class
PagerAdapter adapter = new WelcomePagerAdapter(this, titles, descriptions);
// Binds the Adapter to the ViewPager
viewPager.setAdapter(adapter);
// ViewPager Indicator
CirclePageIndicator mIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
mIndicator.setViewPager(viewPager);
Use ViewPager with CirclePageAdapter.
<com.movie.bms.utils.customcomponents.CustomViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"/>
<com.movie.bms.utils.customcomponents.CirclePageIndicator
android:id="@+id/circle_page_indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
/>
Then in your activity, attach it with your viewPager.
circlePageIndicator.setViewPager(viewPager);
Check this answer for better explanation.
