How to create ui using droid draw


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How to create ui using droid draw

  1. 1. Android Application Development Training Tutorial For more info visit A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi
  2. 2. How-to create UI using DroidDrawIntroductionNow the we know more about the components of an Android Application let me introduce you to a newelement we can work with: DroidDraw. is a User Interfaces designer/editor for Android written in Java. With this application (we can work on-lineor on our desktop). We can also download it for Linux, Mac or Windows.Once we have it in our desktop, its time to have a look a it.In the left side we can see a rectangle area, like our phone screen. This is the place where we are going to“draw” our UI. Above this screen we can see two values:Root Layout -> Here we can set which is going to be the root layout of our UI. It can be a LinearLayout,AbsoluteLayout, RelativeLayout, ScrollView o TableLayout. So this is our first container of elements we aregoing to use.Screen Size -> Here we can choose the size of our Screen, as if we had different kinds of mobile phones anddifferent screen sizes.In the right side, we have, now, lots of widgets, that’s because we are on the “widgets” tab. We can see thenames of the others tabs. Layouts Properties Strings Colors Arrays Support.In the lower right side we can see the output of our creation. Here, we can generate the XML code from the UIwe have create in the left side. In other hand, we can write our own XML code and loaded it to the Screen. Thisis a good way of testing the XML parameters to get familiar to them.We are going to use the most important ones (in my point of view). Lets have a look at them. A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi
  3. 3. Widgets TagIn this tab we can find most of the widgets we can use with an Application: Buttons, Checkboxes,RadioButtons, Images, Galleries…To use them, just drag one of the elements and drop it on the left side of the screen. The element will be placed,depending of which “Root Layout” we are using. For example, if we are using “LinearLayout” It will be placedin the top side of the screen. In the other hand if we are using "AbsoluteLayout" we can place it wherever wewant. To learn more about layouts, please visit this article:How-To Create User Interfaces (UI) Using XML: LayoutsIntroductionThere are two ways to create user interfaces for applications in Android. We can create them using Java codeand classes and in the other hand, we can create our UI using XML. In this section we will see how to createthem using the last way.If you remember Part 3 of this series of articles, when we create a new Android Project in Eclipse,automatically an structure is built. We learned that the Main Activity is the entry point of the application. But,this file is nothing by itself. Its needs something to be drawn on it. So we start drawing views and groupviewsover this Activity.We will create layouts and we will add widgets to this layouts. A layout is something like a container. A layoutcan hold as many widgets as we want. A widget is a single element as a Button, a Image or a CheckBox.All this XML codes will be stored inside the res/layout folder.LayoutsAs we said before, lets start talking about the widgets containers or layouts.There are lots of kinds of layouts, depending of its characteristics and properties. Lets see the most importantones.LinearLayoutIn LinearLayouts we can add children in one direction. We can add them horizontally or vertically (dependingthe property we have set on the LinearLayout). The next images will show you more clearly what I was talkingabout.Here we see four buttons inside a LinearLayout set vertically.Here we can see the same four buttons but now horizontally. A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi
  4. 4. This is the XML code for a LinearLayout.Inside the tags <LinearLayout> and </LinearLayout> is the place where we put the widgets. As we see, thiscode has some properties. Lets have a look at them:android:layout_width → Defines the width of the Layout. The values it can hold are: fill_parent → The layout fill al the parent width, if there is no parent, it will fill all the screen wrap_content →Depending on the content of the layout, the width will be fixed to it Xpx → Where X is a number. You can determine the width of our layout in pixelsandroid:layout_height → The same as the “layout_width”, but considering the Height of the layoutandroid:id → This string is consider the identifier of the layout. When we have more than one layout orwidget, its interesting to have them → this is the parameter we were talking before. Here we can change the orientation of thelayout: horizontal or vertical.All layouts that are we going to see next are similar to the LinearLayout. They only change in the way ofdisplaying the widgets.AbsoluteLayoutWith this layout, we can put the widgets wherever we want, just with the coordinates. Considering that thepoint (0,0) is in the top-left.RelativeLayoutIn the RelativeLayout, we set the place of the widgets in relation to others widgets or the parent. Here it isimportant the “android:id” parameter.For example. If we have a button in the middle of the screen, we can add other widget 10px to the right of thisinitial button.TableLayoutWe can set the position of the widgets in rows and columns. The TableLayout holds TableRows elements. Eachof this TableRows can hold one or more columns.Other Layouts parametersTo finish this article we will see some other Layouts parameters that can be used in some of the layouts showedabove. Some of this parameters are used in the widgets too. A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi
  5. 5. android:gravity → With this parameter specify the place of the object inside a bigger container. For example aLinearLayout inside the screen. It can have some values:-top → Puts the object on the top of the container-bottom → Puts the object on the bottom of the container-center → Puts the object on the center of the container-right → Puts the object on the right of the container-left → Puts the object on the left of the containerandroid:background → You can set the background of the layout, it can be a picture (drawable resource) or acolor, #FFFFFFFFandroid:visibility → With this parameter we can control the visibility of the layout. It can be-visible → visible on the screen-invisible → not visible but It takes account in the layout disposition.-gone → The same as if you didnt have use this layout.ActivitiesAn Activity is a single screen of the User interface. This Activity can hold a hierarchy of views to give the UIthe functionality it needs. For example, an email-application. We can have two Activities, one to list all themails we have received (and to interact with them) and other Activity to write and send an email. Both Activitiesare related, but they work separately in their own.ServicesA Service runs in the background, it doesn’t have UI. An example of Service can be a system that notifies theuser when a sms or an email has been received in the mobile.Content providersWith the content provider we can access to any data stored in the device form other applications or even formour applications. This data can be stored in files or is the SQLite database.LayoutLayouts are containers of elements in the User Interface. Every time we define a .xml file with a specific userinterface, we need to use this elements to hold hierarchy view tree. As I have wrote in other article, we can finddifferent layouts kinds, depending its properties and relationship with the elements its holds. Layouts can benested one inside other. A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi
  6. 6. ViewA View is a single object of the user interface. This Views are placed inside the Layouts and with them we cancreate from the most simplest UI to the most complex one. Android give us the choice to work with XML tocreate UI, this is a good way to separate functionality from User Interface. Views can be Images (ImageView),Text (TextView)…Events (On click, onTouch)We have to define the events listeners to capture this events.An Event is something that happens form the “outside”, is something we don’t control, something we don’tknow when its going to happen. For that we use the Events controllers, for each event that can happen, we candefine how the system is going to behave. A common event is onTouch Event, this is when the screen istouched. We have to define the events listeners to capture this events.ResourcesResources are the external elements we use in our applications. They are placed in the “res” folder and they canbe, images, music, videos. Here, in this folder is stored the .xml files: User Interfaces, styles, strings we use inthe App, themes… Once resources are compiled, they are fully avaliable in Java code using the "" file.We will see this in further examples.Layout TagThis tag is simple, we just have the Layouts (containers) and we can place them inside the screen. In this way, aLayout can hold too much more layouts inside, so we can create more complex structures.Properties TagDepending on which element we have selected on the left Screen, the Properties screen will change. Here wecan see and edit the parameters of each element. Its very intuitive, we just have to change values in theInputBox. You can play with values to see how they affect to the layouts and the elements in the Screen. Onewe have change something and want to see it on the screen, just press the Apply button.String TagIn this tag we can add Strings. This strings can be used in our UI. We can reference them from other parts ofthe application. Instead of writing them manually we just made reference to a String we have create before. A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi
  7. 7. How-to use Dalvik Debug Monitor Service (DDMS) Tool WithGoogle AndroidIntroductionIf we had installed the Eclipse plugging properly (if not, please go to “Setting the environment”), we couldaccess to the DDMS perspective. On your Eclipse menu bar, click on “Window” and then on “OpenPerspective”. Search for the DDMS perspective. We will see a screen like this one we have in the picture.Now, lets have a look to all the elements we have here.DevicesIn the top left window we can see a tab with the label “Devices”. Here we can find all the devices/emulatorsthat are “Online” and connected to Eclipse. Below each instance of the Emulator or device, we have allprocesses that are running in this instance, each process runs in its own Virtual Machine and we can identifythem by the package name of the application it host. In the most-right column we find the ports where this VMare connected. And just in the left of the processes name, there is other number, this is the “Linux process ID”.Every Linux process has its own unique identification, as Android is based on Linux kernell, we find the sameprocess systems here.In this same window, we find some icons in the top side of it.From left to right.--The “bug” icon, represents the debugger state. If its green, we are connected to the debugger and we can dodebugging task. If it is red, we are disconnected from the debugger. A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi
  8. 8. --The multiple-rows icon, just activates the “threads visualization”, if we select a process and we click this icon,in the right panel, in the tab “Threads” we will see the info, state and actualization times of the threads runningin this process.--The bucket-like icon. Has more or less the same functionality than the “Update Threads” icon. In this case weupdate the heap memory usage of this process. Clicking on it we update this information in the right panel.--The stop icon, is just as easy as, stop the selected process.--And to finish talking about this icons, we find the “Get screenshot” icon, with this, we can have aninstantaneous picture of our device/emulator screen.Emulator ControlIn this panel, we find some emulator options (this only works when we are working with the emulator, not withreal devices). Here we can simulate incoming calls, SMS for testing purposes. We can set the “Locationcoordinates” (Latitude, Longitude) like a GPS.Logs and ouputsIn my point of view this is the most important panel of DDMS. Here we can do debugging and tracing task, incase we have problems with our application.In the “LogCat” tab, we have all messages from the device, most of them are incompressible, but here we canfind Exceptions messages and Messages we add in the Android code using the Log.i(“Title”,”Message”) classto display “information” messages. If we want to display “Error” messages it would be something likeLog.e(“Title Error”, “Error”).In the “Console” tab, we find other kind of messages. This are related to the changes of states and applicationsin the phone. When a Application is installed, or when we start the device/emulator, messages showing thatinformation will be displayed here. If we find connectivity problems, here will be shown this kind of errors too.The Outline and Properties tab, shows information about the application: classes, attributes, variables...File Explorer, Heap and ThreadsIn the last panel, we find three tabs, Threads, Heap and File Explorer. The Threads and Heap tabs are just theinformation displayed from the first panel when we check the “Update Threads” and “Update Heap” buttons.Here the most important tab is the File Explorer. With this, we can access to the device/emulator file system,we can push files into it, get files from it and delete them (Using the top-right icons). At the right of the filenames, we can find the last update date, and the permissions of this file/folder (Using Unix system, again) A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi
  9. 9. How-To Work With Google Android DatabasesInternal DatabasesFor this Google Android instructional guide we will work with Android internal DataBases. Android supports aSQLite database system.In Android, data from applications is stored in a database system. Every application has its own database. Thepoint of this Article is to get to the database file, in other articles we will see how to work with them inside theApps.Hint! → As far as I could research, we can only have database files from the Emulator. In real devices theymay be locked. So this would be useful to know more about the Android internal system.Lets have a look at one of this databases.To access the database we have to go to the DDMS perspective in Eclipse once an emulator is running. As Iexplained in one of my past articles on the left side panel we can find the “File Explorer”, here we can surfaround the Android file system. We can see 3 folders:-Data -> Application data-SDCard -> File system inside the SD card (if any).-System-> Core file system.In the “data/data” path, we will find a list of packages, most of these packages store data in the internaldatabase. Lets have a look towards the “” package. Inside of it, we can find the folder“databases” and inside of this folder, the “alarms.db” file.We pull the file from the device, click on the “disk-and-arrow” icon. Now, we have the database file out of theemulator. Its time to see whats inside on it.For this purpose we will need an external tool to open the .db file.Looking at we can find lot of tools to work withSQLlite. I prefer GPL-licensed ones, like: A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi
  10. 10. I will use QSLitestudio for the purpose of this article.Now we can find the alarm.db file via our computer from the QSLitestudio and then open it.It should look something like this.Here we can see the tables, fields and values of the “alarm.db”. In this case, we can see the hours that the alarmis set to in the Emulator.How to Install APK files on your Google Android PhoneHow to Install APK files on your Android PhoneAndroid is one of the most promising mobile platforms currently available on the market. More than 100 newAndroid smartphones are expected in the coming year. Heres a list of the Top 10 Android Smartphones. Oneof the best features of the Android OS is the availability of third party applications.There are two ways to install third party applications on your Android based phones: The first way is by installing applications through the online Android Market, which we have already covered. The second way is to manually install APK applications developed using the Android SDK on your Android phone.APK applications are basically Android package applications.Through the Android MarketTo install APK applications on your Android phone do the following: 1. Copy the APK file you want to install to your phones memory card and insert the card into your Android phone. 2. Go to Android Market and search for the Apps Installer application. 3. Open it and click on the Install button. 4. After it is installed, just open it. It will show you all the APK files stored directly in the root directory of your memory card. 5. Just click on the application you want to install and it will be installed.Using the Android SDKThere is one more method that can be used, you can install APK files into your phone using the Android SDK.Download the Android SDK. A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi
  11. 11. First of all, install the Android SDK on your computer. You will also need to install the Android USB drivers toconnect the SDK to your phone via USB. You can download it from here - .To install applications from other sources, you also need go to Settings -> Application Settings and enableUnknown Sources. Also go to Settings -> SD Card and Phone Storage -> Disable Use for USB Storage. Youcan enable it again later.Next, just open Command Prompt and type: adb install path/file.apkwhere path is the full path to the APK file and file is the name of the APK application file. Your application isnow installed. This is all you need to do, now just open the application on your phone and use it.How To Install and Remove Apps on Android PhonesHow do you install and uninstall applications on an Android phone? Well show you how.The primary and most used way to install applications on your Android based phone is by using AndroidMarket. The Android market is a centralized repository of all the applications developed for Android. It hasbeen modelled after the very popular Apple iPhone AppStore. Check out this comparison between iPhoneAppstore and the Android Market. Third party developers can upload their applications on the Androidmarket and then anyone can download them. Most of the applications are free but some are also paid.How to Install ApplicationsTo install applications using Android Market perform the following steps: Open the Android Market application in the Applications menu. You can select any option - Applications, Games, Search or My Downloads based on what you want to do. You will then get a list of applications or games to choose from. You can also search for any particular application. You will then get a list of apps with their description and rating. Click on the application you want and you will get more details of that application - the number of downloads and user comments. To install it, just click on the Install button on the bottom of the screen. In the next screen, it will give you more details about the application including the different functionalities it will need to access. Just click on OK to finish installing the application. A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi
  12. 12. You can also Install APK files on your Android phone directly.Using the ApplicationYou can rate and even leave a comment on the Android Market about the application.To access the application, just go to your Menu and select the application you want to launch.To check a list of all the applications you have downloaded, open up Android Market again and select the MyDownloads option.Check out some cool Android applications to install.How to Remove ApplicationsTo uninstall applications that you installed using the Android Market: Open the Google Android Menu. Go to the Settings icon and select Applications. Next, click on Manage. You will be presented with a list of applications you have installed. Select the application you want to uninstall, and click the Uninstall button. A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi