Visually editing an Android User Interface

Working with the Android UI Designer App.

Install the Android UI Designer from Google Play. You can use this app as a standalone app to edit Android UI layouts. It is also fully integrated into AIDE once both are installed.

When you start the designer app it automtically creates a new empty layout. You can create, delete and switch between layouts in the side bar. The designer is also fully integrated into AIDE if both are installed. When you create the "Hello World App" AIDE automatically opens the main.xml file, which is used for defining the main activity UI of this app. Tap "Design" in the action bar to open the designer for this layout.

The graphical user interface for an Android app is built using a hierarchy of Views. The views of the current UI hierachy are surrounded with red lines in edit mode. Tap on any view to edit it, i.e. add child views, delete the view or edit it's properties. It is also possible to tap on a view in the side bar view hierachy to edit it. Follow the steps in the screenshots to add a new LinearLayout containing a centered Button. The same way you can add more widgets and alter their appearance by editing their properties.

The Android SDK provides an XML file format that allows to define an UI layout in XML representing the hierarchy of UI elements. The XML of an Android UI layout can be easily integrated in your Android Apps using AIDE, Eclipse or Android Studio. The designer has the posibility to export and import the layout's XML representation either using the copy&paste or using share with another app. If you have started editing the layout through AIDE there is no need to export/import the XML representation.