Fix test app UI issues (#11)

* The Outline fragment (ToC, bookmarks, etc) now has a back button in the toolbar that returns to the reader screen without changing the page
* The height of the toolbar is no longer being used to pad the UI. For screens that need that padding because the contents are underneath the toolbar, android:layout_marginTop="?attr/actionBarSize" should be added to the root element
* When the insets were being applied, it was using statusBars instead of systemBars and caused the TTS screen to not render the control buttons properly.

Author: stevenzeck

test-app/src/main/java/org/readium/r2/testapp/outline/NavigationFragment.kt

@@ -14,10 +14,7 @@ import android.widget.LinearLayout
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.setFragmentResult
 import androidx.lifecycle.ViewModelProvider
-import androidx.recyclerview.widget.DiffUtil
-import androidx.recyclerview.widget.LinearLayoutManager
-import androidx.recyclerview.widget.ListAdapter
-import androidx.recyclerview.widget.RecyclerView
+import androidx.recyclerview.widget.*
 import org.readium.r2.shared.publication.Link
 import org.readium.r2.shared.publication.Publication
 import org.readium.r2.shared.publication.toLocator
@@ -75,6 +72,12 @@ class NavigationFragment : Fragment() {
             setHasFixedSize(true)
             layoutManager = LinearLayoutManager(requireContext())
             adapter = navAdapter
+            addItemDecoration(
+                DividerItemDecoration(
+                    requireContext(),
+                    LinearLayoutManager.VERTICAL
+                )
+            )
         }
         navAdapter.submitList(flatLinks)
     }

test-app/src/main/java/org/readium/r2/testapp/outline/OutlineFragment.kt

@@ -22,6 +22,7 @@ import org.readium.r2.shared.publication.epub.pageList
 import org.readium.r2.shared.publication.opds.images
 import org.readium.r2.testapp.R
 import org.readium.r2.testapp.databinding.FragmentOutlineBinding
+import org.readium.r2.testapp.reader.ReaderActivity
 import org.readium.r2.testapp.reader.ReaderViewModel
 
 class OutlineFragment : Fragment() {
@@ -38,6 +39,8 @@ class OutlineFragment : Fragment() {
             publication = it.publication
         }
 
+        (activity as ReaderActivity?)?.supportActionBar?.setDisplayHomeAsUpEnabled(true)
+
         childFragmentManager.setFragmentResultListener(
             OutlineContract.REQUEST_KEY,
             this,

test-app/src/main/java/org/readium/r2/testapp/reader/ReaderActivity.kt

@@ -9,6 +9,7 @@ package org.readium.r2.testapp.reader
 import android.app.Activity
 import android.os.Build
 import android.os.Bundle
+import android.view.MenuItem
 import android.view.WindowManager
 import android.widget.Toast
 import androidx.appcompat.app.AppCompatActivity
@@ -120,6 +121,9 @@ open class ReaderActivity : AppCompatActivity() {
             is DrmManagementFragment -> getString(R.string.title_fragment_drm_management)
             else -> null
         }
+        if (supportFragmentManager.fragments.last() !is OutlineFragment) {
+            supportActionBar?.setDisplayHomeAsUpEnabled(false)
+        }
     }
 
     override fun getDefaultViewModelProviderFactory(): ViewModelProvider.Factory {
@@ -156,12 +160,27 @@ open class ReaderActivity : AppCompatActivity() {
 
     private fun showDrmManagementFragment() {
         supportFragmentManager.commit {
-            add(R.id.activity_container, DrmManagementFragment::class.java, Bundle(), DRM_FRAGMENT_TAG)
+            add(
+                R.id.activity_container,
+                DrmManagementFragment::class.java,
+                Bundle(),
+                DRM_FRAGMENT_TAG
+            )
             hide(readerFragment)
             addToBackStack(null)
         }
     }
 
+    override fun onOptionsItemSelected(item: MenuItem): Boolean {
+        when (item.itemId) {
+            android.R.id.home -> {
+                supportFragmentManager.popBackStack()
+                return true
+            }
+        }
+        return super.onOptionsItemSelected(item)
+    }
+
     companion object {
         const val READER_FRAGMENT_TAG = "reader"
         const val OUTLINE_FRAGMENT_TAG = "outline"

test-app/src/main/java/org/readium/r2/testapp/utils/SystemUiManagement.kt

@@ -9,7 +9,6 @@ package org.readium.r2.testapp.utils
 import android.app.Activity
 import android.view.View
 import android.view.WindowInsets
-import androidx.appcompat.app.AppCompatActivity
 import androidx.core.view.WindowInsetsCompat
 
 // Using ViewCompat and WindowInsetsCompat does not work properly in all versions of Android
@@ -56,10 +55,10 @@ fun Activity.toggleSystemUi() {
 /** Set padding around view so that content doesn't overlap system UI */
 fun View.padSystemUi(insets: WindowInsets, activity: Activity) =
     WindowInsetsCompat.toWindowInsetsCompat(insets, this)
-        .getInsets(WindowInsetsCompat.Type.statusBars()).apply {
+        .getInsets(WindowInsetsCompat.Type.systemBars()).apply {
             setPadding(
                 left,
-                top + (activity as AppCompatActivity).supportActionBar!!.height,
+                top,
                 right,
                 bottom
             )

test-app/src/main/res/layout/fragment_outline.xml

@@ -12,6 +12,7 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:layout_marginTop="?attr/actionBarSize"
     android:orientation="vertical">
 
     <com.google.android.material.tabs.TabLayout

test-app/src/main/res/layout/fragment_screen_reader.xml

@@ -10,6 +10,7 @@
     android:id="@+id/tts_overlay"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:layout_marginTop="?attr/actionBarSize"
     android:background="@color/colorAccent">
 
     <androidx.constraintlayout.widget.ConstraintLayout
@@ -82,8 +83,8 @@
 
         <ImageButton
             android:id="@+id/prev_chapter"
-            android:layout_width="30dp"
-            android:layout_height="30dp"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
             android:layout_weight="1"
             android:background="@android:color/transparent"
             android:contentDescription="@string/previous_chapter"
@@ -93,8 +94,8 @@
 
         <ImageButton
             android:id="@+id/fast_back"
-            android:layout_width="30dp"
-            android:layout_height="30dp"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
             android:layout_weight="1"
             android:background="@android:color/transparent"
             android:contentDescription="@string/previous_sentence"
@@ -116,8 +117,8 @@
 
         <ImageButton
             android:id="@+id/fast_forward"
-            android:layout_width="30dp"
-            android:layout_height="30dp"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
             android:layout_weight="1"
             android:background="@android:color/transparent"
             android:contentDescription="@string/next_sentence"
@@ -127,8 +128,8 @@
 
         <ImageButton
             android:id="@+id/next_chapter"
-            android:layout_width="30dp"
-            android:layout_height="30dp"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
             android:layout_weight="1"
             android:background="@android:color/transparent"
             android:contentDescription="@string/next_chapter"