diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 73549a1..48d48ab 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -1,21 +1,26 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-          package="com.gauravk.bubblebarsample">
+    xmlns:tools="http://schemas.android.com/tools"
+    package="com.gauravk.bubblebarsample">
 
     <application
-            android:allowBackup="true"
-            android:icon="@mipmap/ic_launcher"
-            android:label="@string/app_name"
-            android:roundIcon="@mipmap/ic_launcher_round"
-            android:supportsRtl="true"
-            android:theme="@style/AppTheme">
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme"
+        tools:ignore="GoogleAppIndexingWarning">
         <activity android:name=".MainActivity">
             <intent-filter>
-                <action android:name="android.intent.action.MAIN"/>
+                <action android:name="android.intent.action.MAIN" />
 
-                <category android:name="android.intent.category.LAUNCHER"/>
+                <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
+        <activity android:name=".BottomBarActivity" />
+        <activity android:name=".TopBarActivity" />
+        <activity android:name=".EqualBottomBarActivity" />
     </application>
 
 </manifest>
\ No newline at end of file
diff --git a/app/src/main/java/com/gauravk/bubblebarsample/BottomBarActivity.kt b/app/src/main/java/com/gauravk/bubblebarsample/BottomBarActivity.kt
new file mode 100644
index 0000000..69ca047
--- /dev/null
+++ b/app/src/main/java/com/gauravk/bubblebarsample/BottomBarActivity.kt
@@ -0,0 +1,28 @@
+package com.gauravk.bubblebarsample
+
+import android.support.v7.app.AppCompatActivity
+import android.os.Bundle
+import kotlinx.android.synthetic.main.activity_bottom_bar.*
+
+class BottomBarActivity : AppCompatActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_bottom_bar)
+
+        val fragList = ArrayList<ScreenSlidePageFragment>()
+        fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.home)))
+        fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.search)))
+        fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.likes)))
+        fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.notification)))
+        fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.profile)))
+        val pagerAdapter = ScreenSlidePagerAdapter(fragList, supportFragmentManager)
+        view_pager.adapter = pagerAdapter
+
+        bottom_navigation_view_linear.setNavigationChangeListener { _, position ->
+            view_pager.setCurrentItem(position, true)
+        }
+    }
+
+
+}
diff --git a/app/src/main/java/com/gauravk/bubblebarsample/EqualBottomBarActivity.kt b/app/src/main/java/com/gauravk/bubblebarsample/EqualBottomBarActivity.kt
new file mode 100644
index 0000000..44d09af
--- /dev/null
+++ b/app/src/main/java/com/gauravk/bubblebarsample/EqualBottomBarActivity.kt
@@ -0,0 +1,26 @@
+package com.gauravk.bubblebarsample
+
+import android.support.v7.app.AppCompatActivity
+import android.os.Bundle
+import kotlinx.android.synthetic.main.activity_equal_bottom_bar.*
+
+class EqualBottomBarActivity : AppCompatActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_equal_bottom_bar)
+
+        val fragList = ArrayList<ScreenSlidePageFragment>()
+        fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.shop)))
+        fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.photos)))
+        fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.call)))
+        val pagerAdapter = ScreenSlidePagerAdapter(fragList, supportFragmentManager)
+        view_pager.adapter = pagerAdapter
+
+        equal_navigation_bar.setNavigationChangeListener { _, position ->
+            view_pager.setCurrentItem(position, true)
+        }
+    }
+
+
+}
diff --git a/app/src/main/java/com/gauravk/bubblebarsample/MainActivity.kt b/app/src/main/java/com/gauravk/bubblebarsample/MainActivity.kt
index 8c9c10a..16f69f0 100644
--- a/app/src/main/java/com/gauravk/bubblebarsample/MainActivity.kt
+++ b/app/src/main/java/com/gauravk/bubblebarsample/MainActivity.kt
@@ -1,5 +1,6 @@
 package com.gauravk.bubblebarsample
 
+import android.content.Intent
 import android.support.v7.app.AppCompatActivity
 import android.os.Bundle
 
@@ -11,22 +12,31 @@ class MainActivity : AppCompatActivity() {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_main)
 
-        //listeners for top navigation view
-        top_navigation_constraint_text.text = String.format(
-            getString(R.string.position_placeholder_top),
-            top_navigation_constraint.currentActiveItemPosition
-        )
-        top_navigation_constraint.setNavigationChangeListener { _, position ->
-            top_navigation_constraint_text.text = String.format(getString(R.string.position_placeholder_top), position)
+        open_top_navigation_bar.setOnClickListener {
+            launchTopBarActivity()
         }
 
-        //listener for bottom navigation view
-        bottom_navigation_linear.text = String.format(
-            getString(R.string.position_placeholder_bottom),
-            bottom_navigation_view_linear.currentActiveItemPosition
-        )
-        bottom_navigation_view_linear.setNavigationChangeListener { _, position ->
-            bottom_navigation_linear.text = String.format(getString(R.string.position_placeholder_bottom), position)
+        open_bottom_equal_navigation_bar.setOnClickListener {
+            launchEqualBarActivity()
         }
+
+        open_bottom_navigation_bar.setOnClickListener {
+            launchBottomBarActivity()
+        }
+    }
+
+    private fun launchBottomBarActivity() {
+        val intent = Intent(this, BottomBarActivity::class.java)
+        startActivity(intent)
+    }
+
+    private fun launchTopBarActivity() {
+        val intent = Intent(this, TopBarActivity::class.java)
+        startActivity(intent)
+    }
+
+    private fun launchEqualBarActivity() {
+        val intent = Intent(this, EqualBottomBarActivity::class.java)
+        startActivity(intent)
     }
 }
diff --git a/app/src/main/java/com/gauravk/bubblebarsample/ScreenSlidePageFragment.kt b/app/src/main/java/com/gauravk/bubblebarsample/ScreenSlidePageFragment.kt
new file mode 100644
index 0000000..ddea92e
--- /dev/null
+++ b/app/src/main/java/com/gauravk/bubblebarsample/ScreenSlidePageFragment.kt
@@ -0,0 +1,58 @@
+package com.gauravk.bubblebarsample
+
+import android.os.Bundle
+import android.support.v4.app.Fragment
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+
+import kotlinx.android.synthetic.main.fragment_screen_slide_page.*
+
+private const val ARG_TITLE = "arg_title"
+
+/**
+ * A simple [Fragment] subclass.
+ * Use the [ScreenSlidePageFragment.newInstance] factory method to
+ * create an instance of this fragment.
+ *
+ */
+class ScreenSlidePageFragment : Fragment() {
+    private var title: String? = "Default title."
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        arguments?.let {
+            title = it.getString(ARG_TITLE)
+        }
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater, container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        // Inflate the layout for this fragment
+        return inflater.inflate(R.layout.fragment_screen_slide_page, container, false)
+    }
+
+    override fun onActivityCreated(savedInstanceState: Bundle?) {
+        super.onActivityCreated(savedInstanceState)
+        screen_slide_title.text = title
+    }
+
+    companion object {
+        /**
+         * Use this factory method to create a new instance of
+         * this fragment using the provided parameters.
+         *
+         * @param title Title parameter
+         * @return A new instance of fragment ScreenSlidePageFragment.
+         */
+        @JvmStatic
+        fun newInstance(title: String) =
+            ScreenSlidePageFragment().apply {
+                arguments = Bundle().apply {
+                    putString(ARG_TITLE, title)
+                }
+            }
+    }
+}
diff --git a/app/src/main/java/com/gauravk/bubblebarsample/ScreenSlidePagerAdapter.kt b/app/src/main/java/com/gauravk/bubblebarsample/ScreenSlidePagerAdapter.kt
new file mode 100644
index 0000000..c6e7e02
--- /dev/null
+++ b/app/src/main/java/com/gauravk/bubblebarsample/ScreenSlidePagerAdapter.kt
@@ -0,0 +1,23 @@
+package com.gauravk.bubblebarsample
+
+import android.support.v4.app.Fragment
+import android.support.v4.app.FragmentManager
+import android.support.v4.app.FragmentStatePagerAdapter
+
+/**
+ * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
+ * sequence.
+ */
+class ScreenSlidePagerAdapter(
+    private val fragmentList: ArrayList<ScreenSlidePageFragment>,
+    fm: FragmentManager
+) : FragmentStatePagerAdapter(fm) {
+
+    override fun getCount(): Int = fragmentList.size
+
+    override fun getItem(position: Int): Fragment {
+        if (position >= 0 && position < fragmentList.size)
+            return fragmentList[position]
+        return ScreenSlidePageFragment()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/gauravk/bubblebarsample/TopBarActivity.kt b/app/src/main/java/com/gauravk/bubblebarsample/TopBarActivity.kt
new file mode 100644
index 0000000..325ccfe
--- /dev/null
+++ b/app/src/main/java/com/gauravk/bubblebarsample/TopBarActivity.kt
@@ -0,0 +1,26 @@
+package com.gauravk.bubblebarsample
+
+import android.support.v7.app.AppCompatActivity
+import android.os.Bundle
+import kotlinx.android.synthetic.main.activity_top_bar.*
+
+class TopBarActivity : AppCompatActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_top_bar)
+
+        val fragList = ArrayList<ScreenSlidePageFragment>()
+        fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.restaurant)))
+        fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.room)))
+        fragList.add(ScreenSlidePageFragment.newInstance(getString(R.string.happy)))
+        val pagerAdapter = ScreenSlidePagerAdapter(fragList, supportFragmentManager)
+        view_pager.adapter = pagerAdapter
+
+        top_navigation_constraint.setNavigationChangeListener { _, position ->
+            view_pager.setCurrentItem(position, true)
+        }
+    }
+
+
+}
diff --git a/app/src/main/res/layout/activity_bottom_bar.xml b/app/src/main/res/layout/activity_bottom_bar.xml
new file mode 100644
index 0000000..7526e93
--- /dev/null
+++ b/app/src/main/res/layout/activity_bottom_bar.xml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout 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"
+    tools:context=".BottomBarActivity">
+
+    <android.support.v4.view.ViewPager
+        android:id="@+id/view_pager"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toTopOf="@id/bottom_navigation_view_linear"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <com.gauravk.bubblenavigation.BubbleNavigationLinearView
+        android:id="@+id/bottom_navigation_view_linear"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="@color/white"
+        android:elevation="8dp"
+        android:orientation="horizontal"
+        android:padding="12dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent">
+
+        <com.gauravk.bubblenavigation.BubbleToggleView
+            android:id="@+id/l_item_home"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:bt_active="true"
+            app:bt_colorActive="@color/red_active"
+            app:bt_colorInactive="@color/red_inactive"
+            app:bt_icon="@drawable/ic_home"
+            app:bt_shape="@drawable/transition_background_drawable_home"
+            app:bt_title="@string/home" />
+
+        <com.gauravk.bubblenavigation.BubbleToggleView
+            android:id="@+id/l_item_search"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:bt_colorActive="@color/blue_active"
+            app:bt_colorInactive="@color/blue_inactive"
+            app:bt_icon="@drawable/ic_search"
+            app:bt_shape="@drawable/transition_background_drawable_search"
+            app:bt_title="@string/search" />
+
+        <com.gauravk.bubblenavigation.BubbleToggleView
+            android:id="@+id/l_item_profile_list"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:bt_colorActive="@color/blue_grey_active"
+            app:bt_colorInactive="@color/blue_grey_inactive"
+            app:bt_icon="@drawable/ic_like"
+            app:bt_shape="@drawable/transition_background_drawable_like"
+            app:bt_title="@string/likes" />
+
+        <com.gauravk.bubblenavigation.BubbleToggleView
+            android:id="@+id/l_item_notification"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:bt_colorActive="@color/green_active"
+            app:bt_colorInactive="@color/green_inactive"
+            app:bt_icon="@drawable/ic_playlist"
+            app:bt_shape="@drawable/transition_background_drawable_list"
+            app:bt_title="@string/notification" />
+
+        <com.gauravk.bubblenavigation.BubbleToggleView
+            android:id="@+id/l_item_profile"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:bt_colorActive="@color/purple_active"
+            app:bt_colorInactive="@color/purple_inactive"
+            app:bt_icon="@drawable/ic_person"
+            app:bt_shape="@drawable/transition_background_drawable_person"
+            app:bt_title="@string/profile" />
+    </com.gauravk.bubblenavigation.BubbleNavigationLinearView>
+
+</android.support.constraint.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/activity_equal_bottom_bar.xml b/app/src/main/res/layout/activity_equal_bottom_bar.xml
new file mode 100644
index 0000000..36afa20
--- /dev/null
+++ b/app/src/main/res/layout/activity_equal_bottom_bar.xml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout 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"
+    tools:context=".BottomBarActivity">
+
+    <android.support.v4.view.ViewPager
+        android:id="@+id/view_pager"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <com.gauravk.bubblenavigation.BubbleNavigationLinearView
+        android:id="@+id/equal_navigation_bar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="16dp"
+        android:layout_marginStart="16dp"
+        android:layout_marginLeft="16dp"
+        android:layout_marginEnd="16dp"
+        android:layout_marginRight="16dp"
+        android:layout_marginBottom="16dp"
+        android:background="@color/white"
+        android:elevation="4dp"
+        android:padding="12dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent">
+
+        <com.gauravk.bubblenavigation.BubbleToggleView
+            android:id="@+id/m_item_shop"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            app:bt_active="true"
+            app:bt_colorActive="@color/blue_active"
+            app:bt_colorInactive="@color/default_inactive"
+            app:bt_icon="@drawable/ic_shop"
+            app:bt_shape="@drawable/shop_background_stroke"
+            app:bt_title="@string/shop" />
+
+        <com.gauravk.bubblenavigation.BubbleToggleView
+            android:id="@+id/m_item_photos"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            app:bt_colorActive="@color/purple_active"
+            app:bt_colorInactive="@color/default_inactive"
+            app:bt_icon="@drawable/ic_photos"
+            app:bt_shape="@drawable/photos_background_stroke"
+            app:bt_title="@string/photos" />
+
+        <com.gauravk.bubblenavigation.BubbleToggleView
+            android:id="@+id/m_item_call"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            app:bt_colorActive="@color/green_active"
+            app:bt_colorInactive="@color/default_inactive"
+            app:bt_icon="@drawable/ic_call"
+            app:bt_shape="@drawable/call_background_stroke"
+            app:bt_title="@string/call" />
+
+    </com.gauravk.bubblenavigation.BubbleNavigationLinearView>
+
+
+</android.support.constraint.ConstraintLayout>
\ 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 3dae49a..208b981 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -6,193 +6,55 @@
     android:layout_height="match_parent"
     tools:context=".MainActivity">
 
-    <com.gauravk.bubblenavigation.BubbleNavigationConstraintView
-        android:id="@+id/top_navigation_constraint"
-        android:layout_width="match_parent"
+    <Button
+        android:id="@+id/open_top_navigation_bar"
+        android:layout_width="250dp"
         android:layout_height="wrap_content"
-        android:layout_marginBottom="380dp"
-        android:background="@color/white"
-        android:elevation="4dp"
-        android:padding="12dp"
-        app:bnc_mode="spread"
+        android:layout_marginStart="8dp"
+        android:layout_marginLeft="8dp"
+        android:layout_marginEnd="8dp"
+        android:layout_marginRight="8dp"
+        android:background="@drawable/home_background_oval"
+        android:padding="16dp"
+        android:elevation="2dp"
+        android:text="Top Navigation Bar"
+        app:layout_constraintBottom_toTopOf="@+id/open_bottom_equal_navigation_bar"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintHorizontal_bias="0.0"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent">
-
-        <com.gauravk.bubblenavigation.BubbleToggleView
-            android:id="@+id/c_item_rest"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:bt_padding="8dp"
-            app:bt_colorActive="@color/orange_active"
-            app:bt_colorInactive="@color/orange_inactive"
-            app:bt_icon="@drawable/ic_restaurant"
-            app:bt_shape="@drawable/transition_background_drawable_default"
-            app:bt_title="@string/restaurant" />
+        app:layout_constraintTop_toTopOf="parent" />
 
-        <com.gauravk.bubblenavigation.BubbleToggleView
-            android:id="@+id/c_item_room"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:bt_active="true"
-            app:bt_colorActive="@color/red_active"
-            app:bt_colorInactive="@color/red_inactive"
-            app:bt_icon="@drawable/ic_room"
-            app:bt_shape="@drawable/transition_background_drawable_default"
-            app:bt_title="@string/room" />
-
-        <com.gauravk.bubblenavigation.BubbleToggleView
-            android:id="@+id/c_item_happy"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:bt_colorActive="@color/green_active"
-            app:bt_colorInactive="@color/green_inactive"
-            app:bt_icon="@drawable/ic_happy"
-            app:bt_shape="@drawable/transition_background_drawable_default"
-            app:bt_title="@string/happy" />
-    </com.gauravk.bubblenavigation.BubbleNavigationConstraintView>
-
-    <TextView
-        android:id="@+id/top_navigation_constraint_text"
-        android:layout_width="wrap_content"
+    <Button
+        android:id="@+id/open_bottom_equal_navigation_bar"
+        android:layout_width="250dp"
         android:layout_height="wrap_content"
         android:layout_marginStart="8dp"
-        android:layout_marginTop="24dp"
+        android:layout_marginLeft="8dp"
         android:layout_marginEnd="8dp"
-        android:text="@string/app_name"
-        android:textSize="20sp"
+        android:layout_marginRight="8dp"
+        android:background="@drawable/list_background_oval"
+        android:padding="16dp"
+        android:elevation="2dp"
+        android:text="Equal Navigation Bar"
+        app:layout_constraintBottom_toTopOf="@+id/open_bottom_navigation_bar"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/top_navigation_constraint" />
+        app:layout_constraintTop_toBottomOf="@+id/open_top_navigation_bar" />
 
-    <com.gauravk.bubblenavigation.BubbleNavigationLinearView
-        android:id="@+id/middle_navigation_linear"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="8dp"
-        android:layout_marginBottom="8dp"
-        android:background="@color/white"
-        android:elevation="4dp"
-        android:padding="12dp"
-        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation_linear"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintHorizontal_bias="0.0"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/top_navigation_constraint_text">
-
-        <com.gauravk.bubblenavigation.BubbleToggleView
-            android:id="@+id/m_item_shop"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_weight="1"
-            app:bt_colorActive="@color/blue_active"
-            app:bt_colorInactive="@color/default_inactive"
-            app:bt_icon="@drawable/ic_shop"
-            app:bt_shape="@drawable/shop_background_stroke"
-            app:bt_title="@string/shop" />
-
-        <com.gauravk.bubblenavigation.BubbleToggleView
-            android:id="@+id/m_item_photos"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_weight="1"
-            app:bt_colorActive="@color/purple_active"
-            app:bt_colorInactive="@color/default_inactive"
-            app:bt_icon="@drawable/ic_photos"
-            app:bt_shape="@drawable/photos_background_stroke"
-            app:bt_title="@string/photos" />
-
-        <com.gauravk.bubblenavigation.BubbleToggleView
-            android:id="@+id/m_item_call"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_weight="1"
-            app:bt_active="true"
-            app:bt_colorActive="@color/green_active"
-            app:bt_colorInactive="@color/default_inactive"
-            app:bt_icon="@drawable/ic_call"
-            app:bt_shape="@drawable/call_background_stroke"
-            app:bt_title="@string/call" />
-
-    </com.gauravk.bubblenavigation.BubbleNavigationLinearView>
-
-    <TextView
-        android:id="@+id/bottom_navigation_linear"
-        android:layout_width="wrap_content"
+    <Button
+        android:id="@+id/open_bottom_navigation_bar"
+        android:layout_width="250dp"
         android:layout_height="wrap_content"
         android:layout_marginStart="8dp"
+        android:layout_marginLeft="8dp"
         android:layout_marginEnd="8dp"
-        android:layout_marginBottom="24dp"
-        android:text="@string/app_name"
-        android:textSize="20sp"
-        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation_view_linear"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
-
-    <com.gauravk.bubblenavigation.BubbleNavigationLinearView
-        android:id="@+id/bottom_navigation_view_linear"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:background="@color/white"
-        android:elevation="8dp"
-        android:orientation="horizontal"
-        android:padding="12dp"
+        android:layout_marginRight="8dp"
+        android:background="@drawable/search_background_oval"
+        android:padding="16dp"
+        android:elevation="2dp"
+        android:text="Bottom Navigation Bar"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent">
-
-        <com.gauravk.bubblenavigation.BubbleToggleView
-            android:id="@+id/l_item_home"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:bt_active="true"
-            app:bt_colorActive="@color/red_active"
-            app:bt_colorInactive="@color/red_inactive"
-            app:bt_icon="@drawable/ic_home"
-            app:bt_shape="@drawable/transition_background_drawable_home"
-            app:bt_title="@string/home" />
-
-        <com.gauravk.bubblenavigation.BubbleToggleView
-            android:id="@+id/l_item_search"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:bt_colorActive="@color/blue_active"
-            app:bt_colorInactive="@color/blue_inactive"
-            app:bt_icon="@drawable/ic_search"
-            app:bt_shape="@drawable/transition_background_drawable_search"
-            app:bt_title="@string/search" />
-
-        <com.gauravk.bubblenavigation.BubbleToggleView
-            android:id="@+id/l_item_profile_list"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:bt_colorActive="@color/blue_grey_active"
-            app:bt_colorInactive="@color/blue_grey_inactive"
-            app:bt_icon="@drawable/ic_like"
-            app:bt_shape="@drawable/transition_background_drawable_like"
-            app:bt_title="@string/likes" />
-
-        <com.gauravk.bubblenavigation.BubbleToggleView
-            android:id="@+id/l_item_notification"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:bt_colorActive="@color/green_active"
-            app:bt_colorInactive="@color/green_inactive"
-            app:bt_icon="@drawable/ic_playlist"
-            app:bt_shape="@drawable/transition_background_drawable_list"
-            app:bt_title="@string/notification" />
-
-        <com.gauravk.bubblenavigation.BubbleToggleView
-            android:id="@+id/l_item_profile"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:bt_colorActive="@color/purple_active"
-            app:bt_colorInactive="@color/purple_inactive"
-            app:bt_icon="@drawable/ic_person"
-            app:bt_shape="@drawable/transition_background_drawable_person"
-            app:bt_title="@string/profile" />
-    </com.gauravk.bubblenavigation.BubbleNavigationLinearView>
-
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/open_bottom_equal_navigation_bar" />
 
 </android.support.constraint.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/activity_top_bar.xml b/app/src/main/res/layout/activity_top_bar.xml
new file mode 100644
index 0000000..5687d74
--- /dev/null
+++ b/app/src/main/res/layout/activity_top_bar.xml
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout 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"
+    tools:context=".BottomBarActivity">
+
+    <com.gauravk.bubblenavigation.BubbleNavigationConstraintView
+        android:id="@+id/top_navigation_constraint"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="380dp"
+        android:background="@color/white"
+        android:elevation="4dp"
+        android:padding="12dp"
+        app:bnc_mode="spread"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0.0"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <com.gauravk.bubblenavigation.BubbleToggleView
+            android:id="@+id/c_item_rest"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:bt_active="true"
+            app:bt_colorActive="@color/orange_active"
+            app:bt_colorInactive="@color/orange_inactive"
+            app:bt_icon="@drawable/ic_restaurant"
+            app:bt_padding="8dp"
+            app:bt_shape="@drawable/transition_background_drawable_default"
+            app:bt_title="@string/restaurant" />
+
+        <com.gauravk.bubblenavigation.BubbleToggleView
+            android:id="@+id/c_item_room"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:bt_colorActive="@color/red_active"
+            app:bt_colorInactive="@color/red_inactive"
+            app:bt_icon="@drawable/ic_room"
+            app:bt_shape="@drawable/transition_background_drawable_default"
+            app:bt_title="@string/room" />
+
+        <com.gauravk.bubblenavigation.BubbleToggleView
+            android:id="@+id/c_item_happy"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:bt_colorActive="@color/green_active"
+            app:bt_colorInactive="@color/green_inactive"
+            app:bt_icon="@drawable/ic_happy"
+            app:bt_shape="@drawable/transition_background_drawable_default"
+            app:bt_title="@string/happy" />
+    </com.gauravk.bubblenavigation.BubbleNavigationConstraintView>
+
+    <android.support.v4.view.ViewPager
+        android:id="@+id/view_pager"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/top_navigation_constraint" />
+
+</android.support.constraint.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_screen_slide_page.xml b/app/src/main/res/layout/fragment_screen_slide_page.xml
new file mode 100644
index 0000000..bfc3517
--- /dev/null
+++ b/app/src/main/res/layout/fragment_screen_slide_page.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:layout_gravity="center"
+    android:gravity="center"
+    tools:context=".ScreenSlidePageFragment">
+
+    <TextView
+        android:id="@+id/screen_slide_title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Default Text"
+        android:textSize="30sp"/>
+
+</LinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 4576fe8..efba7a9 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -5,8 +5,6 @@
     <string name="profile">Profile</string>
     <string name="notification">Notify</string>
     <string name="likes">Favs</string>
-    <string name="position_placeholder_top">Top position is %d</string>
-    <string name="position_placeholder_bottom">Bottom position is %d</string>
     <string name="happy">Happy</string>
     <string name="room">Room</string>
     <string name="restaurant">Food</string>