June 20, 2017

App Tutorial: Accessing Layout Editor in Android Studio v 2.3.3

In last post we have covered the topic of how to accessXML Editing Panel. Let us use layout editor that helps us create user interfacein Android Studio v 2.3.3 in this tutorial.
Open Android Studio

Open your App Project

You can see 3 basic options in Android Studio;

MainActivity.java -This is where you code using Java where the system creates a layout from these codes. The alyout is manifested in activity_main.xml.

activity_main.xml- Layout of the app. It will have all the elements which you can see actually. So if you add a text box element code using java in ManiActivity.java, that code will manifest as text box inhere.

AndroidManifest.xml -This is an XML file which shows all the characteristics of the app.

UI or User Interface - It means that how a user of your app see the app and interact with it using an interface.

Open The Layout Editorin Android Studio v 2.3.3

Underactivity_main.xml, you can see two tabs in the bottom; design and text. By clicking design you can see the layout option and by clicking text, you can see both XML codes and in the right side layout.

design and text
design and text

Let's get familiarwith three more options in design tab of Android Studio v 2.3.3.

Design, Blue Print, Design+ Blue Print

These 3 options can be seen on top of the Design tab.

design and blue print in android studio
design and blue print options on top

Click on Show Blue Print only so that you can see blue print of the layout.

The Show constraints button should be on. For that click on the eye under the blue print option and make it look like this...eye button in app making .

Autoconnect should be off. For that make sure the button near to the eye button looks like this by clicking on that..autoconnect button in app making.

Click on the number "8" that says Default Margin in the same tool bar. You could see mutiple options such as 0, 8, 16, 24 dp. Select "16".

On top of Default Margin button, you could see Device in Editor, that has a list of model number sof mobile phones from Nexus, Pixel, Galaxy Nexus etc. Select Pixel XL from the list.

You could see TextView option underConstraintLayout and when you click on that you could see different position of views in the right sidebar.

ConstraintLayout in Android Studio
ConstraintLayout in Android Studio
Delete the TextView option under theConstraintLayout.

If you are finding any warnings of the codes, you can click on the bell button on top rightand select suggested fixes. You will get error message like the one below in that.

Message: [I18N] Hardcoded string "Ship Me This", should use `@string` resource

Suggested Fixes:
- Extract string resource
- Suppress: Add tools:ignore="HardcodedText" attribute

Priority: 5 / 10 Category: Internationalization Severity: Warning Explanation: Hardcoded text. Hardcoding text attributes directly in layout files is bad for several reasons: * When creating configuration variations (for example for landscape or portrait)you have to repeat the actual text (and keep it up to date when making changes) * The application cannot be translated to other languages by just adding new translations for existing string resources. There are quickfixes to automatically extract this hardcoded string into a resource lookup.

Try playing around with other options too. Subsribe shipmethisto get all app making tutorials....

Whats Hot

About Author