In the following xml, 'message_entry' displays too narrow on a small screen (240 x 320), but displays fine on a larger screen (480 x 640).
<androidx.cardview.widget.CardView
android:id="@+id/reply_bar_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="@color/replyBarCard"
app:cardCornerRadius="24dp"
app:cardElevation="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="24dp">
<ProgressBar
android:id="@+id/send_progress"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="3dp"
android:indeterminate="true"
android:visibility="invisible" />
<HorizontalScrollView
android:id="@+id/attached_image_scroller"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/message_list_padding"
android:layout_marginEnd="@dimen/message_list_padding"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:scrollbars="none"
android:visibility="gone">
<LinearLayout
android:id="@+id/attached_image_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:orientation="horizontal" />
</HorizontalScrollView>
<LinearLayout
android:id="@+id/smart_reply_container"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="@dimen/message_list_padding"
android:layout_marginEnd="@dimen/message_list_padding"
android:gravity="end"
android:orientation="horizontal"
android:visibility="gone">
<ImageButton
android:id="@+id/close_smart_replies"
android:layout_width="32dp"
android:layout_height="48dp"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:background="?selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="@string/use_smart_replies"
android:src="@drawable/ic_cancel"
android:tint="@color/secondaryText" />
<LinearLayout
android:id="@+id/smart_reply_suggestions_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="12dp"
android:layout_weight="1"
android:gravity="end"
android:orientation="horizontal" />
</LinearLayout>
<LinearLayout
android:id="@+id/send_bar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="@dimen/message_list_padding"
android:layout_marginEnd="@dimen/message_list_padding"
android:alpha="0"
android:clipToPadding="false"
android:gravity="center_vertical|start"
android:orientation="horizontal"
android:padding="8dp"
android:translationY="-32dp">
<ImageButton
android:id="@+id/select_sim"
android:layout_width="32dp"
android:layout_height="48dp"
android:background="?selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="@string/select_sim"
android:src="@drawable/ic_sim"
android:tint="@color/secondaryText"
android:visibility="gone" />
<ImageButton
android:id="@+id/view_scheduled_messages"
android:layout_width="32dp"
android:layout_height="match_parent"
android:background="?selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="@string/view_scheduled_messages"
android:src="@drawable/ic_schedule_small"
android:tint="@color/secondaryText"
android:visibility="gone" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginEnd="8dp">
<ImageButton
android:id="@+id/attach"
android:layout_width="32dp"
android:layout_height="48dp"
android:layout_gravity="center_vertical|start"
android:background="?selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="@string/attach"
android:src="@drawable/ic_attach"
android:tint="@color/secondaryText" />
<TextView
android:id="@+id/text_counter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="2dp"
android:gravity="center_horizontal"
android:textColor="@color/secondaryText"
android:textSize="12sp" />
</FrameLayout>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/message_entry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@null"
android:backgroundTint="@color/drawerBackground"
android:hint="@string/type_message_to"
android:imeOptions="actionSend|flagNoExtractUi"
android:inputType="textCapSentences|textAutoCorrect|textMultiLine"
android:maxLines="@integer/message_list_fragment_line_entry_count"
android:minHeight="40dp"
android:padding="8dp"
android:paddingStart="8dp"
android:paddingEnd="18dp"
android:scrollHorizontally="false"
android:textSize="16sp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:contentDescription="@string/send_message"
android:src="@drawable/ic_send"
app:elevation="0dp"
app:fabSize="mini"
app:rippleColor="@android:color/white" />
</LinearLayout>
<ViewStub
android:id="@+id/attach_stub"
android:layout_width="match_parent"
android:layout_height="@dimen/attach_menu_height"
android:layout="@layout/view_attach_menu" />
</LinearLayout>
</androidx.cardview.widget.CardView>
The small screen: (red box added for illustration)
The big screen: (red box added for illustration)
The intended behavior is like the big screen, where 'message_entry' is as wide as possible. Why is 'message_entry' so narrow on the small screen? How can I fix it?
It turned out to be caused by multiple dimens.xml
files in the res
folder. This is used to support multiple screen sizes, and in the dimens.xml
for the smaller screen, there was <dimen name="message_list_padding">96dp</dimen>
. Once that was changed to 0dp
, the layout is as expected.
For more information about multiple dimens.xml
files, see #2 in this answer.