Browse Source

Merge branch 'mediabox-layout' into mediabox

Wayne 5 years ago
parent
commit
72ff6e1652
28 changed files with 267 additions and 46 deletions
  1. 15 15
      reader/src/main/java/com/kdanmobile/reader/ReaderActivity.kt
  2. 113 10
      reader/src/main/java/com/kdanmobile/reader/screen/view/ViewerEditView.kt
  3. BIN
      reader/src/main/res/drawable-hdpi/ic_chevron_left.png
  4. BIN
      reader/src/main/res/drawable-hdpi/ic_chevron_right.png
  5. BIN
      reader/src/main/res/drawable-hdpi/ic_kdan_cloud.png
  6. BIN
      reader/src/main/res/drawable-hdpi/ic_view_all.png
  7. BIN
      reader/src/main/res/drawable-xhdpi/ic_chevron_left.png
  8. BIN
      reader/src/main/res/drawable-xhdpi/ic_chevron_right.png
  9. BIN
      reader/src/main/res/drawable-xhdpi/ic_kdan_cloud.png
  10. BIN
      reader/src/main/res/drawable-xhdpi/ic_view_all.png
  11. BIN
      reader/src/main/res/drawable-xxhdpi/ic_chevron_left.png
  12. BIN
      reader/src/main/res/drawable-xxhdpi/ic_chevron_right.png
  13. BIN
      reader/src/main/res/drawable-xxhdpi/ic_kdan_cloud.png
  14. BIN
      reader/src/main/res/drawable-xxhdpi/ic_view_all.png
  15. 7 0
      reader/src/main/res/drawable/ic_kdancloud.xml
  16. 14 0
      reader/src/main/res/drawable/ic_next.xml
  17. 14 0
      reader/src/main/res/drawable/ic_prev.xml
  18. 13 0
      reader/src/main/res/drawable/ic_share.xml
  19. 13 0
      reader/src/main/res/drawable/ic_viewall.xml
  20. 13 0
      reader/src/main/res/drawable/ic_work.xml
  21. 1 1
      reader/src/main/res/drawable/shape_rec_w_up_rcorner.xml
  22. 22 14
      reader/src/main/res/layout/activity_reader.xml
  23. 22 6
      reader/src/main/res/layout/view_viewer_edit.xml
  24. 3 0
      reader/src/main/res/values-land/dimens.xml
  25. 7 0
      reader/src/main/res/values-land/styles_media_box.xml
  26. 2 0
      reader/src/main/res/values/colors.xml
  27. 2 0
      reader/src/main/res/values/dimens.xml
  28. 6 0
      reader/src/main/res/values/styles_media_box.xml

+ 15 - 15
reader/src/main/java/com/kdanmobile/reader/ReaderActivity.kt

@@ -225,7 +225,6 @@ abstract class ReaderActivity : AppCompatActivity() {
             AnimationUtil.hideViewFromTopToBottom(viewGroup_readerActivity_bottomToolbar, UI_ANIMATION_DURATION)
             AnimationUtil.hideViewFromTopToBottom(viewGroup_readerActivity_bottomToolbar, UI_ANIMATION_DURATION)
             AnimationUtil.hideViewFromRightToLeft(viewGroup_readerActivity_leftToolbar, UI_ANIMATION_DURATION)
             AnimationUtil.hideViewFromRightToLeft(viewGroup_readerActivity_leftToolbar, UI_ANIMATION_DURATION)
             AnimationUtil.hideViewFromLeftToRight(viewGroup_readerActivity_rightToolbar, UI_ANIMATION_DURATION)
             AnimationUtil.hideViewFromLeftToRight(viewGroup_readerActivity_rightToolbar, UI_ANIMATION_DURATION)
-            viewerEditView.visibility = View.GONE
             hideSearchViewSoftKeyboard()
             hideSearchViewSoftKeyboard()
         } else {
         } else {
             constrainLayout_readerActivity_root.applyConstraintSet(this, R.layout.activity_reader_hide_all, UI_ANIMATION_DURATION)
             constrainLayout_readerActivity_root.applyConstraintSet(this, R.layout.activity_reader_hide_all, UI_ANIMATION_DURATION)
@@ -330,6 +329,10 @@ abstract class ReaderActivity : AppCompatActivity() {
         alertDialogBuilder.create().show()
         alertDialogBuilder.create().show()
     }
     }
 
 
+    private fun showMediaBox() {
+        viewerEditView.show()
+    }
+
     private fun hideSearchViewSoftKeyboard() {
     private fun hideSearchViewSoftKeyboard() {
         val view = linearLayout_readerActivity_leftToolbarContainer.getChildAt(0)
         val view = linearLayout_readerActivity_leftToolbarContainer.getChildAt(0)
         if (view is SearchView) {
         if (view is SearchView) {
@@ -353,24 +356,13 @@ abstract class ReaderActivity : AppCompatActivity() {
     }
     }
 
 
     private fun setupBottomToolbar() {
     private fun setupBottomToolbar() {
-        val context = this
-        /** Set buttons color **/
-        val normalColor = R.color.reader_bottom_toolbar_bottom_color_normal
-        val pressColor = R.color.reader_bottom_toolbar_bottom_color_press
-        Utils.setTintDrawableList(context, ib_readerActivity_bottomToolbarPrevious, R.drawable.ic_chevron_left, normalColor, pressColor)
-        Utils.setTintDrawableList(context, ib_readerActivity_bottomToolbarNext, R.drawable.ic_chevron_right, normalColor, pressColor)
-        Utils.setTintDrawableList(context, ib_readerActivity_bottomToolbarBookmark, R.drawable.ic_bookmark_border, normalColor, pressColor)
-        Utils.setTintDrawableList(context, ib_readerActivity_bottomToolbarViewAll, R.drawable.ic_view_all, normalColor, pressColor)
-        Utils.setTintDrawableList(context, ib_readerActivity_bottomToolbarKdanCloud, R.drawable.ic_kdan_cloud, normalColor, pressColor)
+        ib_readerActivity_bottomToolbarMediaBox.setOnClickListener { showMediaBox() }
     }
     }
 
 
     private fun setupViewerEditView() {
     private fun setupViewerEditView() {
-
-        ib_readerActivity_bottomToolbarKdanCloud.setOnClickListener {
-            viewerEditView.visibility = View.VISIBLE
-        }
-
         viewerEditView.apply {
         viewerEditView.apply {
+            onShowListener = Runnable { onMediaBoxShown() }
+            onDismissListener = Runnable { onMediaBoxDismissed() }
             onViewerEditTabAddButtonClickListener = object : ViewerEditView.OnViewerEditTabAddButtonClickListener {
             onViewerEditTabAddButtonClickListener = object : ViewerEditView.OnViewerEditTabAddButtonClickListener {
                 override fun onTabTextBoxAddButtonClick(textBoxTabView: TextBoxTabView) {
                 override fun onTabTextBoxAddButtonClick(textBoxTabView: TextBoxTabView) {
                     hideAllToolbars()
                     hideAllToolbars()
@@ -426,6 +418,14 @@ abstract class ReaderActivity : AppCompatActivity() {
         cloneOriginConstraintSet()
         cloneOriginConstraintSet()
     }
     }
 
 
+    private fun onMediaBoxShown() {
+        hideAllToolbars()
+    }
+
+    private fun onMediaBoxDismissed() {
+        showAllToolbars()
+    }
+
     private fun onThumbnailClick() {
     private fun onThumbnailClick() {
         val type = LeftToolbarType.THUMBNAIL
         val type = LeftToolbarType.THUMBNAIL
         changeLeftToolbarType(type)
         changeLeftToolbarType(type)

+ 113 - 10
reader/src/main/java/com/kdanmobile/reader/screen/view/ViewerEditView.kt

@@ -1,43 +1,146 @@
 package com.kdanmobile.reader.screen.view
 package com.kdanmobile.reader.screen.view
 
 
+import android.animation.*
 import android.content.Context
 import android.content.Context
+import android.graphics.Color
 import android.support.constraint.ConstraintLayout
 import android.support.constraint.ConstraintLayout
 import android.support.v4.content.ContextCompat
 import android.support.v4.content.ContextCompat
 import android.util.AttributeSet
 import android.util.AttributeSet
 import android.view.LayoutInflater
 import android.view.LayoutInflater
 import android.view.View
 import android.view.View
+import android.view.View.OnClickListener
+import android.view.animation.AccelerateDecelerateInterpolator
 import android.widget.ImageButton
 import android.widget.ImageButton
 import com.kdanmobile.reader.R
 import com.kdanmobile.reader.R
 import com.kdanmobile.reader.screen.view.edit.*
 import com.kdanmobile.reader.screen.view.edit.*
 import kotlinx.android.synthetic.main.view_viewer_edit.view.*
 import kotlinx.android.synthetic.main.view_viewer_edit.view.*
 import kotlinx.android.synthetic.main.view_viewer_edit_tab.view.*
 import kotlinx.android.synthetic.main.view_viewer_edit_tab.view.*
 
 
-class ViewerEditView : ConstraintLayout {
+class ViewerEditView @JvmOverloads constructor(
+        context: Context,
+        attrs: AttributeSet? = null,
+        defStyleAttr: Int = 0
+): ConstraintLayout(context, attrs, defStyleAttr) {
+
+    private companion object {
+        const val COLOR_DISMISS = Color.TRANSPARENT
+        val COLOR_SHOW = Color.parseColor("#42000000")
+        const val DEFAULT_DURATION_ANIMATION = 300L
+    }
 
 
     private enum class ViewerEditTabType {
     private enum class ViewerEditTabType {
         NONE, TEXT_BOX, SIGNATURE, STAMP, SHAPE, FORM
         NONE, TEXT_BOX, SIGNATURE, STAMP, SHAPE, FORM
     }
     }
 
 
+    var onShowListener: Runnable? = null
+    var onDismissListener: Runnable? = null
+    var animationDuration = DEFAULT_DURATION_ANIMATION
+
+    private var mediaBoxAnimator: ObjectAnimator? = null
+    private var maskAnimator: ValueAnimator? = null
     private var tabType = ViewerEditTabType.NONE
     private var tabType = ViewerEditTabType.NONE
     private var selected: ImageButton? = null
     private var selected: ImageButton? = null
     var onViewerEditTabAddButtonClickListener: OnViewerEditTabAddButtonClickListener? = null
     var onViewerEditTabAddButtonClickListener: OnViewerEditTabAddButtonClickListener? = null
 
 
-    constructor(context: Context) : super(context) {
-        initView()
+    init {
+        LayoutInflater.from(context).inflate(R.layout.view_viewer_edit, this)
+        visibility = View.INVISIBLE
+        setupTabView()
+
+        /** Set empty listener to prevent dismissing by clicking box **/
+        view_viewEdit_content.setOnClickListener {}
+
+        /** Move media box view to bottom of parent(hide it) **/
+        val size = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
+        val v = view_viewEdit_content
+        v.measure(size, size)
+        v.y = v.top + v.measuredHeight.toFloat()
     }
     }
 
 
-    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
-        initView()
+    fun show() {
+        visibility = View.VISIBLE
+        setOnClickListener { dismiss() }
+        post {
+            showMaskWithAnimation()
+            showMediaBoxWithAnimation()
+        }
+        onShowListener?.run()
     }
     }
 
 
-    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {
-        initView()
+    fun dismiss() {
+        setOnClickListener(null)
+        hideMaskWithAnimation()
+        hideMediaBoxWithAnimation()
+        onDismissListener?.run()
     }
     }
 
 
-    private fun initView() {
-        LayoutInflater.from(context).inflate(R.layout.view_viewer_edit, this)
+    private fun showMaskWithAnimation() {
+        maskAnimator?.cancel()
+        val from = maskAnimator?.animatedValue ?: COLOR_DISMISS
+        val to = COLOR_SHOW
+        maskAnimator = ValueAnimator.ofObject(ArgbEvaluator(), from, to).apply {
+            duration = DEFAULT_DURATION_ANIMATION
+            interpolator = AccelerateDecelerateInterpolator()
+            addUpdateListener {
+                setBackgroundColor(it.animatedValue as Int)
+            }
+            start()
+        }
+    }
 
 
-        setupTabView()
+    private fun hideMaskWithAnimation() {
+        maskAnimator?.cancel()
+        val from = maskAnimator?.animatedValue ?: COLOR_SHOW
+        val to = COLOR_DISMISS
+        maskAnimator = ValueAnimator.ofObject(ArgbEvaluator(), from, to).apply {
+            duration = DEFAULT_DURATION_ANIMATION
+            interpolator = AccelerateDecelerateInterpolator()
+            addUpdateListener {
+                setBackgroundColor(it.animatedValue as Int)
+            }
+            start()
+        }
+    }
+
+    private fun showMediaBoxWithAnimation() {
+        mediaBoxAnimator?.cancel()
+        val v = view_viewEdit_content
+        v.visibility = View.VISIBLE
+        val from = v.y
+        val to = v.top.toFloat()
+        val holder = PropertyValuesHolder.ofFloat("Y", from, to)
+        mediaBoxAnimator = ObjectAnimator.ofPropertyValuesHolder(v, holder).apply {
+            interpolator = AccelerateDecelerateInterpolator()
+            duration = animationDuration
+            addListener(object : AnimatorListenerAdapter() {
+                override fun onAnimationEnd(animation: Animator?) {
+                    super.onAnimationEnd(animation)
+                    removeListener(this)
+                }
+            })
+            start()
+        }
+    }
+
+    private fun hideMediaBoxWithAnimation() {
+        mediaBoxAnimator?.cancel()
+        val v = view_viewEdit_content
+        val from = v.y
+        val to = v.top.toFloat() + v.height
+        val holder = PropertyValuesHolder.ofFloat("Y", from, to)
+        mediaBoxAnimator = ObjectAnimator.ofPropertyValuesHolder(v, holder).apply {
+            interpolator = AccelerateDecelerateInterpolator()
+            duration = animationDuration
+            addListener(object : AnimatorListenerAdapter() {
+                override fun onAnimationEnd(animation: Animator?) {
+                    super.onAnimationEnd(animation)
+                    removeListener(this)
+                    v.visibility = View.INVISIBLE
+                    this@ViewerEditView.visibility = View.GONE
+                }
+            })
+            start()
+        }
     }
     }
 
 
     private fun setupTabView() {
     private fun setupTabView() {

BIN
reader/src/main/res/drawable-hdpi/ic_chevron_left.png


BIN
reader/src/main/res/drawable-hdpi/ic_chevron_right.png


BIN
reader/src/main/res/drawable-hdpi/ic_kdan_cloud.png


BIN
reader/src/main/res/drawable-hdpi/ic_view_all.png


BIN
reader/src/main/res/drawable-xhdpi/ic_chevron_left.png


BIN
reader/src/main/res/drawable-xhdpi/ic_chevron_right.png


BIN
reader/src/main/res/drawable-xhdpi/ic_kdan_cloud.png


BIN
reader/src/main/res/drawable-xhdpi/ic_view_all.png


BIN
reader/src/main/res/drawable-xxhdpi/ic_chevron_left.png


BIN
reader/src/main/res/drawable-xxhdpi/ic_chevron_right.png


BIN
reader/src/main/res/drawable-xxhdpi/ic_kdan_cloud.png


BIN
reader/src/main/res/drawable-xxhdpi/ic_view_all.png


File diff suppressed because it is too large
+ 7 - 0
reader/src/main/res/drawable/ic_kdancloud.xml


+ 14 - 0
reader/src/main/res/drawable/ic_next.xml

@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M10,6l-1.41,1.41l4.58,4.59l-4.58,4.59l1.41,1.41l6,-6z"
+      android:strokeAlpha="0.6"
+      android:strokeWidth="1"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"
+      android:fillAlpha="0.6"/>
+</vector>

+ 14 - 0
reader/src/main/res/drawable/ic_prev.xml

@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M15.41,7.41l-1.41,-1.41l-6,6l6,6l1.41,-1.41l-4.58,-4.59z"
+      android:strokeAlpha="0.6"
+      android:strokeWidth="1"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"
+      android:fillAlpha="0.6"/>
+</vector>

File diff suppressed because it is too large
+ 13 - 0
reader/src/main/res/drawable/ic_share.xml


+ 13 - 0
reader/src/main/res/drawable/ic_viewall.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M4,11L4,4L11,4L11,11L4,11ZM4,13L11,13L11,20L4,20L4,13ZM20,11L13,11L13,4L20,4L20,11ZM20,13L20,20L13,20L13,13L20,13Z"
+      android:strokeWidth="1"
+      android:fillColor="#000000"
+      android:fillAlpha="0.6"
+      android:fillType="nonZero"
+      android:strokeColor="#00000000"/>
+</vector>

+ 13 - 0
reader/src/main/res/drawable/ic_work.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M14,6L14,4L10,4L10,6L14,6ZM4,8L4,19L20,19L20,8L4,8ZM20,6C21.11,6 22,6.89 22,8L22,19C22,20.11 21.11,21 20,21L4,21C2.89,21 2,20.11 2,19L2.01,8C2.01,6.89 2.89,6 4,6L8,6L8,4C8,2.89 8.89,2 10,2L14,2C15.11,2 16,2.89 16,4L16,6L20,6Z"
+      android:strokeWidth="1"
+      android:fillColor="#000000"
+      android:fillAlpha="0.6"
+      android:fillType="nonZero"
+      android:strokeColor="#00000000"/>
+</vector>

+ 1 - 1
reader/src/main/res/drawable/shape_rec_w_up_rcorner.xml

@@ -2,7 +2,7 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
     android:shape="rectangle">
 
 
-    <solid android:color="#ffffff" />
+    <solid android:color="@color/reader_media_box_bg" />
 
 
     <corners
     <corners
         android:topLeftRadius="12dp"
         android:topLeftRadius="12dp"

+ 22 - 14
reader/src/main/res/layout/activity_reader.xml

@@ -242,7 +242,7 @@
     </com.kdanmobile.reader.HorizontalView>
     </com.kdanmobile.reader.HorizontalView>
     <android.support.constraint.ConstraintLayout
     <android.support.constraint.ConstraintLayout
         android:id="@+id/viewGroup_readerActivity_bottomToolbar"
         android:id="@+id/viewGroup_readerActivity_bottomToolbar"
-        android:background="@color/black_54"
+        android:background="@color/reader_bottom_toolbar_bg"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"
@@ -251,36 +251,44 @@
         <android.support.v7.widget.AppCompatImageButton
         <android.support.v7.widget.AppCompatImageButton
             android:id="@+id/ib_readerActivity_bottomToolbarPrevious"
             android:id="@+id/ib_readerActivity_bottomToolbarPrevious"
             style="@style/ReaderBottomToolbarImageButton"
             style="@style/ReaderBottomToolbarImageButton"
-            android:src="@drawable/ic_chevron_left"
+            android:src="@drawable/ic_prev"
             app:layout_constraintLeft_toLeftOf="parent"
             app:layout_constraintLeft_toLeftOf="parent"
-            app:layout_constraintRight_toLeftOf="@id/ib_readerActivity_bottomToolbarNext"
+            app:layout_constraintRight_toLeftOf="@id/ib_readerActivity_bottomToolbarShare"
+            app:layout_constraintHorizontal_chainStyle="spread"
             />
             />
         <android.support.v7.widget.AppCompatImageButton
         <android.support.v7.widget.AppCompatImageButton
-            android:id="@+id/ib_readerActivity_bottomToolbarNext"
+            android:id="@+id/ib_readerActivity_bottomToolbarShare"
             style="@style/ReaderBottomToolbarImageButton"
             style="@style/ReaderBottomToolbarImageButton"
-            android:src="@drawable/ic_chevron_right"
+            android:src="@drawable/ic_share"
             app:layout_constraintLeft_toRightOf="@id/ib_readerActivity_bottomToolbarPrevious"
             app:layout_constraintLeft_toRightOf="@id/ib_readerActivity_bottomToolbarPrevious"
-            app:layout_constraintRight_toLeftOf="@id/ib_readerActivity_bottomToolbarBookmark"
+            app:layout_constraintRight_toLeftOf="@id/ib_readerActivity_bottomToolbarKdanCloud"
             />
             />
         <android.support.v7.widget.AppCompatImageButton
         <android.support.v7.widget.AppCompatImageButton
-            android:id="@+id/ib_readerActivity_bottomToolbarBookmark"
+            android:id="@+id/ib_readerActivity_bottomToolbarKdanCloud"
             style="@style/ReaderBottomToolbarImageButton"
             style="@style/ReaderBottomToolbarImageButton"
-            android:src="@drawable/ic_bookmark_border"
-            app:layout_constraintLeft_toRightOf="@id/ib_readerActivity_bottomToolbarNext"
+            android:src="@drawable/ic_kdancloud"
+            app:layout_constraintLeft_toRightOf="@id/ib_readerActivity_bottomToolbarShare"
             app:layout_constraintRight_toLeftOf="@id/ib_readerActivity_bottomToolbarViewAll"
             app:layout_constraintRight_toLeftOf="@id/ib_readerActivity_bottomToolbarViewAll"
             />
             />
         <android.support.v7.widget.AppCompatImageButton
         <android.support.v7.widget.AppCompatImageButton
             android:id="@+id/ib_readerActivity_bottomToolbarViewAll"
             android:id="@+id/ib_readerActivity_bottomToolbarViewAll"
             style="@style/ReaderBottomToolbarImageButton"
             style="@style/ReaderBottomToolbarImageButton"
-            android:src="@drawable/ic_view_all"
-            app:layout_constraintLeft_toRightOf="@id/ib_readerActivity_bottomToolbarBookmark"
-            app:layout_constraintRight_toLeftOf="@id/ib_readerActivity_bottomToolbarKdanCloud"
+            android:src="@drawable/ic_viewall"
+            app:layout_constraintLeft_toRightOf="@id/ib_readerActivity_bottomToolbarKdanCloud"
+            app:layout_constraintRight_toLeftOf="@id/ib_readerActivity_bottomToolbarMediaBox"
             />
             />
         <android.support.v7.widget.AppCompatImageButton
         <android.support.v7.widget.AppCompatImageButton
-            android:id="@+id/ib_readerActivity_bottomToolbarKdanCloud"
+            android:id="@+id/ib_readerActivity_bottomToolbarMediaBox"
             style="@style/ReaderBottomToolbarImageButton"
             style="@style/ReaderBottomToolbarImageButton"
-            android:src="@drawable/ic_kdan_cloud"
+            android:src="@drawable/ic_work"
             app:layout_constraintLeft_toRightOf="@id/ib_readerActivity_bottomToolbarViewAll"
             app:layout_constraintLeft_toRightOf="@id/ib_readerActivity_bottomToolbarViewAll"
+            app:layout_constraintRight_toLeftOf="@id/ib_readerActivity_bottomToolbarNext"
+            />
+        <android.support.v7.widget.AppCompatImageButton
+            android:id="@+id/ib_readerActivity_bottomToolbarNext"
+            style="@style/ReaderBottomToolbarImageButton"
+            android:src="@drawable/ic_next"
+            app:layout_constraintLeft_toRightOf="@id/ib_readerActivity_bottomToolbarMediaBox"
             app:layout_constraintRight_toRightOf="parent"
             app:layout_constraintRight_toRightOf="parent"
             />
             />
     </android.support.constraint.ConstraintLayout>
     </android.support.constraint.ConstraintLayout>

+ 22 - 6
reader/src/main/res/layout/view_viewer_edit.xml

@@ -3,12 +3,17 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_height="match_parent"
-    android:background="#42000000">
+    xmlns:tools="http://schemas.android.com/tools"
+    android:background="@android:color/transparent">
 
 
     <android.support.constraint.ConstraintLayout
     <android.support.constraint.ConstraintLayout
-        android:layout_width="360dp"
-        android:layout_height="336dp"
-        android:background="@drawable/shape_rec_w_up_rcorner"
+        style="@style/MediaBoxStyle"
+        android:id="@+id/view_viewEdit_content"
+        tools:visibility="visible"
+        tools:background="#AA00CC"
+        android:visibility="invisible"
+        android:layout_width="0dp"
+        android:layout_height="@dimen/reader_media_box_height"
         android:elevation="4dp"
         android:elevation="4dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintLeft_toLeftOf="parent"
@@ -20,10 +25,21 @@
             android:layout_height="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginLeft="4dp"
             android:layout_marginLeft="4dp"
             android:layout_marginStart="4dp"
             android:layout_marginStart="4dp"
-            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintLeft_toLeftOf="parent"
             app:layout_constraintLeft_toLeftOf="parent"
+            app:layout_constraintRight_toRightOf="@id/view_viewerEdit_divider"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
             app:layout_constraintTop_toTopOf="parent" />
 
 
+        <View
+            android:id="@+id/view_viewerEdit_divider"
+            android:background="#1e000000"
+            app:layout_constraintLeft_toRightOf="@+id/viewerEdit_tab"
+            app:layout_constraintRight_toLeftOf="@id/viewEdit_layout_tab_content"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintBottom_toBottomOf="parent"
+            android:layout_width="1dp"
+            android:layout_height="0dp" />
+
         <android.support.constraint.ConstraintLayout
         <android.support.constraint.ConstraintLayout
             android:id="@+id/viewEdit_layout_tab_content"
             android:id="@+id/viewEdit_layout_tab_content"
             android:layout_width="0dp"
             android:layout_width="0dp"
@@ -33,7 +49,7 @@
             android:layout_marginTop="12dp"
             android:layout_marginTop="12dp"
             android:background="@android:color/darker_gray"
             android:background="@android:color/darker_gray"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintLeft_toRightOf="@+id/viewerEdit_tab"
+            app:layout_constraintLeft_toRightOf="@+id/view_viewerEdit_divider"
             app:layout_constraintRight_toRightOf="parent"
             app:layout_constraintRight_toRightOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
             app:layout_constraintTop_toTopOf="parent" />
 
 

+ 3 - 0
reader/src/main/res/values-land/dimens.xml

@@ -0,0 +1,3 @@
+<resources>
+    <dimen name="reader_media_box_height">0dp</dimen>
+</resources>

+ 7 - 0
reader/src/main/res/values-land/styles_media_box.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="MediaBoxStyle">
+        <item name="layout_constraintTop_toTopOf">parent</item>
+        <item name="android:background">@color/reader_media_box_bg</item>
+    </style>
+</resources>

+ 2 - 0
reader/src/main/res/values/colors.xml

@@ -6,6 +6,8 @@
     <color name="picton_blue">#30AFFD</color>
     <color name="picton_blue">#30AFFD</color>
 
 
     <color name="reader_toolbar_bg">#D0FFFFFF</color>
     <color name="reader_toolbar_bg">#D0FFFFFF</color>
+    <color name="reader_bottom_toolbar_bg">#FFFFFF</color>
+    <color name="reader_media_box_bg">#FFFFFF</color>
     <color name="reader_toolbar_title_color">#E2000000</color>
     <color name="reader_toolbar_title_color">#E2000000</color>
     <color name="reader_bottom_toolbar_bottom_color_normal">#FFFFFF</color>
     <color name="reader_bottom_toolbar_bottom_color_normal">#FFFFFF</color>
     <color name="reader_bottom_toolbar_bottom_color_press">@color/picton_blue</color>
     <color name="reader_bottom_toolbar_bottom_color_press">@color/picton_blue</color>

+ 2 - 0
reader/src/main/res/values/dimens.xml

@@ -1,3 +1,5 @@
 <resources>
 <resources>
     <dimen name="reader_left_right_toolbar_icon_width">48dp</dimen>
     <dimen name="reader_left_right_toolbar_icon_width">48dp</dimen>
+
+    <dimen name="reader_media_box_height">336dp</dimen>
 </resources>
 </resources>

+ 6 - 0
reader/src/main/res/values/styles_media_box.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="MediaBoxStyle">
+        <item name="android:background">@drawable/shape_rec_w_up_rcorner</item>
+    </style>
+</resources>