Building an Android User Interface

Basic steps to build a simple Android User Interface using Java/Xml.

Install AIDE from Google Play and follow the tutorial Building your first App to create a new "Hello World App".

The graphical user interface for an Android app is built using a hierarchy of Views. The Android SDK provides an XML file format that allows you to define your UI in XML using a hierarchy of UI elements. 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. AIDE has a designer built-in to show you how this XML defined layout will look like when run. Tap "Design" in the action bar to open it. The views of the UI hierachy are (optionally) surrounded with red lines. When you tap a view you can jump to the XML source code element defining it. If you have the Android UI Designer app installed, you can visually edit user interfaces without the need to manually modify XML.

We want to add a button to the user interface. In order to do this add an XML Button element to the XML file. You need to specify the button's layout width and height. Choose "wrap_content", which means the view will be sized to exactly match the button's required content size. Also specify a layout margin and the button's text. There are more properties that you could use if desired, for example for defining the button's font size and color. AIDE will help you typing the XML code by showing possible code completion suggestions. Open the designer to see how your button will look like in the final UI. If you have the Android UI Designer app installed, you can do all these changes without the need to manually modify the XML.

We want to exit the app when the user taps on the button. To achieve this you have to add code to respond to the button's on-click event. In AIDE switch to the file MainActivity.java. In the onCreate method add the Java code for listening to the button's on-click event. When the event is fired, call the "finish" method, which will finish the activity, i.e. exit the app. Again AIDE will help you typing the code by show completion suggestions. It will also underline possible errors as you type. When you long tap an error AIDE allows you to choose possible fixes for errors.

To test the app with the newly added button, choose "Run" again. Your app will show the newly added button and when you click on it the app will exit, just like you have implemented it in the Java code.

Next: Learn more about Android development

AIDE supports the complete Android SDK. To learn more about the posibilities of the Android SDK visit developer.android.com.