Android - layout changes on Android after virtual keyboard is closed

[Ela]

Hello,

The layout on my Android app changes after the virtual keyboard is present.

For example, on a form with an Image Viewer and a share button (it is positioned at the bottom of the form), if i choose to share some text via an email client (E.g.: Gmail), after I hit send, the Container which holds the Share button appears doubled on the layout until it receives a user interaction (E.g.: the user taps anywhere on the screen). I noticed that the second appearance of the share button coincides with the top edge of the virtual keyboard present on the Gmail's form for composing the email. Please see the attached picture.

Also, if i have a dialog with a TextField, after a text is inserted via the virtual keyboard and the dialog is closed the image inside the Image Viewer shrinks. If i tap anywhere on the screen it resizes to the correct dimension.

Can you please give me a suggestion on how to avoid such layout problems?

Thank you!


Tested on Galaxy Note 10.1 with Android version 4.1.2

[Shai Almog]

Hi,
Android resizes the screen when the virtual keyboard is shown which means the UI needs to adapt to the new size. Make sure you have a scrollable container in the hierarchy so elements have space to grow.
Its easy to check for resizability in the simulator by rotating it and seeing the UI adapts properly.

[Ela]

Hello,

The layout is properly resized, both in the simulator and on the device by rotating them.

The problem with the layout appears after the virtual keyboard is closed, not when it is present on the screen. In the picture attached with my previous post you can see how the layout looks after the form which contains a TextField that triggers the presence of the virtual keyboard is closed.

This behavior is not reproducible each time. It happens, let's say, 3 out of 5 times, but it is disturbing.

[Shai Almog]

Hi,
OK now I see. Its not a layout problem but a smearing problem with rendering artifacts. Right?
Is your top level component opaque?
Can you go into details on the content of the UI in that form? Is the image a bg image? With what alignment? Any details that could help.

[Ela]

Hello,

The form has a BorderLayout. Inside it I have 2 containers: one is for 2 ImageViewers (placed BorderLayout.CENTER ) and one for the buttons on the bottom (placed BorderLayout.SOUTH).
The container for the ImageViewers has a BoxLayout with Y_AXIS. The ImageViewers have an UIID with 0 padding, 0 margins and with 0 transparency.
The container for the south buttons has a container with a BoxLayout with Y_AXIS which contains a FlowLayout container inside, with the buttons.

[Shai Almog]

Hi,
try setting the image viewers to opaque (transparency = 255). They weren't designed for transparency and that might be the reason for the issue.

[gerben...@gmail.com]

I witness the same issue. I also have a BorderLayout. When the virtual keyboard slides up, the South component also slides up. After the keyboard slides down, the components in the south gets redrawn right above where the keyboard used to be.

Op maandag 16 februari 2015 17:47:57 UTC+1 schreef Ela:

[Shai Almog]

Android resizes the screen when editing. That's the behavior it has at this time.