Android Studio : Detailed Introduction

Build a simple user interface | Android Developers

This is a good tutorial guide, but when you are using it for the first time, the instructions are slightly unclear due to lack of pictures. I will elaborate with more pictures.

Open the Layout Editor

To get started, set up your workspace as follows:

In the Project window, open app > res > layout > activity_main.xml.

Click Select Design Surface, and select Blueprint.

Click Show, in the Layout Editor toolbar and make sure that Show All Constraints is checked.

Make sure Autoconnect is off. A tooltip in the toolbar displays Enable Autoconnection to Parent when Autoconnect is off.

Click Default Margins in the toolbar and select 16. If needed, you can adjust the margins for each view later.

Click Device for Preview in the toolbar and select 5.5, 1440 × 2560, 560 dpi (Pixel XL).

Add a text box

1. First, you need to remove what’s already in the layout. Click TextView in the Component Tree panel and then press the Delete key.

2. In the Palette panel, click Text to show the available text controls. 3. Drag the Plain Text into the design editor and drop it near the top of the layout. This is an EditText widget that accepts plain text input.

4. Click the view in the design editor. You can now see the square handles to resize the view on each corner, and the circular constraint anchors on each side. For better control, you might want to zoom in on the editor. To do so, use the Zoom buttons in the Layout Editor toolbar.

5. Click and hold the anchor on the top side, drag it up until it snaps to the top of the layout, and then release it. That’s a constraint: it constrains the view within the default margin that was set. In this case, you set it to 16 dp from the top of the layout. 6. Use the same process to create a constraint from the left side of the view to the left side of the layout.

Add a button

1. In the Palette panel, click Buttons.

2. Drag the Button widget into the design editor and drop it near the right side.

3. Create a constraint from the left side of the button to the right side of the text box.

4. To constrain the views in a horizontal alignment, create a constraint between the text baselines. To do so, right-click the button and then select Show Baseline

The baseline anchor appears inside the button. Click and hold this anchor, and then drag it to the baseline anchor that appears in the adjacent text box.

Change the UI strings

To preview the UI, click Select Design Surface in the toolbar and select Design. Notice that the text input and button label are set to default values.

1. Open the Project window and then open app > res > values > strings.xml.

2.Click Open editor at the top of the window.

Or this way, if you accidentally cclicked “Hide Notifications”

This opens the Translations Editor, which provides a simple interface to add and edit your default strings. It also helps you keep all of your translated strings organized.

Click Add Key to create a new string as the “hint text” for the text box.

1. Click the text box in the layout. If the Attributes window isn’t already visible on the right, click Attributes on the right sidebar.

3. Locate the hint property and then click Pick a Resource, which is to the right of the text box.

In the dialog that appears, double-click edit_message from the list.

4. Click the button in the layout and locate its text property, which is currently set to “Button.” Then, click Pick a Resource and select button_send.

Make the text box size flexible

1. Select both views. To do so, click one, hold Shift, then click the other, and then right-click either one and select Chains > Create Horizontal Chain.

https://developer.android.com/training/basics/firstapp/starting-activity

Respond to the Send button

1. To clear the error, click the View declaration, place your cursor on it, and then press Alt+Enter, or Option+Enter on a Mac, to perform a Quick Fix. If a menu appears, select Import class.

This is now added to the top.

2. Return to the activity_main.xml file to call the method from the button: Select the button in the Layout Editor. In the Attributes window, locate the onClick property and select sendMessage [MainActivity] from its drop-down list.

Build an intent

Create the second activity

1. In the Project window, right-click the app folder and select New > Activity > Empty Activity.

2. In the Configure Activity window, enter “DisplayMessageActivity” for Activity Name. Leave all other properties set to their defaults and click Finish.

Add a text view (in the button)

1. Open the file app > res > layout > activity_display_message.xml.

2. Click Enable Autoconnection to Parent in the toolbar. This enables Autoconnect.

3. In the Palette panel, click Text, drag a TextView into the layout, and drop it near the top-center of the layout so that it snaps to the vertical line that appears. Autoconnect adds left and right constraints in order to place the view in the horizontal center.

If the Autoconnect does not work, use this.

Display the message

Add upward navigation

The Android system now automatically adds the Up button to the app bar.

It should be done now.