How center "TextView" in flexbox?

Question

I try to center text in a FlexboxLayout. I use this lib com.google.android:flexbox:0.2.5. I have several text in column. I try many method to put them in midle of that column without success.

<com.google.android.flexbox.FlexboxLayout
            xmlns:app="http://schemas.android.com/apk/res-auto"
            style="?metaButtonBarStyle"
            android:layout_width="77dp"
            android:layout_height="match_parent"
            android:background="@drawable/bg_pattern_dark_bitmap"
            android:orientation="vertical"
            android:alpha="1"
            app:flexWrap="wrap"
            app:justifyContent="space_between"
            >

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="lol"
                />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="lol"
                />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="lol"
                />
    </com.google.android.flexbox.FlexboxLayout>

Thank you for any help

score 8 · Answer 1 · answered Sep 30 '19 at 13:51

8

Use app:justifyContent="space_evenly" instead of space_between

answered Sep 30 '19 at 13:51

Muhannad Fakhouri

1,468
11
14

@user11714076 add `xmlns:app="http://schemas.android.com/apk/res-auto"` prop to FlexboxLayout – Dika Apr 06 '20 at 05:41
This is the only correct solution! Thanks! – Vitaly Nov 23 '21 at 07:04

Ankit · Accepted Answer · 2019-10-01T11:54:41.583

-2

Add this line in TextView

 android:gravity="center_vertical"

For imageview

put imageview inside Linearlayout and set gravity

  <com.google.android.flexbox.FlexboxLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="?metaButtonBarStyle"
    android:layout_width="77dp"
    android:layout_height="match_parent"
    android:background="@drawable/bg_pattern_dark_bitmap"
    android:orientation="vertical"
    android:alpha="1"
    app:flexWrap="wrap"
    app:justifyContent="space_between">

<LinearLayout android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:gravity="center_vertical">

    <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@color/colorPrimary"/>

</LinearLayout>

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="lol"
        android:gravity="center_vertical"/>

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="lol"
        android:gravity="center_vertical"/>

</com.google.android.flexbox.FlexboxLayout>

edited Oct 01 '19 at 11:54

answered Sep 30 '19 at 13:53

Ankit

1,068
6
10

okey, this work for text , but not with ImageView or ImageButton, do you know how we can do same with ImageView and Image button ? – Sep 30 '19 at 14:12
But it doesn't answer the question. The question was how to do it with flexbox layout. – Dhaval Oct 01 '19 at 11:48
yes if you put this inside flexlayout then it will work – Ankit Oct 01 '19 at 11:49
Thank you for your reply Ankit, your edit doesn't work but it permit me to find how make it work. So Thank you very much. I just had : android:layout_width="match_parent". And that center the image – Oct 01 '19 at 12:47
This is not a solution for the question. The solution is below - from Muhannad Fakhouri – Vitaly Nov 23 '21 at 07:05

How center "TextView" in flexbox?

2 Answers2