For #15756 - Add a play/pause button in the tabs tray grid layout

Moved the previous layout in a new, bigger FrameLayout that would serve as a
buffer space for the play/pause button to be translated to the exterior.
Otherwise the button would be clipped.
upstream-sync
Mugurell 4 years ago committed by Gabriel Luong
parent 66210469c0
commit 482739ba8c

@ -2,114 +2,135 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
<!--
A FrameLayout here is an efficient way of having a views stack while allowing:
- a sufficient enough canvas for the play button to be outside translated
without it getting clipped by the GridLayoutManager.
- enough padding for the primary view that needs to be displayed with a border around it.
-->
<FrameLayout
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="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:cardBackgroundColor="@color/photonWhite"
app:cardCornerRadius="@dimen/tab_tray_grid_item_border_radius"
app:cardElevation="0dp"
app:strokeColor="@color/photonLightGrey30"
app:strokeWidth="1dp">
android:layout_height="202dp"
android:clipChildren="false"
android:clipToPadding="false"
android:importantForAccessibility="no"
android:padding="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/tab_item"
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="@+id/play_pause_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginTop="23dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/mozac_feature_media_notification_action_pause"
android:elevation="10dp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/media_state_play" />
android:layout_height="wrap_content"
android:layout_gravity="center"
android:importantForAccessibility="yes"
app:cardBackgroundColor="@color/photonWhite"
app:cardCornerRadius="@dimen/tab_tray_grid_item_border_radius"
app:cardElevation="0dp"
app:strokeColor="@color/photonLightGrey30"
app:strokeWidth="1dp">
<ImageView
android:id="@+id/mozac_browser_tabstray_favicon_icon"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginStart="8dp"
android:importantForAccessibility="no"
app:layout_constraintBottom_toTopOf="@id/horizonatal_divider"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/tab_item"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false">
<TextView
android:id="@+id/mozac_browser_tabstray_title"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:ellipsize="none"
android:fadingEdgeLength="25dp"
android:paddingHorizontal="7dp"
android:paddingVertical="5dp"
android:requiresFadingEdge="horizontal"
android:singleLine="true"
android:textColor="@color/photonInk80"
android:textSize="14sp"
android:visibility="visible"
app:layout_constraintEnd_toStartOf="@id/mozac_browser_tabstray_close"
app:layout_constraintStart_toEndOf="@id/mozac_browser_tabstray_favicon_icon"
app:layout_constraintTop_toTopOf="parent"
tools:text="Example Domain" />
<ImageView
android:id="@+id/mozac_browser_tabstray_favicon_icon"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginStart="8dp"
android:importantForAccessibility="no"
app:layout_constraintBottom_toTopOf="@id/horizonatal_divider"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatImageButton
android:id="@+id/mozac_browser_tabstray_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/close_tab"
app:layout_constraintBottom_toTopOf="@+id/horizonatal_divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/mozac_ic_close"
app:tint="@color/photonInk80" />
<TextView
android:id="@+id/mozac_browser_tabstray_title"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:ellipsize="none"
android:fadingEdgeLength="25dp"
android:paddingHorizontal="7dp"
android:paddingVertical="5dp"
android:requiresFadingEdge="horizontal"
android:singleLine="true"
android:textColor="@color/photonInk80"
android:textSize="14sp"
android:visibility="visible"
app:layout_constraintEnd_toStartOf="@id/mozac_browser_tabstray_close"
app:layout_constraintStart_toEndOf="@id/mozac_browser_tabstray_favicon_icon"
app:layout_constraintTop_toTopOf="parent"
tools:text="Example Domain" />
<View
android:id="@+id/horizonatal_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/photonLightGrey30"
app:layout_constraintTop_toBottomOf="@+id/mozac_browser_tabstray_title" />
<androidx.appcompat.widget.AppCompatImageButton
android:id="@+id/mozac_browser_tabstray_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/close_tab"
app:layout_constraintBottom_toTopOf="@+id/horizonatal_divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/mozac_ic_close"
app:tint="@color/photonInk80" />
<androidx.cardview.widget.CardView
android:id="@+id/mozac_browser_tabstray_card"
android:layout_width="match_parent"
android:layout_height="@dimen/tab_tray_grid_item_thumbnail_height"
android:backgroundTint="?tabTrayThumbnailItemBackground"
app:cardBackgroundColor="@color/photonWhite"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/horizonatal_divider">
<ImageView
android:id="@+id/default_tab_thumbnail"
<View
android:id="@+id/horizonatal_divider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:importantForAccessibility="no"
android:padding="22dp"
app:srcCompat="@drawable/mozac_ic_globe"
app:tint="?tabTrayThumbnailIcon" />
android:layout_height="1dp"
android:background="@color/photonLightGrey30"
app:layout_constraintTop_toBottomOf="@+id/mozac_browser_tabstray_title" />
<mozilla.components.browser.tabstray.thumbnail.TabThumbnailView
android:id="@+id/mozac_browser_tabstray_thumbnail"
<androidx.cardview.widget.CardView
android:id="@+id/mozac_browser_tabstray_card"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/mozac_browser_tabstray_open_tab" />
android:layout_height="@dimen/tab_tray_grid_item_thumbnail_height"
android:backgroundTint="?tabTrayThumbnailItemBackground"
app:cardBackgroundColor="@color/photonWhite"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/horizonatal_divider">
<ImageView
android:id="@+id/default_tab_thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:importantForAccessibility="no"
android:padding="22dp"
app:srcCompat="@drawable/mozac_ic_globe"
app:tint="?tabTrayThumbnailIcon" />
<mozilla.components.browser.tabstray.thumbnail.TabThumbnailView
android:id="@+id/mozac_browser_tabstray_thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/mozac_browser_tabstray_open_tab" />
<include layout="@layout/checkbox_item" />
<include layout="@layout/checkbox_item" />
</androidx.cardview.widget.CardView>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<ImageButton
android:id="@+id/play_pause_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="top|start"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/mozac_feature_media_notification_action_pause"
android:elevation="10dp"
android:importantForAccessibility="yes"
android:translationX="-8dp"
android:translationY="-8dp"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/media_state_play" />
</FrameLayout>

Loading…
Cancel
Save