https://kotlinlang.org logo
Join SlackCommunities
Powered by
I am trying to adapt the design of my Composable b...
# compose
l
I am trying to adapt the design of my Composable between portrait/landscape mode. But I'm always getting the landscape configuration. More in the thread.
Also, I didn't get any 
println
output in Logcat.
y
Not sure if the best way of doing it but I have a MainViewModel which can be accessed in my whole app and I store an orientation variable on it. I just update the variable whenever my activity is (re-)created.
Copy code
updateOrientation(resources.configuration.orientation)
Copy code
fun updateOrientation(orientation: Int) {
    _isPortrait.postValue(orientation == Configuration.ORIENTATION_PORTRAIT)
}
Copy code
private var _isPortrait = MutableLiveData(true)
val isPortrait: LiveData<Boolean> get() = _isPortrait
Just looked at your code and I guess it is because youre not using the orientation as a state, not sure.
👍 1
l
Thank you : so I'll store/update the orientation with a 
remember{mutableStateOf(____)}
Ok, as I was using the wrong preview from A.S, I get the wrong orientation. So I don't need to store configuration change in a state. But I need a way to get notified when a configuration change happens, in order to update it as soon as the device rotate. But I can't use 
onConfigurationChanged()
y
You mean you need to know it even before the view is recreated? I am not sure how you can do that without 
onConfigurationChanged()
but you can easily update your variable after the view is recreated
👍 1
l
Yes, exactly, that is my use case 🙂 So, if I really need 
onConfigurationChanged()
then I need to wrap the composable into a real activity. So, I'll need to read some resources before. Thank you 🙂
🙌 1
Looking at example https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/state/ProcessDeathActivity.kt, it seems that it is not so hard :
Copy code
class ProcessDeathActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // This is an extension function of Activity that sets the @Composable function that's
        // passed to it as the root view of the activity. This is meant to replace the .xml file
        // that we would typically set using the setContent(R.id.xml_file) method. The setContent
        // block defines the activity's layout.
        setContent {
            // Column is a composable that places its children in a vertical sequence. You
            // can think of it similar to a LinearLayout with the vertical orientation.
            Column {
                TitleComponent("Enter your credit card number below")
                ProcessDeathComponent()
            }
        }
    }
}
~~So all I have to do, is to create an Activity, and use setContent (as well as its import declaration). Also I may need to change the default activity in my AndroidManifest.xml~~
Even not needed, as the main activity already has this setup in place. All I need is to extend this activity with 
onConfigurationChanged()
I've tried with this code, but no effect : I always get a disposition of portrait.
Handling onconfigurationchanged
Maybe I need a state inside the MainPage for the current orientation, and remove the parameter 
isLandscape
. But in that case, how can update the state of MainPage from inside the 
onConfigurationChanged
method ?
y
Youre still not using your boolean as a state, afaik it wont cause the composable to recreate this way
l
I understand. I'm gonna try with a state instead, and to update from 
onConfigurationChanged
y
Good luck
I should maybe use 
onConfigurationChanged
myself as well - although the end result wont be different
l
Thank you. That's gonna be tricky, but I try.
l
You can look at the compose layout APIs, there's one that gives you the available width and height, which can help make your composable responsive.
👍 1
l
Thank you very much. I'll have a look at this api right now. That can save me from an error-prone home made solution 🙂
l
This moment in the Compose by Example video shows how simple it is to implement your own layout, and use the width and height constraints. You might need to pause multiple times to follow on it though, because the speech is fast paced.

https://youtu.be/DDd6IOlH3io?t=849▾

👍 1
l
Thank you : also found https://developer.android.com/jetpack/compose/layout, which I also need to take the time to understand the concepts 🙂
g
In your Composable you can use something like:
Copy code
val configuration = LocalConfiguration.current
    when (configuration.orientation) {
        Configuration.ORIENTATION_LANDSCAPE -> {
           //...
        }
        else -> {
            //...
        }
    }
👍 1
l
Thank you @Gabriele Mariotti,this is what I tried at first. Unfortunately while this works at application loading, it does not react to orientation changes happening after.
This is what I'm trying to achieve in portrait configuration.
And in landscape mode
This is my main desing in portrait :
Copy code
Column {
   Row {
     Button
     Button
     Button
   }
   Row {
      Button
   }
   CustomSquareComponent{}
}
In lanscape :
Copy code
Row {
   Column {
     Button
     Button
     Button
   }
   Column {
      Button
   }
   CustomSquareComponent{}
}
So basically, I just would need to "swap" Row/Column based on the orientation, and to update this configuration at each screen rotation.
g
Did you use 
rememberSaveable
instead of 
remeber
?
While 
remember
 helps you retain state across recompositions, the state is not retained across configuration changes.
l
Finally I've managed 🙂.
In fact I just needed to recompute the orientation, setting it as a 
val
, instead of a state
3 Views
Open in Slack
PreviousNext
Powered by