Create New Android Layout

Create New Layout
ANDROID MOBILE APPLICATION
TRAINING VIDEO - 2
Copyright © 2020 Transpose Solutions. All Rights Reserved.

OVERVIEW
In this tutorial, we will learn how to open
an exisiting android project and make
changes to the exisiting layout and add new
widgets.

WHAT IS A LAYOUT
Android app user interface (UI) is that, user can see and interact with. Android app is built as a hierarchy of
layouts and widgets.
The layouts are ViewGroup objects, containers that control how their child views are positioned on the screen.
Widgets are View objects, UI components such as buttons and text boxes.
Android Studio default setting for the Main Activity (app > res > layout > activity_main.xml) is Constraint
Layout. If required, you can change the layout which is more suitable to your project requirement. Following are
the types of layout available to build a responsive user interface:
Constraint Layout
Linear Layout
Relative Layout
Frame Layout
Note: For more technical documents about User interface and Navigation can be accessed from Google
developer guide: https://developer.android.com/guide/topics/ui

OPEN AN EXISTING PROJECT
From your task bar/start menu, click open “Android
Studio”
In the Welcome to Android Studio window:
 Click Open an existing Android Studio project.
In the Open File or Project window:
 Go to Android Studio Projects Folder and Select My Mobile App – the project
we created in our earlier tutorial – “build your first app” and click OK.
Note: If you have not viewed our earlier tutorial – build your first app, please
view that before starting this tutorial.

OPEN - LAYOUT EDITOR
Android studio main window appears after some processes. Please follow the
following steps to get into the layout editor mode:
How to open the layout editor:
In the Project window, open app > res > layout > activity_main.xml.
If your editor shows the XML source, click the Design tab.
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 your margin to “8”. 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)..
Note: This training material uses Android Studio v3.6.1.

ADD WIDGETS
Let us remove the exisiting TextView in the layout and add a new EditText control:
Select the TextView and then press delete.
In the Palette panel, select Plain Text Widget and drag and drop it near the top of
the layout. This is an EditText control that accepts plain text input.
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 the case, we set it to 8 dp from the top of the layout.
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
Let us add a Button next to the Edit Text control we just added in the layout:
From Palette panel, click Button Widget and drag the Button into the design editor
and drop it near the right side.
Create a constraint from the left side of the button to the right side of the text box.
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 ab. 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.

UI STRINGS
A string resource provides text strings for your android mobile application with optional
text styling and formatting.
There are three types of resources that can provide your app with strings:
String: XML resource that provides a single string.
String Array: XML resource that provides an array of strings.
Quantity Strings (Plurals): XML resource that carries different strings for
pluralization.
Note: For more technical documents about String resources can be accessed from
Google developer guide: https://developer.android.com/guide/topics/resources/string-
resource

ADD NEW STRINGS
Let us add a new UI strings to our project, so that we can use those new strings to replace
the default values set in the Button and Edit Text control we just added in the layout. To
add new UI strings:
Open the Project window and then open app > res > values > strings.xml.
Click Open editor at the top of the window.
Click Add Key + to create a new string
Steps to add new string key: user_Input
Enter “user_input" in the Key field.
Enter "Enter your name" in the Default Value field.
Click OK.
Steps to add new string key: user_submit
Enter “user_submit" in the Key field.
Enter “Submit" in the Default Value field.
Click OK.

ASSIGN NEW STRINGS
Let us replace the default values set in the Button and Edit Text control in
the layout with one we just created:
Click the activity_main.xml in the tab bar
Click the EditText control in the layout.
Click “Attributes” on the right sidebar
Locate the text property, which is currently set to “Name”, and delete the value
Locate the hint property and then click pick a resource select “user_input” from
the list.
Click the button control in the layout.
Click “Attributes” on the right sidebar
Locate the text property, which is currently set to “button”.
Then click pick a resource select “user_submit”.

RESPONSIVE UI
Let us create a layout that’s responsive to different screen sizes, for that
we need to make the EditText control stretch to fill all the horizontal space
that remains after the button and margins are accounted for.
Before you continue, click Select Design Surface in the toolbar and select
Blueprint.
Select both EditText control and Button Control:
Click the EditText control in the layout, then click the Button control, then right-
click select Chains>Create Horizontal Chain.
Select the Button Control and open Attributes. Then set the right margin to 8
dp.
Click the EditText control to view its attributes. Then, click the width indicator
twice so it's set to Match Constraints

ADD STYLES AND THEMES
Styles and themes on Android allow you to separate the details of your
app design from the UI structure and behavior, similar to stylesheets in
web design.
Styles and themes are declared in a style resource file in res/values/,
usually named styles.xml.
A theme are declared with the android:theme attribute on either the
<application> tag or an <activity> tag in the AndroidManifest.xml file.
We can make changes to the Widgets look and feel by applying changes
to XML attributes values.
Note: For more technical documents about styles and themes can be accessed from Google
developer guide: https://developer.android.com/guide/topics/ui/look-and-feel/themes

RUN YOUR APP
Use Android studio emulator to run your app:
In the toolbar, select your app from the run/debug configurations drop-down
menu.
 From the target device drop-down menu, select the AVD that you want to run
your app on.
 Click Run
Android Studio installs the app on the AVD and starts the
emulator.

Thank you for watching the video!
Try our next training video - 3 to learn
- how to create new activity and send
user input from one activity to
another.

Create New Android Layout

More Related Content

What's hot (19)

Similar to Create New Android Layout (20)

Recently uploaded (20)

Create New Android Layout