A flow layout for Android with auto-spacing.

Overview

FlowLayout

A FlowLayout for Android, which allows child views flow to next row when there is no enough space. The spacing between child views can be calculated by the FlowLayout so that the views are evenly placed.

Gradle

AndroidX:

implementation 'com.nex3z:flow-layout:1.3.3'

AppCompact:

implementation 'com.nex3z:flow-layout:1.2.4'

Usage

<com.nex3z.flowlayout.FlowLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flChildSpacing="auto"
    app:flChildSpacingForLastRow="align"
    app:flRowSpacing="8dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SUN"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MON"/>

    <!--...-->

</com.nex3z.flowlayout.FlowLayout>

Attributes

Attribute Format Description
flFlow boolean true to allow flow. false to restrict all child views in one row. The default is true.
flChildSpacing auto/dimension The horizontal spacing between child views. Either auto, or a fixed size. The default is 0dp.
flChildSpacingForLastRow auto/align/
dimension
The horizontal spacing between child views of the last row. Either auto, align or a fixed size. If not set, childSpacing will be used instead.
flRowSpacing auto/dimension The vertical spacing between rows. Either auto, or a fixed size. The default is 0dp.
flRtl boolean true to layout child views from right to left. false to layout from left to right. The default is false.
flMaxRows integer The maximum height of FlowLayout in terms of number of rows.

auto means that the actual spacing is calculated as per the size of the FlowLayout and the number of child views (or rows), so that the child views (or rows) are placed evenly.

align in childSpacingForLastRow means that the horizontal spacing of the child views in the last row keeps the same with the spacing used in the row above. If there is only one row in FlowLayout and the childSpacingForLastRow is set to align, this value is ignored and the actual spacing is calculated using childSpacing.

Licence

Copyright 2016 nex3z

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • Main Layout view disappears

    Main Layout view disappears

    When Iam add the Flowlayout into my layout then the preview in the split or the design mode disapears

    Iam adding this way

    <com.nex3z.flowlayout.FlowLayout android:id="@+id/flowLaySKUs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" app:flChildSpacing="2dp" app:flRowSpacing="2dp" />

    opened by NexoVentas-Android 8
  • how could i know if i'd stop calling addView() when flMaxRows is set?

    how could i know if i'd stop calling addView() when flMaxRows is set?

    hi,

    we'd not know how many children could be displayed in the layout if flMaxRows is set.

    so how could i know if i'd stop calling addView()?

    many thanks.

    opened by macarthor 8
  • FlowLayout children overdraw themselves

    FlowLayout children overdraw themselves

    Version 1.3.2 introducs a bug when FlowLayout is being reused i.e. on Recycleview.

    On first layout it properly draws its children: Screenshot 2020-12-10 at 22 27 53

    but when the screen is scrolled and the container is reused its starts drawing over its children (or draws children that shouldn't be drawn?): Screenshot 2020-12-10 at 22 28 06 Screenshot 2020-12-10 at 22 28 06

    That is how the view looks like without app:flMaxRows="1": Screenshot 2020-12-10 at 22 28 06

    FlowLayout setup:

    <com.nex3z.flowlayout.FlowLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flChildSpacing="4dp"
        app:flMaxRows="1"
        app:flRowSpacing="4dp"
        ><!-- children --> </com.nex3z.flowlayout.FlowLayout>
    
    opened by mateuszkwiecinski 4
  • Children still laid out even when outside flMaxRows

    Children still laid out even when outside flMaxRows

    With the following setup:

    <com.nex3z.flowlayout.FlowLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flChildSpacing="4dp"
        app:flMaxRows="1"
        app:flRowSpacing="4dp"
        ><!-- children --> </com.nex3z.flowlayout.FlowLayout>
    

    when the children would normally extend to second and further rows, then even though only the first row is drawn, the second row is still laid out and extends outside the FlowLayout. That is, FlowLayout's height is only big enough to fit the first row, but the second row items still appear in the hierarchy outside of that area. This is usually not an issue, unless the parent layout declares clipChildren="false" somwhere, in which case the second row will start rendering and probably overlapping some other views.

    Here with the above setup I have the FlowLayout bounds highlighted: image

    as you can see, some children are laid out outside of it: image

    opened by lwasyl 3
  • Showing JavaCompile Error while building app

    Showing JavaCompile Error while building app

    WARNING: API 'variant.getJavaCompile()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'. It will be removed at the end of 2019. For more information, see https://d.android.com/r/tools/task-configuration-avoidance. To determine what is calling variant.getJavaCompile(), use -Pandroid.debug.obsoleteApi=true on the command line to display a stack trace. Affected Modules: flowlayout

    opened by Ganeshpokale1988 3
  • Not able to center align elements if 2 rows have different number of views.

    Not able to center align elements if 2 rows have different number of views.

    I am trying to center align the elements in each row but always getting left or right alignment.

    I have 5 rows with 14 elements, First row seems fine but issues are with the other rows in the layout.

    Either the elements of bottom rows are aligned such that left and right items are at extreme left and right places simultaneously (if child spacing is "auto"). Or all the elements of particular row are shifted to the left (or right) aligned sequence (if child spacing is defined: lets say 10dp).

    I need these items to be placed in center when I define the child spacing.

    Please give a solution on this.

    opened by KhushbooR 3
  • Publish to mavenCentral

    Publish to mavenCentral

    Bintray is getting shut down in 3 months, and right now FlowLayout is only available on jcenter.

    See https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/ for details

    opened by lwasyl 2
  • Don't layout and render cut off items in single row

    Don't layout and render cut off items in single row

    Currently with a single row and e.g. 10 children, it's possible to have just 4 items visible, fifth item visible partially and the rest hidden. One obvious use case for this behavior is with a scroll view, but I'd like to only show the fully visible items, and just drop the rest.

    Is it possible that such behavior is added to the library (I can try to contribute) or maybe it's possible with the existing API? I'd like to avoid measuring the items myself (since then they'd be measured twice, by me and by the flow layout) is possible

    opened by lwasyl 2
  • getRowCount

    getRowCount

    Hi, i need a function to get the rows count, i added it by customizing your class in my project, but i think its better to add it on this repo, also i can send a merge request to add it if you haven't enough time.

    opened by imaNNeoFighT 2
  • Is it possible to use as a Radio Group?

    Is it possible to use as a Radio Group?

    I am using this layout for checkboxes. But I also want to use it as a radio group. Since the built in radio group can only be used as horizontally and vertically, so using this layout as a radio group would solve many issues I guess

    opened by Esarve 1
  • RTL cutting layout

    RTL cutting layout

    I did flowLayout.isRtl = true and I got 1.png attached layout 1 Then I gave margin to flowlayout and used the below mentioned code flowLayout.isRtl = true val layoutParams = flowLayout.layoutParams as ViewGroup.MarginLayoutParams layoutParams.marginStart = CommonMethods.dpToPx(context!!, 40) flowLayout.layoutParams = layoutParams and the output I got 2.png attached layout 2

    It is cutting from the right side

    opened by devilabhi 1
Releases(v1.3.3)
Owner
Tianxing Li
Tianxing Li
A Android Web IDE supports code auto-completion and highlight, plugin (Supports Html, Css, JS, Json, Php etc)

WebDevOps A Android Web IDE supports code auto-completion and highlight, plugin (Supports Html, Css, JS, Json, Php etc) Join us QQ group number: 10314

SuMuCheng 22 Jan 3, 2023
Auto T-Shirt Shop that uses Google Pay API.

GooglePayApp Offer simpler and secure payments with Google Pay Google Pay lets your customers pay with the press of a button—using payment methods sav

Muhammad Saqib 0 Oct 20, 2021
Auto-pipeline: a source code generator, it will generate your component's pipeline

auto-pipeline ?? auto-pipeline is a source code generator, it will generate your

Zava 106 Dec 20, 2022
Shreyas Patil 2.1k Dec 30, 2022
The JeTrivia is built on a modern Android Development tech stack with MVVM architecture. Kotlin, Coroutine, Flow, StateFlow, Jetpack Compose, Navigation, Room, Hilt, Retrofit2, OkHttp3, kotlinx.serialization, MockK, Truth

JeTrivia ?? In Progress ?? The JeTrivia application is sample based on MVVM architecture. Fetching data from the network via repository pattern and sa

Tolga Bolatcan 5 Mar 31, 2022
🦄 Android Pokedex-AR using ARCore, Sceneform, Hilt, Coroutines, Flow, Jetpack (Room, ViewModel, LiveData) based on MVVM architecture.

?? Android Pokedex-AR using ARCore, Sceneform, Hilt, Coroutines, Flow, Jetpack (Room, ViewModel, LiveData) based on MVVM architecture.

Jaewoong Eum 535 Dec 9, 2022
An simple image gallery app utilizing Unsplash API to showcase modern Android development architecture (MVVM + Kotlin + Retrofit2 + Hilt + Coroutines + Kotlin Flow + mockK + Espresso + Junit)

Imagine App An simple image gallery app utilizing Unsplash API. Built with ❤︎ by Wajahat Karim and contributors Features Popular photos with paginatio

Wajahat Karim 313 Jan 4, 2023
Android multimodule project based on Kotlin, MVVM, SOLID, flow, coroutines and paging3.

TVMaze David Ferrándiz Features Retrieve TVMaze shows in a grid. See more information about the show in a new screen Tech Kotlin Retrofit Modularizati

David Ferrandiz 1 Nov 18, 2022
Simple Notes app demonstrates modern Android development with Hilt, Material Motion, Coroutines, Flow, Jetpack (Room, ViewModel) based on MVVM architecture.

Simple Notes app demonstrates modern Android development with Hilt, Material Motion, Coroutines, Flow, Jetpack (Room, ViewModel) based on MVVM architecture.

Aravind Chowdary 2 Sep 3, 2022
A Android app Permissions with Kotlin Flow APIs

Know about real-time state of a Android app Permissions with Kotlin Flow APIs. Made with ❤️ for Android Developers.

Shreyas Patil 281 Dec 30, 2022
Android developer tool to draw overlay layout for GUI debug

LayoutOverlay Overview Make a overlay window to show transparent shape to compare size with view, margin. Features Overlay window Drag Drag and drop t

7loro 1 Oct 11, 2021
Modern Social Profile Layout For Android

Social Profile Layout Modern Simple Social Profile Layout for your Android App Project Installation Just run this project on your Android Studio Proje

Yogi Prasetyawan 4 Dec 21, 2022
Android Kotlin Fundamentals: 02.3 ConstraintLayout using the Layout Editor

ColorMyViews Android Kotlin Bootcamp from Google Developer website Android Kotli

Marcelo Viana 0 Feb 13, 2022
🦁 A Disney app using transformation motions based on MVVM (ViewModel, Coroutines, Flow, LiveData, Room, Repository, Koin) architecture.

DisneyMotions A demo Disney app using transformation motions based on MVVM architecture. The motion system is included in the 1.2.0-alpha05 released m

Jaewoong Eum 1.4k Dec 16, 2022
Patter Lock using Hilt, Coroutines, Flow and Custom View Components based on MVVM architecture.

Pattern Lock App Sample project for created Pattern Lock View using custom view. Preview Usage Step 1 Add the PatterLockView in your XML layout file.

Furkan Özcan 5 Aug 22, 2021
Movie Search App - using Flow, Suspend Function, AAC ViewModel, Dagger Hilt and so on.

Movie Search App - using Flow, Suspend Function, AAC ViewModel, Dagger Hilt and so on.

Taiki Suzuki 10 Mar 19, 2022
TzRecipes App With Retrofit,Coroutines,Flow

TzRecipesApp Main Stack : Retrofit,Coroutines,Flow,LiveData,Mvvm SOLID,OOP,ClenArchitecture Разбиение приложения на data, domain, presentation слои Ма

null 2 Nov 9, 2021
Event Bus powered by Kotlin Coroutines Flow

FlowBus FlowBus is a kotlin event bus implementation. Powered by Kotlin Coroutines and Flows Android MainThread-aware Fully operable from Java code Ex

Robert Kosakowski 26 Dec 27, 2022
(Coroutine, Flow(+StateFlow), Hilt, JetPack, MVVM, Repository Pattern, Retrofit2 & OkHttp3, Moshi, Glide, Timber, Material-Components)

(Coroutine, Flow(+StateFlow), Hilt, JetPack, MVVM, Repository Pattern, Retrofit2 & OkHttp3, Moshi, Glide, Timber, Material-Components)

훈성 2 Nov 15, 2022