how do I change view? (in other words - navigate t...

# compose

[Bruno_]

how do I change view? (in other words - navigate to other Composable)
I tried to do the same thing as in Jetnews sample but it didn't work

the only thing I did different is instead of

MaterialTheme
        ModalDrawerLayout(
            bodyContent = { AppContent { onDrawerStateChange(DrawerState.Opened) } }
        )
    }

i placed inside Material theme AppContent() directly

[Bruno_]

MainActivity:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Main()
        }
    }
}

Main composable:

@Composable
fun Main()
{
    MaterialTheme {
        Crossfade(AppStatus) {
            when (it)
            {
                is Screen.Home -> HomeScreen()
                is Screen.Home2 -> HomeScreen2()
            }
        }
    }

Status:

sealed class Screen {
    object Home : Screen()
    object Home2 : Screen()
}

@Model
object AppStatus {
    var screen: Screen = Screen.Home
}

fun navigateTo(destination: Screen) {
    AppStatus.screen = destination
}

and views

@Composable
fun HomeScreen() {
    Container(alignment = Alignment.BottomRight, padding = EdgeInsets(10.dp)) {
        FloatingVectorImageButton(R.drawable.ic_crawling_applying) {
            println(1)
            navigateTo(Screen.Home2)
        }
    }
}

@Composable
fun HomeScreen2() {
    Container(alignment = Alignment.BottomLeft, padding = EdgeInsets(10.dp)) {
        FloatingVectorImageButton(R.drawable.ic_crawling_applying) {
            println(2)
            navigateTo(Screen.Home)
        }
    }
}

[Bruno_]

when I click a button, only 1 is being printed

[Bruno_]

does this @model makes that object's var something like an observable from rxjava? meaning that the view should update when the memory address of the var changes, right?

[Bruno_]

I also tried to print something in the 'Main' function which would tell me that the view is reloaded (assuming I'm not mistaken) but it wasn't actually triggered

[Fudge]

Right now there’s no easy way to navigate, i think what they did in jetnews is have a global variable that says what is the current state and then display the correct page based on that

[wasyl]

@Bruno__ Perhaps fun navigateTo needs a @Composable annotation too? So that plugin can do its magic when you change property on a @Model instance?

[Bruno_]

@wasyl not working

[wasyl]

Should be Crossfade(AppStatus.screen). Android Studio even complained for me that the types weren’t compatible. And then in fact you don’t need @Composable on navigateTo

[pavi2410]

Wow @Bruno_, you just wrote Jetpack Navigation Architecture component! This is so easy to understand and use

[Bruno_]

@wasyl actually that Crossfade(AppStatus.screen) thing was because I removed unnecessary bits here in slack chat

what version of compose are you using? dev02 by any chance?

[Bruno_]

@pavi2410 I've just copied it from Jetnews

[pavi2410]

Oh, I was unaware of that

[wasyl]

okay, I see now. You haven’t included FloatingVectorImageButton so I placed

Button("Go to home", onClick = {
    navigateTo(Screen.Home)
})

and

Button("To home 2", onClick = {
    navigateTo(Screen.Home2)
})

in the containers

[wasyl]

Can you post FloatingVectorImageButton? Are you sure the last parameter is an onClick lambda?

[Bruno_]

Yeah I've already tried removing that cus I noticed that I didn't send it

[Bruno_]

anyway, there it is

@Composable
fun FloatingVectorImageButton(
    @DrawableRes id: Int,
    color: Color = Color.White,
    backgroundColor: Color = Color(0xFF2196F3),
    onClick: () -> Unit
)
{
    FloatingActionButton(color = backgroundColor, onClick = onClick) {
        VectorImage(id, color)
    }
}

@Composable
fun VectorImage(@DrawableRes id: Int, color: Color = Color.Transparent)
{
    val vector = +vectorResource(id)
    WithDensity {
        Container(
            width = vector.defaultWidth.toDp(),
            height = vector.defaultHeight.toDp()
        ) {
            DrawVector(vector, color)
        }
    }
}

[wasyl]

Interesting then. Either way it works for me. Did you enable compose in build.gradle?

[Bruno_]

Of course I did not. Should work now tho I'm getting some weird buildtime errors, once I resolve them everything should be fine

[Bruno_]

Many thanks! ❤️ @wasyl

[wasyl]

Haha no worries @Bruno_, in fact I had exactly the same issue couple of days ago 😄 https://kotlinlang.slack.com/archives/CJLTWPH7S/p1571698171183700

[wasyl]

Glad I could help someone figure it out faster than it took me