Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Create New Android Layout

63 views

Published on

Online tutorial created for android developer - beginners. Step by step instructions with real-time development video. Lesson plan is divided into three part to help create new android project, add new layout, activity and apply styles to widgets.
In this tutorial, we will learn how to open an existing android project and make changes to the existing layout and add new widgets.

For online video presentation, watch our YouTube video:
https://youtu.be/udZVXhf48Gc

Published in: Education
  • Be the first to comment

Create New Android Layout

  1. 1. Create New Layout ANDROID MOBILE APPLICATION TRAINING VIDEO - 2 Copyright © 2020 Transpose Solutions. All Rights Reserved.
  2. 2. 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. Copyright © 2020 Transpose Solutions. All Rights Reserved.
  3. 3. 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 Copyright © 2020 Transpose Solutions. All Rights Reserved.
  4. 4. 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. Copyright © 2020 Transpose Solutions. All Rights Reserved.
  5. 5. 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. Copyright © 2020 Transpose Solutions. All Rights Reserved.
  6. 6. 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. Copyright © 2020 Transpose Solutions. All Rights Reserved.
  7. 7. 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. Copyright © 2020 Transpose Solutions. All Rights Reserved.
  8. 8. 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 Copyright © 2020 Transpose Solutions. All Rights Reserved.
  9. 9. 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. Copyright © 2020 Transpose Solutions. All Rights Reserved.
  10. 10. 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”. Copyright © 2020 Transpose Solutions. All Rights Reserved.
  11. 11. 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 Copyright © 2020 Transpose Solutions. All Rights Reserved.
  12. 12. 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 Copyright © 2020 Transpose Solutions. All Rights Reserved.
  13. 13. 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. Copyright © 2020 Transpose Solutions. All Rights Reserved.
  14. 14. 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. Copyright © 2020 Transpose Solutions. All Rights Reserved.

×