Posts

Showing posts from April, 2017

Run the app

Image
Add up navigation Each screen in your app that is not the main entrance (all screens that are not the "home" screen) should provide navigation so the user can return to the logical parent screen in the app hierarchy by tapping the Up button in the app bar. All you need to do is declare which activity is the logical parent in the  AndroidManifest.xml  file. So open the file at  app > Manifests > AndroidManifest.xml , locate the  <activity>  tag for  DisplayMessageActivity  and replace it with the following: <activity android:name = ".DisplayMessageActivity"           android:parentActivityName = ".MainActivity" >     <!-- The meta-data tag is required if you support API level 15 and lower -->     <meta-data         android:name = "android.support.PARENT_ACTIVITY"         android:value = ".MainActivity" /> </activity> The Android system now automatically adds the Up button in the app

Display the message

Display the message Now you will modify the second activity to display the message that was passed by the first activity. In  DisplayMessageActivity.java , add the following code to the  onCreate()  method: @Override protected void onCreate ( Bundle savedInstanceState ) {     super . onCreate ( savedInstanceState );     setContentView ( R . layout . activity_display_message );         // Get the Intent that started this activity and extract the string     Intent intent = getIntent ();     String message = intent . getStringExtra ( MainActivity . EXTRA_MESSAGE );     // Capture the layout's TextView and set the string as its text     TextView textView = ( TextView ) findViewById ( R . id . textView );     textView . setText ( message ); } Press Alt + Enter (or Option + Return on Mac) to import missing classes. Your imports should end up as the following: import android . content . Intent ; import android . support . v7 . app . AppCompatActivity ;

Create the second activity

Image
Create the second activity In the  Project  window, right-click the  app  folder and select  New > Activity > Empty Activity . In the  Configure Activity  window, enter "DisplayMessageActivity" for  Activity Name  and click  Finish  (leave all other properties set to the defaults). Android Studio automatically does three things: Creates the  DisplayMessageActivity.java  file. Creates the corresponding  activity_display_message.xml  layout file. Adds the required  <activity>  element in  AndroidManifest.xml . If you run the app and tap the button on the first activity, the second activity starts but is empty. This is because the second activity uses the empty layout provided by the template. Add a text view Figure 1.  The text view centered at the top of the layout The new activity includes a blank layout file, so now you'll add a text view where the message will appear. Open the file  app > res > layout > activity_display_m

Start Another Activity

Start Another Activity After completing the previous lesson, you have an app that shows an activity (a single screen) with a text field and a button. In this lesson, you’ll add some code to  MainActivity that starts a new activity to display the message when the user taps  Send . Note:  This lesson expects you are using Android Studio 2.3 or higher. Respond to the send button Add a method in  MainActivity.java  that's called by the button as follows: In the file  app > java > com.example.myfirstapp > MainActivity.java , add the  sendMessage()  method stub as shown below: public class MainActivity extends AppCompatActivity {     @Override     protected void onCreate ( Bundle savedInstanceState ) {         super . onCreate ( savedInstanceState );         setContentView ( R . layout . activity_main );     }     /** Called when the user taps the Send button */     public void sendMessage ( View view ) {         // Do something in response to b

Make the text box size flexible

Image
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). Figure 8.  Click to change the width and remove the right margin Figure 9.  The text box stretches to fill the remaining space Create a constraint from the right side of the button to the right side of the parent layout. This now defines the total width that the two views have available (which you can now fill with the text box). Add a constraint from the right side of the text box to the left side of the button. It might look like that's already there, but you're actually adding a bidirectional constraint between the two views. So both views are constrained to each other. This is called a  chain  (as indicated by the chain betwen the views), and it enables some extra layout options. Open the  Properties  window for the text box and the

Change the UI strings

Image
Change the UI strings Click  Show Design   in the toolbar to preview the UI. Notice that the text input is pre-filled with "Name" and the button is labeled "Button." So now you'll change these strings. Open the  Project  window and then select  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. Figure 7.  The dialog to add a new string Click  Add Key   to create a new string as the "hint text" for the text box. Enter "edit_message" for the key name. Enter "Enter a

Add Text box & Button

Image
Add a text box Figure 5.  The text box is constrained to the top and left of the parent layout First, you need to remove what's already in the layout. So click  TextView  in the  Component Tree  window, and then press Delete. From the  Palette  window on the left, click  Text  in the left pane, and then drag  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. 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 to 75% or higher using the buttons in the 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 c

Open the Layout Editor

Image
Open the Layout Editor Note:  This lesson expects you are using Android Studio 2.3 or higher and you've followed the previous lesson to create your Android project. To get started, set up your workspace as follows: 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   If your editor shows the XML source, click the  Design  tab at the bottom of the window. Click  Show Blueprint   so only the blueprint layout is visible. Make sure Show Constraints is on. The tooltip in the toolbar should read  Hide Constraints   (because they're now showing). Make sure Autoconnect is off. The tooltip in the toolbar should read  Turn On Autoconnect   (because it's now off). Click  Default Margins   in the toolbar and select  16  (you can still adjust the margin for each view later). Click  Device in Editor   in the tool

Build a Simple User Interface

Image
Build a Simple User Interface 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. Figure 1.  Screenshot of the final layout The user interface for an Android app is built using a hierarchy of  layouts  ( ViewGroup  objects) and  widgets  ( View  objects). Layouts are invisible containers that control how its child views are positioned on the screen. Widgets are UI components such as buttons and text boxes. Figure 2.  Illustration of how  ViewGroup  objects form branches in the layout and contain  View  objects Android provides an XML vocabulary for  ViewGroup  and  View  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 i

Run Application

Run Your App In the privous lession, you created an Android project that displays "Hello World." You can now run the app on a real device or an emulator. Run on a real device Set up your device as follows: Connect your device to your development machine with a USB cable. If you're developing on Windows, you might need to install the appropriate USB driver for your device. For help installing drivers, see the OEM USB Drivers document. Enable  USB debugging  on your device by going to  Settings > Developer options . Note:  On Android 4.2 and newer,  Developer options  is hidden by default. To make it available, go to  Settings > About phone  and tap  Build number  seven times. Return to the previous screen to find  Developer options . Run the app from Android Studio as follows: In Android Studio, click the  app  module in the  Project  window and then select  Run > Run  (or click  Run   in the toolbar). In the  Select Deployment Target  window,

Create an Android Project

Create an Android Project This lesson shows you how to create a new Android project with Android Studio and describes some of the files in the project. In Android Studio, create a new project: If you don't have a project opened, in the  Welcome to Android Studio  window, click  Start a new Android Studio project . If you have a project opened, select  File > New Project . In the  New Project  screen, enter the following values: Application Name : "My First App" Company Domain : "example.com" You might want to change the project location, but leave the other options as they are. Click  Next . In the  Target Android Devices  screen, keep the default values and click  Next . In the  Add an Activity to Mobile  screen, select  Empty Activity  and click  Next . In the  Customize the Activity  screen, keep the default values and click  Finish . After some processing, Android Studio opens the IDE. Now take a moment to review the most impo

Introduction

Image
                    Building Your First App Welcome to Android application development! This class teaches you how to build your first Android app. You’ll learn how to create an Android project with Android Studio and run a debuggable version of the app. You'll also learn some fundamentals of Android app design, including how to build a simple user interface and handle user input. Before you start this class, download and install Android Studio.