Issues in the "Improve UI elements for list-detail view" section
Unit 4 -> Adapt for different screen sizes -> Build an adaptive app with an adaptive layout codelab -> Implement adaptive content layout.
In the section titled "Improve UI elements for list-detail view", the objective is to Improve the ReplyDetailsScreen()
composable inside the ReplyDetailsScreen.kt
file by ridding it from the "extraneous elements" for when it's displayed in the expanded list-detail layout as opposed to the stand-alone layout.
The issue is that when following all the instructions correctly to the end, the app doesn't run properly due to a compilation error. In short, the instructions are incomplete (and illegible).
The intended behavior and the shortcomings
The section attempts to achieve its objective by adding the isFullScreen
Boolean parameter to the ReplyDetailsScreen()
composable definition to differentiate the composable when used as a standalone or inside the home screen. This addition requires updating all the calls to the composable since its signature definition got altered. The instructions fail to instruct the learners to update all the calls after this alteration to the composable which is the reason for the compilation error.
The ReplyDetailsScreen()
is called in multiple files, namely: ReplyHomeScreen.kt
and ReplyHomeContent.kt
. The call that is causing this issue after following the instructions is the one in the ReplyHomeContent.kt
file inside the ReplyListAndDetailContent()
composable as the instructions don't address the new parameter there leading to a missing value to an essential parameter.
The solution
To fix the compilation error we can update the call to ReplyDetailsScreen()
to include the added parameter isFullScreen
. Or by passing a default value for the parameter (which is the approach that the solution code shows at the end of the codelab, yet it's not shown in the instructions).
However, the way that the isFullScreen
Boolean parameter is implemented is not optimal and can be confusing, especially for beginners. The name of the parameter conflicts with its usage in the current implementation, and the source for its value is scattered in multiple files. The extraneous element in ReplyDetailsScreen()
in the case of a list-details (full screen) layout is the ReplyDetailsScreenTopBar()
composable, so one would assume that we can fix this by moving the call to a conditional as follows:
if (!isFullScreen) {
ReplyDetailsScreenTopBar()
}
Which means that when we are not in full screen, isFullScreen = false
, then the top bar is displayed normally, and that's because we want the top bar to show when we are not in list-detail layout since the ReplyDetailsScreen()
will be displayed as a stand-alone screen. But when we look at the instructions code:
if (isFullScreen) {
ReplyDetailsScreenTopBar()
}
It gets confusing because it suggests that the top bar should be displayed when isFullScreen
is set to true
. However, the list-detail (full screen) layout aims to remove the top bar. It's even more confusing that setting isFullScreen
to a default value of false
works correctly despite the fact that we would be in a full screen layout when the top bar is not shown in the ReplyDetailsScreen()
. This implies that in the current implementation, the isFullScreen
is set to false
primarily to hide the top bar even when the app is in full screen.
I'm not sure who will see this or if it will be noticed, as I'm also new to GitHub and not very familiar with it. Nevertheless, there's also an issue with the padding for ReplyEmailDetailsCard()
. If you are seeing this and are responsible for addressing such issues, you can look into it while you're at it. Thank you!