Layout Scaffold

Content

• About
• Screenshots
• How to add the library
• How to Use
• How to Implement Foldables

About

This library adds a composable to make developers life easier when it comes to have a proper layout. According to material3 guidelines the navbar should be on the left and not in the bottom when the device it's in landscape. This composable can detect if the device is a tablet too which can be handy depending on how you design your app.

Screenshots

Click to see the screenshots

Smartphone

Tablet

How to add the library

Adding Jitpack URL

Add maven in your (settings.gradle):

dependencyResolutionManagement {
  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
  repositories {
      // Other URLs
      maven("https://jitpack.io")
  }
}

Adding dependency in gradle

On your app gradle add:

implementation ("com.github.lighttigerXIV:layout-scaffold:2.0.2")

How to use

To use it just simply use it like this:

LayoutScaffold(
  navigationBar = { isTablet, inLandscape ->
      // Your navbar content
  }
){isTablet, inLandscape ->
  // Your app content
}

Note

The navigation bar is optional so you may only need the following:

LayoutScaffold{isTablet, inLandscape ->
  // Your app content
}

Utils

To check if the device is a phone:

val isPhone = isPhone()

To check if the device is a tablet:

val isTablet = isTablet()

To check if the device is a foldable:

val isFoldable = isFoldable()

How to Implement Foldables

I don't have a good way to make a wrapper for this so i leave here how to check if a foldable is half open, fully open or closed. It might help someone :)

Add Window Library

implementation("androidx.window:window:1.3.0")

Add lifecycle listener in MainActivity

@AndroidEntryPoint
class MainActivity : FragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        lifecycleScope.launch{
          lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
            WindowInfoTracker.getOrCreate(this@MainActivity)
              .windowLayoutInfo(this@MainActivity)
              .collect { layoutInfo ->
                // This folding feature returns the state of the folding.
                // It will return null if the device isn't a foldable or the foldable it's closed.
                val foldingFeature = layoutInfo.displayFeatures.filterIsInstance<FoldingFeature>().firstOrNull()
  
                val isFullyOpen = foldingFeature?.state == FoldingFeature.State.FLAT
                val isHalfOpen = foldingFeature?.state == FoldingFeature.State.HALF_OPENED
                val isOpen = isFullyOpen || isHalfOpen
  
                // Now you can send the data you need to your repository assuming
                // you can properly code on Android :P
              }
          }
        }
  }
}