Блог

Максимальный размер плавающего окна с FlexboxLayout ограничен, хотя слева и справа от экрана телефона все еще есть свободное пространство.

Вместо того, чтобы помещать большинство элементов в первую строку, FlexboxLayout создает вторую строку с почти одинаковым размером элементов.

Не имеет значения, портретная или ландшафтная ориентация:

Расположение:

 <com.google.android.flexbox.FlexboxLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/widget_background"
    app:flexDirection="row"
    app:flexWrap="wrap"
    android:paddingHorizontal="12dp"
    android:paddingVertical="6dp">

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />

    <ImageView
        android:layout_width="@dimen/overlay_btn_size"
        android:layout_height="@dimen/overlay_btn_size"
        android:layout_marginHorizontal="12dp"
        android:layout_marginVertical="12dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_baseline_delete_24" />
</com.google.android.flexbox.FlexboxLayout>
 

I also tried with ConstraintLayout and Flow but still the same result…

If I use LinearLayout with horizontal orientation then it can fill all width of phone screen but it also can be even bigger than width of screen if I have many elements and they won’t be visible:

It has only 9 elements but it should have 12, so that’s why I was trying to use FlexboxLayout

How can I make FlexboxLayout or ConstraintLayout with Flow take all width of phone screen?