androidxmlandroid-layoutandroid-xmlscreen-size

TextInput displaying too narrow on phones with a small screen size


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)

Small Screen

The big screen: (red box added for illustration)

Big Screen

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?


Solution

  • 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.