SES-4433 : Handle landscape mode #1527

jbsession · 2025-09-22T05:38:49Z

This PR removes portrait lock.

This PR also adds some new composables for different orientations.

TODO: Full end to end testing for landscape.

…ivity

This reverts commit 20a5fa9.

ThomasSession · 2025-10-06T02:51:00Z

Here are a few issues from testing the branch:

The horizontal paddings are not respected when in landscape mode. The app extends below the three dot menu on the left and below the status bar on the right. We should be handling that properly as you can otherwise lose some content.
In the homescreen for example, the dates are cut off on the right.
I'm not sure if we should allow content directly below the inset either. Google apps seems to leave a gap on the right hand side to cater for the camera inset space. It's quite jarring in a conversation for example, where the message bubble and content is hidden below the inset.
You also can't hit the back button from the top app bar in a conversation as it is hidden below the "three button" menu from the system.
android:screenOrientation="portrait" is still present on the webrtc call activity. With android 16 this type of call won't be allowed so we need to handle landscape in there accordingly and make sure it works fine, including with the camera on and the phone changing from portrait to landscape as there are some hardcoded logic in the screen for this, which auto rotates the icons based on orientation.
Viewing the QR code in recovery password creates a very large qr code that can't be viewed properly. It should probably try to scale itself like in other places, like the qr code acceissible from the qr icon in the top right of the settings.
The "create group" bottomsheet has very little space for the user list, though I'm not sure we can do much about this. We could have the title and search also scroll with the rest to give more space, but that's something we'd have to discuss with the team, as it might not be as good of a behaviour for portrait where it's nice to only scroll the users and not the rest of the content.
The seesion network page looks a bit ugly with the giant node icon. Not a huge deal breaker but we could optimise it.

ThomasSession · 2025-10-06T03:04:46Z

app/src/main/java/org/thoughtcrime/securesms/giph/ui/compose/GiphyFragmentCompose.kt

+        modifier = Modifier.fillMaxWidth().padding(24.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(text = stringResource(messageId), style = MaterialTheme.typography.bodyMedium)


We don't reference material's typography in the app, but instead use our own type system.
Instead of MaterialTheme.typography.bodyMedium this should use LocalType.current.large (because large matches the 16sp that were used in the xml file).

ThomasSession · 2025-10-06T03:05:53Z

app/src/main/java/org/thoughtcrime/securesms/giph/ui/compose/GiphyFragmentCompose.kt

+@Composable
+private fun GiphyLoading() {
+    Box(
+        modifier = Modifier.fillMaxWidth().padding(vertical = 24.dp),


For common spacing we should defer to our Dimensions file. so instead of hardcoding 24.dp here (and in line 42) you can use LocalDimensions.current.spacing

ThomasSession · 2025-10-06T03:06:26Z

app/src/main/java/org/thoughtcrime/securesms/giph/ui/GiphyActivity.java

-    }).attach();
+//    new TabLayoutMediator(binding.tabLayout, binding.giphyPager, (tab, position) -> {
+//      tab.setText(position == 0 ? NonTranslatableStringConstants.GIF : getString(R.string.stickers));
+//    }).attach();


This can be deleted if we are no longer using it

ThomasSession · 2025-10-06T03:08:48Z

app/src/main/java/org/thoughtcrime/securesms/giph/ui/compose/GiphyTabsCompose.kt

+    selectedIndex: Int,
+    onSelect: (Int) -> Unit
+) {
+    val indicatorColor = colorFromAttrOr(


We shouldn't rely on material themes directly in the app.
We already have a SessionTabRow that is styled as per the rest of the app, so it should be used here.

ThomasSession · 2025-10-06T03:10:14Z

app/src/main/java/org/thoughtcrime/securesms/giph/ui/compose/GiphyTabsCompose.kt

+}
+
+@Composable
+private fun colorFromAttrOr(@AttrRes attrResId: Int, fallback: Color): Color {


This likely can be deleted as we already have a styled tab component, SessionTabRow

ThomasSession · 2025-10-06T03:11:38Z

app/src/main/java/org/thoughtcrime/securesms/giph/ui/compose/GiphyTabsCompose.kt

+        ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
+    )
+
+    composeView.setContent {


Not a huge deal but this doesn't really match our existing format when it comes to compose content.
You could have the lines above directly in the activity.
And the lines below here could be in the GiphyScreen composable (with the file renamed too), matching the way we handle compose content in other screens.

Got it. I might have to convert the activity here to Kotlin before I change this.

ThomasSession · 2025-10-06T03:21:59Z

app/src/main/java/org/thoughtcrime/securesms/ui/adaptive/AdaptiveLayout.kt

+import androidx.compose.ui.platform.LocalConfiguration
+
+object AdaptiveBreakpoints {
+    const val TWO_PANE_LANDSCAPE_MIN_WIDTH_DP = 480


This class is full of specific values and mentions of two pane, which is a specific UI paradigm we are not yet handling, like showing two panes: one for the conversation list and the other for the conversation screen itself, all in the same window.
I don't think we should reinvent the wheel here, and instead we should rely on existing material values

I removed the initial two pane content here and kept the landscape for now. I'll add to this helper in the future when we decide to cater for multiple screen sizes.

ThomasSession · 2025-10-06T03:22:56Z

app/src/main/java/org/thoughtcrime/securesms/preferences/QRCodeActivity.kt

 }
+
+@Composable
+private fun TwoPaneContent(string: String) {


We have to be careful with naming things like this as two panes UI is a specific thing, which we will need to handle in the future, with the material adaptive library. But these are two panes, but more like a landscape version of a UI.

Updated to specify Landscape and Portrait.

ThomasSession · 2025-10-06T03:25:18Z

app/src/main/java/org/thoughtcrime/securesms/home/startconversation/home/StartConversation.kt

+}
+
+@Composable
+private fun TwoPaneContent(


Same here. We need to be careful with concept like two pane which is a material adaptive concept that is a bit different. Here you could simply have a portrait and a landscape version of the composable.

Updated to specify Landscape and Portrait.

ThomasSession · 2025-10-06T03:27:20Z

app/src/main/java/org/thoughtcrime/securesms/home/startconversation/home/StartConversation.kt

+        modifier = Modifier.verticalScroll(rememberScrollState())
+    ) {
+        ActionList(navigateTo = navigateTo)
+        Column(


Isn't there a way for both landscape and portrait to reuse some element instead of redeclaring them here?

Updated, I made the QrPanel reusable.

ThomasSession · 2025-10-06T03:29:09Z

app/src/main/java/org/thoughtcrime/securesms/giph/ui/compose/GiphyFragmentCompose.kt

+import network.loki.messenger.R
+
+/** Called from Java to set Compose content for the loading view. */
+fun setGiphyLoading(composeView: ComposeView) {


I'm not sure that is is very efficient. Setting the overall content of the screen and resetting the strategy each time.
The whole content should exist in the one composable: the loading, the 'no result' and the list of results.
If not then maybe it was better off in the initial xml format, otherwise it becomes conceptually broken?

I updated this one to use a state now instead of redeclaring and resetting it every time. I think that made it more efficient?

jbsession · 2025-10-08T01:32:59Z

Here are a few issues from testing the branch:

The horizontal paddings are not respected when in landscape mode. The app extends below the three dot menu on the left and below the status bar on the right. We should be handling that properly as you can otherwise lose some content.
In the homescreen for example, the dates are cut off on the right.
I'm not sure if we should allow content directly below the inset either. Google apps seems to leave a gap on the right hand side to cater for the camera inset space. It's quite jarring in a conversation for example, where the message bubble and content is hidden below the inset.
You also can't hit the back button from the top app bar in a conversation as it is hidden below the "three button" menu from the system.

android:screenOrientation="portrait" is still present on the webrtc call activity. With android 16 this type of call won't be allowed so we need to handle landscape in there accordingly and make sure it works fine, including with the camera on and the phone changing from portrait to landscape as there are some hardcoded logic in the screen for this, which auto rotates the icons based on orientation.

Viewing the QR code in recovery password creates a very large qr code that can't be viewed properly. It should probably try to scale itself like in other places, like the qr code acceissible from the qr icon in the top right of the settings.

The "create group" bottomsheet has very little space for the user list, though I'm not sure we can do much about this. We could have the title and search also scroll with the rest to give more space, but that's something we'd have to discuss with the team, as it might not be as good of a behaviour for portrait where it's nice to only scroll the users and not the rest of the content.

The seesion network page looks a bit ugly with the giant node icon. Not a huge deal breaker but we could optimise it.

Updates on this:

Insets are fixed in home, conversation screens. Also how do we feel about the camera insets? (Other screens currently in progress)
Removed the protrait lock for WebRtc call activity
Updated the large QR code in recovery password
Session network's node icon optimization

jbsession added 28 commits September 1, 2025 13:40

removed portrait lock for most activities, retained for WebRtcCallAct…

4e31b4e

…ivity

Initial landscape, compact, and flip compatibility

20a5fa9

Landing screen initial landscape compat with flip, tablet and phone

c85a724

Merge branch 'dev' into improvements/ses-4433

17446ab

QR code activity landscape

1f494a2

Initial layout for Start Conversation sheet

ed86d27

Added Adaptive layout helper

29fe922

Revert "Initial landscape, compact, and flip compatibility"

0e007e9

This reverts commit 20a5fa9.

Merge branch 'improvements/ses-4433' into landscape/qr-codes

385721d

Use adaptive layout

ecaf47a

made sholdUseTwoPane private

21fcff0

removed padding for back button

955dec0

GiphyActivity initial compose

368f97b

GiphyFragment compose

f837831

GiphyFragment initial kotlin

968d555

cleanup

73cd000

GiphyFragment to kotlin

2980bea

Cleanup

93baba2

Converted async task to coroutine

0094130

Giphy fragment and sticket to kotlin

28fc0d3

Merge remote-tracking branch 'upstream/dev' into improvements/ses-4433

f3af5cb

Merge branch 'landscape/qr-codes' into improvements/ses-4433

d2bb418

Merge branch 'landscape/login-screen' into improvements/ses-4433

019e76f

Merge branch 'landscape/giphy' into improvements/ses-4433

c51f0aa

Separate compose fun

ea6c10d

Start conversation cleanup

5e0f1e5

cleanup

4734623

Cleanup

cc679cd

jbsession self-assigned this Sep 22, 2025

damajor mentioned this pull request Sep 29, 2025

Landscape mode #750

Open

ThomasSession reviewed Oct 6, 2025

View reviewed changes

jbsession added 12 commits October 6, 2025 13:11

initial scaling for QR in recovery password

3305b9d

Updated usage of twopane into landscape check only.

373c6ea

Share component for qrPanel

6d43704

Fixed overlap for 3 button navigation

ead5bbc

camera inset in conversation

35c479c

apply safe inset camera inset

5327c48

remove portrait mode for webrtccall

e34617c

cleanup

b3019dd

Media preview insets

e0a54d4

Use state for giph loading

7f0ed93

Use state for giphyLoading

4cfb2c6

themed content for tabs

7919364

jbsession requested a review from ThomasSession October 8, 2025 01:30

jbsession added 4 commits October 8, 2025 14:45

Removed two pane

7a05fbc

GiphyActivity converted to kotlin, updated compose usage

2cdbee9

Cleanup

925d767

A bit of optimization for session netowork's node image

f0cbcf5

SES-4433 : Handle landscape mode #1527

Are you sure you want to change the base?

SES-4433 : Handle landscape mode #1527

Uh oh!

Conversation

jbsession commented Sep 22, 2025

Uh oh!

ThomasSession commented Oct 6, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jbsession Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jbsession commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jbsession Oct 8, 2025 •

edited

Loading

jbsession commented Oct 8, 2025 •

edited

Loading