FoldAwareColumn<\/code>! This new component is part of Accompanist, Google\u2019s \u201csandbox\u201d for experimental Jetpack Compose APIs. The Accompanist Adaptive library<\/a> already contains the TwoPane<\/code><\/a> component, which we tested out late last year, so FoldAwareColumn<\/code> will be the second component to join the library.\n<\/p>\n\n ![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/06\/word-image-3304-1.png\")
FoldAwareColumn<\/code> lays out children like a typical Column<\/code> (left) unless a separating fold is present, in which case it places children around the fold to ensure that visuals and controls are accessible (right).<\/em>\n<\/p>\nComponent inspiration<\/h2>\n
\n We first started talking about FoldAwareColumn<\/code> when we met last year at droidcon NYC 2022! The original idea was to create a sheet-like component with an enhancement similar to the content drawer in our NavigationRail sample<\/a>. The original enhancement dynamically animated sheet content to place around a fold, and the behavior looked like this:\n<\/p>\n\n ![\"A](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/06\/a-screen-shot-of-a-tablet-description-automatical.gif\")
<\/br>Figure 2. FoldAwareColumn<\/code> was originally inspired by an enhancement in our Navigation Rail sample, which modified a bottom sheet component to place content around a fold.<\/em>\n<\/p>\n\n As we prototyped and thought more about potential applications, we realized that creating a FoldAwareColumn<\/code> would be more useful than just making one specific enhanced sheet component. That way, FoldAwareColumn<\/code> can be used inside any other components, like the foundational Row<\/code> or Column<\/code> composables.\n<\/p>\n\n So, we finally settled on this as the first version of the FoldAwareColumn<\/code> API:\n<\/p>\n fun FoldAwareColumn(\r\n displayFeatures: List<DisplayFeature>,\r\n modifier: Modifier = Modifier,\r\n foldPadding: PaddingValues = PaddingValues(),\r\n horizontalAlignment: Alignment.Horizontal = Alignment.Start,\r\n content: @Composable FoldAwareColumnScope.() -> Unit,\r\n )<\/pre>\nFeatures<\/h2>\n
\n The main feature of FoldAwareColumn<\/code> is that it has the ability to place children around a separating horizontal fold. As a reminder, isSeparating<\/code><\/a> returns true when a device with a flexible screen is folded or if the device has a physical hinge\/separation.\n<\/p>\n\n In addition to this main feature, the first version of FoldAwareColumn<\/code> has similar features to Column<\/code>, as well as some unique features related to fold-aware enhancements:\n<\/p>\n\n- \n Alignment support\n <\/li>\n
- \n
ignoreFold()<\/code> modifier\n <\/li>\n- \n
foldPadding<\/code> parameter\n <\/li>\n<\/ul>\n\n Some of these features are made available through FoldAwareColumnScope<\/code>, which is used just like ColumnScope<\/code>.\n<\/p>\nAlignment support<\/h3>\n
\n Like the original Column<\/code>, FoldAwareColumn<\/code> provides support for setting the horizontal alignment of its children. You can do this either by specifying the horizontalAlignment<\/code> parameter in the composable or by using the align<\/code> and alignBy<\/code> modifiers on children of the layout. These modifiers are made available through FoldAwareColumnScope<\/code>, and you can see an example in Figure 3 of the three different alignment options: Alignment.Start<\/code>, Alignment.CenterHorizontally<\/code>, and Alignment.End<\/code>.\n \n<\/p>\n\n At this time, the component does not support weight or arrangement due to the additional complications caused by placing the children around the fold. Because of this, FoldAwareColumn<\/code> will always place children starting from the top of the layout.\n<\/p>\nIgnore fold modifier<\/h3>\n
\n The ignoreFold()<\/code> modifier is available through FoldAwareColumnScope<\/code>, and it can be used on any children of the layout to make sure they are placed without taking into consideration any folding features. This means that even if a child overlaps a separating fold, it won\u2019t be moved. This can be especially useful when dealing with children that have large height but can be partially occluded, such as images.\n<\/p>\n\n ![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/06\/word-image-3304-3.png\")
FoldAwareColumn<\/code> offers support for specifying the horizontal alignment of children, which can be Alignment.Start<\/code> (heart icon), Alignment.CenterHorizontally<\/code> (text), or Alignment.End<\/code> (image). FoldAwareColumnScope<\/code> also gives you access to the ignoreFold()<\/code> modifier, which is used on the image to avoid changing its placement, even when a separating fold is present. <\/em>\n<\/p>\nFold padding parameter<\/h3>\n
\n When creating a FoldAwareColumn<\/code>, you can specify the foldPadding<\/code> parameter to add extra space when adjusting the placement of the layout\u2019s children. This fold padding will only be applied when a separating fold is present. The goal of this parameter is to help you follow foldable design guidelines<\/a>, which suggest that controls and visuals shouldn\u2019t be placed too close to a fold for optimal user experience.\n<\/p>\n\n The parameter is of type PaddingValues<\/code>, but it\u2019s important to note that only the top<\/code> and bottom<\/code> values of the padding will be taken into consideration, since FoldAwareColumn<\/code> lays out children in a vertical manner.\n<\/p>\nAdd to your project<\/h2>\n
\n To start using FoldAwareColumn<\/code> in your projects, follow these steps:\n<\/p>\n\n- \n
Make sure you have the mavenCentral()<\/code> repository in your top-level build.gradle<\/b> file:\n<\/p>\n allprojects {\r\n repositories {\r\n google()\r\n mavenCentral()\r\n }\r\n }\r\n<\/pre>\n<\/li>\n- \n
Add dependencies to the module-level build.gradle<\/b> file (current version may be different from what’s shown here):\n<\/p>\n implementation \"com.google.accompanist:accompanist-adaptive:0.31.4-beta\"<\/pre>\n<\/li>\n
- \n
Also ensure the compileSdkVersion<\/code> is set to API 33 and the targetSdkVersion<\/code> is set to API 32 or newer in the module-level build.gradle<\/b> file:\n<\/p>\n android { \r\n compileSdkVersion 33\r\n \r\n defaultConfig { \r\n targetSdkVersion 32\r\n } \r\n }\r\n<\/pre>\n<\/li>\n- \n Call
FoldAwareColumn<\/code> and pass in all the required parameters: calculateDisplayFeatures<\/code> and the composable content. Optionally, you may also specify a Modifier, the horizontal alignment, and the fold padding, of which only the vertical padding values are used. This can be used to ensure that controls and important UI elements aren\u2019t too close to the fold, which will improve the user experience.\n<\/li>\n<\/ol>\n\n For more information, check out the API reference<\/a> and library samples<\/a>.\n<\/p>\nResources and feedback<\/h2>\n
\n All of the code for FoldAwareColumn<\/code> in available on GitHub in the Accompanist repo<\/a>. \n<\/p>\n\n To learn more about Accompanist and enhancing your apps for foldables, check out these resources:\n<\/p>\n
\n- Accompanist (google.github.io)<\/a>\n <\/li>\n
- Learn about foldables \u00a0|\u00a0 Android Developers<\/a>\n <\/li>\n
- Support foldable and dual-screen devices with Jetpack WindowManager \u00a0|\u00a0 Android Developers<\/a>\n <\/li>\n<\/ul>\n
\n If you have any questions, use the feedback forum<\/a>, file an issue in the Accompanist issue tracker<\/a>, or message us on Twitter @surfaceduodev<\/a>.\n<\/p>\n