Flex Layout System
Flex’s layout system allows users to customize the display of content. You can adjust the shape and size of any content, as well as the position of content.
Components - The Basic Building Block
Components are the basic building block of a Layout. They determine the type of Android View to create and how to decorate the View.
For example, Text Components are used for displaying text, and support Modifiers for customizing text; while Image Components are used for rendering images, and support Modifiers for customizing images.
Click on a component for more details.
| Component | Android View |
|---|---|
| Text Component | TextView |
| Text Span Component | TextView |
| Image Component | ImageView |
Container Components
Container Components are used to oragnize the position of other components.
For example, Linear Components position content compnents one after another, like a vertical list. Flex Components position content components horizontally and can overflow to the next row when more space is needed.
Click on a component for more details.
| Container Component | Android View |
|---|---|
| Linear Component | Linear Layout |
| Flex Component | Flexbox Layout |
| Card Component | Card View |
Reddit Components
Reddit Components are special components used to display complex Reddit data.
For example, the Award Component is used to display Reddit awards. The Media Preview Component is used to display image/videos if the post contains multimedia.
Click on a component for more details.
| Reddit Component |
|---|
| Award Component |
| Media Preview Component |
| Markdown Component |
Modifiers
Modifiers control the look and behavior of Components. From text size to content padding, you can customize Components by changing its Modifier values. Click on a Component above to see the full list of Modifiers available.
View Modifiers
View Modifiers are Modifiers supported by all Components. They allow the customization of common attributes such as width, height, padding & margin.
States
States are used to apply Modifiers when certain conditions defined by the State pass. They are the if-else conditionals of Flex.
States can be used to show or hide spoiler tags, change the style of the author if they are a Reddit moderator, change the color of the score if the user upvoted the post, etc.
Read more about Default & Condition States