Set Buttons Inline And Break Line To Fit Different Devices

I want to add some buttons in a line and break it in a new line when they reach the end of the screen: If you know CSS, what I need is similar to display: inline-block rule. I am

Solution 1:

since last time, I found this library that you should enjoy ! github.com/google/flexbox-layout

In your case, you should use the flexWrap attribute :

This attribute controls whether the flex container is single-line or multi-line, and the direction of the cross axis. Possible values are:

• nowrap (default)
• wrap (use this)
• wrap_reverse

You will be able to wrap your buttons.

Installation

Add the following dependency to your build.gradle file:

dependencies {
    implementation 'com.google.android:flexbox:2.0.1'
}

Usage

FlexboxLayout that extends the ViewGroup like LinearLayout and RelativeLayout. You can specify the attributes from a layout XML like:

<com.google.android.flexbox.FlexboxLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"app:flexWrap="wrap"app:alignItems="stretch"app:alignContent="stretch" ><TextViewandroid:id="@+id/textview1"android:layout_width="120dp"android:layout_height="80dp"app:layout_flexBasisPercent="50%"
        /><TextViewandroid:id="@+id/textview2"android:layout_width="80dp"android:layout_height="80dp"app:layout_alignSelf="center"
        /><TextViewandroid:id="@+id/textview3"android:layout_width="160dp"android:layout_height="80dp"app:layout_alignSelf="flex_end"
        /></com.google.android.flexbox.FlexboxLayout>

Solution 2:

Have you tried using gridLayout ?

<?xml version="1.0" encoding="utf-8"?><GridLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:columnCount="4"><Buttonandroid:id="@+id/boton1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Imagen"        
        /><Buttonandroid:id="@+id/boton2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Play"
        /><Buttonandroid:id="@+id/boton3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Audio"
        /><Buttonandroid:id="@+id/boton4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Play"android:onClick="playVideo"
        /><Buttonandroid:id="@+id/boton5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Youtube"
        /><Buttonandroid:id="@+id/boton6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Raw"
        /></GridLayout>`