diff --git a/apk/sample.apk b/apk/sample.apk
index 411bdca..63f7fd9 100644
Binary files a/apk/sample.apk and b/apk/sample.apk differ
diff --git a/app/build.gradle b/app/build.gradle
index 7f90353..ae15e75 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -7,8 +7,8 @@ android {
         applicationId "com.xw.samlpe.bubbleseekbar"
         minSdkVersion 14
         targetSdkVersion 25
-        versionCode 3
-        versionName "1.2"
+        versionCode 4
+        versionName "1.3"
         testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
     }
 
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 9681ff2..f5184e1 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -10,6 +10,7 @@
         android:theme="@style/AppTheme">
         <activity
             android:name=".MainActivity"
+            android:configChanges="orientation|screenSize"
             android:label="@string/app_name"
             android:theme="@style/AppTheme.NoActionBar">
             <intent-filter>
diff --git a/app/src/main/java/com/xw/samlpe/bubbleseekbar/DemoFragment1.java b/app/src/main/java/com/xw/samlpe/bubbleseekbar/DemoFragment1.java
new file mode 100644
index 0000000..b72b129
--- /dev/null
+++ b/app/src/main/java/com/xw/samlpe/bubbleseekbar/DemoFragment1.java
@@ -0,0 +1,57 @@
+package com.xw.samlpe.bubbleseekbar;
+
+import android.os.Bundle;
+import android.support.annotation.Nullable;
+import android.support.design.widget.Snackbar;
+import android.support.v4.app.Fragment;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.Button;
+import android.widget.Toast;
+
+import com.xw.repo.BubbleSeekBar;
+
+import java.util.Random;
+
+/**
+ * DemoFragment1
+ * <><p/>
+ * Created by woxingxiao on 2017-03-11.
+ */
+
+public class DemoFragment1 extends Fragment {
+
+    private BubbleSeekBar mBubbleSeekBar;
+
+    public static DemoFragment1 newInstance() {
+        return new DemoFragment1();
+    }
+
+    @Nullable
+    @Override
+    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
+
+        View view = inflater.inflate(R.layout.fragment_demo_1, container, false);
+
+        final BubbleSeekBar bubbleSeekBar = (BubbleSeekBar) view.findViewById(R.id.demo_1_seek_bar);
+        Button button = (Button) view.findViewById(R.id.demo_1_button);
+
+        bubbleSeekBar.setOnProgressChangedListener(new BubbleSeekBar.OnProgressChangedListenerAdapter() {
+            @Override
+            public void getProgressOnActionUp(int progress, float progressFloat) {
+                Toast.makeText(getContext(), "progressOnActionUp:" + progress, Toast.LENGTH_SHORT).show();
+            }
+        });
+        button.setOnClickListener(new View.OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                int progress = new Random().nextInt(bubbleSeekBar.getMax());
+                bubbleSeekBar.setProgress(progress);
+                Snackbar.make(v, "set random progress = " + progress, Snackbar.LENGTH_SHORT).show();
+            }
+        });
+
+        return view;
+    }
+}
diff --git a/app/src/main/java/com/xw/samlpe/bubbleseekbar/DemoFragment2.java b/app/src/main/java/com/xw/samlpe/bubbleseekbar/DemoFragment2.java
new file mode 100644
index 0000000..600c9cb
--- /dev/null
+++ b/app/src/main/java/com/xw/samlpe/bubbleseekbar/DemoFragment2.java
@@ -0,0 +1,60 @@
+package com.xw.samlpe.bubbleseekbar;
+
+import android.os.Bundle;
+import android.support.annotation.Nullable;
+import android.support.v4.app.Fragment;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.TextView;
+
+import com.xw.repo.BubbleSeekBar;
+
+import java.util.Locale;
+
+/**
+ * DemoFragment1
+ * <><p/>
+ * Created by woxingxiao on 2017-03-11.
+ */
+
+public class DemoFragment2 extends Fragment {
+
+    public static DemoFragment2 newInstance() {
+        return new DemoFragment2();
+    }
+
+    @Nullable
+    @Override
+    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
+
+        View view = inflater.inflate(R.layout.fragment_demo_2, container, false);
+
+        final BubbleSeekBar bubbleSeekBar = (BubbleSeekBar) view.findViewById(R.id.demo_2_seek_bar);
+        final TextView progressText1 = (TextView) view.findViewById(R.id.demo_2_progress_text_1);
+        final TextView progressText2 = (TextView) view.findViewById(R.id.demo_2_progress_text_2);
+        final TextView progressText3 = (TextView) view.findViewById(R.id.demo_2_progress_text_3);
+
+        bubbleSeekBar.setOnProgressChangedListener(new BubbleSeekBar.OnProgressChangedListenerAdapter() {
+            @Override
+            public void onProgressChanged(int progress, float progressFloat) {
+                String s = String.format(Locale.CHINA, "onChanged int:%d, float:%.1f", progress, progressFloat);
+                progressText1.setText(s);
+            }
+
+            @Override
+            public void getProgressOnActionUp(int progress, float progressFloat) {
+                String s = String.format(Locale.CHINA, "onActionUp int:%d, float:%.1f", progress, progressFloat);
+                progressText2.setText(s);
+            }
+
+            @Override
+            public void getProgressOnFinally(int progress, float progressFloat) {
+                String s = String.format(Locale.CHINA, "onFinally int:%d, float:%.1f", progress, progressFloat);
+                progressText3.setText(s);
+            }
+        });
+
+        return view;
+    }
+}
diff --git a/app/src/main/java/com/xw/samlpe/bubbleseekbar/DemoFragment3.java b/app/src/main/java/com/xw/samlpe/bubbleseekbar/DemoFragment3.java
new file mode 100644
index 0000000..8fa5176
--- /dev/null
+++ b/app/src/main/java/com/xw/samlpe/bubbleseekbar/DemoFragment3.java
@@ -0,0 +1,44 @@
+package com.xw.samlpe.bubbleseekbar;
+
+import android.os.Bundle;
+import android.support.annotation.Nullable;
+import android.support.v4.app.Fragment;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+
+import com.xw.repo.BubbleSeekBar;
+
+/**
+ * DemoFragment1
+ * <><p/>
+ * Created by woxingxiao on 2017-03-11.
+ */
+
+public class DemoFragment3 extends Fragment {
+
+    private BubbleSeekBar mBubbleSeekBar;
+
+    public static DemoFragment3 newInstance() {
+        return new DemoFragment3();
+    }
+
+    @Nullable
+    @Override
+    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
+
+        View view = inflater.inflate(R.layout.fragment_demo_3, container, false);
+        ObservableScrollView mObsScrollView = (ObservableScrollView) view.findViewById(R.id.demo_3_obs_scroll_view);
+        mBubbleSeekBar = (BubbleSeekBar) view.findViewById(R.id.demo_3_seek_bar);
+
+        mObsScrollView.setOnScrollChangedListener(new ObservableScrollView.OnScrollChangedListener() {
+            @Override
+            public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
+                mBubbleSeekBar.correctOffsetWhenContainerOnScrolling();
+            }
+        });
+
+        return view;
+    }
+
+}
diff --git a/app/src/main/java/com/xw/samlpe/bubbleseekbar/MainActivity.java b/app/src/main/java/com/xw/samlpe/bubbleseekbar/MainActivity.java
index fa3d3cb..7838ffb 100644
--- a/app/src/main/java/com/xw/samlpe/bubbleseekbar/MainActivity.java
+++ b/app/src/main/java/com/xw/samlpe/bubbleseekbar/MainActivity.java
@@ -1,35 +1,18 @@
 package com.xw.samlpe.bubbleseekbar;
 
 import android.os.Bundle;
-import android.support.design.widget.FloatingActionButton;
-import android.support.design.widget.Snackbar;
+import android.support.v4.app.Fragment;
+import android.support.v4.app.FragmentManager;
+import android.support.v4.app.FragmentTransaction;
 import android.support.v7.app.AppCompatActivity;
 import android.support.v7.widget.Toolbar;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.view.View;
-import android.widget.TextView;
-import android.widget.Toast;
 
-import com.xw.repo.BubbleSeekBar;
+public class MainActivity extends AppCompatActivity implements View.OnClickListener {
 
-import java.util.Random;
-
-public class MainActivity extends AppCompatActivity {
-
-    BubbleSeekBar mBubbleSeekBar0;
-    BubbleSeekBar mBubbleSeekBar1;
-    BubbleSeekBar mBubbleSeekBar2;
-    BubbleSeekBar mBubbleSeekBar3;
-    BubbleSeekBar mBubbleSeekBar4;
-    BubbleSeekBar mBubbleSeekBar5;
-    BubbleSeekBar mBubbleSeekBar6;
-    BubbleSeekBar mBubbleSeekBar8;
-    BubbleSeekBar mBubbleSeekBar9;
-    TextView mProgressText;
-    ObservableScrollView mObsScrollView;
-
-    StringBuilder mStringBuilder = new StringBuilder();
+    private String mTag;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
@@ -37,79 +20,61 @@ protected void onCreate(Bundle savedInstanceState) {
         setContentView(R.layout.activity_main);
 
         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
-        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
-        mBubbleSeekBar0 = (BubbleSeekBar) findViewById(R.id.bubble_seek_bar_0);
-        mBubbleSeekBar1 = (BubbleSeekBar) findViewById(R.id.bubble_seek_bar_1);
-        mBubbleSeekBar2 = (BubbleSeekBar) findViewById(R.id.bubble_seek_bar_2);
-        mBubbleSeekBar3 = (BubbleSeekBar) findViewById(R.id.bubble_seek_bar_3);
-        mBubbleSeekBar4 = (BubbleSeekBar) findViewById(R.id.bubble_seek_bar_4);
-        mBubbleSeekBar5 = (BubbleSeekBar) findViewById(R.id.bubble_seek_bar_5);
-        mBubbleSeekBar6 = (BubbleSeekBar) findViewById(R.id.bubble_seek_bar_6);
-        mBubbleSeekBar8 = (BubbleSeekBar) findViewById(R.id.bubble_seek_bar_8);
-        mBubbleSeekBar9 = (BubbleSeekBar) findViewById(R.id.bubble_seek_bar_9);
-        mProgressText = (TextView) findViewById(R.id.progress_text);
-        mObsScrollView = (ObservableScrollView) findViewById(R.id.content_main);
-
         setSupportActionBar(toolbar);
 
-        assert fab != null;
-        fab.setOnClickListener(new View.OnClickListener() {
-            @Override
-            public void onClick(View view) {
-                mObsScrollView.smoothScrollTo(0, 0);
-
-                int progress = new Random().nextInt(100);
-                mBubbleSeekBar0.setProgress(progress);
-                Snackbar.make(view, "set random progress = " + progress, Snackbar.LENGTH_SHORT).show();
-            }
-        });
-
-        mBubbleSeekBar0.setOnProgressChangedListener(new BubbleSeekBar.OnProgressChangedListenerAdapter() {
-            @Override
-            public void getProgressOnActionUp(int progress) {
-                Toast.makeText(MainActivity.this, "progressOnActionUp:" + progress, Toast.LENGTH_SHORT).show();
-            }
-        });
-
-        mBubbleSeekBar5.setOnProgressChangedListener(new BubbleSeekBar.OnProgressChangedListenerAdapter() {
-            @Override
-            public void onProgressChanged(int progress) {
-                mStringBuilder.delete(0, mStringBuilder.length());
-
-                mStringBuilder.append("(listener) int:").append(progress);
-            }
+        findViewById(R.id.main_tab_btn_1).setOnClickListener(this);
+        findViewById(R.id.main_tab_btn_2).setOnClickListener(this);
+        findViewById(R.id.main_tab_btn_3).setOnClickListener(this);
 
-            @Override
-            public void onProgressChanged(float progress) {
-                mStringBuilder.append(", float:").append(progress);
+        if (savedInstanceState == null) {
+            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
+            ft.add(R.id.container, DemoFragment1.newInstance(), "demo1");
+            ft.commit();
+            mTag = "demo1";
+        }
+    }
 
-                mProgressText.setText(mStringBuilder.toString());
-            }
-        });
-
-        mObsScrollView.setOnScrollChangedListener(new ObservableScrollView.OnScrollChangedListener() {
-            @Override
-            public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
-                // 调用修正偏移方法
-                mBubbleSeekBar0.correctOffsetWhenContainerOnScrolling();
-                mBubbleSeekBar1.correctOffsetWhenContainerOnScrolling();
-                mBubbleSeekBar2.correctOffsetWhenContainerOnScrolling();
-                mBubbleSeekBar3.correctOffsetWhenContainerOnScrolling();
-                mBubbleSeekBar4.correctOffsetWhenContainerOnScrolling();
-                mBubbleSeekBar5.correctOffsetWhenContainerOnScrolling();
-                mBubbleSeekBar6.correctOffsetWhenContainerOnScrolling();
-                mBubbleSeekBar8.correctOffsetWhenContainerOnScrolling();
-                mBubbleSeekBar9.correctOffsetWhenContainerOnScrolling();
-            }
-        });
+    @Override
+    public void onClick(View v) {
+        switch (v.getId()) {
+            case R.id.main_tab_btn_1:
+                switchContent("demo1");
+                break;
+            case R.id.main_tab_btn_2:
+                switchContent("demo2");
+                break;
+            case R.id.main_tab_btn_3:
+                switchContent("demo3");
+                break;
+        }
+    }
 
-        mBubbleSeekBar6.setOnProgressChangedListener(new BubbleSeekBar.OnProgressChangedListenerAdapter() {
-            @Override
-            public void getProgressOnFinally(int progress) {
-                Toast.makeText(MainActivity.this, "progressOnFinally(int):" + progress, Toast.LENGTH_SHORT).show();
+    public void switchContent(String toTag) {
+        if (mTag.equals(toTag))
+            return;
+
+        FragmentManager fm = getSupportFragmentManager();
+        Fragment from = fm.findFragmentByTag(mTag);
+        Fragment to = fm.findFragmentByTag(toTag);
+
+        FragmentTransaction ft = fm.beginTransaction();
+        if (to == null) {
+            if ("demo1".equals(toTag)) {
+                to = DemoFragment1.newInstance();
+            } else if ("demo2".equals(toTag)) {
+                to = DemoFragment2.newInstance();
+            } else {
+                to = DemoFragment3.newInstance();
             }
-        });
+        }
+        if (!to.isAdded()) {
+            ft.hide(from).add(R.id.container, to, toTag);
+        } else {
+            ft.hide(from).show(to);
+        }
+        ft.commit();
 
+        mTag = toTag;
     }
 
     @Override
diff --git a/app/src/main/res/drawable/selector_radio_text_color.xml b/app/src/main/res/drawable/selector_radio_text_color.xml
new file mode 100644
index 0000000..cd177e0
--- /dev/null
+++ b/app/src/main/res/drawable/selector_radio_text_color.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item android:color="@color/colorPrimary" android:state_checked="false"/>
+    <item android:color="@color/colorAccent" android:state_checked="true"/>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/shape_divider_shadow.xml b/app/src/main/res/drawable/shape_divider_shadow.xml
new file mode 100644
index 0000000..c731b82
--- /dev/null
+++ b/app/src/main/res/drawable/shape_divider_shadow.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:angle="90"
+
+        android:endColor="#ffffff"
+        android:startColor="#4F000000"/>
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/shape_divider_vertical.xml b/app/src/main/res/drawable/shape_divider_vertical.xml
new file mode 100644
index 0000000..896e976
--- /dev/null
+++ b/app/src/main/res/drawable/shape_divider_vertical.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <size
+        android:width="1px"
+        android:height="16dp"/>
+
+    <solid android:color="@android:color/darker_gray"/>
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index 6f6d9c8..4bdf85c 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -1,35 +1,69 @@
 <?xml version="1.0" encoding="utf-8"?>
-<android.support.design.widget.CoordinatorLayout
+<LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:fitsSystemWindows="true"
+    android:orientation="vertical"
     tools:context="com.xw.samlpe.bubbleseekbar.MainActivity">
 
-    <android.support.design.widget.AppBarLayout
+    <android.support.v7.widget.Toolbar
+        android:id="@+id/toolbar"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:theme="@style/AppTheme.AppBarOverlay">
+        android:layout_height="?attr/actionBarSize"
+        android:background="?attr/colorPrimary"
+        android:theme="@style/AppTheme.AppBarOverlay"/>
 
-        <android.support.v7.widget.Toolbar
-            android:id="@+id/toolbar"
-            android:layout_width="match_parent"
-            android:layout_height="?attr/actionBarSize"
-            android:background="?attr/colorPrimary"
-            app:popupTheme="@style/AppTheme.PopupOverlay"/>
+    <FrameLayout
+        android:id="@+id/container"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="1"/>
+
+    <View
+        android:layout_width="match_parent"
+        android:layout_height="2dp"
+        android:background="@drawable/shape_divider_shadow"/>
 
-    </android.support.design.widget.AppBarLayout>
+    <RadioGroup
+        android:layout_width="match_parent"
+        android:layout_height="48dp"
+        android:background="@color/color_gray_light"
+        android:divider="@drawable/shape_divider_vertical"
+        android:orientation="horizontal"
+        android:paddingBottom="8dp"
+        android:paddingTop="8dp"
+        android:showDividers="middle">
 
-    <include layout="@layout/content_main"/>
+        <RadioButton
+            android:id="@+id/main_tab_btn_1"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_weight="1"
+            android:button="@null"
+            android:checked="true"
+            android:gravity="center"
+            android:text="demo1"
+            android:textColor="@drawable/selector_radio_text_color"/>
 
-    <android.support.design.widget.FloatingActionButton
-        android:id="@+id/fab"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom|end"
-        android:layout_margin="@dimen/fab_margin"
-        app:srcCompat="@android:drawable/ic_menu_send"/>
+        <RadioButton
+            android:id="@+id/main_tab_btn_2"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_weight="1"
+            android:button="@null"
+            android:gravity="center"
+            android:text="demo2"
+            android:textColor="@drawable/selector_radio_text_color"/>
 
-</android.support.design.widget.CoordinatorLayout>
+        <RadioButton
+            android:id="@+id/main_tab_btn_3"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_weight="1"
+            android:button="@null"
+            android:gravity="center"
+            android:text="demo3"
+            android:textColor="@drawable/selector_radio_text_color"/>
+    </RadioGroup>
+</LinearLayout>
diff --git a/app/src/main/res/layout/content_main.xml b/app/src/main/res/layout/content_main.xml
deleted file mode 100644
index 35c2cca..0000000
--- a/app/src/main/res/layout/content_main.xml
+++ /dev/null
@@ -1,197 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<com.xw.samlpe.bubbleseekbar.ObservableScrollView
-    android:id="@+id/content_main"
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:paddingBottom="@dimen/activity_vertical_margin"
-    android:paddingLeft="@dimen/activity_horizontal_margin"
-    android:paddingRight="@dimen/activity_horizontal_margin"
-    android:paddingTop="@dimen/activity_vertical_margin"
-    app:layout_behavior="@string/appbar_scrolling_view_behavior"
-    tools:context="com.xw.samlpe.bubbleseekbar.MainActivity"
-    tools:showIn="@layout/activity_main">
-
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="vertical">
-
-        <com.xw.repo.BubbleSeekBar
-            android:id="@+id/bubble_seek_bar_0"
-            android:layout_width="match_parent"
-            android:layout_height="16dp"
-            android:layout_marginTop="32dp"/>
-
-        <com.xw.repo.BubbleSeekBar
-            android:id="@+id/bubble_seek_bar_1"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="32dp"
-            app:bsb_progress="50"
-            app:bsb_second_track_color="@color/color_green"
-            app:bsb_show_section_mark="true"
-            app:bsb_track_color="@color/color_gray"/>
-
-        <com.xw.repo.BubbleSeekBar
-            android:id="@+id/bubble_seek_bar_2"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="32dp"
-            app:bsb_max="500"
-            app:bsb_min="100"
-            app:bsb_progress="200"
-            app:bsb_second_track_color="@color/color_green"
-            app:bsb_track_color="@color/color_gray"
-            app:bsb_track_size="4dp"/>
-
-        <com.xw.repo.BubbleSeekBar
-            android:id="@+id/bubble_seek_bar_3"
-            android:layout_width="match_parent"
-            android:layout_height="16dp"
-            android:layout_marginTop="32dp"
-            app:bsb_show_progress_in_float="true"
-            app:bsb_show_section_mark="true"
-            app:bsb_show_text="true"
-            app:bsb_show_thumb_text="true"/>
-
-        <com.xw.repo.BubbleSeekBar
-            android:id="@+id/bubble_seek_bar_4"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="32dp"
-            app:bsb_auto_adjust_section_mark="true"
-            app:bsb_bubble_color="@color/color_red_light"
-            app:bsb_bubble_text_color="@color/colorPrimaryDark"
-            app:bsb_bubble_text_size="10sp"
-            app:bsb_max="50"
-            app:bsb_min="-50"
-            app:bsb_second_track_color="@color/color_red"
-            app:bsb_show_section_mark="true"
-            app:bsb_show_text="true"
-            app:bsb_show_thumb_text="true"
-            app:bsb_text_position="bottom"
-            app:bsb_track_color="@color/color_red_light"/>
-
-        <com.xw.repo.BubbleSeekBar
-            android:id="@+id/bubble_seek_bar_5"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="32dp"
-            app:bsb_auto_adjust_section_mark="true"
-            app:bsb_second_track_color="@color/color_blue"
-            app:bsb_section_count="5"
-            app:bsb_show_progress_in_float="true"
-            app:bsb_show_section_mark="true"
-            app:bsb_show_text="true"
-            app:bsb_show_thumb_text="true"
-            app:bsb_text_position="bottom"
-            app:bsb_thumb_text_color="@color/colorPrimary"
-            app:bsb_thumb_text_size="18sp"/>
-
-        <TextView
-            android:id="@+id/progress_text"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:textSize="12sp"/>
-
-        <TextView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/activity_vertical_margin"
-            android:text="@string/tips"
-            android:textSize="12sp"/>
-
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:background="@color/color_red_light"
-            android:orientation="vertical"
-            android:paddingBottom="8dp">
-
-            <TextView
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginBottom="8dp"
-                android:layout_marginLeft="8dp"
-                android:layout_marginTop="8dp"
-                android:text="@string/fixed"
-                android:textSize="12sp"/>
-
-            <com.xw.repo.BubbleSeekBar
-                android:id="@+id/bubble_seek_bar_6"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                app:bsb_max="10"
-                app:bsb_min="0"
-                app:bsb_progress="5"
-                app:bsb_second_track_color="@color/color_blue"
-                app:bsb_track_color="@color/colorPrimary"
-                app:bsb_track_size="4dp"/>
-
-            <TextView
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginBottom="8dp"
-                android:layout_marginLeft="8dp"
-                android:layout_marginTop="8dp"
-                android:text="@string/not_fix"
-                android:textSize="12sp"/>
-
-            <com.xw.repo.BubbleSeekBar
-                android:id="@+id/bubble_seek_bar_7"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                app:bsb_max="10"
-                app:bsb_min="0"
-                app:bsb_progress="5"
-                app:bsb_second_track_color="@color/color_blue"
-                app:bsb_track_color="@color/colorPrimary"
-                app:bsb_track_size="4dp"/>
-        </LinearLayout>
-
-        <TextView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="32dp"
-            android:text="@string/touch_to_seek"
-            android:textSize="12sp"/>
-
-        <com.xw.repo.BubbleSeekBar
-            android:id="@+id/bubble_seek_bar_8"
-            android:layout_width="match_parent"
-            android:layout_height="16dp"
-            android:layout_marginTop="8dp"
-            app:bsb_touch_to_seek="true"/>
-
-        <TextView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="32dp"
-            android:text="@string/touch_to_seek_auto_adjust"
-            android:textSize="12sp"/>
-
-        <com.xw.repo.BubbleSeekBar
-            android:id="@+id/bubble_seek_bar_9"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="8dp"
-            app:bsb_auto_adjust_section_mark="true"
-            app:bsb_second_track_color="@color/color_blue"
-            app:bsb_section_count="5"
-            app:bsb_show_progress_in_float="true"
-            app:bsb_show_section_mark="true"
-            app:bsb_show_text="true"
-            app:bsb_show_thumb_text="true"
-            app:bsb_text_position="bottom"
-            app:bsb_thumb_text_color="@color/colorPrimary"
-            app:bsb_thumb_text_size="18sp"
-            app:bsb_touch_to_seek="true"/>
-
-        <Space
-            android:layout_width="match_parent"
-            android:layout_height="60dp"/>
-    </LinearLayout>
-</com.xw.samlpe.bubbleseekbar.ObservableScrollView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_demo_1.xml b/app/src/main/res/layout/fragment_demo_1.xml
new file mode 100644
index 0000000..94bec15
--- /dev/null
+++ b/app/src/main/res/layout/fragment_demo_1.xml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    android:padding="@dimen/activity_horizontal_margin">
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="default"
+        android:textSize="12sp"/>
+
+    <com.xw.repo.BubbleSeekBar
+        android:id="@+id/demo_1_seek_bar"
+        android:layout_width="match_parent"
+        android:layout_height="16dp"
+        android:layout_marginTop="8dp"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="custom colors, show section mark"
+        android:textSize="12sp"/>
+
+    <com.xw.repo.BubbleSeekBar
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        app:bsb_progress="50"
+        app:bsb_second_track_color="@color/color_green"
+        app:bsb_show_section_mark="true"
+        app:bsb_track_color="@color/color_gray"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="custom track size, min : 100, max : 500"
+        android:textSize="12sp"/>
+
+    <com.xw.repo.BubbleSeekBar
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        app:bsb_max="500"
+        app:bsb_min="100"
+        app:bsb_progress="200"
+        app:bsb_second_track_color="@color/color_green"
+        app:bsb_track_color="@color/color_gray"
+        app:bsb_track_size="4dp"/>
+
+    <Button
+        android:id="@+id/demo_1_button"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="32dp"
+        android:text="@string/set_random_progress"/>
+</LinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_demo_2.xml b/app/src/main/res/layout/fragment_demo_2.xml
new file mode 100644
index 0000000..ff0e8a7
--- /dev/null
+++ b/app/src/main/res/layout/fragment_demo_2.xml
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    android:padding="@dimen/activity_horizontal_margin">
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="show section text, show thumb text, show progress in float"
+        android:textSize="12sp"/>
+
+    <com.xw.repo.BubbleSeekBar
+        android:layout_width="match_parent"
+        android:layout_height="16dp"
+        android:layout_marginTop="8dp"
+        app:bsb_show_progress_in_float="true"
+        app:bsb_show_section_mark="true"
+        app:bsb_show_section_text="true"
+        app:bsb_show_thumb_text="true"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="section count : 5, section text position : bottom_sides"/>
+
+    <com.xw.repo.BubbleSeekBar
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        app:bsb_bubble_color="@color/color_red_light"
+        app:bsb_bubble_text_color="@color/colorPrimaryDark"
+        app:bsb_bubble_text_size="10sp"
+        app:bsb_max="50"
+        app:bsb_min="-50"
+        app:bsb_second_track_color="@color/color_red"
+        app:bsb_section_count="5"
+        app:bsb_section_text_position="bottom_sides"
+        app:bsb_show_section_mark="true"
+        app:bsb_show_section_text="true"
+        app:bsb_show_thumb_text="true"
+        app:bsb_track_color="@color/color_red_light"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="section text position: below_section_mark, auto adjust section mark"
+        android:textSize="12sp"/>
+
+    <com.xw.repo.BubbleSeekBar
+        android:layout_width="match_parent"
+        android:layout_height="16dp"
+        android:layout_marginTop="8dp"
+        app:bsb_auto_adjust_section_mark="true"
+        app:bsb_second_track_color="@color/color_red"
+        app:bsb_section_count="5"
+        app:bsb_section_text_position="below_section_mark"
+        app:bsb_show_section_mark="true"
+        app:bsb_show_section_text="true"
+        app:bsb_show_thumb_text="true"
+        app:bsb_track_color="@color/color_red_light"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="listeners"
+        android:textSize="12sp"/>
+
+    <com.xw.repo.BubbleSeekBar
+        android:id="@+id/demo_2_seek_bar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        app:bsb_auto_adjust_section_mark="true"
+        app:bsb_second_track_color="@color/color_blue"
+        app:bsb_section_count="5"
+        app:bsb_section_text_position="bottom_sides"
+        app:bsb_show_progress_in_float="true"
+        app:bsb_show_section_mark="true"
+        app:bsb_show_section_text="true"
+        app:bsb_show_thumb_text="true"
+        app:bsb_thumb_text_color="@color/colorPrimary"
+        app:bsb_thumb_text_size="18sp"/>
+
+    <TextView
+        android:id="@+id/demo_2_progress_text_1"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:textSize="12sp"/>
+
+    <TextView
+        android:id="@+id/demo_2_progress_text_2"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:textSize="12sp"/>
+
+    <TextView
+        android:id="@+id/demo_2_progress_text_3"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:textSize="12sp"/>
+</LinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_demo_3.xml b/app/src/main/res/layout/fragment_demo_3.xml
new file mode 100644
index 0000000..42d22ab
--- /dev/null
+++ b/app/src/main/res/layout/fragment_demo_3.xml
@@ -0,0 +1,149 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    android:padding="@dimen/activity_horizontal_margin">
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="correct offset when container on scrolling"
+        android:textSize="12sp"/>
+
+    <com.xw.samlpe.bubbleseekbar.ObservableScrollView
+        android:id="@+id/demo_3_obs_scroll_view"
+        android:layout_width="match_parent"
+        android:layout_height="120dp">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@color/color_red_light"
+            android:orientation="vertical"
+            android:paddingBottom="24dp"
+            android:paddingTop="24dp">
+
+            <TextView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="8dp"
+                android:layout_marginLeft="8dp"
+                android:text="corrected"
+                android:textSize="12sp"/>
+
+            <com.xw.repo.BubbleSeekBar
+                android:id="@+id/demo_3_seek_bar"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                app:bsb_max="10"
+                app:bsb_min="0"
+                app:bsb_progress="5"
+                app:bsb_second_track_color="@color/color_blue"
+                app:bsb_track_color="@color/colorPrimary"
+                app:bsb_track_size="4dp"/>
+
+            <TextView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="8dp"
+                android:layout_marginLeft="8dp"
+                android:layout_marginTop="16dp"
+                android:text="not correct"
+                android:textSize="12sp"/>
+
+            <com.xw.repo.BubbleSeekBar
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                app:bsb_max="10"
+                app:bsb_min="0"
+                app:bsb_progress="5"
+                app:bsb_second_track_color="@color/color_blue"
+                app:bsb_track_color="@color/colorPrimary"
+                app:bsb_track_size="4dp"/>
+
+        </LinearLayout>
+    </com.xw.samlpe.bubbleseekbar.ObservableScrollView>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="touch to seek"
+        android:textSize="12sp"/>
+
+    <com.xw.repo.BubbleSeekBar
+        android:layout_width="match_parent"
+        android:layout_height="16dp"
+        android:layout_marginTop="8dp"
+        app:bsb_touch_to_seek="true"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="touch to seek, auto adjust"
+        android:textSize="12sp"/>
+
+    <com.xw.repo.BubbleSeekBar
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        app:bsb_auto_adjust_section_mark="true"
+        app:bsb_second_track_color="@color/color_blue"
+        app:bsb_section_count="5"
+        app:bsb_section_text_position="below_section_mark"
+        app:bsb_show_section_mark="true"
+        app:bsb_show_section_text="true"
+        app:bsb_show_thumb_text="true"
+        app:bsb_thumb_text_size="18sp"
+        app:bsb_touch_to_seek="true"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="seek by section"
+        android:textSize="12sp"/>
+
+    <com.xw.repo.BubbleSeekBar
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        app:bsb_auto_adjust_section_mark="true"
+        app:bsb_second_track_color="@color/color_blue"
+        app:bsb_section_count="5"
+        app:bsb_section_text_position="below_section_mark"
+        app:bsb_seek_by_section="true"
+        app:bsb_show_section_mark="true"
+        app:bsb_show_section_text="true"
+        app:bsb_show_thumb_text="true"
+        app:bsb_thumb_text_size="18sp"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="section text interval : 2"
+        android:textSize="12sp"/>
+
+    <com.xw.repo.BubbleSeekBar
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        app:bsb_auto_adjust_section_mark="true"
+        app:bsb_max="5"
+        app:bsb_min="-5"
+        app:bsb_second_track_color="@color/color_blue"
+        app:bsb_section_count="10"
+        app:bsb_section_text_interval="2"
+        app:bsb_section_text_position="below_section_mark"
+        app:bsb_seek_by_section="true"
+        app:bsb_show_section_mark="true"
+        app:bsb_show_section_text="true"
+        app:bsb_show_thumb_text="true"
+        app:bsb_thumb_text_size="18sp"/>
+
+</LinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values-v21/styles.xml b/app/src/main/res/values-v21/styles.xml
index dbbdd40..d23b9fa 100644
--- a/app/src/main/res/values-v21/styles.xml
+++ b/app/src/main/res/values-v21/styles.xml
@@ -3,7 +3,5 @@
     <style name="AppTheme.NoActionBar">
         <item name="windowActionBar">false</item>
         <item name="windowNoTitle">true</item>
-        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
-        <item name="android:statusBarColor">@android:color/transparent</item>
     </style>
 </resources>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 88139b7..d73324a 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -8,4 +8,5 @@
     <color name="color_red">#FF6A6E</color>
     <color name="color_red_light">#FFB4B6</color>
     <color name="color_blue">#03A9F4</color>
+    <color name="color_gray_light">#F5F5F5</color>
 </resources>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index b683edd..0680d3e 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -1,9 +1,5 @@
 <resources>
     <string name="app_name">BubbleSeekBar</string>
     <string name="action_settings">Settings</string>
-    <string name="tips">下面演示BubbleSeekBar嵌套在可滑动的容器中时，监听滑动修正Bubble的位置偏移。（上下滑动，观察Bubble位置）</string>
-    <string name="fixed">已修正</string>
-    <string name="not_fix">未修正</string>
-    <string name="touch_to_seek">touch track to seek</string>
-    <string name="touch_to_seek_auto_adjust">touch track to seek and auto adjust</string>
+    <string name="set_random_progress">set random progress</string>
 </resources>
diff --git a/screenshot/demo.gif b/screenshot/demo.gif
deleted file mode 100644
index 82420d6..0000000
Binary files a/screenshot/demo.gif and /dev/null differ
diff --git a/screenshot/demo1.gif b/screenshot/demo1.gif
new file mode 100644
index 0000000..45ef072
Binary files /dev/null and b/screenshot/demo1.gif differ
diff --git a/screenshot/demo2.gif b/screenshot/demo2.gif
index cb25ebf..a0474b4 100644
Binary files a/screenshot/demo2.gif and b/screenshot/demo2.gif differ
diff --git a/screenshot/demo3.gif b/screenshot/demo3.gif
new file mode 100644
index 0000000..aeff82a
Binary files /dev/null and b/screenshot/demo3.gif differ