Create the menus for Balances and Net Worth that make use of a customized TabLayout and a ViewPager to obtain the desired effect.

- Created custom themed attribute colorBackgroundFocusable to assign the correct background color to the balances and net worth tabs.
- Renamed BalancesFragment to HomeFragment because, the BalancesFragment will now only be used to display the Balances in the above mentioned ViewPager.

app/src/main/java/cy/agorise/bitsybitshareswallet/fragments/BalancesFragment.kt

@@ -1,83 +0,0 @@
-package cy.agorise.bitsybitshareswallet.fragments
-
-import androidx.lifecycle.ViewModelProviders
-import android.os.Bundle
-import android.preference.PreferenceManager
-import android.view.*
-import androidx.fragment.app.Fragment
-import androidx.lifecycle.Observer
-import androidx.navigation.Navigation
-import androidx.navigation.fragment.findNavController
-import androidx.recyclerview.widget.DividerItemDecoration
-import androidx.recyclerview.widget.LinearLayoutManager
-
-import cy.agorise.bitsybitshareswallet.R
-import cy.agorise.bitsybitshareswallet.adapters.BalancesAdapter
-import cy.agorise.bitsybitshareswallet.database.entities.UserAccount
-import cy.agorise.bitsybitshareswallet.database.joins.BalanceDetail
-import cy.agorise.bitsybitshareswallet.utils.Constants
-import cy.agorise.bitsybitshareswallet.viewmodels.BalanceDetailViewModel
-import cy.agorise.bitsybitshareswallet.viewmodels.UserAccountViewModel
-import kotlinx.android.synthetic.main.fragment_balances.*
-
-class BalancesFragment : Fragment() {
-
-    private lateinit var mUserAccountViewModel: UserAccountViewModel
-    private lateinit var mBalanceDetailViewModel: BalanceDetailViewModel
-
-    override fun onCreateView(
-        inflater: LayoutInflater, container: ViewGroup?,
-        savedInstanceState: Bundle?
-    ): View? {
-        setHasOptionsMenu(true)
-
-        return inflater.inflate(R.layout.fragment_balances, container, false)
-    }
-
-    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        super.onViewCreated(view, savedInstanceState)
-
-        // Configure UserAccountViewModel to show the current account
-        mUserAccountViewModel = ViewModelProviders.of(this).get(UserAccountViewModel::class.java)
-
-        val userId = PreferenceManager.getDefaultSharedPreferences(context)
-            .getString(Constants.KEY_CURRENT_ACCOUNT_ID, "")
-
-        mUserAccountViewModel.getUserAccount(userId!!).observe(this, Observer<UserAccount>{ user ->
-            tvAccountName.text = user.name
-        })
-
-        // Configure BalanceDetailViewModel to show the current balances
-        mBalanceDetailViewModel = ViewModelProviders.of(this).get(BalanceDetailViewModel::class.java)
-
-        val balancesAdapter = BalancesAdapter(context!!)
-        rvBalances.adapter = balancesAdapter
-        rvBalances.layoutManager = LinearLayoutManager(context!!)
-        rvBalances.addItemDecoration(DividerItemDecoration(context!!, DividerItemDecoration.VERTICAL))
-
-        mBalanceDetailViewModel.getAll().observe(this, Observer<List<BalanceDetail>> { balancesDetails ->
-            balancesAdapter.replaceAll(balancesDetails)
-        })
-
-        // Navigate to the Receive Transaction Fragment
-        fabReceiveTransaction.setOnClickListener (
-            Navigation.createNavigateOnClickListener(R.id.receive_action)
-        )
-
-        // Navigate to the Send Transaction Fragment without activating the camera
-        fabSendTransaction.setOnClickListener(
-            Navigation.createNavigateOnClickListener(R.id.send_action)
-        )
-
-        // Navigate to the Send Transaction Fragment using Navigation's SafeArgs to activate the camera
-        fabSendTransactionCamera.setOnClickListener {
-            val action = BalancesFragmentDirections.sendActionCamera()
-            action.setOpenCamera(true)
-            findNavController().navigate(action)
-        }
-    }
-
-    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
-        inflater.inflate(R.menu.menu_balances, menu)
-    }
-}

app/src/main/java/cy/agorise/bitsybitshareswallet/fragments/HomeFragment.kt

@@ -0,0 +1,139 @@
+package cy.agorise.bitsybitshareswallet.fragments
+
+import androidx.lifecycle.ViewModelProviders
+import android.os.Bundle
+import android.preference.PreferenceManager
+import android.view.*
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.FragmentManager
+import androidx.fragment.app.FragmentPagerAdapter
+import androidx.lifecycle.Observer
+import androidx.navigation.Navigation
+import androidx.navigation.fragment.findNavController
+
+import cy.agorise.bitsybitshareswallet.R
+import cy.agorise.bitsybitshareswallet.database.entities.UserAccount
+import cy.agorise.bitsybitshareswallet.utils.Constants
+import cy.agorise.bitsybitshareswallet.viewmodels.UserAccountViewModel
+import kotlinx.android.synthetic.main.fragment_home.*
+import kotlinx.android.synthetic.main.item_balance.view.*
+
+class HomeFragment : Fragment() {
+
+    private lateinit var mUserAccountViewModel: UserAccountViewModel
+//    private lateinit var mBalanceDetailViewModel: BalanceDetailViewModel
+
+    override fun onCreateView(
+        inflater: LayoutInflater, container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        setHasOptionsMenu(true)
+
+        return inflater.inflate(R.layout.fragment_home, container, false)
+    }
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        // Configure UserAccountViewModel to show the current account
+        mUserAccountViewModel = ViewModelProviders.of(this).get(UserAccountViewModel::class.java)
+
+        val userId = PreferenceManager.getDefaultSharedPreferences(context)
+            .getString(Constants.KEY_CURRENT_ACCOUNT_ID, "")
+
+        mUserAccountViewModel.getUserAccount(userId!!).observe(this, Observer<UserAccount>{ user ->
+            tvAccountName.text = user.name
+        })
+
+//        // Configure BalanceDetailViewModel to show the current balances
+//        mBalanceDetailViewModel = ViewModelProviders.of(this).get(BalanceDetailViewModel::class.java)
+//
+//        val balancesAdapter = BalancesAdapter(context!!)
+//        rvBalances.adapter = balancesAdapter
+//        rvBalances.layoutManager = LinearLayoutManager(context!!)
+//        rvBalances.addItemDecoration(DividerItemDecoration(context!!, DividerItemDecoration.VERTICAL))
+//
+//        mBalanceDetailViewModel.getAll().observe(this, Observer<List<BalanceDetail>> { balancesDetails ->
+//            balancesAdapter.replaceAll(balancesDetails)
+//        })
+
+        // Navigate to the Receive Transaction Fragment
+        fabReceiveTransaction.setOnClickListener (
+            Navigation.createNavigateOnClickListener(R.id.receive_action)
+        )
+
+        // Navigate to the Send Transaction Fragment without activating the camera
+        fabSendTransaction.setOnClickListener(
+            Navigation.createNavigateOnClickListener(R.id.send_action)
+        )
+
+        // Navigate to the Send Transaction Fragment using Navigation's SafeArgs to activate the camera
+        fabSendTransactionCamera.setOnClickListener {
+            val action = HomeFragmentDirections.sendActionCamera()
+            action.setOpenCamera(true)
+            findNavController().navigate(action)
+        }
+
+        val pagerAdapter = PagerAdapter(fragmentManager!!)
+        viewPager.adapter = pagerAdapter
+        tabLayout.setupWithViewPager(viewPager)
+    }
+
+    /**
+     * Pager adapter to create the placeholder fragments
+     */
+    private inner class PagerAdapter internal constructor(fm: FragmentManager) : FragmentPagerAdapter(fm) {
+
+        override fun getItem(position: Int): Fragment {
+            // getItem is called to instantiate the fragment for the given page.
+            // Return a PlaceholderFragment (defined as a static inner class below).
+            return PlaceholderFragment.newInstance(position + 1)
+        }
+
+        override fun getPageTitle(position: Int): CharSequence? {
+            return listOf(getString(R.string.title_balances), "Net Worth")[position]
+        }
+
+        override fun getCount(): Int {
+            return 2
+        }
+    }
+
+    /**
+     * A placeholder fragment containing a simple view.
+     */
+    class PlaceholderFragment : Fragment() {
+
+        override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
+                                  savedInstanceState: Bundle?): View? {
+            val rootView = inflater.inflate(R.layout.item_balance, container, false)
+            val text = "Hello World from section ${arguments?.getInt(ARG_SECTION_NUMBER)}"
+            rootView.tvBalance.text = text
+            return rootView
+        }
+
+        companion object {
+            /**
+             * The fragment argument representing the section number for this
+             * fragment.
+             */
+            private const val ARG_SECTION_NUMBER = "section_number"
+
+            /**
+             * Returns a new instance of this fragment for the given section
+             * number.
+             */
+            fun newInstance(sectionNumber: Int): PlaceholderFragment {
+                val fragment = PlaceholderFragment()
+                val args = Bundle()
+                args.putInt(ARG_SECTION_NUMBER, sectionNumber)
+                fragment.arguments = args
+                return fragment
+            }
+        }
+    }
+
+    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
+        inflater.inflate(R.menu.menu_balances, menu)
+    }
+}

app/src/main/res/layout/fragment_home.xml

@@ -5,7 +5,7 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"
     android:orientation="vertical"
-    tools:context=".fragments.BalancesFragment">
+    tools:context=".fragments.HomeFragment">
 
     <com.google.android.material.card.MaterialCardView
         style="@style/Widget.MaterialComponents.CardView"
@@ -139,22 +139,38 @@
                 tools:text="seventest-5"
                 android:textAppearance="@style/TextAppearance.Bitsy.Headline6"/>
 
-            <TextView
+            <com.google.android.material.tabs.TabLayout
-                android:layout_width="wrap_content"
+                android:id="@+id/tabLayout"
-                android:layout_height="wrap_content"
-                android:layout_marginTop="@dimen/spacing_same_topic"
-                android:layout_marginStart="@dimen/spacing_same_topic"
-                android:text="@string/title_balances"
-                android:textAppearance="@style/TextAppearance.Bitsy.Subtitle1"/>
-
-            <androidx.recyclerview.widget.RecyclerView
-                android:id="@+id/rvBalances"
                 android:layout_width="match_parent"
-                android:layout_height="match_parent"
+                android:layout_height="wrap_content"
-                android:paddingStart="@dimen/spacing_same_topic"
+                android:layout_marginTop="8dp"
-                android:paddingEnd="@dimen/spacing_same_topic"
+                android:background="?attr/themedColorBackgroundFloating"
-                tools:listitem="@layout/item_balance"
+                app:tabSelectedTextColor="?android:textColorPrimary"
-                tools:itemCount="3"/>
+                app:tabIndicatorColor="?android:colorControlHighlight"
+                app:tabIndicatorHeight="50dp"
+                app:tabMode="scrollable" />
+
+            <androidx.viewpager.widget.ViewPager
+                android:id="@+id/viewPager"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"/>
+
+            <!--<TextView-->
+                <!--android:layout_width="wrap_content"-->
+                <!--android:layout_height="wrap_content"-->
+                <!--android:layout_marginTop="@dimen/spacing_same_topic"-->
+                <!--android:layout_marginStart="@dimen/spacing_same_topic"-->
+                <!--android:text="@string/title_balances"-->
+                <!--android:textAppearance="@style/TextAppearance.Bitsy.Subtitle1"/>-->
+
+            <!--<androidx.recyclerview.widget.RecyclerView-->
+                <!--android:id="@+id/rvBalances"-->
+                <!--android:layout_width="match_parent"-->
+                <!--android:layout_height="match_parent"-->
+                <!--android:paddingStart="@dimen/spacing_same_topic"-->
+                <!--android:paddingEnd="@dimen/spacing_same_topic"-->
+                <!--tools:listitem="@layout/item_balance"-->
+                <!--tools:itemCount="3"/>-->
 
         </LinearLayout>
 

app/src/main/res/navigation/mobile_navigation.xml

@@ -4,13 +4,13 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/mobile_navigation"
-    app:startDestination="@id/balancesFragment">
+    app:startDestination="@id/home_dest">
 
     <fragment
-        android:id="@+id/balancesFragment"
+        android:id="@+id/home_dest"
-        android:name="cy.agorise.bitsybitshareswallet.fragments.BalancesFragment"
+        android:name="cy.agorise.bitsybitshareswallet.fragments.HomeFragment"
         android:label="@string/app_name"
-        tools:layout="@layout/fragment_balances">
+        tools:layout="@layout/fragment_home">
 
         <action
             android:id="@+id/receive_action"

app/src/main/res/values/attr.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Theme related attributes -->
+    <attr name="themedColorBackgroundFloating" format="reference"/>
+</resources>

app/src/main/res/values/colors.xml

@@ -4,6 +4,9 @@
     <color name="colorPrimaryDark">#006ba4</color>
     <color name="colorAccent">#0099d6</color>
 
+    <!-- Dark theme -->
+    <color name="colorBackgroundFloating">#424242</color>
+
     <color name="black">#000</color>
     <color name="gray">#888</color>
     <color name="lightGray">#e0e0e0</color>

app/src/main/res/values/styles.xml

@@ -6,6 +6,8 @@
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>
+        <!--Custom attributes -->
+        <item name="themedColorBackgroundFloating">@android:color/white</item>
     </style>
     <style name="Theme.Bitsy.NoActionBar">
         <item name="windowActionBar">false</item>
@@ -19,6 +21,8 @@
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>
+        <!--Custom attributes -->
+        <item name="themedColorBackgroundFloating">@color/colorBackgroundFloating</item>
     </style>
     <style name="Theme.Bitsy.Dark.NoActionBar">
         <item name="windowActionBar">false</item>