Apply the new design for Two-page (#14)

* Add new page fragments

* Add fragments for layout

* Clean up fragments

* Update the text format

* Rename image asset

* Fix code style

* Clean up the string

* Clean up the fragments

* Update the page pattern

* Update the string

* Update the test case

* Update the import to satisfy the pipepline

Author: joyl1216

ExtendCanvas/src/main/java/com/microsoft/device/display/samples/extendcanvas/MainActivity.kt

@@ -6,7 +6,6 @@
 package com.microsoft.device.display.samples.extendcanvas
 
 import android.os.Bundle
-import android.view.View
 import android.webkit.WebView
 import androidx.appcompat.app.AppCompatActivity
 import com.microsoft.device.display.samples.extend.R

TwoPage/src/androidTest/java/com/microsoft/device/display/samples/twopage/TwoPageModeOrientationTest.kt

@@ -39,12 +39,12 @@ class TwoPageModeOrientationTest {
     @Test
     fun displayLayouts_whenInSingleScreenPortrait() {
         onView(withId(R.id.single_pager_container)).check(matches(isDisplayed()))
-        onView(allOf(withId(R.id.text_view), withText("Page 1")))
+        onView(allOf(withId(R.id.app_name_text), withText("Two Page")))
             .check(matches(isDisplayed()))
 
         changePagePortrait()
 
-        onView(allOf(withId(R.id.text_view), withText("Page 2")))
+        onView(allOf(withId(R.id.page2_page_number), withText("PAGE 2 of 4")))
             .check(matches(isDisplayed()))
     }
 
@@ -53,23 +53,23 @@ class TwoPageModeOrientationTest {
         spanApplication()
 
         onView(withId(R.id.single_pager_container)).check(matches(isDisplayed()))
-        onView(allOf(withId(R.id.text_view), withText("Page 1")))
+        onView(allOf(withId(R.id.app_name_text), withText("Two Page")))
             .check(matches(isDisplayed()))
-        onView(allOf(withId(R.id.text_view), withText("Page 2")))
+        onView(allOf(withId(R.id.page2_page_number), withText("PAGE 2 of 4")))
             .check(matches(isDisplayed()))
 
         changePagePortrait()
 
-        onView(allOf(withId(R.id.text_view), withText("Page 2")))
+        onView(allOf(withId(R.id.page2_page_number), withText("PAGE 2 of 4")))
             .check(matches(isDisplayed()))
-        onView(allOf(withId(R.id.text_view), withText("Page 3")))
+        onView(allOf(withId(R.id.page3_page_number), withText("PAGE 3 of 4")))
             .check(matches(isDisplayed()))
 
         changeTwoPagesPortrait()
 
-        onView(allOf(withId(R.id.text_view), withText("Page 4")))
+        onView(allOf(withId(R.id.page3_page_number), withText("PAGE 3 of 4")))
             .check(matches(isDisplayed()))
-        onView(allOf(withId(R.id.text_view), withText("Page 5")))
+        onView(allOf(withId(R.id.page4_page_number), withText("PAGE 4 of 4")))
             .check(matches(isDisplayed()))
     }
 
@@ -78,12 +78,12 @@ class TwoPageModeOrientationTest {
         rotateDevice()
 
         onView(withId(R.id.single_pager_container)).check(matches(isDisplayed()))
-        onView(allOf(withId(R.id.text_view), withText("Page 1")))
+        onView(allOf(withId(R.id.app_name_text), withText("Two Page")))
             .check(matches(isDisplayed()))
 
         changePageLandscape()
 
-        onView(allOf(withId(R.id.text_view), withText("Page 2")))
+        onView(allOf(withId(R.id.page2_page_number), withText("PAGE 2 of 4")))
             .check(matches(isDisplayed()))
     }
 
@@ -93,12 +93,12 @@ class TwoPageModeOrientationTest {
         spanLandscapeApplication()
 
         onView(withId(R.id.dual_pager_container)).check(matches(isDisplayed()))
-        onView(allOf(withId(R.id.text_view), withText("Page 1")))
+        onView(allOf(withId(R.id.app_name_text), withText("Two Page")))
             .check(matches(isDisplayed()))
 
         changePageVertical()
 
-        onView(allOf(withId(R.id.text_view), withText("Page 2")))
+        onView(allOf(withId(R.id.page2_page_number), withText("PAGE 2 of 4")))
             .check(matches(isDisplayed()))
     }
 

TwoPage/src/main/java/com/microsoft/device/display/samples/twopage/MainActivity.kt

@@ -8,11 +8,17 @@ package com.microsoft.device.display.samples.twopage
 import android.annotation.SuppressLint
 import android.content.res.Configuration
 import android.os.Bundle
+import android.util.SparseArray
 import android.view.Surface
 import android.view.View
 import androidx.appcompat.app.AppCompatActivity
+import androidx.fragment.app.Fragment
 import androidx.viewpager.widget.ViewPager
 import androidx.viewpager.widget.ViewPager.OnPageChangeListener
+import com.microsoft.device.display.samples.twopage.fragments.FirstPageFragment
+import com.microsoft.device.display.samples.twopage.fragments.FourthPageFragment
+import com.microsoft.device.display.samples.twopage.fragments.SecondPageFragment
+import com.microsoft.device.display.samples.twopage.fragments.ThirdPageFragment
 import com.microsoft.device.dualscreen.layout.ScreenHelper
 
 class MainActivity : AppCompatActivity(), OnPageChangeListener {
@@ -25,12 +31,24 @@ class MainActivity : AppCompatActivity(), OnPageChangeListener {
     @SuppressLint("InflateParams")
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        pagerAdapter = PagerAdapter(supportFragmentManager, TestFragment.fragments)
+
+        supportActionBar?.hide()
+
+        setupPager()
         single = layoutInflater.inflate(R.layout.activity_main, null)
         dual = layoutInflater.inflate(R.layout.double_landscape_layout, null)
         setupLayout()
     }
 
+    private fun setupPager() {
+        val fragments = SparseArray<Fragment>()
+        fragments.put(0, FirstPageFragment())
+        fragments.put(1, SecondPageFragment())
+        fragments.put(2, ThirdPageFragment())
+        fragments.put(3, FourthPageFragment())
+        pagerAdapter = PagerAdapter(supportFragmentManager, fragments)
+    }
+
     private fun setupLayout() {
         if (ScreenHelper.isDualMode(this)) {
             useDualMode()

TwoPage/src/main/java/com/microsoft/device/display/samples/twopage/PagerAdapter.kt

@@ -12,7 +12,7 @@ import androidx.fragment.app.FragmentPagerAdapter
 
 internal class PagerAdapter(
     fm: FragmentManager?,
-    private val fragments: SparseArray<TestFragment>
+    private val fragments: SparseArray<Fragment>
 ) : FragmentPagerAdapter(fm!!, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
     private var showTwoPages = false
     override fun getItem(position: Int): Fragment {

TwoPage/src/main/java/com/microsoft/device/display/samples/twopage/TestFragment.kt

@@ -0,0 +1,19 @@
+package com.microsoft.device.display.samples.twopage.fragments
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+import com.microsoft.device.display.samples.twopage.R
+
+class FirstPageFragment : Fragment() {
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        // Inflate the layout for this fragment
+        return inflater.inflate(R.layout.fragment_first_page, container, false)
+    }
+}

TwoPage/src/main/java/com/microsoft/device/display/samples/twopage/fragments/FirstPageFragment.kt

@@ -0,0 +1,19 @@
+package com.microsoft.device.display.samples.twopage.fragments
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+import com.microsoft.device.display.samples.twopage.R
+
+class FourthPageFragment : Fragment() {
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        // Inflate the layout for this fragment
+        return inflater.inflate(R.layout.fragment_fourth_page, container, false)
+    }
+}

TwoPage/src/main/java/com/microsoft/device/display/samples/twopage/fragments/FourthPageFragment.kt

@@ -0,0 +1,20 @@
+package com.microsoft.device.display.samples.twopage.fragments
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+import com.microsoft.device.display.samples.twopage.R
+
+class SecondPageFragment : Fragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        // Inflate the layout for this fragment
+        return inflater.inflate(R.layout.fragment_second_page, container, false)
+    }
+}

TwoPage/src/main/java/com/microsoft/device/display/samples/twopage/fragments/SecondPageFragment.kt

@@ -0,0 +1,19 @@
+package com.microsoft.device.display.samples.twopage.fragments
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+import com.microsoft.device.display.samples.twopage.R
+
+class ThirdPageFragment : Fragment() {
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        // Inflate the layout for this fragment
+        return inflater.inflate(R.layout.fragment_third_page, container, false)
+    }
+}