title: How to make walkthrough (introduction) screens of the app?
body: <p>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:</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><a href="https://github.com/PaoloRotolo/AppIntro" rel="nofollow noreferrer">https://github.com/PaoloRotolo/AppIntro</a>  .</p>
  
  <p>This is the library I looked for. Can I implement this as my need? </p>
  
  <p>But I want the layout like the image I have shown here. How can I achieve this?</p>
  
  <p><a href="https://i.stack.imgur.com/bjeZp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bjeZp.jpg" alt="enter image description here"></a></p>
  
  <p>Now I have created the layout :</p>
  
  <pre><code>  &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"&gt;
  
      &lt;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" /&gt;
  
      &lt;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" /&gt;
  
      &lt;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" /&gt;
  
      &lt;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"&gt;
  
          &lt;View
              android:layout_width="20dp"
              android:layout_height="20dp"
              android:background="@drawable/circle"&gt;&lt;/View&gt;
  
      &lt;/LinearLayout&gt;
  
      &lt;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" /&gt;
  
      &lt;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" /&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Can any one help with this please? Thank You..</p>