1. Introduction

1.1 Getting Started

Hi, everybody, and welcome to the dazzling world of Android programming and IntelliJ. Purpose of this module is getting you started on Android. So, in the next few minutes, you'll see what it takes to create a sample hello world application for Android using the Java programming language and the Jetbrains IntelliJ as the programming environment. For the purposes of this module, I'm assuming that you have IntelliJ already up and running. If not, please go to jetbrains.com now and pick up the free IntelliJ community edition. I am also assuming that you are all set for Android development. This means that you have successfully installed the Java SDK, which is required, and the standard edition 1.6 is more than fine, and also the Android SDK. Note that the setup of the Android SDK usually requires two distinct steps. First, you install the core SDK tools and binaries, and then you download and install all the binaries for any of the Android platforms you want to code for. For example, Android 2.2, 3.0, 4.0, etc. The first step is carried out by the setup wizard. The second step requires instead an ad hoc tool, the SDK manager tool. From within the SDK manager, you just pick up the Android platforms you're interested in, and then the tools downloads right to your computer, all binaries and sample code for the selected platforms. Notice that setup for the Windows platform usually offers, as the final step of the process, just to launch the SDK manager to finalize the installation. Beyond that, you can run the SDK manager tool at any time from the command line, or better yet, from within IntelliJ right from the Tools > Android menu. It should be noted that you won't be able to create any Android application until you install at least one platform. This is a manual process, so don't expect NID to carry that for you. You must do it before start using IntelliJ successfully. Now, back to IntelliJ. From the welcome screen, you start your Android adventure by simply clicking Create New Project. And then, you choose the type of project you want to create. As you can see, there are several options, and three of them are for Android development. They are Application Module, Empty Module, and Library Module. The most common choice is Application Module. This option will take IntelliJ to arrange a project with some predefined structure. As you will see in a few moments, you can just compile the resulting project as-is and still get the nearly empty, but fully-functional Android application. If you choose Empty Module, then IntelliJ will simply deliver an empty project only configured to build for the specified Android platform. No extra content will be generated such as resources or classes. And finally, the Library Module prepares the ground for you to build a class library of shared code. Let's go for an Application Module, and enter project name and location. We'll call the first project Hello. More importantly, you should choose the target Android platform. The drop-down list is pre-filled with all of the platforms you previously selected through the SDK manager. Let's choose, for this example, Android 2.2. This is a fairly old platform, and lacks some of the most advanced programming goodies from Android, but in return, it ensures that your application is going to work on a wider range of devices. Also, make sure that the content root field is set to the folder you expect it to be. This is the root folder of your project files and directories. Clicking Next takes you to the dialogue box that summarizes the application name and package name, and allows you to set the target device and initial startup activity. The package name should be in the form com.something.somethingelse. Where the first token, the example token highlighted right now, usually, stands for the company name. Whereas, the other token, the final token, Hello, in this example is just the application name. This pattern is not mandatory, and you can name the executable as you wish. This suggested pattern however, reduces significantly the risk of naming conflicts with other applications, and, it is also a fairly common pattern in Java space. IntelliJ also offers to create example activity, by default named My Activity. Of course, you are more than welcome to rename the activity the way you like. In Android development, an activity is a plain Java class. And, it represents the code running behind each displayed screen. If you're coming from a .NET background, an activity is more or less the same as a code behind class. If you're coming from a Mac iOS background, then an activity is nearly the same as a controller class. To test an Android application, you need either a software emulator or a real device connected to the PC via a USB port. There are three basic run configurations. One is Show Device Chooser Dialogue, and it indicates that IntelliJ will ask you to choose between the emulator or a device connected via USB every time you launch the application from the IDE. The option USB device instead indicates that IntelliJ will automatically try to deploy the application to any compatible device available through a USB port, and this is the option you will use if you want to test the app on a physical device. And finally, emulator indicates that IntelliJ will deploy the application to the configured emulator. In order to test on the emulator, you need to set up an Android virtual device, AVD for short. An AVD is just a configuration file through which you define harder and softer options for the emulator to mimic. You create an AVD using another special SDK tool called the AVD manager tool. Also, a tool that is also mapped to the Android Tools > Android menu of IntelliJ. You must make sure that there is at least an AVD defined. and you must select that every time you choose the emulator option. You can have multiple AVD because each AVD is expected to represent a particular test scenario. Let's see what it takes to create a custom, another AVD. This is the AVD Manager. By clicking on the New button, you are given a chance to give a name to your AVD. Then you can choose a particular common popular Android device. And in that case, the AVD that results from the dialog box incorporates all the most common features of that particular, popular, physical Android device. Through the Target drop-down you can pick up the platform you're interested in. You can also choose whether to simulate the keyboard, the front and back camera, how much memory, how much internal storage, where on an SD card should be simulated, and so forth. When you're done, you just click OK to add a new AVD, and at that point, you just indicate the right AVD from the drop-down here. Click Finish to have the project created. Here we go. What we get is a classic typical Java project with many of the classic folders you always find in a Java project such as source, libs and res. The res folder in particular contains all external resources used by the applications such as images, layout files, strings, menus. The source folder contains our classes, Java classes. And the libs folder is the place for external references. In Android, its screen is supported by an activity which is a Java class, and it is expected to inherit from a pattern plus name activity. At the very minimum, the startup activity, the initial activity, needs to set the content view. The content view is defined as an XML file named main XML and located under a res\layout. You can edit the content view in a couple of ways. You can use a graphical designer or you can use an XML text editor, and you switch between the two editors using the tabs at the bottom of the screen. So, by clicking on text, you're given a chance to edit the XML directly. And, we can, for example, use the facilities of the text editor to change the text being displayed to something like Hello IntelliJ. Save, changes are immediately reflected. Click on Design and we switch back to the graphical designer. We can edit view from here as well, the UI is the result of composing multiple graphical widgets from the palette here. We select one, and the selecting widget will bring up the component three view which offers a hierarchical view of the graphical elements. And for the selected elements, we have a list of properties, so all we have to do is scrolling to locate the property we want to modify. In this particular case, we have highlighted our text view component label of text, which is the located the text property and change the string to something like Hello IntelliJ and Android. Changes are immediately reflected in the UI, and that's all of it. The sample hello world application is now ready for its first cry. To build and deploy on the target device, whether the emulator or a real device, you select Run Configuration and then click. It takes a while for the emulator to bring up for the code to be compiled. You can observe here messages from what the system is producing and here we go. The app is working in the Android emulator. It beautifully worked. So, if you survived this first impact with Java and Android development in IntelliJ, you're then ready for a more attractive and engaging adventures in Android development.

2. Building Android Applications

2.1 UI Designer

This modular summarizes in just a few minutes the key facts of grafting the usual interface of Android applications within Jetbrains IntelliJ community edition. Let's start with the fresh new project then name something like Cooldroid you can usually create the project from the welcome screen of the IntelliJ clicking on creating new project. And then accepting all the default settings. In mobile development the main issue is too often just arranging and engaging an effective user interface. Even greater than coding some even complex and sophisticated logic. And when the user interface is key. A visual editor is really close to being a true necessity. IntelliJ provides a visual editor for any graphical resources you can have in Android applications, including layout files which represents the structure for any displayed views. The UI layout file for the main screen of an Android application is defined. In a file usually named a main.xml which is located in the res layout folder. So this is the res folder, this is the layout child folder and this is the main xml file as created by the default project template in IntelliJ. So let's click and let's have a look at the content. At this stage, that user interface of the main screen as you can see is based on a very simple layout. It's a black background with a label showing some welcome text. So let's make some changes to the current user interface. As first thing, you click to select the text label and right click to delete it. So we have now a blank, actually black background, and we can create a completely custom UI. As a first thing, I want to select an ImageView component from the palette of widgets you find on the right of the screen. And after you select a widget, you move the mouse over the drawing surface representing the view and you get feedback about the position where a placeholder for the selected widget is going to be created. So let's, for example, put the image just at the center of the screen. Now, we only have a placeholder for the image. But there is no physical image phyl, physical PNG, JPG file associated with the widget yet. To add an image to the project, however, we first need to create a specific folder called drawable folder under the res folder of the project. So switch back to the project view and under rest right click to create a new Android resource directory. In the resist type drop down you find a long list of predefined resource directory. Select drawable and then have a look at the available qualifiers. You need a qualifier only if you want to create a subset or resources to be used on a particular set of devices. For example, if you use the, if you select the size qualifier, then you are given a chance to have images, strings, resources in general specific for devices of a particular screen resolution. Small, normal, large, or maybe X-large. If you for example choose the orientation qualifier, then you can define a different set of resources for when the user interface is displayed in portrait, landscape, or square mode. Notice you can have any combination of qualifiers. In this particular example, as things are now, you see that we are going to create a directory who's name is drawable small port. Indicating that the resource as we put in that directory will be used only when, the application runs on a device that Android qualifies as a small screen resolution device. Import right mode. For the purpose of this demo, we don't need any qualifiers, and we just work with a single set of resources. This is the simplest scenario, but it is still a fairly realistic one. So we're gonna have just one folder called drawable. Here we go. And now the next step is assigning putting some image into this folder. This is as simple as locating on the Windows Explorer or perhaps Finder if you're using a Mac finding the physical file and dropping that onto the folder. So let's bring up Windows Explorer. Select Droid image a PNG image. And just using drag and drop make sure we copy this file in a drawable folder. Here we go. And now we have a new image added to the project. The next step is associating this Droid PNG file with the place holder we have in our layout file. And this is, this can be a surprisingly hard task to accomplish. If you added an image widget but it's empty then the widget in the UI is rendered as a very thin and small box that may be harder to select through the mouse. This is one of the scenarios where the component in three of intelliJ comes to the rescue to let you comfortably select just the visual elements you need. So if we switch to the structure. To the designer here, the component three is displayed and it gives a list of the widgets currently selected in the lay out file. You select the image view and all you do is scrolling through the properties up until we find the source property. And from the ellipsis button we are presented resources dialog box, and all we do is selecting the content we're interested in, the Droid image. Click confirm, and here we go. Image View is now bound, statically bound to an image. Now let's add some text from the palette of components so we select text view and put text view underneath the image. The text view by default shows text that is place older. New text in this particular case. You can edit this text in a number of ways. For example, you can just scroll the list of properties to locate text. And then you can just change the text type in here. And so cool. And as you click and save, the text is immediately reflected in the user interface. But there is more you can do. The ellipsis button here. Allows you to create string some text as a new resource, new string value. You can use a name, something like, welcome tags, and a value, which can be, again, I'm so cool. This creates a new entry in a, a string dictionary saved in the strings XML file. Because the text is the same, you won't see any, anything different in the user interface. But if you have a look at the text property in the properties box, you see that now the text points to where the stream that simply indicates a reference to the resource, string resource named welcome text. And this is a great feature to enable, localization, for example and also to allow developers just to have a different resources based on different situations. For example, the most common scenario is localization. One more thing you can do, you might want to do, is making the text a bit more appealing. So, for example, let's add some padding. Scroll up to locate the padding property. Expand and then we can choose to have ten device pixel all around the text, or left, top, bottom, right in the directions that you like. It is interesting to notice that you are not allowed in Android to indicate dimensions as plain numbers. You must always add the DP Device pixel suffix. Which is a measure you give to Android to calculate the real physical number of pixels to express a virtual measurement of ten. So always use DP. We can change also the color of the text. Text color property here, ellipses button, and again, we have two options. We can just type the color as a constant string, or we can create a new color value. We can, again, choose a name and, again, welcome text is a valid name. And then we indicate what kind of color we associate with the color resource named welcome text. How would you express colors in Android? You use the same syntax you may know from HTML. So, the sharp symbol, followed by the RGB components of the color. For example, something like ffd764, which should make for a sort of yellowish color. Change the text, and we can just type 30dp right here, so the text now is larger and better. This is the way in which you work with the graphical editor of IntelliJ. But there is more that I want to call your attention on. In particular, if you focus on this area of the screen, you see in particular this Theme drop-down list. And, what you see now is the default view you get with this grayish title bar. All Android applications by default are given an extra free title bar that contains displays just name of the executable of the application. Most of the time you don't want this title bar. To have a look at how the UI of the application will be without the title bar, you can choose the theme NoTitleBar hap here. Similarly the editor here gives you a chance to preview how the user interface looks. For example, in landscape mode. So, all of the buttons and the drop downs you see here are all visual tools to give an immediate feedback on how the UI you are arranging will look like in a number of possible situations. So with different themes, day time, night time, with particular locales with particular versions of Android in portrait on landscape and using different sizes of the screen. It is important to notice however that whatever you see here whatever. The graphical editor shows you when you manage when you work on this drop downs is not immediately reflected in code. Each of these features may need some extra code on your own to be added. And in particular theme NoTitleBar doesn't result in any special settings being made to the UI file. But if you want to disable the title bar in a running application you need to add some specific lines of code. One line of code in particular in your main activity. So this is just a purely visual feature. So far so good for basic things of how to work with the graphical editor. If you look at the bottom of the screen here designing text, you see that there are two ways for developers to edit the layout file. Let's have a look at the text, the XML text being generated for this file. It is an XML file and you see that we have an image view. A text view, but they are contained within a wrapper root component of type linear layout. Now, in, Android, you are not allowed to have a text view or button has the root of the view. But you always need to have a root component, and there are four main types of layout roots in Android. Frame layout, linear layout, table layout, and relative layout. Frame layout is a very simple container. Basically a placeholder for a single object. And you use it to reserve a blank space in your main layout where some dynamic content will be generated and displayed at a later time. The content of the frame layout is a single object, but it can have, internally, any level of nesting you like. All child objects have a frame layout are always rendered from the top left corner of the screen. Linear layout is a frequently used layout that stacks its child elements in your result vertically. Table layout looks like HTML tables, but it doesn't feature most of the more advanced capabilities of HTML tables and particularly doesn't support graphics such as borders or tabbing. And it only supports rows as columns are calculated based on the maximum number of cells required by a single row. And cells in a row are also not allowed to span over multiple columns. Probably, the most interesting layout element is the relative layout container. Which contains elements and allow developers to define elements that indicate their preferred position relative to the parent. As an example, you can align two objects at the right edge, below or above. To complete the module, let's just see an example of a user interface that has a header, footer and body created with a relative layout. So let me close up main.xml file and just let me bring in the projects some other files, in particular main one header and a footer. Let me just copy this over here, and here we go. This is now main one XML and this is the graphical rendering of this UI. There's a header, a body, and there is a footer. Let's have a look at the XML behind it. So everything is wrapped up in relative layout element and underneath the relative layout we have three distinct linear layout components. First, you see listed is the body, the outer is the header and the third is the footer. This means that you can have elements listed in any order within a relative layout. And just the settings of each child component will determine the physical position. In particular, let's expand, for example, footer. You see that the include element is a smart syntax to incorporate, right here, the content of a separate footer XML file. Similarly, for the header. Notice that to ensure that the footer is displayed at the very bottom of the UI we have the Layout_alignParentBottom property set to through. For the header, we have nothing special. It's just a, a, a, nearly empty container that points to a header XML file. It is more interesting what we find instead in the body of the UI, where we have a property called layout_below, and another one called the layout_above. Layout_below points to the header. Layout_above points to footer container. What does it mean? Essentially that the content of this linear layout needs to be placed below the header and just above the footer. And in turn, the footer needs to go aligned at the bottom of the parent. Very, very interesting. Now to finish off this part let me reopen the screen. And let's see what it takes to give visual elements a nicer background that is, doesn't, made, it is not based on a solid color, but uses a gradient. Let's open up the header file. This time it shows a black background. But if you look at the source code, you find that the linear layout of the header has the background property set to something like drawable slash gradients. So, what is gradiance? Gradience is an external additional resource that defines a gradient. And the syntax here indicates that, that particular gradient, that gradient resource has to be used to paint the background of the component that has this linear layout. So all we want to do to finish the example is importing that gradient definition which is an XML file we want to copy in the drawable folder. And the gradient XML file has a very simple structure as you can see. It is a shape element which contains a gradient child element that defines the start color, end color and the angle of the gradient. if we switch back to header, now that IntelliJ editor recognizes the new resource. And we have to close and reopen the main XML one and graphical mode to see that gradient to be applied graphically. So much for this module, but keep in mind that there is a lot more to be discovered in the graphical editor of IntelliJ for Android when it comes to user interfaces.