Landscape orientation

[greyboxgt]

So far the application works in portrait mode only. Some people might like landscape orientation.

[azizkayumov]

Do you have any ideas how the UI would look like in landscape mode?

[azizkayumov]

It is clear to imagine the main window, I need some kind of UI drawing how the flashcards editor window would look like in landscape. Please, make sure that we don't do dramatic changes and cause bad UX.

[greyboxgt]

Maybe something like this?

[azizkayumov]

Can you upload some screenshots?

[greyboxgt]

I am not sure how to upload images here. Maybe it would be easier for you to install Flip Flashcard?

[azizkayumov]

Hi, I could not install the app on emulator (I use Android emulator for development & testing, not my phone) as the emulator requires to have Google Play and installing Google Play on emulators was really painful. I would very much appreciate if you could share some screenshots (by just dragging & dropping the images or any file to this thread)

[Engineerator]

I looked into the app that @greyboxgt was referring which has a UI in landscape mode. I was able to download the APK and drag and drop it into my emulator. You can download the APK here: https://apkpure.com/store/apps/details?id=edu.ckcc.flipflashcard

[greyboxgt]

Otherwise, some screenshots are attached. Please let me know if you need more, I will be happy to help!

[azizkayumov]

@Engineerator Thank you for the tip, I have never tried that drag & dropping apks to an emulator directly, it worked like a charm. @greyboxgt Thank you for the screenshots. As I can see from the screenshots, that app's UI allows it to have a landscape orientation. However, in our case, we have two things: top app bar and bottom tool bar (in Card editor window), if I turn on the landscape orientation, top and bottom bars would take a big area and that squeezes the card: Let me know your ideas about how we can design the UI for landscape orientation.

[greyboxgt]

I think we should use valuable card space for the card objects only, and in both: portrait and landscape modes. There is a lot of unused space outside the card. Even at the maximum width this should not ruin your animation. Something like this:

Landscape mode:

---

Portrait mode:

[Engineerator]

I have been trying to figure out how to solve this issue with unused card space. I'm assuming that something needs to be changed in the CardUI.kt files. It seems like layoutParams could affect the card size but when I changed these values I couldn't get the card to fit in the unused space.

I'm also assuming that the padding affects the card size but I couldn't find any parts of the program that could affect the padding. Do you know what parts of the program control the card size?

Here is the part that I'm referring to: layoutParams = FrameLayout.LayoutParams(matchParent, matchParent).apply { topMargin = dip(38) bottomMargin = dip(38) leftMargin = dip(38) rightMargin = dip(38) }

[azizkayumov]

Quickly said: you can play with the margin values of that layout parameters: example: change dip(38) to dip(8).

[Engineerator]

As I mentioned previously, I tried to change these values but I couldn't get the card to fit in the unused space. I found out that editor mode does not resize the same way as quiz mode and study mode. Do you know what can be changed to fix this?

Editor mode: Study mode: Quiz mode:

[azizkayumov]

Sorry for late reply. I think if you remove RecyclerView margins, you can make the card view use all the unused space. Just remove the margins from this:

            layoutParams = FrameLayout.LayoutParams(matchParent, matchParent).apply {
                topMargin = dip(56)
                bottomMargin = dip(56)
            }

[Engineerator]

Thank you for the help, I was able to remove the RecyclerView margins and use all the unavailable space!