use custom views as tablayout items

app/build.gradle

@@ -62,7 +62,7 @@ android {
 }
 
 dependencies {
-    implementation 'com.github.SimpleMobileTools:Simple-Commons:4b8a3568df'
+    implementation 'com.github.SimpleMobileTools:Simple-Commons:0834a977e4'
     implementation 'org.greenrobot:eventbus:3.3.1'
     implementation 'com.github.Armen101:AudioRecordView:1.0.4'
     implementation 'androidx.documentfile:documentfile:1.0.1'

app/src/main/kotlin/com/simplemobiletools/voicerecorder/activities/MainActivity.kt

@@ -1,10 +1,11 @@
 package com.simplemobiletools.voicerecorder.activities
 
 import android.content.Intent
-import android.graphics.drawable.ColorDrawable
 import android.os.Bundle
 import android.view.Menu
 import android.view.MenuItem
+import android.widget.ImageView
+import android.widget.TextView
 import com.simplemobiletools.commons.extensions.*
 import com.simplemobiletools.commons.helpers.*
 import com.simplemobiletools.commons.models.FAQItem
@@ -52,10 +53,14 @@ class MainActivity : SimpleActivity() {
         setupTabColors()
     }
 
+    override fun onPause() {
+        super.onPause()
+        config.lastUsedViewPagerPage = view_pager.currentItem
+    }
+
     override fun onDestroy() {
         super.onDestroy()
         getPagerAdapter()?.onDestroy()
-        config.lastUsedViewPagerPage = view_pager.currentItem
 
         Intent(this@MainActivity, RecorderService::class.java).apply {
             action = STOP_AMPLITUDE_UPDATE
@@ -96,36 +101,51 @@ class MainActivity : SimpleActivity() {
     }
 
     private fun setupViewPager() {
+        main_tabs_holder.removeAllTabs()
+        main_tabs_holder.newTab().setCustomView(R.layout.bottom_tablayout_item).apply {
+            customView?.findViewById<ImageView>(R.id.tab_icon)?.setImageDrawable(getDrawable(R.drawable.ic_microphone_vector))
+            customView?.findViewById<TextView>(R.id.tab_label)?.setText(R.string.recorder)
+            main_tabs_holder.addTab(this)
+        }
+
+        main_tabs_holder.newTab().setCustomView(R.layout.bottom_tablayout_item).apply {
+            customView?.findViewById<ImageView>(R.id.tab_icon)?.setImageDrawable(getDrawable(R.drawable.ic_headset_vector))
+            customView?.findViewById<TextView>(R.id.tab_label)?.setText(R.string.player)
+            main_tabs_holder.addTab(this)
+        }
+
+        main_tabs_holder.onTabSelectionChanged(
+            tabUnselectedAction = {
+                it.customView?.findViewById<ImageView>(R.id.tab_icon)?.applyColorFilter(getProperTextColor())
+                it.customView?.findViewById<TextView>(R.id.tab_label)?.setTextColor(getProperTextColor())
+            },
+            tabSelectedAction = {
+                view_pager.currentItem = it.position
+                it.customView?.findViewById<ImageView>(R.id.tab_icon)?.applyColorFilter(getProperPrimaryColor())
+                it.customView?.findViewById<TextView>(R.id.tab_label)?.setTextColor(getProperPrimaryColor())
+            }
+        )
+
         view_pager.adapter = ViewPagerAdapter(this)
         view_pager.onPageChangeListener {
             main_tabs_holder.getTabAt(it)?.select()
             (view_pager.adapter as ViewPagerAdapter).finishActMode()
         }
         view_pager.currentItem = config.lastUsedViewPagerPage
-
+        main_tabs_holder.getTabAt(config.lastUsedViewPagerPage)?.select()
-        main_tabs_holder.setTabTextColors(
-            getProperTextColor(),
-            getProperPrimaryColor()
-        )
-
-        main_tabs_holder.onTabSelectionChanged(
-            tabUnselectedAction = {
-                it.icon?.applyColorFilter(getProperTextColor())
-            },
-            tabSelectedAction = {
-                view_pager.currentItem = it.position
-                it.icon?.applyColorFilter(getProperPrimaryColor())
-            }
-        )
     }
 
     private fun getPagerAdapter() = (view_pager.adapter as? ViewPagerAdapter)
 
     private fun setupTabColors() {
-        main_tabs_holder.apply {
+        main_tabs_holder.getTabAt(getInactiveTabIndex())?.customView?.apply {
-            background = ColorDrawable(getProperBackgroundColor())
+            findViewById<ImageView>(R.id.tab_icon)?.applyColorFilter(getProperTextColor())
-            getTabAt(view_pager.currentItem)?.icon?.applyColorFilter(getProperPrimaryColor())
+            findViewById<TextView>(R.id.tab_label)?.setTextColor(getProperTextColor())
-            getTabAt(getInactiveTabIndex())?.icon?.applyColorFilter(getProperTextColor())
+        }
+
+        main_tabs_holder.getTabAt(view_pager.currentItem)?.customView?.apply {
+            findViewById<ImageView>(R.id.tab_icon)?.applyColorFilter(getProperPrimaryColor())
+            findViewById<TextView>(R.id.tab_label)?.setTextColor(getProperPrimaryColor())
         }
     }
 

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

@@ -16,27 +16,9 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
-        android:elevation="8dp"
         app:tabIndicator="@null"
         app:tabMinWidth="150dp"
-        app:tabRippleColor="@null"
+        app:tabRippleColor="@null">
-        app:tabTextAppearance="@style/TabLayoutStyle">
-
-        <com.google.android.material.tabs.TabItem
-            android:id="@+id/tab_recorder"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:contentDescription="@string/recorder"
-            android:icon="@drawable/ic_microphone_vector"
-            android:text="@string/recorder" />
-
-        <com.google.android.material.tabs.TabItem
-            android:id="@+id/tab_player"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:contentDescription="@string/player"
-            android:icon="@drawable/ic_headset_vector"
-            android:text="@string/player" />
 
     </com.google.android.material.tabs.TabLayout>
 </RelativeLayout>

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

@@ -0,0 +1,28 @@
+<?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="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginTop="@dimen/medium_margin"
+    android:orientation="vertical">
+
+    <ImageView
+        android:id="@+id/tab_icon"
+        android:layout_width="32dp"
+        android:layout_height="32dp"
+        android:layout_gravity="center_horizontal"
+        android:scaleType="fitCenter"
+        tools:src="@drawable/ic_headset_vector" />
+
+    <TextView
+        android:id="@+id/tab_label"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_horizontal"
+        android:includeFontPadding="false"
+        android:paddingTop="@dimen/small_margin"
+        android:paddingBottom="@dimen/medium_margin"
+        android:textSize="@dimen/smaller_text_size"
+        tools:text="@string/player" />
+
+</LinearLayout>

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

@@ -135,7 +135,6 @@
                 android:layout_marginBottom="@dimen/big_margin"
                 android:background="@drawable/circle_background"
                 android:contentDescription="@string/playpause"
-                android:elevation="@dimen/medium_margin"
                 android:padding="@dimen/activity_margin"
                 android:src="@drawable/ic_play_vector" />
 

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

@@ -39,7 +39,6 @@
         android:layout_height="@dimen/toggle_recording_button_size"
         android:layout_marginBottom="@dimen/big_margin"
         android:background="@drawable/circle_background"
-        android:elevation="@dimen/medium_margin"
         android:padding="@dimen/normal_margin"
         android:src="@drawable/ic_microphone_vector"
         app:layout_constraintBottom_toBottomOf="parent"
@@ -52,7 +51,6 @@
         android:layout_height="@dimen/fab_size"
         android:layout_marginBottom="@dimen/big_margin"
         android:background="@drawable/circle_background"
-        android:elevation="@dimen/medium_margin"
         android:padding="@dimen/activity_margin"
         android:src="@drawable/ic_pause_vector"
         android:visibility="gone"

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

@@ -11,7 +11,4 @@
         <item name="android:windowNoDisplay">true</item>
     </style>
 
-    <style name="TabLayoutStyle" parent="Base.Widget.Design.TabLayout">
-        <item name="android:textSize">@dimen/smaller_text_size</item>
-    </style>
 </resources>