# Adapting Mobile Input Layouts Between Table and Box Layouts

DevFeed: [Adapting Mobile Input Layouts Between Table and Box Layouts](<https://devfeed.tech/articles/tip-table-to-box-19600.md>)

Original publisher: [Read original article](<https://www.codenameone.com/blog/tip-table-to-box/>)

Author: Shai Almog

Published: 2016-12-18T00:00:00Z

Content type: tutorial

Language: en

Sources: [CodeName One](<https://devfeed.tech/sources/codename-one.md>)

Topics: [Mobile](<https://devfeed.tech/topics/mobile.md>), [GUI](<https://devfeed.tech/topics/gui.md>), [User experience (UX)](<https://devfeed.tech/topics/ux.md>)

Tags: [gui](<https://devfeed.tech/tags/gui.md>), [layout](<https://devfeed.tech/tags/layout.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [ux](<https://devfeed.tech/tags/ux.md>)

## AI overview

A tutorial on adapting a mobile app input form to screen size. The Kitchen Sink demo uses table layout in landscape or on tablets and box layout on phones in portrait, with an animated transition when the device rotates.

## Source excerpt

One of the most painful aspects in any mobile app is input, besides the difficulty of viewing the details on a tiny cramped screen the input via the virtual keyboard is nowhere near the input comfort of a full fledged computer or even a tablet. A great app adapts to the screen size and uses the available space more effectively, we tried to do this in the kitchen sink demo where user input appears like this in portrait: