Takeshi Hagikura, Developer Programs Engineer





FlexboxLayout

FlexboxLayout

FlexboxLayout

FlexboxLayout

FlexboxLayout

One layout for various screen sizes

Nexus5X portrait







Nexus5X landscape





Pixel C with multi window mode enabled, divider line on the left.





Pixel C with multi window mode enabled, divider line on the middle.





Pixel C with multi window mode enabled, divider line on the right.



You would need to define multiple DP-bucket layouts (such as layout-600dp, layout-720dp, layout-1020dp) to handle various screen sizes with traditional layouts such as LinearLayout or RelativeLayout . But the dialog above is built with a single FlexboxLayout .



The technique used in the example is setting the flexWrap="wrap" as explained above,



<com .google.android.flexbox.flexboxlayout android:layout_width="match_parent" android:layout_height="wrap_content" app:flexwrap="wrap"> then you can get the following layout where child views are aligned to a new line instead of overflowing its parent.







You would need to define multiple DP-bucket layouts (such as layout-600dp, layout-720dp, layout-1020dp) to handle various screen sizes with traditional layouts such asor. But the dialog above is built with a singleThe technique used in the example is setting theas explained above,then you can get the following layout where child views are aligned to a new line instead of overflowing its parent.



Another technique I'd like to highlight is setting the layout_flexGrow attribute to an individual child. This helps improve the look of the final layout when free space is left over. The layout_flexGrow attribute works similar to the layout_weight attribute in LinearLayout . That means FlexboxLayout will distribute the remaining space according to the layout_flexGrow value set to each child in the same line.



In the example below, it assumes each child has the layout_flexGrow attribute set to 1 , so free space will be evenly distributed to each of them.

<android .support.design.widget.TextInputLayout android:layout_width="100dp" android:layout_height="wrap_content" app:layout_flexgrow="1">



Another technique I'd like to highlight is setting theattribute to an individual child. This helps improve the look of the final layout when free space is left over. Theattribute works similar to theattribute in. That meanswill distribute the remaining space according to thevalue set to each child in the same line.In the example below, it assumes each child has theattribute set to, so free space will be evenly distributed to each of them.



You can check out the complete

RecyclerView integration Another advantage of FlexboxLayout is that it can be integrated with FlexboxLayoutManager extends RecyclerView.LayoutManager , now you can make use of the Flexbox functionalities in a scrollable container in much more memory-efficient way.



Note that you can still achieve a scrollable Flexbox container with FlexboxLayout wrapped with ScrollView . But, you will be likely to experience jankiness or even an OutOfMemoryError if the number of items contained in the layout is large, as FlexboxLayout doesn't take view recycling into account for the views that go off the screen as the user scrolls.



(If you would like to learn more about the RecyclerView in details, you can check out the videos from the Android UI toolkit team such as 2)



A real world example where the RecyclerView integration is useful is for apps like the Google Photos app or News apps, both expect large number of items while needing to handle various width of items.



One example is found in the FlexboxLayout repository. As you can see in the repository, each image shown in RecyclerView has a different width. But by setting the flexWrap setting to wrap,



FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(); layoutManager.setFlexWrap(FlexWrap.WRAP); and setting the flexGrow (as you can see, you can configure the attributes through FlexboxLayoutManager and FlexboxLayoutManager.LayoutParams for child attributes instead of configuring it from xml) attribute to a positive value for each child,

void bindTo(Drawable drawable) { mImageView.setImageDrawable(drawable); ViewGroup.LayoutParams lp = mImageView.getLayoutParams(); if (lp instanceof FlexboxLayoutManager.LayoutParams) { FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams(); flexboxLp.setFlexGrow(1.0f); } } you can see every image fits within the layout nicely regardless of the screen orientation.







If you would like to see complete FlexboxLayout example, you can check:

Playground demo app - using FlexboxLayout and FlexboxLayoutManager .

and . Cat gallery demo app - using FlexboxLayoutManager

What's next? Check out the full







You can check out the complete layout xml file in the GitHub repository.Another advantage ofis that it can be integrated with RecyclerView . With the latest release of the alpha version the newextends, now you can make use of the Flexbox functionalities in a scrollable container in much more memory-efficient way.Note that you can still achieve a scrollable Flexbox container withwrapped with. But, you will be likely to experience jankiness or even an OutOfMemoryError if the number of items contained in the layout is large, asdoesn't take view recycling into account for the views that go off the screen as the user scrolls.(If you would like to learn more about the RecyclerView in details, you can check out the videos from the Android UI toolkit team such as 1 A real world example where theintegration is useful is for apps like the Google Photos app or News apps, both expect large number of items while needing to handle various width of items.One example is found in the demo application in therepository. As you can see in the repository, each image shown inhas a different width. But by setting the flexWrap setting to wrap,and setting the(as you can see, you can configure the attributes throughandfor child attributes instead of configuring it from xml) attribute to a positive value for each child,you can see every image fits within the layout nicely regardless of the screen orientation.If you would like to see complete FlexboxLayout example, you can check:Check out the full documentation for other attributes to build flexible layouts tailored for your needs. We're very open to hear your feedback, if you find any issues or feature requests, please file an issue on the GitHub repository

At Google I/O last year we announced ConstraintLayout , which enables you to build complex layouts while maintaining a flat view hierarchy. It is also fully supported in Android Studio's Visual Layout Editor At the same time, we open sourced FlexboxLayout to bring the same functionalities of the CSS Flexible Layout module to Android. Here are some cases whereis particularly effective.can be interpreted as an advanced LinearLayout because both layouts align their child views sequentially. The significant difference between LinearLayout andis thathas a feature for wrapping.That means if you add theattribute,puts a view to a new line if there is not enough space left in the current line as shown in the picture below.With that characteristic in mind, let's take a case where you want to put views sequentially but have them move to new lines if the available space changes (due to a device factor, orientation changes or the window resizing in the multi-window mode).