Add a touch delegate to increase action touch targets to 48dp (#2872)

* Add a touch delegate to increase action touch targets to 48dp

Fixes #2825

* Adjust layout to make action buttons larger

* Remove 4dp vertical margin
This commit is contained in:
Eva Tatarka 2022-12-05 10:05:46 -08:00 committed by GitHub
parent 965d51100c
commit 36befdebe2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 118 additions and 40 deletions

View file

@ -55,6 +55,7 @@ import com.keylesspalace.tusky.util.LinkHelper;
import com.keylesspalace.tusky.util.StatusDisplayOptions;
import com.keylesspalace.tusky.util.ThemeUtils;
import com.keylesspalace.tusky.util.TimestampUtils;
import com.keylesspalace.tusky.util.TouchDelegateHelper;
import com.keylesspalace.tusky.view.MediaPreviewImageView;
import com.keylesspalace.tusky.view.MediaPreviewLayout;
import com.keylesspalace.tusky.viewdata.PollOptionViewData;
@ -63,6 +64,7 @@ import com.keylesspalace.tusky.viewdata.PollViewDataKt;
import com.keylesspalace.tusky.viewdata.StatusViewData;
import java.text.NumberFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.List;
@ -170,6 +172,8 @@ public abstract class StatusBaseViewHolder extends RecyclerView.ViewHolder {
this.avatarRadius24dp = itemView.getContext().getResources().getDimensionPixelSize(R.dimen.avatar_radius_24dp);
mediaPreviewUnloaded = new ColorDrawable(ThemeUtils.getColor(itemView.getContext(), R.attr.colorBackgroundAccent));
TouchDelegateHelper.expandTouchSizeToFillRow((ViewGroup) itemView, Arrays.asList(replyButton, reblogButton, favouriteButton, bookmarkButton, moreButton));
}
protected void setDisplayName(String name, List<Emoji> customEmojis, StatusDisplayOptions statusDisplayOptions) {

View file

@ -0,0 +1,51 @@
@file:JvmName("TouchDelegateHelper")
package com.keylesspalace.tusky.util
import android.graphics.Rect
import android.view.MotionEvent
import android.view.TouchDelegate
import android.view.View
import android.view.ViewGroup
/**
* Expands the touch area of the give row of views to fill the space in-between them, using a
* [TouchDelegate].
*/
fun ViewGroup.expandTouchSizeToFillRow(children: List<View>) {
addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
touchDelegate = CompositeTouchDelegate(
this,
children.mapIndexed { i, view ->
val rect = Rect()
view.getHitRect(rect)
val left = children.getOrNull(i - 1)
if (left != null) {
// extend half-way to previous view
rect.left -= (view.left - left.right) / 2
}
val right = children.getOrNull(i + 1)
if (right != null) {
// extend half-way to next view
rect.right += (right.left - view.right) / 2
}
TouchDelegate(rect, view)
}
)
}
}
private class CompositeTouchDelegate(view: View, private val delegates: List<TouchDelegate>) :
TouchDelegate(Rect(), view) {
override fun onTouchEvent(event: MotionEvent): Boolean {
var res = false
val x = event.x
val y = event.y
for (delegate in delegates) {
event.setLocation(x, y)
res = delegate.onTouchEvent(event) || res
}
return res
}
}

View file

@ -8,15 +8,15 @@
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:focusable="true"
android:paddingLeft="14dp"
android:paddingRight="14dp">
android:focusable="true">
<TextView
android:id="@+id/status_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="@dimen/status_reblogged_bar_padding_top"
android:layout_marginEnd="14dp"
android:drawableStart="@drawable/ic_reblog_18dp"
android:drawablePadding="6dp"
android:gravity="center_vertical"
@ -35,6 +35,7 @@
android:id="@+id/status_avatar"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="14dp"
android:layout_marginTop="14dp"
android:contentDescription="@string/action_view_profile"
android:importantForAccessibility="no"
@ -94,6 +95,7 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginEnd="14dp"
android:importantForAccessibility="no"
android:textColor="?android:textColorSecondary"
android:textSize="?attr/status_text_medium"
@ -105,6 +107,7 @@
android:id="@+id/status_content_warning_description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="14dp"
android:hyphenationFrequency="full"
android:importantForAccessibility="no"
android:lineSpacingMultiplier="1.1"
@ -146,6 +149,7 @@
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="14dp"
android:focusable="true"
android:hyphenationFrequency="full"
android:importantForAccessibility="no"
@ -162,6 +166,7 @@
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="14dp"
android:background="@drawable/card_frame"
android:clipChildren="true"
android:foreground="?attr/selectableItemBackground"
@ -251,13 +256,14 @@
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/status_media_preview_margin_top"
android:layout_marginEnd="14dp"
android:background="@drawable/media_preview_outline"
android:importantForAccessibility="noHideDescendants"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@id/status_display_name"
app:layout_constraintTop_toBottomOf="@id/status_card_view"
tools:visibility="visible">
<include layout="@layout/item_media_preview" />
</androidx.constraintlayout.widget.ConstraintLayout>
@ -267,6 +273,7 @@
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginEnd="14dp"
android:layout_marginBottom="4dp"
android:nestedScrollingEnabled="false"
app:layout_constraintEnd_toEndOf="parent"
@ -296,6 +303,7 @@
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:layout_marginEnd="14dp"
android:textSize="?attr/status_text_medium"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@id/status_display_name"
@ -305,13 +313,11 @@
<ImageButton
android:id="@+id/status_reply"
style="@style/TuskyImageButton"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_width="52dp"
android:layout_height="48dp"
android:layout_marginStart="-14dp"
android:contentDescription="@string/action_reply"
android:importantForAccessibility="no"
android:padding="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/status_inset"
app:layout_constraintHorizontal_chainStyle="spread_inside"
@ -323,16 +329,17 @@
android:id="@+id/status_replies"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:textSize="?attr/status_text_medium"
app:layout_constraintBottom_toBottomOf="@id/status_reply"
app:layout_constraintStart_toEndOf="@id/status_reply"
app:layout_constraintStart_toStartOf="@id/status_reply"
app:layout_constraintTop_toTopOf="@id/status_reply"
android:textAlignment="viewEnd"
android:textSize="?attr/status_text_medium" />
tools:text="1+" />
<at.connyduck.sparkbutton.SparkButton
android:id="@+id/status_inset"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_width="52dp"
android:layout_height="48dp"
android:clipToPadding="false"
android:contentDescription="@string/action_reblog"
android:importantForAccessibility="no"
@ -348,8 +355,8 @@
<at.connyduck.sparkbutton.SparkButton
android:id="@+id/status_favourite"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_width="52dp"
android:layout_height="48dp"
android:clipToPadding="false"
android:contentDescription="@string/action_favourite"
android:importantForAccessibility="no"
@ -365,8 +372,8 @@
<at.connyduck.sparkbutton.SparkButton
android:id="@+id/status_bookmark"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_width="52dp"
android:layout_height="48dp"
android:clipToPadding="false"
android:contentDescription="@string/action_bookmark"
android:importantForAccessibility="no"
@ -383,16 +390,14 @@
<ImageButton
android:id="@+id/status_more"
style="@style/TuskyImageButton"
android:layout_width="24dp"
android:layout_height="30dp"
android:layout_marginEnd="8dp"
android:layout_width="52dp"
android:layout_height="48dp"
android:layout_gravity="end"
android:contentDescription="@string/action_more"
android:importantForAccessibility="no"
android:padding="4dp"
app:layout_constraintBottom_toBottomOf="@id/status_reply"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/status_bookmark"
app:layout_constraintTop_toTopOf="@id/status_reply"
app:srcCompat="@drawable/ic_more_horiz_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

View file

@ -7,14 +7,13 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:paddingLeft="14dp"
android:paddingRight="14dp">
android:clipToPadding="false">
<ImageView
android:id="@+id/status_avatar"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="14dp"
android:layout_marginTop="14dp"
android:layout_marginEnd="14dp"
android:contentDescription="@string/action_view_profile"
@ -81,14 +80,17 @@
<TextView
android:id="@+id/status_content_warning_description"
android:layout_width="wrap_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="14dp"
android:hyphenationFrequency="full"
android:importantForAccessibility="no"
android:lineSpacingMultiplier="1.1"
android:textColor="?android:textColorPrimary"
android:textSize="?attr/status_text_large"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/status_avatar"
tools:text="CW this is a long long long long long long long long content warning" />
@ -98,6 +100,7 @@
style="@style/TuskyButton.Outlined"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:importantForAccessibility="no"
@ -117,14 +120,16 @@
android:id="@+id/status_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="14dp"
android:layout_marginBottom="4dp"
android:focusable="true"
android:hyphenationFrequency="full"
android:importantForAccessibility="no"
android:lineSpacingMultiplier="1.1"
android:textIsSelectable="true"
android:textColor="?android:textColorPrimary"
android:textIsSelectable="true"
android:textSize="?attr/status_text_large"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
@ -135,7 +140,9 @@
android:id="@+id/status_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="14dp"
android:background="@drawable/card_frame"
android:clipChildren="true"
android:foreground="?attr/selectableItemBackground"
@ -201,7 +208,9 @@
android:id="@+id/status_media_preview_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="14dp"
android:layout_marginBottom="4dp"
android:background="@drawable/media_preview_outline"
android:importantForAccessibility="noHideDescendants"
@ -215,7 +224,9 @@
android:id="@+id/status_poll_options"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="14dp"
android:layout_marginBottom="4dp"
android:nestedScrollingEnabled="false"
app:layout_constraintEnd_toEndOf="parent"
@ -227,6 +238,7 @@
style="@style/TuskyButton.Outlined"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="4dp"
android:gravity="center"
android:minWidth="150dp"
@ -244,7 +256,9 @@
android:id="@+id/status_poll_description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="14dp"
android:textSize="?attr/status_text_medium"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
@ -255,7 +269,9 @@
android:id="@+id/status_timestamp_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="14dp"
android:drawablePadding="4dp"
android:importantForAccessibility="no"
android:textColor="?android:textColorTertiary"
@ -270,7 +286,9 @@
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@id/status_timestamp_info"
android:layout_marginStart="14dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="14dp"
android:background="?android:attr/listDivider"
android:importantForAccessibility="no"
android:paddingStart="16dp"
@ -318,7 +336,9 @@
android:id="@+id/status_buttons_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="14dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="14dp"
android:background="?android:attr/listDivider"
android:importantForAccessibility="no"
android:paddingStart="16dp"
@ -328,10 +348,8 @@
<ImageButton
android:id="@+id/status_reply"
style="@style/TuskyImageButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_width="52dp"
android:layout_height="48dp"
android:contentDescription="@string/action_reply"
android:importantForAccessibility="no"
android:padding="4dp"
@ -344,8 +362,8 @@
<at.connyduck.sparkbutton.SparkButton
android:id="@+id/status_inset"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_width="52dp"
android:layout_height="48dp"
android:clipToPadding="false"
android:contentDescription="@string/action_reblog"
android:importantForAccessibility="no"
@ -361,8 +379,8 @@
<at.connyduck.sparkbutton.SparkButton
android:id="@+id/status_favourite"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_width="52dp"
android:layout_height="48dp"
android:clipToPadding="false"
android:contentDescription="@string/action_favourite"
android:importantForAccessibility="no"
@ -378,8 +396,8 @@
<at.connyduck.sparkbutton.SparkButton
android:id="@+id/status_bookmark"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_width="52dp"
android:layout_height="48dp"
android:clipToPadding="false"
android:contentDescription="@string/action_bookmark"
android:importantForAccessibility="no"
@ -396,8 +414,8 @@
<ImageButton
android:id="@+id/status_more"
style="@style/TuskyImageButton"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_width="52dp"
android:layout_height="48dp"
android:contentDescription="@string/action_more"
android:importantForAccessibility="no"
android:padding="4dp"