[Compose] ConstraintLayout does not resize to full screen when inside NavHost

[shalva97]

Hi, hpefuly this is right place to report this...

Expectation: So I have a NavHost with just one destination called "home" and it has a logout button positioned to the top-right corner. Also there is a Loading composable.

When app starts, it will show Loading... and then it should switch to Content(), which displays one button and has a red background.

Actual: As you can see it only takes space that was first ocupied by Text:

If I use compose version "1.1.1" it works as expected but breaks at version "1.3.0-beta03". Have not tested on other versions...

Here is the code:

package com.shalva97.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            JellyList()
        }
    }
}

@Composable
fun JellyList() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            Home()
        }
    }
}

@Composable
@Preview
fun Home(navigateToLogin: () -> Unit = { }) {

    var state by remember {
        mutableStateOf("loading")
    }
    val scope = rememberCoroutineScope()

    LaunchedEffect(key1 = 123, block = {
        scope.launch {
            delay(1000)
            state = "content"
        }
    })

    when (state) {
        "loading" -> {
            Text(text = "Loading...")
        }
        "content" -> {
            Content(Modifier.fillMaxSize())
        }
    }
}

@Composable
fun Content(
    modifier: Modifier
) {
    ConstraintLayout(
        modifier = modifier.background(Color.Red)
    ) {
        val (logoutButton, content, bottomNavigation) = createRefs()

        Button(onClick = { }, modifier = Modifier.constrainAs(logoutButton) {
            top.linkTo(parent.top)
            end.linkTo(parent.end)
        }) {
            Text(text = "logout")
        }
    }
}

Gradle:

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    namespace 'com.shalva97.myapplication'
    compileSdk 33

    defaultConfig {
        applicationId "com.shalva97.myapplication"
        minSdk 26
        targetSdk 33
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.1.1'
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {

    def compose_ui_version = '1.3.0-beta03'

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.1'
    implementation "androidx.compose.ui:ui:$compose_ui_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
    implementation 'androidx.compose.material:material:1.1.1'
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha01")
    implementation 'androidx.navigation:navigation-runtime-ktx:2.5.2'
    implementation 'androidx.navigation:navigation-compose:2.5.2'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"
}