How to make walkthrough (introduction) screens of the app?

Question

I want to add introduction screens to my app. it should slide from one page to another. I want to add 3 screens. like the screen as follows:

There are 3 dots at the bottom. I want to implement those. Also as it slides to next page it's color changes as well as position changes to the middle dot.

I found one library which serves the default structure for this. In that they have given dots at the bottom of the screen and skip at left and done at right.

https://github.com/PaoloRotolo/AppIntro .

This is the library I looked for. Can I implement this as my need?

But I want the layout like the image I have shown here. How can I achieve this?

Now I have created the layout :

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    android:weightSum="1">

    <ImageView
        android:layout_width="180dp"
        android:layout_height="50dp"
        android:id="@+id/imageView9"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/logo_g"
        android:layout_marginTop="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="200dp"
        android:layout_height="160dp"
        android:id="@+id/imageView10"
        android:layout_gravity="center"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/imageView9"
        android:layout_marginTop="30dp" />

    <TextView
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="@string/walkthrough1"
        android:id="@+id/textView3"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:textAlignment="center"
        android:textStyle="bold"
        android:layout_below="@+id/imageView10"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/black" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_below="@+id/textView3"
        android:id="@+id/linearLayout8"
        android:layout_alignLeft="@+id/button2"
        android:layout_alignStart="@+id/button2"
        android:layout_alignRight="@+id/button2"
        android:layout_alignEnd="@+id/button2">

        <View
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/circle"></View>

    </LinearLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="SIGN UP"
        android:id="@+id/button2"
        android:background="#66BB6A"
        android:textColor="@android:color/white"
        android:layout_below="@+id/linearLayout8"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="SKIP"
        android:id="@+id/textView4"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:textColor="@android:color/black" />

</RelativeLayout>

I thought to add the 3 circle views at the position of dots and change its color as it slides to next pages. But I am not sure how can I get the dot view like this and how can I slide from page to page.

Can any one help with this please? Thank You..

Answer 1

try this code: actvity_startup.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/gallery_paging"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="#000000"
 android:orientation="vertical" >
 <include layout="@layout/toolbar" />
 <Gallery
    android:id="@+id/mygallery01"
    android:layout_width="fill_parent"
    android:layout_below="@+id/my_awesome_toolbar"
    android:layout_height="fill_parent"/>
   <LinearLayout
    android:id="@+id/image_count"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:gravity="center" >
    </LinearLayout>
    <Button
    android:id="@+id/done"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_above="@+id/image_count"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="18dp"
    android:background="#e74c3c"
    android:textColor="@color/white"
    android:textSize="25sp"
    android:textStyle="bold"
    android:text="Let's Start" />
</RelativeLayout>

StartUp.class:

package com.osomebuzz.meme_creator;

 import com.osomebuzz.meme_creator.adapter.IamgeAdapter;
 import android.content.Intent;
 import android.graphics.Typeface;
 import android.os.Bundle;
 import android.support.v7.app.AppCompatActivity;
  import android.support.v7.widget.Toolbar;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.widget.AdapterView;
 import android.widget.AdapterView.OnItemSelectedListener;
 import android.widget.Button;
 import android.widget.Gallery;
 import android.widget.LinearLayout;
 import android.widget.TextView;

 @SuppressWarnings("deprecation")
 public class StartUp extends AppCompatActivity {
 Gallery gallery;
    IamgeAdapter imageAdapter;
    LinearLayout count_layout;
    int count = 0;
    static TextView page_text[];
    TextView toolbartitle;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_startup);


    count_layout = (LinearLayout) findViewById(R.id.image_count);
    gallery = (Gallery) findViewById(R.id.mygallery01);
    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    toolbartitle = (TextView) findViewById(R.id.titletool);
    toolbartitle.setText("Make Funny Photos");
    //getSupportActionBar().setTitle("Make Funny Photos");
    setSupportActionBar(toolbar);
    final Button done = (Button) findViewById(R.id.done);

    done.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            Intent next = new Intent(getApplicationContext(),   

      MainActivity.class);
            startActivity(next);
            finish();
        }
    });
    imageAdapter = new IamgeAdapter(this);
    gallery.setAdapter(imageAdapter);
    count=gallery.getAdapter().getCount();
    page_text = new TextView[count];
    for (int i = 0; i < count; i++) {
        page_text[i] = new TextView(this);
        page_text[i].setText(".");
        page_text[i].setTextSize(45);
        page_text[i].setTypeface(null, Typeface.BOLD);
        page_text[i].setTextColor(android.graphics.Color.GRAY);
        count_layout.addView(page_text[i]);
    }
    gallery.setOnItemSelectedListener(new OnItemSelectedListener() {

        public void onItemSelected(AdapterView<?> arg0, View arg1,
                int position, long arg3) {
            // TODO Auto-generated method stub
            if(position == 0){
                done.setVisibility(View.INVISIBLE);

            }
            if(position == 1){
                done.setVisibility(View.INVISIBLE);

            }
            if(position == 2){
                done.setVisibility(View.INVISIBLE);

            }
            if(position == 3){
                done.setVisibility(View.INVISIBLE);

            }if(position == 4){
                done.setVisibility(View.VISIBLE);

            }
             for (int i = 0; i < count; i++) {


 StartUp.page_text[i].setTextColor(android.graphics.Color.GRAY);
                }


StartUp.page_text[position].setTextColor(android.graphics.Color.WHITE);

        }

        public void onNothingSelected(AdapterView<?> arg0) {
            // TODO Auto-generated method stub

        }
    });

     }

    }

ImageAdapter.class:

public class IamgeAdapter extends BaseAdapter {
private Context context;

public IamgeAdapter(Context c) {
// TODO Auto-generated constructor stub
this.context = c;
}
public int getCount() {
// TODO Auto-generated method stub
return flowers.length;
}
public Object getItem(int position) {
// TODO Auto-generated method stub
return position;
}
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
ImageView image = new ImageView(context);
image.setImageResource(flowers[position]);
image.setScaleType(ScaleType.FIT_XY);
// image.setLayoutParams(new Gallery.LayoutParams(400, 400));
return image;
}
int[] flowers = { R.drawable.start1, R.drawable.start2, 

R.drawable.start3,R.drawable.start4,R.drawable.start5};

}

Answer 2

You can try using the ViewPager component, that seems to fit your requirements

http://developer.android.com/training/animation/screen-slide.html

@Damini Mehra : the Gallery component is deprecated since API 16