Git Product home page Git Product logo

flexbox-layout's Introduction

FlexboxLayout

Circle CI

FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.

Installation

Add the following dependency to your build.gradle file:

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

Starting from 3.0.0, the groupId is changed to com.google.android.flexbox in preparation to uploading the artifacts to google maven. You can still download the artifacts from jcenter for the past versions with the prior groupId (com.google.android), but migrating the library 3.0.0 is recommended.

Note that the default values for alignItems and alignContent for FlexboxLayout have been changed from stretch to flex_start starting from 2.0.0, it may break the existing apps. Please make sure to set stretch explicitly if you want to apply the behavior of stretch.

Note that starting from 1.1.0, the library is expeced to use with AndroidX. Please migrate to AndroidX if you use 1.1.0 or above.

Please use 1.0.0 if you haven't migrated to AndroidX.

Usage

There are two ways of using Flexbox in your layout.

FlexboxLayout

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

<com.google.android.flexbox.FlexboxLayout
    xmlns: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" >

    <TextView
        android:id="@+id/textview1"
        android:layout_width="120dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="50%"
        />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_alignSelf="center"
        />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="160dp"
        android:layout_height="80dp"
        app:layout_alignSelf="flex_end"
        />
</com.google.android.flexbox.FlexboxLayout>

Or from code like:

FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
flexboxLayout.setFlexDirection(FlexDirection.ROW);

View view = flexboxLayout.getChildAt(0);
FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();
lp.setOrder(-1);
lp.setFlexGrow(2);
view.setLayoutParams(lp);

FlexboxLayoutManager (within RecyclerView)

The second one is FlexboxLayoutManager that can be used within RecyclerView.

RecyclerView recyclerView = (RecyclerView) context.findViewById(R.id.recyclerview);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(context);
layoutManager.setFlexDirection(FlexDirection.COLUMN);
layoutManager.setJustifyContent(JustifyContent.FLEX_END);
recyclerView.setLayoutManager(layoutManager);

or for the attributes for the children of the FlexboxLayoutManager you can do like:

mImageView.setImageDrawable(drawable);
ViewGroup.LayoutParams lp = mImageView.getLayoutParams();
if (lp instanceof FlexboxLayoutManager.LayoutParams) {
    FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;
    flexboxLp.setFlexGrow(1.0f);
    flexboxLp.setAlignSelf(AlignSelf.FLEX_END);
}

The advantage of using FlexboxLayoutManager is that it recycles the views that go off the screen for reuse for the views that are appearing as the user scrolls instead of inflating every individual view, which consumes much less memory especially when the number of items contained in the Flexbox container is large.

FlexboxLayoutManager in action

Supported attributes/features comparison

Due to some characteristics of RecyclerView, some Flexbox attributes are not available/not implemented to the FlexboxLayoutManager. Here is a quick overview of the attributes/features comparison between the two implementations.

Attribute / Feature FlexboxLayout FlexboxLayoutManager (RecyclerView)
flexDirection Check Check
flexWrap Check Check (except wrap_reverse)
justifyContent Check Check
alignItems Check Check
alignContent Check -
layout_order Check -
layout_flexGrow Check Check
layout_flexShrink Check Check
layout_alignSelf Check Check
layout_flexBasisPercent Check Check
layout_(min/max)Width Check Check
layout_(min/max)Height Check Check
layout_wrapBefore Check Check
Divider Check Check
View recycling - Check
Scrolling *1 Check

*1 Partially possible by wrapping it with ScrollView. But it isn't likely to work with a large set of views inside the layout. Because it doesn't consider view recycling.

Supported attributes

Attributes for the FlexboxLayout:

  • flexDirection

    • This attribute determines the direction of the main axis (and the cross axis, perpendicular to the main axis). The direction children items are placed inside the Flexbox layout. Possible values are:

      • row (default)
      • row_reverse
      • column
      • column_reverse

      Flex Direction explanation

  • flexWrap

    • 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 for FlexboxLayout)
      • wrap (default for FlexboxLayoutManager)
      • wrap_reverse (not supported by FlexboxLayoutManager)

      Flex Wrap explanation

  • justifyContent

    • This attribute controls the alignment along the main axis. Possible values are:

      • flex_start (default)
      • flex_end
      • center
      • space_between
      • space_around
      • space_evenly

      Justify Content explanation

  • alignItems

    • This attribute controls the alignment along the cross axis. Possible values are:

      • flex_start (default for FlexboxLayout)
      • flex_end
      • center
      • baseline
      • stretch (default for FlexboxLayoutManager)

      Align Items explanation

  • alignContent

    • This attribute controls the alignment of the flex lines in the flex container. Possible values are:

      • flex_start (default)
      • flex_end
      • center
      • space_between
      • space_around
      • stretch

      Align Content explanation

  • showDividerHorizontal (one or more of none | beginning | middle | end)

  • dividerDrawableHorizontal (reference to a drawable)

    • Puts horizontal dividers between flex lines (or flex items when flexDirection is set to column or column_rebase).
  • showDividerVertical (one or more of none | beginning | middle | end)

  • dividerDrawableVertical (reference to a drawable)

    • Puts vertical dividers between flex items (or flex lines when flexDirection is set to column or column_rebase).
  • showDivider (one or more of none | beginning | middle | end)

  • dividerDrawable (reference to a drawable)

    • Shorthand for setting both horizontal and vertical dividers. Note that if used with other attributes (such as justifyContent="space_around" or alignContent="space_between" ... etc) for putting spaces between flex lines or flex items, you may see unexpected spaces. Please avoid using these at the same time.

    Example of putting both vertical and horizontal dividers.

    res/drawable/divider.xml

    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <size
          android:width="8dp"
          android:height="12dp" />
      <solid android:color="#44A444" />
    </shape> 

    res/layout/content_main.xml

    <com.google.android.flexbox.FlexboxLayout xmlns: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:alignContent="flex_start"
      app:alignItems="flex_start"
      app:flexWrap="wrap"
      app:showDivider="beginning|middle"
      app:dividerDrawable="@drawable/divider" >
    
      <TextView
          style="@style/FlexItem"
          android:layout_width="220dp"
          android:layout_height="80dp"
          android:text="1" />
      <TextView
          style="@style/FlexItem"
          android:layout_width="120dp"
          android:layout_height="80dp"
          android:text="2" />
      <TextView
          style="@style/FlexItem"
          android:layout_width="160dp"
          android:layout_height="80dp"
          android:text="3" />
      <TextView
          style="@style/FlexItem"
          android:layout_width="80dp"
          android:layout_height="80dp"
          android:text="4" />
      <TextView
          style="@style/FlexItem"
          android:layout_width="100dp"
          android:layout_height="80dp"
          android:text="5" />

    Dividers beginning and middle

Attributes for the children of a FlexboxLayout

  • layout_order (integer)

    • This attribute can change how the ordering of the children views are laid out. By default, children are displayed and laid out in the same order as they appear in the layout XML. If not specified, 1 is set as a default value.

      Order explanation

  • layout_flexGrow (float)

    • This attribute determines how much this child will grow if positive free space is distributed relative to the rest of other flex items included in the same flex line. If a flex item has a positive layout_flexGrow value, the item will take up the remaining space in the flex line. If multiple flex items in the same flex line have positive layout_flexGrow values, the remaining free space is distributed depending on the proportion of their declared layout_flexGrow value. (Similar to the layout_weight attribute in the LinearLayout) If not specified, 0 is set as a default value.

      Flex Grow explanation

  • layout_flexShrink (float)

    • This attribute determines how much this child will shrink if negative free space is distributed relative to the rest of other flex items included in the same flex line. If not specified, 1 is set as a default value.

      Flex Shrink explanation

  • layout_alignSelf

    • This attribute determines the alignment along the cross axis (perpendicular to the main axis). The alignment in the same direction can be determined by the alignItems in the parent, but if this is set to other than auto, the cross axis alignment is overridden for this child. Possible values are:

      • auto (default)
      • flex_start
      • flex_end
      • center
      • baseline
      • stretch

      Align Self explanation

  • layout_flexBasisPercent (fraction)

    • The initial flex item length in a fraction format relative to its parent. The initial main size of this child view is trying to be expanded as the specified fraction against the parent main size. If this value is set, the length specified from layout_width (or layout_height) is overridden by the calculated value from this attribute. This attribute is only effective when the parent's length is definite (MeasureSpec mode is MeasureSpec.EXACTLY). The default value is -1, which means not set.

      Flex basis percent explanation

  • layout_minWidth / layout_minHeight (dimension)

    • These attributes impose minimum size constraints for the children of FlexboxLayout. A child view won't shrink less than the value of these attributes (varies based on the flexDirection attribute as to which attribute imposes the size constraint along the main axis) regardless of the layout_flexShrink attribute.

      Min width explanation

  • layout_maxWidth / layout_maxHeight (dimension)

    • These attributes impose maximum size constraints for the children of FlexboxLayout. A child view won't be expanded more than the value of these attributes (varies based on the flexDirection attribute as to which attribute imposes the size constraint along the main axis) regardless of the layout_flexGrow attribute.

      Max width explanation

  • layout_wrapBefore (boolean)

    • This attribute forces a flex line wrapping, the default value is false. i.e. if this is set to true for a flex item, the item will become the first item of a flex line. (A wrapping happens regardless of the flex items being processed in the previous flex line) This attribute is ignored if the flex_wrap attribute is set to nowrap. The equivalent attribute isn't defined in the original CSS Flexible Box Module specification, but having this attribute is useful for Android developers. For example, to flatten the layouts when building a grid-like layout or for a situation where developers want to put a new flex line to make a semantic difference from the previous one, etc.

      Wrap before explanation

Others

Known differences from the original CSS specification

This library tries to achieve the same capabilities of the original Flexible Box specification as much as possible, but due to some reasons such as the way specifying attributes can't be the same between CSS and Android XML, there are some known differences from the original specification.

(1) There is no flex-flow equivalent attribute

  • Because flex-flow is a shorthand for setting the flex-direction and flex-wrap properties, specifying two attributes from a single attribute is not practical in Android.

(2) There is no flex equivalent attribute

  • Likewise flex is a shorthand for setting the flex-grow, flex-shrink and flex-basis, specifying those attributes from a single attribute is not practical.

(3) layout_flexBasisPercent is introduced instead of flexBasis

  • Both layout_flexBasisPercent in this library and flex-basis property in the CSS are used to determine the initial length of an individual flex item. The flex-basis property accepts width values such as 1em, 10px, and content as strings as well as percentage values such as 10% and 30%. layout_flexBasisPercent only accepts percentage values. However, specifying initial fixed width values can be done by specifying width (or height) values in layout_width (or layout_height, varies depending on the flexDirection). Also, the same effect can be done by specifying "wrap_content" in layout_width (or layout_height) if developers want to achieve the same effect as 'content'. Thus, layout_flexBasisPercent only accepts percentage values, which can't be done through layout_width (or layout_height) for simplicity.

(4) layout_wrapBefore is introduced.

  • The equivalent attribute doesn't exist in the CSS Flexible Box Module specification, but as explained above, Android developers will benefit by having this attribute for having more control over when a wrapping happens.

(5) Default values for alignItems and alignContent are set to flex_start instead of stretch.

  • Setting stretch for the alignItems is expensive because the children of FlexboxLayout are measured more than twice. The difference is more obvious when the layout hierarchy is deeply nested.

Xamarin Binding

Xamarin binding is now available on NuGet thanks to @btripp

Demo apps

Flexbox Playground demo app

The demo-playground module works as a playground demo app for trying various values for the supported attributes. You can install it by

./gradlew demo-playground:installDebug

Cat gallery demo app

The demo-cat-gallery module showcases the usage of the FlexboxLayoutManager inside the RecyclerView that handles various sizes of views aligned nicely regardless of the device width like the Google Photo app without loading all the images on the memory. Thus compared to using the {@link FlexboxLayout}, it's much less likely to abuse the memory, which sometimes leads to the OutOfMemoryError.

./gradlew demo-cat-gallery:installDebug

How to make contributions

Please read and follow the steps in CONTRIBUTING.md

License

Please see LICENSE

flexbox-layout's People

Contributors

abarisain avatar alashow avatar alexbalo avatar aliafshar avatar androhi avatar christmasjason avatar dkzwm avatar eddieringle avatar evant avatar gavras avatar guhongya avatar hkurokawa avatar jeffdgr8 avatar jhwsx avatar jlleitschuh avatar jonathan-caryl avatar knightcube avatar krishmunot avatar kryptkode avatar louis993546 avatar magazmj avatar mgaetan89 avatar raeglan avatar sikrinick avatar technoir42 avatar thagikura avatar yaraki avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flexbox-layout's Issues

Element margins do not expand flexbox container with wrap_content

Version 0.2.4 introduced a layout bug, I believe it was this commit.

A FlexboxLayout with height="wrap_content" is supposed to set its height to fit all contained elements. This does not work correctly when elements have a margin. The container height only matches the height of the element itself, without the margin, but then the element gets shrunk so that it fits into the container with the margin. This results in a part of the element being cut off by the margin, like in the following example:

image

The above label has a marginBottom of 6dp and it's cut off at the bottom by 6dp. The glitch goes away if we remove the margin (which it not desirable), or if we revert to 0.2.3.

Layout code for the above example (simplified):

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexWrap="wrap"
        app:justifyContent="flex_end">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="6dp"
            android:layout_gravity="top"
            android:layout_weight="1"
            app:layout_flexBasisPercent="50%"
            app:layout_flexGrow="1"
            app:layout_flexShrink="0"/>

Empty Vertical Space when FlexBasisPercent is used in row based Flex

Flexed items that are shrunk to fit 50% of the parent are leaving a considerable vertical gap equivalent to the size of the items before shrinking.

The flexbox layout attributes:

android:layout_width="match_parent" android:layout_height="match_parent" app:flexWrap="wrap_reverse" app:alignItems="stretch" app:alignContent="flex_start" app:flexDirection="row" android:id="@+id/flexbox"

The imageviews attribute:

lp.flexBasisPercent = 0.49f;

Reproduced result:

image

Invalid sizing of child when it has no size but only flexGrow

Android snippet:
https://gist.github.com/andrey-shikhov/6f65ca14bf3d44f0393a0f8ba6b9b764

screenshot_1479233115

Css snippet:
https://gist.github.com/andrey-shikhov/78d24b0724b1cc5f5690c2aa3597ddab

css-screen

A Very weird behavior of children measuring when a child has only flexGrow value without width. In this example, android flexbox gives height to child equal to count of chars int text(child of child in flexbox).
It really different from css flexbox(css snippet above)

Scroll?

I've populated my flexbox beyond the screen size... how do i scroll it ?

getMeasuredHeight() is wrong?

I put a FlexboxLayout with layout_height set to wrap_content (and a bottom margin) in a RelativeLayout with a fixed height. When I filled the FlexboxLayout with items and called getMeasuredHeight() later it returned the same value as getHeight(), despite there being items that were past the end of its container (I should mention that the FlexboxLayout was set to invisible before the layout passes, in case that matters). It is my understanding that getMeasuredHeight() should return the height that the View would be if it weren't constrained by a container, so this result seems like a bug.

Avoid object creations in the onMeasure method.

Some fields are created in the onMeasure method such as mReorderedIndices. It will be more efficient to avoid object creations as much as possible.
Create those objects when needed instead (e.g. It will be enough to recreate the mReorderedIndices when the children views are updated in the FlexboxLayout)

Writing wiki pages

I wrote some wiki pages in my repo in an effort to make the documentation more clear:

https://github.com/lii2/flexbox-wiki

*Added an installation page and attributes page
*Updated the sidebar to match
*Added a table of attributes so people could scan through the attributes easily

A question: Am I installing the flexbox layout correct? It seems to be running correctly on my smartphone, but the Android Studio XML design tab is running into rendering problems:

Exception raised during rendering: android.graphics.drawable.VectorDrawable_Delegate.nDraw(JJJLandroid/graphics/Rect;ZZ)I

Suggestion: External control of wrapping criteria

While it would certainly diverge from the CSS flexbox model upon which this library is based, there are some inherent inefficiencies for Android because of differences in cost in nesting ViewGroups in Android compared to nesting <div> elements in HTML.

For tabular data, the following is simple and efficient in HTML:

<div class="grid">
  <div class="grid__row">
    <div class="grid__item">1</div>
    <div class="grid__item">2</div>
  </div>
  <div class="grid__row">
    <div class="grid__item">1</div>
    <div class="grid__item">2</div>
    <div class="grid__item">3</div>
  </div>
  <div class="grid__row">
    <div class="grid__item">1</div>
    <div class="grid__item">2</div>
    <div class="grid__item">3</div>
    <div class="grid__item">4</div>
  </div>
</div>

And CSS flexbox can easily be applied to this. However for Android This would need to be done with a parent ViewGroup representing grid, containing an number for child grid_row ViewGroups, each containing a collection of Views representing the individual the individual cells. Such a hierarchy is somewhat inefficient both in terms of layout inflation, and during measurement and layout.

A couple of simple additions to FlexboxLayout could make it easy to flatten such layouts by removing the individual rows - FlexboxLayout manages a collection of FlexLine objects which get calculated during measurement - and this is much more efficient that having child ViewGroups representing individual rows. If it were possible to have some optional attributes which could control when we should wrap to a new FlexLine then the usefulness of FlexboxLayout would increase dramatically, I think. Specifically we could have a flexLineItems integer which would cause a wrap whenever the current FlexLine contains the specified number of items. In addition a LayoutParams.wrapAfter boolean (default to false) could be used to force a wrap after the current child View.

As I said, I appreciate that this is a deviation from the CSS flexbox model, but feel that it could be a really useful addition on Android.

Incorrect TextView wrap

I'm using FlexboxLayout 0.2.0, but I think that text is still not wrapping correctly.

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    app:flexWrap="wrap">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="AAAAAAB"/>

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="CCCCCCCCCCCCCCCCCCCCCCCC"/>

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

flex

This layout is rendered as top image, then I added 'D' (middle image), then another 'D' (bottom image). In top and bottom render FlexboxLayout wrapped text correctly, but in middle render there are missing 'B' from text1 and 'D' from text2.

When changed attribute layout_width to wrap_content, behavior is different, but still incorrect.

flexb

In first image is the same text as above, then added 'E', another 'E' and once again 'E'. In first and last is text rendered correctly. In second image there is missing half size of char 'E', in third image are missing half size of first char 'E' and completely missing second char 'E'.

After I've changed android:padding to android:layout_margin, text is rendering correctly in all of the above cases.

separator line

Is it possible to have a separator line in multi-line flexbox after every line to increase human readability?

Parent padding affects FlexboxLayout

Setting padding to FlexboxLayout's parent adds left padding to FlexboxLayout itself. Did I misunderstand how some parameters work or is it a bug?
device-2016-05-16-111316

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns: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"
    android:padding="20dp">

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:alignContent="flex_start"
        app:alignItems="flex_start"
        app:flexDirection="row"
        app:flexWrap="wrap"
        app:justifyContent="flex_start">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="30dp"
            android:text="TEXTEXT"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="30dp"
            android:text="TEXTEXT"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="30dp"
            android:text="TEXTEXT"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="30dp"
            android:text="TEXTEXT"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="30dp"
            android:text="TEXTEXT"/>

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

</FrameLayout>

FlexboxLayout#getFlexLines may include dummy flex lines.

FlexboxLayout#getFlexLines may return FlexLines including dummy ones (a FlexLine that doesn't have any flex items in it but used as determining alignment along the cross axis) depending on the alignContent property.

For example, when the alignContent property is set to center dummy flex lines are inserted as the first and the last flex lines.

The dummy flex lines need to be removed from the result of FlexboxLayout#getFlexLines.

NullPointerException when Flexbox doesn't have any children

Hi, i'm receiving this crash when i add a flexbox to my layout without any children, i'm using version 0.2.0. Temporary fixed it by adding a 0dp size Space children.

 java.lang.NullPointerException: Attempt to invoke virtual method 'int android.util.SparseIntArray.size()' on a null object reference
                                                                                       at com.google.android.flexbox.FlexboxLayout.isOrderChangedFromLastMeasurement(FlexboxLayout.java:403)
                                                                                       at com.google.android.flexbox.FlexboxLayout.onMeasure(FlexboxLayout.java:259)
                                                                                       at android.view.View.measure(View.java:18794)
                                                                                       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5951)
                                                                                       at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1465)
                                                                                       at android.widget.LinearLayout.measureVertical(LinearLayout.java:748)
                                                                                       at android.widget.LinearLayout.onMeasure(LinearLayout.java:630)
                                                                                       at android.view.View.measure(View.java:18794)
                                                                                       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5951)
                                                                                       at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
                                                                                       at android.view.View.measure(View.java:18794)
                                                                                       at android.widget.RelativeLayout.measureChildHorizontal(RelativeLayout.java:715)
                                                                                       at android.widget.RelativeLayout.onMeasure(RelativeLayout.java:461)
                                                                                       at android.view.View.measure(View.java:18794)
                                                                                       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5951)
                                                                                       at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
                                                                                       at android.view.View.measure(View.java:18794)
                                                                                       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5951)
                                                                                       at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
                                                                                       at android.support.v7.widget.ContentFrameLayout.onMeasure(ContentFrameLayout.java:135)
                                                                                       at android.view.View.measure(View.java:18794)
                                                                                       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5951)
                                                                                       at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1465)
                                                                                       at android.widget.LinearLayout.measureVertical(LinearLayout.java:748)
                                                                                       at android.widget.LinearLayout.onMeasure(LinearLayout.java:630)
                                                                                       at android.view.View.measure(View.java:18794)
                                                                                       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5951)
                                                                                       at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
                                                                                       at android.view.View.measure(View.java:18794)
                                                                                       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5951)
                                                                                       at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1465)
                                                                                       at android.widget.LinearLayout.measureVertical(LinearLayout.java:748)
                                                                                       at android.widget.LinearLayout.onMeasure(LinearLayout.java:630)
                                                                                       at android.view.View.measure(View.java:18794)
                                                                                       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5951)
                                                                                       at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
                                                                                       at com.android.internal.policy.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2643)
                                                                                       at android.view.View.measure(View.java:18794)
                                                                                       at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:2100)
                                                                                       at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1216)
                                                                                       at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1452)
                                                                                       at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1107)
                                                                                       at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6013)
                                                                                       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:858)
                                                                                       at android.view.Choreographer.doCallbacks(Choreographer.java:670)
                                                                                       at android.view.Choreographer.doFrame(Choreographer.java:606)
                                                                                       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844)
                                                                                       at android.os.Handler.handleCallback(Handler.java:739)
                                                                                       at android.os.Handler.dispatchMessage(Handler.java:95)
                                                                                       at android.os.Looper.loop(Looper.java:148)
                                                                                       at android.app.ActivityThread.main(ActivityThread.java:5417)
                                                                                       at java.lang.reflect.Method.invoke(Native Method)
                                                                                       at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
                                                                                       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

constraintlayout vs flexbox-layout

hi guys,
how does flexbox layout fit with constraintlayout ? we are looking to build interfaces inspired by the flexbox way of working.

we are unsure of how both these libraries fit with each other. Both are "google recommended". Constraintlayout is even part of "best practices" - https://developer.android.com/training/constraint-layout/index.html

what is even more puzzling is that flexbox-layout does not build on top of constraintlayout. if there was some info on how an end-user should think about using both of these.... that would be awesome.

The demo app has a problem of the dialog theme with Kitkat devices

This demo app is so amazing!
But I thought the theme was not good when I open the dialog with KitKat device.

This is the screen I saw.

device-2016-09-02-145520
Sony Xperia Z1f Android 4.4.2

I guess it needs the theme of android.R.style.Theme_Holo_Light_Dialog on between Honeycomb and Kitkat.

Failed to resolve: com.google.android:flexbox:0.2.1

I added compile 'com.google.android:flexbox:0.2.1' to my build.gradle (app) file and I got the above error. The automatic install takes a while, so how can I manually download and install the dependencies on OsX

[Wiki] Performance comparison with other existing layouts

It would be nice if performance comparison with existing layouts (LinearLayout or GridLayout) is explained.

FlexboxLayout is intended to offer flexible layout functionalities rather than performance improvement, but in some situations (like building a grid like layout with dynamic number of children), FlexboxLayout should reduce the nested ViewGroups.
It's useful to explain performance comparison in such cases, if it turns out FlexboxLayout has disadvantages compared to existing layouts, it will be also beneficial for recogniznig the room for optimization for FlexboxLayout.

android-support-library

We upgrade our android-support-library to 24.0 recently,but flexbox used 23.0,so compile failed,is there any solution?

Not wrapping content

As per question on Stackoverflow Flexbox shrinks the content. Expected outcome was that, lets say, if just three categories only could be fitted in first, then, next items should appear in next line.

image

Any help would be appreciated. Thank you.

Avoid duplicate measurements for children

In the onMeasure method, child.measure may be called more than once (e.g. Called first in the first loop to determine the number of flex lines, then called later to be expanded/shrank based on flexGrow/flexShrink attributes also maybe called to be stretched based on alignItems/alignSelf attributes).

This may cause performance issue especially the child is a nested ViewGroup.
It will be efficient to defer the child.measure as much as possible to reduce the number of measurements of the same child.

Different behavior from css flexbox when center aligned item has margin on one side

css flexbox snippet:
https://gist.github.com/andrey-shikhov/f003d6c82ed307f6a1e24786207fcbeb

Result:
css-align

Android snippet:
`

    <LinearLayout android:layout_width="100dp"
                  android:orientation="horizontal"
                  android:layout_height="20dp">

            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#fff"
                />

            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#000"
                />

            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#fff"
                />

            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#000"
                />

            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#fff"
                />

            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#000"
                />

            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#fff"
                />

            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#000"
                />

            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#fff"
                />

            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#000"
                />

    </LinearLayout>

    <com.google.android.flexbox.FlexboxLayout     xmlns:android="http://schemas.android.com/apk/res/android"
                                              android:layout_width="100dp"
                                              xmlns:app="http://schemas.android.com/apk/res-auto"
                                              app:flexDirection="column"
                                              android:layout_height="20dp">

            <View
                android:layout_width="20dp"
                android:layout_height="match_parent"
                android:layout_marginRight="20dp"
                android:background="#7b7bb9"
                app:layout_alignSelf="center"
                />

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

</LinearLayout>

`
Result:
android-align

Seems to be css flexbox includes margin into the size of the item and after centers it, but in android flexbox centers item before and after applies margin.

Expected behavior:
same on both platforms.

Add Wiki page

Such as use cases where FlexboxLayout is more beneficial than other existing layouts.

LayoutManager for RecyclerView

FlexboxLayout is implemented as a subclass of the ViewGroup, so view recycles are not considered when used as a scrollable view (e.g. wrapped with the ScrollView).

Adding a new class as a subclass of RecyclerView.LayoutManager is more useful in that situation to take view recycles into account.

Implement incremental measurement/layout logic

When requestLayout is called, all flex items measurements are executed regardless of the diff from the last measurement.

It will be more efficient to execute a measurement for only affected flex items from the last measurement.
(E.g. if a new flex item is appended to the end of the flex container, existing flex items (or at least flex lines that aren't relevant to the new flex item) don't have to be re-measured)

[Proposal] Remove Hungarian Notation

I know, it's not a big deal but what do you think about removing hungarian notation from this repo?
In my opinion there is no positive reason to use that because here is the out side of AOSP.
Thx in advance.

TextView text rendering problem - text is cut off

Hope I'm using Flexbox correctly, but I occasionally see TextView within a Flexbox render text incorrectly.

screenshot_2016-05-17-08-46-01
Samsung S6; OS 5.1.1
flexbox-bug
Emulator; OS 6

To repro, add this layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns: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="wrap_content">

    <View
        android:layout_width="4dp"
        android:layout_height="match_parent"
        android:background="@color/primary1"/>

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="4dp"
        android:paddingEnd="8dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingStart="8dp"
        android:paddingTop="4dp"
        app:flexWrap="wrap">

        <TextView
            android:id="@+id/content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:textSize="14sp"
            app:layout_flexBasisPercent="100%"/>

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

and Activity

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.comment_item_layout);
        TextView tv3 = (TextView) findViewById(R.id.content);
        tv3.setText(Html.fromHtml("<p>Since we&#x27;re on the subject of hard drives, I hope this will be helpful or " +
                "interesting:<p>It has been our experience that it is no longer possible to buy new, non-fraudulant " +
                "drives of <i>a sort of recent, but not brand new</i> drive model from Amazon.<p>So, for instance, in" +
                " early 2016 if you want to buy 4TB enterprise drives from Amazon, you will find them, they will be " +
                "classified as brand new, and they will be sold by some big amazon parts seller.<p>When you receive " +
                "them they will be nice and shiny brand new wrapped - perfectly sealed - and when you spin them up, " +
                "SMART stats will show 4000-6000 hours of use and that they are 2-3 years old.<p>This is almost " +
                "universal and has been happening for at least 3-4 years. These sellers are selling the drives as " +
                "brand new and they are anything but. When you complain, they will immediately exchange or refund - " +
                "there&#x27;s never a hassle there - and once in a while the seller will spout some bullshit about " +
                "the drives being &quot;new pulls&quot; ... that is, drives they stripped from unsold servers&#x2F;" +
                "desktops.<p>Hope that helps."));
    }
}

Support Lib Version: 23.3.0; CompileSDK 23; TargetSDK 22

Flexbox not respecting children margins

We're on 0.2.2. We had wanted a slight margin (4dp) in between items in the flexbox, as well as between the lines when the flexbox wrapped the items. However, after trying multiple variations of applying margin to the items in the flexbox it did not seem to comply. Is this possible? We resorted to using another FrameLayout around the LinearLayout for padding, but what wondering if this is a bug or just not supported functionality within flexbox?

For example here is the item we were using in the flexbox. It was not respecting the layout_marginBottom or layout_marginRight on the LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:cropToPadding="false"
       android:clipToPadding="false"
       android:clipChildren="false"
       android:layout_height="32dp"
       android:layout_width="wrap_content"
       android:layout_marginBottom="10dp"
       android:layout_marginRight="10dp">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="14dp"
        android:layout_height="14dp"
        android:layout_gravity="center_vertical"
        app:srcCompat="@drawable/ic_tag"
        android:tint="@color/bluey_grey"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:ellipsize="end"
        android:maxLines="1"
        android:paddingEnd="8dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingStart="8dp"
        android:textColor="@color/bluey_grey"
        android:textSize="14sp"
        tools:text="Conversations"/>

    <ImageView
        android:id="@+id/delete_icon"
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        app:srcCompat="@drawable/ic_delete"/>

</LinearLayout>

change direction of items

hi. your lib is awesome, so I want to use it in my app. the problem is I want to change direction of items be right to left. can u help me?

Float value is not accepted as Flex Grow on the sample application

Description

On the sample application, I changed Flex Grow for the last item from 0.0 to 1.0. I expected it made the item expand to the end of the line. However, the width of the item didn't change and when I opened the dialog again, Flex Grow was 0.0.

Environment

  • Mac OS X 10.11.5
  • Android Emulator, Nexus One, API 17
  • Android Studio 2.2 Beta 3

Steps

  1. Open the sample app
  2. Click the item 3
  3. Change the value of Flex Grow from 0.0 to 1.0
  4. Click OK on the dialog

Result

Nothing happens

Expected Result

The item 3 expands to the end of the line

Remarks

I found the below code and it seems the code failed to parse a text containing dots . as an integer, such as 1.0. In fact, when I input 1 instead of 1.0 at step 3, the result was as expected.

https://github.com/google/flexbox-layout/blob/master/app/src/main/java/com/google/android/apps/flexbox/FlexItemEditFragment.java#L376

I am wondering you might have to update your FlexEditTextWatcher so that it can accept a flow value as an input when the ID of the TextInputLayout is input_layout_flex_grow or input_layout_flex_shrink. I'm creating a small patch to fix it to clarify the point and will let you know when it's ready.

Thank you.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.