OFFICIAL HUSSAIN SOFTWARES WEBSITE 2018
WELCOME TO THE OFFICIAL HUSSAIN SOFTWARES WEBSITE PLEASE REGISTER FIRST AFTER YOU ARE ABLE TO DOWNLOAD ALL FREE SOFTWARES FOR MORE FREE SOFTWARES FOR COMPUTER AND MOBILES Visit

www.hussain-softwares.forumarabia.com
Like us on facebook
Latest topics
Search
 
 

Display results as :
 

 


Rechercher Advanced Search

online counter
tools webmaster


Please do not change this code for a perfect fonctionality of your counter

my info viewer
tools webmaster


Please do not change this code for a perfect fonctionality of your counter

intelligent team flag counter
Flag Counter
Keywords

china  480p  NIMBUZZ  Cracker  Mail  Hindi  maker  SMTP  


Lesson 4, learn how to do coding on your Android mobile

Go down

Lesson 4, learn how to do coding on your Android mobile Empty Lesson 4, learn how to do coding on your Android mobile

Post by hussain on Sat Dec 15, 2018 5:21 pm


  • Android Developers
     

  •  Docs
     

  •  Guides


Build a simple user interface


  • Contents
  • Open the Layout Editor
  • Add a text box
  • Add a button
  • Change the UI strings
  • Make the text box size flexible
  • Run the app


In this lesson, you'll use the Android Studio Layout Editor to create a layout that includes a text box and a button. In the next lesson, you'll make the app respond to the button tap by sending the content of the text box to another activity.
Lesson 4, learn how to do coding on your Android mobile Screenshot-activity1
Figure 1. Screenshot of the final layout
The user interface for an Android app is built using a hierarchy of layouts (
Code:
ViewGroup
[size]
objects) and widgets (
[/size]
Code:
View
[size]
 objects). Layouts are containers that control how their child views are positioned on the screen. Widgets are UI components such as buttons and text boxes.
Lesson 4, learn how to do coding on your Android mobile Viewgroup_2x
Figure 2. Illustration of how 
[/size]
Code:
ViewGroup
[size]
objects form branches in the layout and contain 
[/size]
Code:
View
[size]
 objects
Android provides an XML vocabulary for 
[/size]
Code:
ViewGroup
[size]
 and 
[/size]
Code:
View
[size]
 classes, so most of your UI is defined in XML files. However, instead of teaching you to write some XML, this lesson shows you how to create a layout using Android Studio's Layout Editor, which makes it easy to build a layout by drag-and-dropping views.
This lesson expects that you are using Android Studio 3.0 or higher and you've followed the previous lesson to create your Android project.

Open the Layout Editor

To get started, set up your workspace as follows:
[/size][list="box-sizing: inherit; margin-right: 0px; margin-left: 0px; padding-left: 40px; list-style-position: outside; list-style-image: initial;"]
[*]In Android Studio's Project window, open app > res > layout > activity_main.xml.
[*]To make more room for the Layout Editor, hide the Project window by selecting View > Tool Windows > Project(or click Project Lesson 4, learn how to do coding on your Android mobile Window-project on the left side of Android Studio).
[*]If your editor shows the XML source, click the Design tab at the bottom of the window.
[*]Click Select Design Surface Lesson 4, learn how to do coding on your Android mobile Layout-editor-design and select Blueprint.
[*]Click Show Lesson 4, learn how to do coding on your Android mobile Layout-editor-show-constraints in the Layout Editor toolbar and make sure Show Constraints is checked.
[*]Make sure Autoconnect is off. The tooltip in the toolbar should read Turn On Autoconnect Lesson 4, learn how to do coding on your Android mobile Layout-editor-autoconnect-on (because it's now off).
[*]Click Default Margins Lesson 4, learn how to do coding on your Android mobile Layout-editor-margin in the toolbar and select 16 (you can still adjust the margin for each view later).
[*]Click Device for Preview Lesson 4, learn how to do coding on your Android mobile Layout-editor-device in the toolbar and select 5.5, 1440 × 2560, 560dpi (Pixel XL).
[/list]
[size]
Your editor should now look as shown in figure 3.
Lesson 4, learn how to do coding on your Android mobile Layout-editor_2x
Figure 3. The Layout Editor showing 
[/size]
Code:
activity_main.xml
[size]
For additional information, see the introduction to the Layout Editor.
The Component Tree window on the bottom-left side shows the layout's hierarchy of views. In this case, the root view is a 
[/size]
Code:
ConstraintLayout
[size]
, containing just one
[/size]
Code:
TextView
[size]
 object.
[/size]
Code:
ConstraintLayout
[size]
 is a layout that defines the position for each view based on constraints to sibling views and the parent layout. In this way, you can create both simple and complex layouts with a flat view hierarchy. That is, it avoids the need for nested layouts (a layout inside a layout, as shown in figure 2), which can increase the time required to draw the UI.
Lesson 4, learn how to do coding on your Android mobile Constraint-example_2x
Figure 4. Illustration of two views positioned inside
[/size]
Code:
ConstraintLayout
[size]
For example, you can declare the following layout (in figure 4):
[/size]

  • View A appears 16dp from the top of the parent layout.
  • View A appears 16dp from the left of the parent layout.
  • View B appears 16dp to the right of view A.
  • View B is aligned to the top of view A.

[size]
In the following sections, you'll build a layout similar to this.

Add a text box

Lesson 4, learn how to do coding on your Android mobile Constraint-textbox_2x
Figure 5. The text box is constrained to the top and left of the parent layout
[/size][list="box-sizing: inherit; margin-right: 0px; margin-left: 0px; padding-left: 40px; list-style-position: outside; list-style-image: initial;"]
[*]First, you need to remove what's already in the layout. So click TextView in the Component Tree window, and then press Delete.
[*]In the Palette, click Text to show the available text controls.
[*]Drag Plain Text into the design editor and drop it near the top of the layout. This is an 
Code:
EditText
 widget that accepts plain text input.
[*]Click the view in the design editor. You can now see the resizing handles on each corner (squares), and the constraint anchors on each side (circles).
For better control, you might want to zoom in on the editor using the buttons in the Layout Editor toolbar.
[*]Click-and-hold the anchor on the top side, and then drag it up until it snaps to the top of the layout and release. That's a constraint—it specifies the view should be 16dp from the top of the layout (because you set the default margins to 16dp).
[*]Similarly, create a constraint from the left side of the view to the left side of the layout.
[/list]
[size]
The result should look like the screenshot in figure 5.

Add a button

Lesson 4, learn how to do coding on your Android mobile Constraint-button_2x
Figure 6. The button is constrained to the right side of the text box and its baseline
[/size][list="box-sizing: inherit; margin-right: 0px; margin-left: 0px; padding-left: 40px; list-style-position: outside; list-style-image: initial;"]
[*]In the Palette, click Buttons.
[*]Drag 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, you need to create a constraint between the text baselines. So click the button, and then click Edit Baseline Lesson 4, learn how to do coding on your Android mobile Layout-editor-action-baseline, which appears in the design editor directly below the selected view. The baseline anchor appears inside the button. Click-and-hold on this anchor and then drag it to the baseline anchor that appears in the text box.
[/list]
[size]
The result should look like the screenshot in figure 6.
Note: You can also create a horizontal alignment using the top or bottom edges, but the button includes padding around its image, so the visual alignment is wrong if you align these views that way.

Change the UI strings

To preview the UI, click Select Design SurfaceLesson 4, learn how to do coding on your Android mobile Layout-editor-design in the toolbar and select Design. Notice that the text input is pre-filled with "Name" and the button is labeled "Button." So now you'll change these strings.
[/size][list="box-sizing: inherit; margin-right: 0px; margin-left: 0px; padding-left: 40px; list-style-position: outside; list-style-image: initial;"]
[*]Open the Project window and then open app > res > values > strings.xml.
This is a string resources file where you should specify all your UI strings. Doing so allows you to manage all UI strings in a single location, which makes it easier to find, update, and localize (compared to hard-coding strings in your layout or app code).
[*]Click Open editor at the top of the editor window. This opens the Translations Editor, which provides a simple interface for adding and editing your default strings, and helps keep all your translated strings organized.
[*]Click Add Key Lesson 4, learn how to do coding on your Android mobile Add-sign-green-icon to create a new string as the "hint text" for the text box.
Lesson 4, learn how to do coding on your Android mobile Add-string_2x
Figure 7. The dialog to add a new string
[list="box-sizing: inherit; margin-right: 0px; margin-left: 0px; padding-left: 40px; list-style: lower-alpha outside;"]
[*]In the Add Key dialog, enter "edit_message" for the key name.
[*]Enter "Enter a message" for the value.
[*]Click OK.
[/list]

[*]Add another key named "button_send" with a value of "Send".
[/list]
[size]
Now you can set these strings for each view. So return to the layout file by clickingactivity_main.xml in the tab bar, and add the strings as follows:
[/size][list="box-sizing: inherit; margin-right: 0px; margin-left: 0px; padding-left: 40px; list-style-position: outside; list-style-image: initial;"]
[*]Click the text box in the layout and, if the Attributes window isn't already visible on the right, click Attributes Lesson 4, learn how to do coding on your Android mobile Window-properties on the right sidebar.
[*]Locate the text property (currently set to "Name") and delete the value.
[*]Locate the hint property and then click Pick a Resource Lesson 4, learn how to do coding on your Android mobile Pick-resource to the right of the text box. In the dialog that appears, double-click on edit_message from the list.
[*]Now click the button in the layout, locate the text property (currently set to "Button"), click Pick a Resource Lesson 4, learn how to do coding on your Android mobile Pick-resource, and then select button_send.
[/list]
[size]

Make the text box size flexible

To create a layout that's responsive to different screen sizes, you'll now make the text box stretch to fill all remaining horizontal space (after accounting for the button and margins).
Before you continue, click Show Lesson 4, learn how to do coding on your Android mobile Layout-editor-design in the toolbar and select Blueprint.
Lesson 4, learn how to do coding on your Android mobile Create_horizontal_chain_2x
Figure 8. The result of choosing Create Horizontal Chain
Lesson 4, learn how to do coding on your Android mobile Properties-margin_2x
Figure 9. Click to change the width to Match Constraints
Lesson 4, learn how to do coding on your Android mobile Constraint-chain_2x
Figure 10. The text box now stretches to fill the remaining space
[/size][list="box-sizing: inherit; margin-right: 0px; margin-left: 0px; padding-left: 40px; list-style-position: outside; list-style-image: initial;"]
[*]Select both views (click one, hold Shift, and click the other), and then right-click either view and select Chain > Create Horizontal Chain. The layout should appear as shown in figure 8.
A chain is a bidirectional constraint between two or more views that allows you to lay out the chained views in unison.
[*]Select the button and open the Attributes window. Using the view inspector at the top of the Attributeswindow, set the right margin to 16.
[*]Now click the text box to view its attributes. Click the width indicator twice so that it is set to Match Constraints, as indicated by callout 1in figure 9.
"Match constraints" means that the width expands to meet the definition of the horizontal constraints and margins. Therefore, the text box stretches to fill the horizontal space (after accounting for the button and all margins).
[/list]
[size]
Now the layout is done and should appear as shown in figure 10.
If it seems your layout did not turn out as expected, click below to see what your XML should look like and compare it to what you see in the Text tab. (If your attributes appear in a different order, that's okay.)

See the final layout XML

For more information about chains and all the other things you can do with 
[/size]
Code:
ConstraintLayout
[size]
, read Build a Responsive UI with ConstraintLayout.

Run the app

If your app is already installed on the device from the previous lesson, simply click Apply Changes Lesson 4, learn how to do coding on your Android mobile Toolbar-apply-changes in the toolbar to update the app with the new layout. Or click Run Lesson 4, learn how to do coding on your Android mobile Toolbar-run to install and run the app[/size]

www.hussain-software.officialforum.net




how do i change my setting
how do i change my rank
how do i post a topic in a forum
how do i add a signature to my post
how can i get back my forgot password
how do i show an image below my username
if you have any doubt like this then send me email

email id:       [You must be registered and logged in to see this link.]


                      Lesson 4, learn how to do coding on your Android mobile HLesson 4, learn how to do coding on your Android mobile ULesson 4, learn how to do coding on your Android mobile SLesson 4, learn how to do coding on your Android mobile SLesson 4, learn how to do coding on your Android mobile ALesson 4, learn how to do coding on your Android mobile ILesson 4, learn how to do coding on your Android mobile N
hussain
hussain
ADMINISTRATOR
ADMINISTRATOR

Join date : 2015-01-29
Real name Real name : hussain
Age : 26
country country : United Arab Emirates
facebook id facebook id : https://www.facebook.com/hussainneyaz7
twitter id twitter id : https://www.twitter.com/hussainneyaz7
nimbuzz id nimbuzz id : huss4in.@nimbuzz.com
whatsapp whatsapp : +91**********
Posts Posts : 1125
h.s.points h.s.points : 41074
H.S.Reputation H.S.Reputation : 0

View user profile http://hussain-software.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum