Android

Creating Your First Android Application 2020 step by step programming

Description:

creating your first Android application/App development -We will create a Hello World application framework in this article that we will use to build a world generation toolkit that you can use it as a jumping-off point for creating your own interplanetary games. Accept the default path to the workspace folder that Eclipse set up for you in your Users folder, and launch the IDE onto your screen.  Go into the File menu, and find the New sub-menu at the top, and then select the Android Application Project sub-menu. Alternatively, you can also use the File New Project . . . menu sequence, which is how it used to be accessed prior to Android 4.2. This opens a New Project dialog, which lists the different types of projects that you can create inside of Eclipse. Find the Android project type, and click the triangle UI element to the left to open up the sub-menu of Android application types, and then select the Android Application Project and finally click on the Next ➤ button at the bottom of the dialog. Either of these work processes will open the New Android Application dialog, where we can set all the top-level attributes of our Hello World Android application, as shown in Figure 2-1.



android application development

First enter the Application Name, Hello_World, into the first field in the dialog. Notice that as you type in Hello_World that the second field, Project Name, is also being filled out via a dual-typing feature. This means that Android wants our App Name and Project Name to be the same, and because of this, I am going to use an underscore instead of a space in our Hello World app name, as this is a fairly common programming practice, and because I don’t like to use spaces in my file names or folder names. The third field allows us to create our package name for our new Android application project, and to use a consistent package naming convention, let’s use: chapter.two.hello_world as you can see our package name is in lowercase underscores. Next, we need to select our Minimum Required API Level of support for our Android application, which we will set to nine versions of backward compatibility via the Android 2.2 API Level 8 setting, because there are still lots of Android 2.2 and 2.3.7 devices on the market that we need to provide support for. We also need to set our Target SDK Level, which is the target Android API Level for which we are developing, in this case it’s the Android 4.1 API Level 16, Now click the Next ➤ button and proceed to the next dialog as shown in Figure 2-2.

android application development

In the Configure Project dialog, check the Create custom launcher icon checkbox and the Create Activity checkbox at the top of the dialog, as well as the Create project in Workspace checkbox in the bottom of the dialog, and then click Next ➤ to proceed to the Configure Launcher Icon dialog, as shown in Figure 2-3.

android application development

This dialog allows you to select a predefined Android App launch icon from an image, clipart, or text asset, many of which have already been provided for you. Let’s select the default for now (as we are doing in all these dialogs) just to see what the default New Android Application Project creation process does so we have a minimum baseline understanding to build from. After you have chosen your application Launcher Icon, click Next ➤ to proceed to the Create Activity dialog, where we will create a BlankActivity for our application. We are selecting a BlankActivity so that we can see the minimum code that Android will generate via the New Android Application Project series of dialogs. The dialog is shown in Figure 2-4.



android application development

you are Thinking what is an Activity in android and what is the function of it. the main activity is defined via XML mark-up and then inflated via Java programming in your application onCreate( ) method in your Main Activity class. The Activity contains Layout Containers that are specified by the Android ViewGroup Class (logical as Layouts are groups of Views) that contain Android View Class Widgets that are UI elements and content containers. Click the Next ➤ button and proceed to the New Blank Activity dialog shown in Figure 2-5 where we will set the parameters for our Android application’s Activity, much like we did in the first New Android Application dialog. Let’s accept the default (suggested) names, just to become familiar with what Android would like us to call the various main components of our application, and name our Activity MainActivity and name our Layout XML file activity_main with a navigation type of None—again, this is so we can see the minimum bootstrap code that will be provided for us by the New Android Application Project series of dialogs. Now click Finish and let ADT proceed with the new project creation process.

android application development

Once you click the final Next button in the last dialog, Android Development Tools (ADT) will check your current installation (SDK and Plug-Ins set-up) to make sure that you have everything that you need to create the Android Application Project that you just specified. For instance, if you specified Android 2.2 through 4.1 support, but only installed API Level 10 (2.3.7) through API Level 16 (4.1.2), then an Install Dependencies dialog will appear asking you to install API Level 8 (2.2). Once you click the Install/Upgrade button these additional APIs will be pulled over from the Google repositories and installed on your system to be used in your Eclipse Android Development configuration. Now we’re ready to develop our new Hello World application inside of the Eclipse IDE, which will appear, populated with the new Android application project, once the Install Dependencies download is complete (if needed) and its install process has been completed. Next let’s take a look at the virgin Android Project that ADT has so kindly created for us!


Anatomy of an Android Application Project

Let’s take a look at what the ADT New Android Application Project helper has created for us in our Eclipse IDE, starting with the Package Explorer project navigation pane on the left side of the IDE. The Package Explorer Utility allows us to navigate through the project assets hierarchy for our Android application at any time during its development, much like the Windows Explorer Utility allows us to navigate our hard disk drive and OS. Figure 2-6 shows what Eclipse will look like after the new project pops up on the screen in the IDE.

android application development

Let’s open up some of the key sub-folders in your Hello_World top-level project folder by clicking on the little triangle UI elements next to each folder that point to the right. For now, let’s focuson the folders named src (source code) and res (resources), as those are the most important folders in any Android Project. Open up the src folder, which contains one sub-folder named chapter.two.hello_world that you might remember we specified in the New Android Application dialog as our package name. Dig a little bit deeper and look under the chapter.two.hello_world folder, where you will find our MainActivity.java file, which contains the Java programming that the New Android Application creation process has written for us, and which “bootstraps” or launches our Activity (main screen) user interface layout and menu code, which happens to be defined via XML files in the layout and menu folders. We’ll open this Java file in a later section of this article and take a look at that Java programming and what it does exactly. All your Java programming files will be kept in this package-name folder for any Android application that you develop. Also notice in Figure 2-6 that I clicked the right-facing arrow triangle next to the MainActivity.java file, and that the Package Explorer also shows the Java Methods that are within this Java programming, so it seems that the Eclipse Package Explorer not only navigates files, but also code structures as well. This is a pretty vanguard feature for an IDE. The other primary application assets folder that we need to take a closer look at is the resources or res folder, which, as you may have guessed, is where all the XML and new media resources that Android applications will inevitably draw on to create its User Experience (UX) are kept in immaculate order. Click the triangle UI icon next to the res folder, as shown in Figure 2-6, and open it up, so you can see its many sub-folders that were created for us by the New Android Application Project helper. The first four folders you see at the top all start with the word drawable which, as you might surmise correctly, is an Android application asset that can be drawn to the screen via the Activity that we learned about earlier. A drawable can be an image, a shape, a frame animation, an image transition, an icon, or any similar graphics-related content or user interface elements needed for your application. Also notice that there are four drawable folders—one for each level of screen density: low, medium, high, extra high. It is important to note that as of Android 4.2.2 there is also an Extra,Extra High (XXHDPI) classification.Click the triangle UI element next to any one (or all four, if you like) of the drawable folders,and you will see the ic_launcher.png Launcher Icon, which we created in the third


 

Configure Launcher Icon dialog of the New Android Application Project series of dialogs. Note that just having your application icon named correctly (ic_launcher.png) and placed in the correct drawable folder is all that you have to do to have an icon appear for your application. That’s right: zero codings. We’ll get into how to optimize icons and graphics for these different drawable folders later on. These four drawable folders allow Android Developers (such as yourself) to provide custom pixel-perfect graphic elements across all genres of Android devices, from smartphones to tablets to e-readers to iTV sets. Low Density Pixel Imagery (LDPI) is optimized for the smallest of Android screens, such as 120 DPI (which also stands for Dots Per Inch) flip-phones or MP3 players, which usually have small 320 by 240 pixel screens. Medium Density Pixel Imagery (MDPI) is for entry-level smartphones (480 by 320 and 640 by 480 resolution) that use a 160 DPI pixel screen density. High Density Pixel Imagery (HDPI) fits mainstream smartphones and the 5″ to 7″ mini-tablets (800 by 480, 854 by 480, and 960 by 540 resolution) that use 240 DPI pixel density screens. eXtra High Density Pixel Imagery (XHDPI) uses 320 DPI pixel density screens, and fits HD smartphones and larger 8″ to 11″ tablets (1024 by 600, 1280 by 720, and 1280 by 800 resolutions). Interactive Television Density Pixel Imagery (TVDPI) also uses 320 DPI (at 1920 by 1080 and 1920 by 1200 resolutions) and fits the new GoogleTV iTV sets.  which covers graphics design and animation for Activity User Interface and Content Development. The next folder down is the layout folder; click the triangle UI element to open it, and you will see that it currently contains the Layout XML file for our Activity, named activity_main.xml as we previously specified in the fifth dialog in our New Android Application Project series of dialogs. This file contains all the XML mark-up tags that define our Activity Screen Layout and its User Interface elements. We’ll open this in the Eclipse IDE in the next section of this article and eventually customize the XML tags to create an even cooler Hello World user experience. Each of the Activities (user interface screens) that you define for your application will have its own XML file in this layout folder, each containing unique tags that define what each application screen will look like. So, if your app has a Log-In screen, for instance, there would also be an activity_login.xml file in this folder, which would contain completely different XML mark-up (tags) than the activity_main.xml file does. The next folder down is the menu folder, which holds XML files that define your Android application menu structure for each Activity user interface screen. Click the triangle UI element next to the menu folder to open it, and you will see that it currently contains the Menu XML file for our Activity, which Android has named activity_main.xml as previously specified in the fifth dialog in our New Android Application Project series of dialogs. The reason that the Layout and Menu XML files have the same name is because normally you will have both UI elements and menus for each of your application (activity) screens, so the most logical way to group them is by their file names. Because these files are in different folders, they are kept separate, and therefore can have the same file name, which Android will look for by using the first part of the file name, as well as by the folder it is in. We’ll open up both these files in the Eclipse IDE a little later in this article, and later we will even customize their XML tags to create a more advanced Hello World Layout and Menu system, so that you can better experience how exactly Activities work inside of Android. The last three sub-folders in the resource folder are the values folders, which hold our constants such as strings, themes, dimensions, colors, and the like, so that they can all be later accessed (and changed with the greatest of ease) in one centralized location within your project hierarchy. Android wants all values externalized into these folders, as we will see with the strings.xml file in the next section. if you do not use values properly Eclipse flags your code with triangular yellow warning icons in the IDE. Android OS is kind of strict! Next let’s take a closer look at how Android leverages XML mark-up to allow team members, primarily non-programmers in design roles, to contribute to the application development process. XML is used for many things in Android development, such as User Interface Design, Application Configuration in the AndroidManifest.xml file, and much more.



Android Application Project: XML Mark-Up

Your application’s Java programming in MainActivity.java references the activity_main.xml files that we have seen in both the layout and menu folders, and in fact, when Eclipse opens up after the New Android Application Project creation process, it automatically opens up the Activity Layout XML file activity_main.xml from the layout folder in its central main editing area. This can be seen in Figure 2-6, which shows what Eclipse looks like when it first opens up your new application project. Notice in the central area that the activity_main.xml is open (note name in top tab) in the Graphical Layout editor (note name in bottom tab). User Interface Screen Layouts in Android Using XML Let’s click the activity_main.xml tab at the bottom of the Eclipse central editing pane, as shown in Figure 2-7 and see exactly how this XML mark-up works inside your Android Application development. Here’s the XML mark-up to define a Relative Layout Container and place some Hello world! text inside it:

android application development

The first XML tag shown in the <RelativeLayout> tag, which provides a Layout Container that will hold our user interface elements, in this case text, and eventually, imagery and buttons, for example. Inside of the RelativeLayout tag you will find several parameters, each of which follow the following format: platform:feature=”setting value” For instance, the first parameter is xmlns:android and referenced the XML platform (XMLNS means eXtended Mark-up Language Naming Schema) and defines a location on the Internet where the XML tags for use with Android that are used in this XML document are publicly defined and referenced in one central location. The second parameter xmlns:tools is also from the XML platform, and defines where on the Internet the XML tools used in this XML document are defined publicly.


The tools:context tag tells where these tools will be utilized, in this case in our MainActivity Java class, referenced via.MainActivity setting value held in quotes within that parameter. and define parameters that pertain to the Android OS, for instance we use, android:layout_width and android:layout_height are both and set to the match_parent value, and use to expand and fill the display screen Now let’s look at the parameters in the <TextView> tag that sets our Text within our Relative Layout container. We again see the android:layout_width and android:layout_height parameters, but this time they reference the wrap_content setting, which essentially does the exact opposite of what the match_parent setting does. ! Let’s look at the layout centering parameters and the string.xml file values that the android: text parameter references next. The android:layout_centerHorizontal and android:layout_centerVertical parameters are both set to true, which signifies that we want to center our TextView UI element both horizontally as well as vertically, so that the TextView UI element lives in the center of our Activity screen, no matter what the screen density, orientation, or resolution is that the user’s device might be using at the time. The final and most important parameter for the TextView UI element is the actual text content that that UI element is to contain, and this is accessed via the android:text parameter. The setting value contained in quotes is set to @string/hello_world which is Android OS specific symbolic notation for:


Creating Option Menus in Android Using XML

We’ll be looking at the strings.xml file in our values folder later in this article to see how this text value is set as well. First, let’s take a look at the other activity_main.xml file that is contained in the menu folder, and analyze the Menu XML code that ADT has written for us. Right-click the activity_main.xml file inside the menu folder in your Package Explorer (shown in Figure 2-6), and select Open or simply select the file and use the F3 key on your keyboard to open it. A second tab opens in the central editing area of Eclipse labeled activity_main.xml and you will see XML mark-up defining your menu settings entry, as shown in Figure 2-8.

android application development

Menu XML files in Android also use mark-up structures called Tags to define menu items via the <menu> tag container and inside of it the <item> tags for each menu item. In this case there is only one menu item called Settings, however, later on, we’ll add some more menu items and make them active so that you have a complete understanding of how to implement menu items in your apps. It is important to note that when you run your app the menu pops up when you use the Menu key (button) in your Android Emulator, even though the menu item when clicked does not do anything yet. This allows you to define your Activity menu user interface and test it before you write the code to implement what it actually does. So let’s look at the Menu XML code that Android created for us now line by line:



As you can see, the opening tag in any XML file, in this case the “parent” <menu> tag, contains a HTTP reference to the Android XML Naming Schema, just like the <RelativeLayout> tag did in the layout folder version of the activity_main.xml file that we looked at earlier. Inside the <menu> tag we “nest” <item> tags that define each menu item, and each <item> tag in turn has its own parameters that define what each menu item is named, what it says on the menu, what order it appears in, and whether it shows as an Action Icon in Android 3.x, 4.x, or 5.x operating systems. Let’s go over each parameter. The first android:id parameter names this menu item menu_settings so that we can reference it in our Java programming. The second android:orderInCategory parameter sets the order that the menu item will be in a menu that has more than one menu item, as most menus do. As we add menu items later on, we will set this parameter to 200 (and so on) to determine the importance of each menu item function that we add. The third android:showAsAction parameter determines whether your menu shows on the Action Icon Bar on Android OS version 3.x and 4.x (and soon 5.x) devices. In this case, we are using the none setting, because we want backward-compatibility to Android 1.6 and 2.x devices such as the Amazon Kindle Fire (2.3.7). A none setting pops-up the menu at the bottom of the screen as you will see when you run the Hello_World app in the 4.2 Emulator later. If you are developing apps solely for Android 3.x and later, you can use the ifRoom parameter as a setting instead, and your menu items will appear in the Android Action Bar, if there is room for them, that is. The final android:title parameter is the title, or label, for the menu item within the pop-up menu itself. Because this menu title is a string constant, it is set in the values folder in the strings.xml file. In fact let’s look at that now by right-clicking the strings.xml file in the values folder and selecting the Open command!


Set Constant Values for Your Android Application Using XML

The strings.xml file opens in its own editing tab in the central area of Eclipse as shown in Figure 2-9, if you want to see the strings edited visually, click the bottom Resources tab on the left or use the XML view tab on the right, labeled with the strings.xml filename.

android application development

Because we’re learning XML code in this section of the article, I chose to show the XML mark-up View pane in the Eclipse ADT Editor shown in Figure 2-9. Let’s look at that XML mark-up code now, to see how we define constants:

The first XML tag declares we are using XML version 1.0 and that we are using text (font) encoding paradigm UTF-8, which accommodates a fairly large character set that spans many common languages. The second “parent” tag is the <resources> tag that holds our <string> resources that are nested inside the Resources container. The first <string> tag is named app_name and its value holds the name for the application Hello_World that appears at the top of the application in the emulator when we run it. The second <string> tag is named hello_world and its value holds the text that is used in the TextView UI element that displays: Hello world! that appears in the middle of the application Activity screen in the emulator when we run it. The third <string> tag is named menu_settings and its value holds the name for the first menu option title: Settings that appears at the bottom of the application in the emulator when we run it and click the Menu button or icon on the right side of the emulator screen. Now that we’ve covered the plethora of options and values that can be set via the XML mark-up in our Android application, let’s take a look at how Java calls, starts up, and inflates all these XML assets via various onCreate( ) methods. Android Application Project: Java programming Now let’s take a look at the Android application Java programming assets themselves that live in the Project Explorer hierarchy. We’ll again start at the very top of the Project Folder hierarchy, and look in the src folder and under our package folder we’ll find the MainActivity.java Java source code file that contains our MainActivity class and onCreate( ) methods. Assuming your src and package-name folders are open and you can see the MainActivity.java file,click the MainActivity.java file to select it, and hit the F3 key on your keyboard, or alternatively you can right-click the file name, and select the Open menu item from the context-sensitive menu that will appear. A fourth tab opens at the top of the Eclipse central editing pane and you should see something like what is shown in Figure 2-10.

android application development

Notice that a tab opens in the central part of Eclipse that says MainActivity.java at the top and contains the Java programming that is in that file. This central part of Eclipse is the code editing pane and can have more than one tab open at a time, as we have seen when we opened our Layout and Menu XML files for review and editing. So, let’s take a look at our Java programming now.



Defining the Android Classes via Import Statements

There are three import statements at the top that reference other Java programming that we will use in the Java class and its methods below it. To see all the import statements, click the + UI symbol next to the first import statement, and you can see all three import statements. The first onCreate( ) method uses the first Bundle class, the second Activity class extends our MainActivity class, and the third Menu class creates a menu via the onCreateOptionsMenu( ) method. Here is the Java programming that creates our Activity (User Interface) and Menu for our Hello_World application as it was created for us in the ADT New android application development Project helper:

Creating Our Application Infrastructure Using

the onCreate( ) Method Next, let’s take a look at the MainActivity Java class and the onCreate( ) method that lives inside of

  1. In Java, you declare a class using the class keyword before the name of the class. In this case, our class is called MainActivity, and it can be accessed by any other code, so it is also declared as public using the public keyword prior to the class keyword. This MainActivity class extends

(or borrows methods from) the Android Application Activity “super class,” which we previously

imported at the top of this code using the import android.app.Activity; line of code. Our complete MainActivity class declaration reads as follows: public class MainActivity extends Activity { … }

The first method in our class is also public and also is declared as void, which means that it does not return any value to the calling function (in this case the Android OS), it just does something, which in this case is to create our initial Activity or User Interface Screen via the onCreate( ) method. The onCreate( ) method is passed a Bundle object by the Android OS that is called saveInstanceState and contains the states (settings) of the user interface elements in our Activity in the form of a Bundle of values and settings.

Inside the onCreate( ) method are two method calls. The first method call uses the super keyword to pass the saveInstanceState Bundle object up to the android.app.Activity superclass and its onCreate( ) method.

The second method call sets the Content View (Activity Screen) for the application via the setContentView( ) method, along with a reference to our activity_main.xml file in the layout folder that we looked at earlier in the article.

That looks like this: setContentView(R.layout.activity_main); where the R equates to the Hello_World Project path down to the layout folder, or C:\Users\Username\workspace\Hello_World\res\ so as you can extrapolate from this information, R.layout.activity_main actually


translates into (means to Android):

C:\Users\Username\workspace\Hello_World\res\layout\activity_main.xml This serves to load your XML layout definition through the Java setContentView( ) method in the Activity subclass (remember the extends Activity part of our class declaration). Next, let’s look at the second method onCreateOptionsMenu( ) that similarly serves to create your Activity’s Options Menu from the activity_main.xml Menu XML file using the getMenuInflater( ) method accessed via the android.view.Menu class import statement we looked at earlier. The getMenuInflater( ) method calls an .inflate( ) method that has two parameters, a Menu object named menu passed into the method via onCreateOptionsMenu(Menu menu) and the path to our activity_main.xml file in the menu folder via the now familiar R.menu.activity_main which equates to: C:\Users\Username\workspace\Hello_World\res\menu\activity_main.xml So, basically, the .inflate( ) method takes the Menu object named menu and inflates it with the XML Menu definition referenced in R.menu.activity_main. Note that Android uses the first part of the filename (not the .xml part, it does not use the file extension) to reference both XML and graphics (drawable) files. Once the Menu object menu is inflated and ready for use it returns a true value to the OS.


Running Your Hello World App in the Android 4.2 Emulator

Now let’s compile and run all this XML and Java programming and see what it does in the Android 4.2 Emulator Nexus S smartphone. To launch the emulator, simply right-click the Hello_World Project top-level folder in the Eclipse Package Explorer, and select the Run As Android Application menu item. When the Android 4.2 Emulator for the Nexus S smartphone appears you will see the Hello_World app and its Hello world! exclamation on the emulator screen as shown in Figure 2-11.

android application development

We can see the Application Name we specified in the New android application development Project series of dialogs, as well as the Launch Icon we chose and the text message we set in the strings.xml file. Our XML Layout tags centered the text perfectly, and now we are ready to click the X at the top right and exit the emulator.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button