Merge pull request #1369 from nextcloud/a11y-contrastBubble-HitBoxSize

Improve Chat Accessibility

app/src/main/java/com/nextcloud/talk/controllers/ChatController.kt

@@ -563,6 +563,8 @@ class ChatController(args: Bundle) :
             }
         }
 
+        binding.messageInputView.setPadding(0, 0, 0, 0)
+
         if (args.containsKey("showToggleChat") && args.getBoolean("showToggleChat")) {
             binding.callControlToggleChat.visibility = View.VISIBLE
             wasDetached = true

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

@@ -2,6 +2,8 @@
   ~ Nextcloud Talk application
   ~
   ~ @author Mario Danic
+  ~ @author Andy Scherzinger
+  ~ Copyright (C) 2021 Andy Scherzinger <info@andy-scherzinger.de>
   ~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com>
   ~
   ~ This program is free software: you can redistribute it and/or modify
@@ -18,125 +20,136 @@
   ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   -->
 
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout 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:animateLayoutChanges="true"
-    android:background="@color/bg_default">
+    android:background="@color/bg_default"
+    android:orientation="vertical">
 
-    <include
-        android:id="@+id/lobby"
-        layout="@layout/lobby_view"
-        android:visibility="gone"
-        tools:visibility="visible"/>
+    <RelativeLayout
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="1">
 
-    <com.facebook.drawee.view.SimpleDraweeView
-        android:id="@+id/callControlToggleChat"
-        android:layout_width="60dp"
-        android:layout_height="60dp"
-        android:layout_margin="16dp"
-        android:layout_alignParentEnd="true"
-        app:backgroundImage="@color/call_buttons_background"
-        app:placeholderImage="@drawable/ic_call_black_24dp"
-        app:roundAsCircle="true"
-        android:elevation="10dp"
-        android:visibility="gone"
-        tools:visibility="visible"
-        />
+        <include
+            android:id="@+id/lobby"
+            layout="@layout/lobby_view"
+            android:visibility="gone"
+            tools:visibility="visible" />
 
-    <LinearLayout
-        android:id="@+id/progressBar"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        android:paddingTop="@dimen/standard_padding"
-        android:visibility="gone"
-        tools:visibility="visible">
+        <com.facebook.drawee.view.SimpleDraweeView
+            android:id="@+id/callControlToggleChat"
+            android:layout_width="60dp"
+            android:layout_height="60dp"
+            android:layout_alignParentEnd="true"
+            android:layout_margin="16dp"
+            android:elevation="10dp"
+            android:visibility="gone"
+            app:backgroundImage="@color/call_buttons_background"
+            app:placeholderImage="@drawable/ic_call_black_24dp"
+            app:roundAsCircle="true"
+            tools:visibility="visible" />
 
-        <include layout="@layout/item_custom_incoming_text_message_shimmer" />
+        <LinearLayout
+            android:id="@+id/progressBar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            android:paddingTop="@dimen/standard_padding"
+            android:visibility="gone"
+            tools:visibility="visible">
 
-        <include layout="@layout/item_custom_incoming_text_message_shimmer" />
+            <include layout="@layout/item_custom_incoming_text_message_shimmer" />
 
-        <include layout="@layout/item_custom_incoming_text_message_shimmer" />
-    </LinearLayout>
+            <include layout="@layout/item_custom_incoming_text_message_shimmer" />
 
-    <View
-        android:id="@+id/separator"
-        android:layout_width="match_parent"
-        android:layout_height="1dp"
-        android:layout_above="@+id/messageInputView"
-        android:background="@color/controller_chat_separator" />
+            <include layout="@layout/item_custom_incoming_text_message_shimmer" />
+        </LinearLayout>
 
-    <com.stfalcon.chatkit.messages.MessageInput
-        android:id="@+id/messageInputView"
-        android:animateLayoutChanges="true"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_alignParentBottom="true"
-        android:inputType="textLongMessage|textAutoComplete"
-        android:maxLength="1000"
-        app:showAttachmentButton="true"
-        app:attachmentButtonHeight="28dp"
-        app:attachmentButtonWidth="28dp"
-        app:attachmentButtonIcon="@drawable/ic_baseline_attach_file_24"
-        app:attachmentButtonBackground="@color/transparent"
-        app:inputButtonDefaultBgColor="@color/colorPrimary"
-        app:inputButtonHeight="35dp"
-        app:inputButtonMargin="8dp"
-        app:inputButtonWidth="36dp"
-        app:inputHint="@string/nc_hint_enter_a_message"
-        app:inputTextColor="@color/nc_incoming_text_default"
-        app:inputTextSize="16sp"
-        app:delayTypingStatus="200"/>
+        <com.stfalcon.chatkit.messages.MessagesList
+            android:id="@+id/messagesListView"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:paddingBottom="0dp"
+            android:visibility="gone"
+            app:dateHeaderTextSize="13sp"
+            app:incomingBubblePaddingBottom="@dimen/message_bubble_corners_padding"
+            app:incomingBubblePaddingLeft="@dimen/message_bubble_corners_padding"
+            app:incomingBubblePaddingRight="@dimen/message_bubble_corners_padding"
+            app:incomingBubblePaddingTop="@dimen/message_bubble_corners_padding"
+            app:incomingDefaultBubbleColor="@color/bg_message_list_incoming_bubble"
+            app:incomingDefaultBubblePressedColor="@color/bg_message_list_incoming_bubble"
+            app:incomingDefaultBubbleSelectedColor="@color/transparent"
+            app:incomingImageTimeTextSize="12sp"
+            app:incomingTextColor="@color/nc_incoming_text_default"
+            app:incomingTextLinkColor="@color/nc_incoming_text_default"
+            app:incomingTextSize="@dimen/chat_text_size"
+            app:incomingTimeTextSize="12sp"
+            app:outcomingBubblePaddingBottom="@dimen/message_bubble_corners_padding"
+            app:outcomingBubblePaddingLeft="@dimen/message_bubble_corners_padding"
+            app:outcomingBubblePaddingRight="@dimen/message_bubble_corners_padding"
+            app:outcomingBubblePaddingTop="@dimen/message_bubble_corners_padding"
+            app:outcomingDefaultBubbleColor="@color/colorPrimary"
+            app:outcomingDefaultBubblePressedColor="@color/colorPrimary"
+            app:outcomingDefaultBubbleSelectedColor="@color/transparent"
+            app:outcomingImageTimeTextSize="12sp"
+            app:outcomingTextColor="@color/nc_outcoming_text_default"
+            app:outcomingTextLinkColor="@color/nc_outcoming_text_default"
+            app:outcomingTextSize="@dimen/chat_text_size"
+            app:outcomingTimeTextSize="12sp"
+            app:textAutoLink="all" />
 
-    <com.stfalcon.chatkit.messages.MessagesList
-        android:id="@+id/messagesListView"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:layout_above="@+id/messageInputView"
-        android:visibility="gone"
-        app:dateHeaderTextSize="13sp"
-        android:paddingBottom="4dp"
-        app:incomingBubblePaddingBottom="@dimen/message_bubble_corners_padding"
-        app:incomingBubblePaddingLeft="@dimen/message_bubble_corners_padding"
-        app:incomingBubblePaddingRight="@dimen/message_bubble_corners_padding"
-        app:incomingBubblePaddingTop="@dimen/message_bubble_corners_padding"
-        app:incomingDefaultBubbleColor="@color/bg_message_list_incoming_bubble"
-        app:incomingDefaultBubblePressedColor="@color/bg_message_list_incoming_bubble"
-        app:incomingDefaultBubbleSelectedColor="@color/transparent"
-        app:incomingImageTimeTextSize="12sp"
-        app:incomingTextColor="@color/nc_incoming_text_default"
-        app:incomingTextLinkColor="@color/nc_incoming_text_default"
-        app:incomingTextSize="@dimen/chat_text_size"
-        app:incomingTimeTextSize="12sp"
-        app:outcomingBubblePaddingBottom="@dimen/message_bubble_corners_padding"
-        app:outcomingBubblePaddingLeft="@dimen/message_bubble_corners_padding"
-        app:outcomingBubblePaddingRight="@dimen/message_bubble_corners_padding"
-        app:outcomingBubblePaddingTop="@dimen/message_bubble_corners_padding"
-        app:outcomingDefaultBubbleColor="@color/colorPrimary"
-        app:outcomingDefaultBubblePressedColor="@color/colorPrimary"
-        app:outcomingDefaultBubbleSelectedColor="@color/transparent"
-        app:outcomingImageTimeTextSize="12sp"
-        app:outcomingTextColor="@color/nc_outcoming_text_default"
-        app:outcomingTextLinkColor="@color/nc_outcoming_text_default"
-        app:outcomingTextSize="@dimen/chat_text_size"
-        app:outcomingTimeTextSize="12sp"
-        app:textAutoLink="all" />
+        <com.webianks.library.PopupBubble
+            android:id="@+id/popupBubbleView"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_alignParentBottom="true"
+            android:layout_centerHorizontal="true"
+            android:layout_margin="16dp"
+            android:paddingStart="0dp"
+            android:paddingEnd="8dp"
+            app:pb_backgroundColor="@color/colorPrimary"
+            app:pb_icon="@drawable/ic_baseline_arrow_downward_24px"
+            app:pb_text="@string/nc_new_messages"
+            app:pb_textColor="@color/textColorOnPrimaryBackground" />
 
-    <com.webianks.library.PopupBubble
-        android:id="@+id/popupBubbleView"
-        android:layout_width="wrap_content"
+    </RelativeLayout>
+
+    <LinearLayout
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_above="@+id/separator"
-        android:layout_centerHorizontal="true"
-        android:layout_margin="16dp"
-        android:paddingStart="0dp"
-        android:paddingEnd="8dp"
-        app:pb_backgroundColor="@color/colorPrimary"
-        app:pb_icon="@drawable/ic_baseline_arrow_downward_24px"
-        app:pb_text="@string/nc_new_messages"
-        app:pb_textColor="@color/textColorOnPrimaryBackground" />
+        android:orientation="vertical">
+
+        <View
+            android:id="@+id/separator"
+            android:layout_width="match_parent"
+            android:layout_height="1dp"
+            android:background="@color/controller_chat_separator" />
 
-</RelativeLayout>
+        <com.stfalcon.chatkit.messages.MessageInput
+            android:id="@+id/messageInputView"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:animateLayoutChanges="true"
+            android:inputType="textLongMessage|textAutoComplete"
+            android:maxLength="1000"
+            app:attachmentButtonBackground="@color/transparent"
+            app:attachmentButtonHeight="48dp"
+            app:attachmentButtonIcon="@drawable/ic_baseline_attach_file_24"
+            app:attachmentButtonMargin="0dp"
+            app:attachmentButtonWidth="48dp"
+            app:delayTypingStatus="200"
+            app:inputButtonDefaultBgColor="@color/transparent"
+            app:inputButtonDefaultIconColor="@color/colorPrimary"
+            app:inputButtonHeight="48dp"
+            app:inputButtonMargin="0dp"
+            app:inputButtonWidth="48dp"
+            app:inputHint="@string/nc_hint_enter_a_message"
+            app:inputTextColor="@color/nc_incoming_text_default"
+            app:inputTextSize="16sp"
+            app:showAttachmentButton="true" />
+    </LinearLayout>
+</LinearLayout>

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

@@ -2,6 +2,10 @@
   ~ Nextcloud Talk application
   ~
   ~ @author Mario Danic
+  ~ @author Marcel Hibbe
+  ~ @author Andy Scherzinger
+  ~ Copyright (C) 2021 Andy Scherzinger <info@andy-scherzinger.de>
+  ~ Copyright (C) 2021 Marcel Hibbe <dev@mhibbe.de>
   ~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com>
   ~
   ~ This program is free software: you can redistribute it and/or modify
@@ -26,7 +30,8 @@
 
     <RelativeLayout
         android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+        android:layout_height="wrap_content"
+        android:layout_marginEnd="4dp">
 
         <include layout="@layout/item_message_quote"
             android:layout_width="match_parent"
@@ -36,24 +41,26 @@
 
         <ImageButton
             android:id="@id/attachmentButton"
-            android:layout_width="28dp"
-            android:layout_height="28dp"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            android:padding="12dp"
             android:layout_below="@id/quotedChatMessageView"
+            android:background="@color/transparent"
+            android:src="@drawable/ic_baseline_attach_file_24"
+            app:tint="?attr/colorControlNormal"
             android:scaleType="centerCrop"
-            android:layout_marginTop="5dp"
             android:contentDescription="@string/nc_add_attachment" />
 
         <ImageButton
             android:id="@+id/smileyButton"
-            android:layout_width="28dp"
-            android:layout_height="28dp"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            android:padding="12dp"
             android:layout_below="@id/quotedChatMessageView"
             android:layout_toEndOf="@id/attachmentButton"
             android:background="@color/transparent"
             android:src="@drawable/ic_insert_emoticon_black_24dp"
             android:scaleType="centerCrop"
-            android:layout_marginTop="5dp"
-            android:layout_marginStart="8dp"
             app:tint="?attr/colorControlNormal"
             android:contentDescription="@string/nc_add_emojis" />
 
@@ -63,11 +70,12 @@
             android:layout_height="wrap_content"
             android:layout_below="@+id/quotedChatMessageView"
             android:layout_centerHorizontal="true"
-            android:layout_toEndOf="@id/smileyButton"
             android:layout_toStartOf="@id/messageSendButton"
+            android:layout_toEndOf="@id/smileyButton"
             android:imeOptions="actionDone"
             android:inputType="textAutoCorrect|textMultiLine|textCapSentences"
-            android:lineSpacingMultiplier="1.2" />
+            android:lineSpacingMultiplier="1.2"
+            android:minHeight="48dp" />
 
         <TextView
             android:id="@+id/slideToCancelDescription"
@@ -88,14 +96,14 @@
 
         <ImageView
             android:id="@+id/microphoneEnabledInfoBackground"
-            android:layout_width="35dp"
-            android:layout_height="35dp"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
             android:layout_below="@id/quotedChatMessageView"
             android:scaleType="centerInside"
             android:layout_alignParentStart="true"
             android:background="@color/bg_default"
             android:visibility="gone"
-            tools:visibility="visible"
+            tools:visibility="gone"
             android:contentDescription="@null" />
 
         <!-- the height of this ImageView is used to define the overall height of the
@@ -104,15 +112,15 @@
           linebreaks. -->
         <ImageView
             android:id="@+id/microphoneEnabledInfo"
-            android:layout_width="35dp"
-            android:layout_height="43dp"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
             android:layout_below="@id/quotedChatMessageView"
             android:scaleType="centerInside"
             android:layout_alignParentStart="true"
             android:src="@drawable/ic_baseline_mic_red_24"
             android:contentDescription="@null"
             android:visibility="gone"
-            tools:visibility="visible"/>
+            tools:visibility="gone"/>
 
         <Chronometer
             android:id="@+id/audioRecordDuration"
@@ -128,12 +136,13 @@
             android:paddingEnd="5dp"
             android:background="@color/bg_default"
             android:visibility="gone"
-            tools:visibility="visible" />
+            tools:visibility="gone" />
 
         <ImageButton
             android:id="@id/messageSendButton"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            android:padding="12dp"
             android:layout_below="@id/quotedChatMessageView"
             android:layout_alignParentEnd="true"
             android:adjustViewBounds="true"
@@ -142,8 +151,8 @@
 
         <ImageButton
             android:id="@+id/recordAudioButton"
-            android:layout_width="36dp"
-            android:layout_height="36dp"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
             android:layout_below="@id/quotedChatMessageView"
             android:layout_alignParentEnd="true"
             android:background="@color/transparent"

app/src/main/res/values-night/colors.xml

@@ -56,8 +56,8 @@
 
     <!-- Chat window incoming message text & informational -->
     <color name="bg_bottom_sheet">#121212</color>
-    <color name="bg_message_list_incoming_bubble">#484848</color>
-    <color name="bg_message_list_incoming_bubble_deleted">#66484848</color>
+    <color name="bg_message_list_incoming_bubble">#1CFFFFFF</color>
+    <color name="bg_message_list_incoming_bubble_deleted">#14FFFFFF</color>
 
     <color name="textColorMaxContrast">#8c8c8c</color>