Merge pull request #12067 from nextcloud/feature/use-m3-GalleryFragmentBottomSheetDialog

Use Material Design 3 For Gallery Bottom Sheet

app/src/main/java/com/owncloud/android/ui/fragment/GalleryFragmentBottomSheetDialog.kt

@@ -24,24 +24,24 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialogFragment
+import com.nextcloud.android.common.ui.theme.utils.ColorRole
 import com.nextcloud.client.di.Injectable
+import com.owncloud.android.R
 import com.owncloud.android.databinding.FragmentGalleryBottomSheetBinding
 import com.owncloud.android.utils.theme.ViewThemeUtils
 import javax.inject.Inject
 
 class GalleryFragmentBottomSheetDialog(
     private val actions: GalleryFragmentBottomSheetActions
-) : BottomSheetDialogFragment(), Injectable {
+) : BottomSheetDialogFragment(R.layout.fragment_gallery_bottom_sheet), Injectable {
     @Inject
     lateinit var viewThemeUtils: ViewThemeUtils
 
     private lateinit var binding: FragmentGalleryBottomSheetBinding
-    private lateinit var mBottomBehavior: BottomSheetBehavior<*>
     private var currentMediaState: MediaState = MediaState.MEDIA_STATE_DEFAULT
 
-    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
+    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
         binding = FragmentGalleryBottomSheetBinding.inflate(layoutInflater, container, false)
         return binding.root
     }
@@ -50,43 +50,44 @@ class GalleryFragmentBottomSheetDialog(
         super.onViewCreated(view, savedInstanceState)
         setupLayout()
         setupClickListener()
-        mBottomBehavior = BottomSheetBehavior.from(binding.root.parent as View)
     }
 
-    public override fun onStart() {
-        super.onStart()
-        mBottomBehavior.state = BottomSheetBehavior.STATE_EXPANDED
-    }
+    private fun setupLayout() {
+        viewThemeUtils.platform.colorViewBackground(binding.bottomSheet, ColorRole.SURFACE)
 
-    fun setupLayout() {
         listOf(
             binding.tickMarkShowImages,
-            binding.tickMarkShowVideo,
-            binding.hideImagesImageview,
-            binding.hideVideoImageView,
-            binding.selectMediaFolderImageView
+            binding.tickMarkShowVideos
+        ).forEach {
+            viewThemeUtils.platform.colorImageView(it, ColorRole.PRIMARY)
+        }
+
+        listOf(
+            binding.btnSelectMediaFolder,
+            binding.btnHideVideos,
+            binding.btnHideImages
         ).forEach {
-            viewThemeUtils.platform.colorImageView(it)
+            viewThemeUtils.material.colorMaterialButtonText(it)
         }
 
         when (currentMediaState) {
             MediaState.MEDIA_STATE_PHOTOS_ONLY -> {
                 binding.tickMarkShowImages.visibility = View.VISIBLE
-                binding.tickMarkShowVideo.visibility = View.GONE
+                binding.tickMarkShowVideos.visibility = View.GONE
             }
             MediaState.MEDIA_STATE_VIDEOS_ONLY -> {
                 binding.tickMarkShowImages.visibility = View.GONE
-                binding.tickMarkShowVideo.visibility = View.VISIBLE
+                binding.tickMarkShowVideos.visibility = View.VISIBLE
             }
             else -> {
                 binding.tickMarkShowImages.visibility = View.VISIBLE
-                binding.tickMarkShowVideo.visibility = View.VISIBLE
+                binding.tickMarkShowVideos.visibility = View.VISIBLE
             }
         }
     }
 
     private fun setupClickListener() {
-        binding.hideImages.setOnClickListener { v: View? ->
+        binding.btnHideImages.setOnClickListener {
             currentMediaState = if (currentMediaState == MediaState.MEDIA_STATE_VIDEOS_ONLY) {
                 MediaState.MEDIA_STATE_DEFAULT
             } else {
@@ -95,7 +96,7 @@ class GalleryFragmentBottomSheetDialog(
             notifyStateChange()
             dismiss()
         }
-        binding.hideVideo.setOnClickListener { v: View? ->
+        binding.btnHideVideos.setOnClickListener {
             currentMediaState = if (currentMediaState == MediaState.MEDIA_STATE_PHOTOS_ONLY) {
                 MediaState.MEDIA_STATE_DEFAULT
             } else {
@@ -104,7 +105,7 @@ class GalleryFragmentBottomSheetDialog(
             notifyStateChange()
             dismiss()
         }
-        binding.selectMediaFolder.setOnClickListener { v: View? ->
+        binding.btnSelectMediaFolder.setOnClickListener {
             actions.selectMediaFolder()
             dismiss()
         }

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

@@ -1,5 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
+<?xml version="1.0" encoding="utf-8"?><!--
  Nextcloud Android client application
 
  @author TSI-mc
@@ -19,129 +18,131 @@
  You should have received a copy of the GNU Affero General Public License
  along with this program. If not, see <https://www.gnu.org/licenses/>.
  -->
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.coordinatorlayout.widget.CoordinatorLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:orientation="vertical"
-    android:paddingBottom="@dimen/standard_half_padding">
+    android:layout_height="match_parent">
 
-    <RelativeLayout
-        android:id="@+id/hideImages"
+    <FrameLayout
+        style="@style/Widget.Material3.BottomSheet"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:background="?android:attr/selectableItemBackground"
-        android:orientation="horizontal"
-        android:paddingLeft="@dimen/standard_padding"
-        android:paddingTop="@dimen/standard_padding"
-        android:paddingRight="@dimen/standard_padding"
-        android:paddingBottom="@dimen/standard_half_padding">
-
-        <ImageView
-            android:id="@+id/hideImagesImageview"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:contentDescription="@null"
-            android:src="@drawable/ic_camera"
-            app:tint="@color/primary" />
+        android:layout_height="match_parent"
+        app:behavior_peekHeight="350dp"
+        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
 
-        <TextView
-            android:id="@+id/hideImagesTextview"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:layout_marginStart="@dimen/standard_margin"
-            android:layout_marginEnd="30dp"
-            android:layout_toEndOf="@id/hideImagesImageview"
-            android:text="@string/show_images"
-            android:textColor="@color/text_color"
-            android:textSize="@dimen/bottom_sheet_text_size" />
-
-        <ImageView
-            android:id="@+id/tickMarkShowImages"
-            android:layout_width="24dp"
-            android:layout_height="24dp"
-            android:layout_alignParentEnd="true"
-            android:contentDescription="@null"
-            android:src="@drawable/ic_tick"
-            android:visibility="gone"
-            app:tint="@color/primary"
-            tools:visibility="visible" />
-
-
-    </RelativeLayout>
-
-    <RelativeLayout
-        android:id="@+id/hideVideo"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:background="?android:attr/selectableItemBackground"
-        android:orientation="horizontal"
-        android:paddingLeft="@dimen/standard_padding"
-        android:paddingTop="@dimen/standard_half_padding"
-        android:paddingRight="@dimen/standard_padding"
-        android:paddingBottom="@dimen/standard_half_padding">
-
-        <ImageView
-            android:id="@+id/hideVideoImageView"
-            android:layout_width="wrap_content"
+        <LinearLayout
+            android:id="@+id/bottom_sheet"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:contentDescription="@null"
-            android:src="@drawable/ic_video_camera"
-            app:tint="@color/primary" />
+            android:padding="@dimen/standard_padding"
+            android:orientation="vertical">
+
+            <com.google.android.material.bottomsheet.BottomSheetDragHandleView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content" />
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:gravity="center"
+                android:orientation="horizontal">
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/btn_hide_images"
+                    style="@style/Widget.Material3.Button.IconButton"
+                    android:layout_width="wrap_content"
+                    android:layout_weight="8"
+                    android:gravity="start"
+                    android:layout_height="wrap_content"
+                    android:text="@string/show_images"
+                    app:iconPadding="@dimen/standard_half_padding"
+                    android:textSize="@dimen/bottom_sheet_text_size"
+                    app:icon="@drawable/ic_camera" />
+
+                <View
+                    android:layout_width="0dp"
+                    android:layout_height="0dp"
+                    android:layout_weight="1"/>
+
+                <ImageView
+                    android:id="@+id/tickMarkShowImages"
+                    android:layout_width="24dp"
+                    android:layout_height="24dp"
+                    android:contentDescription="@null"
+                    android:src="@drawable/ic_tick"
+                    android:visibility="gone"
+                    app:tint="@color/primary"
+                    tools:visibility="visible" />
+
+
+            </LinearLayout>
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:gravity="center"
+                android:orientation="horizontal">
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/btn_hide_videos"
+                    style="@style/Widget.Material3.Button.IconButton"
+                    android:layout_width="wrap_content"
+                    android:layout_weight="8"
+                    android:gravity="start"
+                    android:layout_height="wrap_content"
+                    android:text="@string/show_video"
+                    app:iconPadding="@dimen/standard_half_padding"
+                    android:textSize="@dimen/bottom_sheet_text_size"
+                    app:icon="@drawable/ic_video_camera" />
+
+                <View
+                    android:layout_width="0dp"
+                    android:layout_height="0dp"
+                    android:layout_weight="1"/>
+
+                <ImageView
+                    android:id="@+id/tickMarkShowVideos"
+                    android:layout_width="24dp"
+                    android:layout_height="24dp"
+                    android:contentDescription="@null"
+                    android:src="@drawable/ic_tick"
+                    android:visibility="gone"
+                    app:tint="@color/primary"
+                    tools:visibility="visible" />
+
+            </LinearLayout>
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:gravity="center"
+                android:orientation="horizontal">
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/btn_select_media_folder"
+                    style="@style/Widget.Material3.Button.IconButton"
+                    android:layout_width="match_parent"
+                    android:gravity="start"
+                    android:layout_height="wrap_content"
+                    app:iconPadding="@dimen/standard_half_padding"
+                    android:text="@string/select_media_folder"
+                    android:textSize="@dimen/bottom_sheet_text_size"
+                    app:icon="@drawable/nav_photos" />
+
+                <View
+                    android:layout_width="0dp"
+                    android:layout_height="0dp"
+                    android:layout_weight="1"/>
+
+            </LinearLayout>
+
+        </LinearLayout>
+
+    </FrameLayout>
+
+</androidx.coordinatorlayout.widget.CoordinatorLayout>
 
-        <TextView
-            android:id="@+id/hideVideoTextview"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:layout_marginStart="@dimen/standard_margin"
-            android:layout_toEndOf="@id/hideVideoImageView"
-            android:text="@string/show_video"
-            android:textColor="@color/text_color"
-            android:textSize="@dimen/bottom_sheet_text_size" />
-
-        <ImageView
-            android:id="@+id/tickMarkShowVideo"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentEnd="true"
-            android:contentDescription="@null"
-            android:src="@drawable/ic_tick"
-            android:visibility="gone"
-            app:tint="@color/primary"
-            tools:visibility="visible" />
 
-    </RelativeLayout>
 
-    <LinearLayout
-        android:id="@+id/selectMediaFolder"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:background="?android:attr/selectableItemBackground"
-        android:orientation="horizontal"
-        android:paddingLeft="@dimen/standard_padding"
-        android:paddingTop="@dimen/standard_half_padding"
-        android:paddingRight="@dimen/standard_padding"
-        android:paddingBottom="@dimen/standard_half_padding">
-
-        <ImageView
-            android:id="@+id/selectMediaFolderImageView"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:contentDescription="@null"
-            android:src="@drawable/nav_photos"
-            app:tint="@color/primary" />
-
-        <TextView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:layout_marginStart="@dimen/standard_margin"
-            android:text="@string/select_media_folder"
-            android:textColor="@color/text_color"
-            android:textSize="@dimen/bottom_sheet_text_size" />
-    </LinearLayout>
-
-</LinearLayout>