How-To Create UI Using DroidDraw
How-To Create UI Using DroidDraw
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 are going to use. Screen Size -> Here we can choose the size of our Screen, as if we had different kinds of mobile phones and different screen sizes. In the right side, we have, now, lots of widgets, thats because we are on the widgets tab. We can see the names of the others tabs.
In the lower right side we can see the output of our creation. Here, we can generate the XML code from the UI we have create in the left side. In other hand, we can write our own XML code and loaded it to the Screen. This is 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
Widgets Tag
In 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 placed in the top side of the screen. In the other hand if we are using "AbsoluteLayout" we can place it wherever we want. To learn more about layouts, please visit this article: How-To Create User Interfaces (UI) Using XML: Layouts
Introduction
There are two ways to create user interfaces for applications in Android. We can create them using Java code and classes and in the other hand, we can create our UI using XML. In this section we will see how to create them 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 groupviews over this Activity. We will create layouts and we will add widgets to this layouts. A layout is something like a container. A layout can 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.
Layouts
As 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 important ones. LinearLayout In LinearLayouts we can add children in one direction. We can add them horizontally or vertically (depending the property we have set on the LinearLayout). The next images will show you more clearly what I was talking about. Here we see four buttons inside a LinearLayout set vertically.
Here we can see the same four buttons but now horizontally.
Inside the tags <LinearLayout> and </LinearLayout> is the place where we put the widgets. As we see, this code 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 pixels
android:layout_height The same as the layout_width, but considering the Height of the layout android:id This string is consider the identifier of the layout. When we have more than one layout or widget, its interesting to have them identified. android:orientation this is the parameter we were talking before. Here we can change the orientation of the layout: horizontal or vertical. All layouts that are we going to see next are similar to the LinearLayout. They only change in the way of displaying the widgets. AbsoluteLayout With this layout, we can put the widgets wherever we want, just with the coordinates. Considering that the point (0,0) is in the top-left. RelativeLayout In the RelativeLayout, we set the place of the widgets in relation to others widgets or the parent. Here it is important 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 this initial button. TableLayout We can set the position of the widgets in rows and columns. The TableLayout holds TableRows elements. Each of this TableRows can hold one or more columns.
android:gravity With this parameter specify the place of the object inside a bigger container. For example a LinearLayout 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 container android:background You can set the background of the layout, it can be a picture (drawable resource) or a color, #FFFFFFFF android: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 didn't have use this layout. Activities An Activity is a single screen of the User interface. This Activity can hold a hierarchy of views to give the UI the functionality it needs. For example, an email-application. We can have two Activities, one to list all the mails we have received (and to interact with them) and other Activity to write and send an email. Both Activities are related, but they work separately in their own. Services A Service runs in the background, it doesnt have UI. An example of Service can be a system that notifies the user when a sms or an email has been received in the mobile. Content providers With the content provider we can access to any data stored in the device form other applications or even form our applications. This data can be stored in files or is the SQLite database. Layout Layouts are containers of elements in the User Interface. Every time we define a .xml file with a specific user interface, we need to use this elements to hold hierarchy view tree. As I have wrote in other article, we can find different layouts kinds, depending its properties and relationship with the elements its holds. Layouts can be nested one inside other.
View A View is a single object of the user interface. This Views are placed inside the Layouts and with them we can create from the most simplest UI to the most complex one. Android give us the choice to work with XML to create 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 dont control, something we dont know when its going to happen. For that we use the Events controllers, for each event that can happen, we can define how the system is going to behave. A common event is onTouch Event, this is when the screen is touched. We have to define the events listeners to capture this events. Resources Resources are the external elements we use in our applications. They are placed in the res folder and they can be, images, music, videos. Here, in this folder is stored the .xml files: User Interfaces, styles, strings we use in the App, themes Once resources are compiled, they are fully avaliable in Java code using the "R.java" file. We will see this in further examples.
Layout Tag
This tag is simple, we just have the Layouts (containers) and we can place them inside the screen. In this way, a Layout can hold too much more layouts inside, so we can create more complex structures.
Properties Tag
Depending on which element we have selected on the left Screen, the Properties screen will change. Here we can see and edit the parameters of each element. Its very intuitive, we just have to change values in the InputBox. You can play with values to see how they affect to the layouts and the elements in the Screen. One we have change something and want to see it on the screen, just press the Apply button.
String Tag
In this tag we can add Strings. This strings can be used in our UI. We can reference them from other parts of the application. Instead of writing them manually we just made reference to a String we have create before.
How-to use Dalvik Debug Monitor Service (DDMS) Tool With Google Android
Introduction
If we had installed the Eclipse plugging properly (if not, please go to Setting the environment), we could access to the DDMS perspective. On your Eclipse menu bar, click on Window and then on Open Perspective. Search for the DDMS perspective. We will see a screen like this one we have in the picture.
Devices
In the top left window we can see a tab with the label Devices. Here we can find all the devices/emulators that are Online and connected to Eclipse. Below each instance of the Emulator or device, we have all processes that are running in this instance, each process runs in its own Virtual Machine and we can identify them by the package name of the application it host. In the most-right column we find the ports where this VM are 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 same process 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 do debugging task. If it is red, we are disconnected from the debugger.
--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 running in this process. --The bucket-like icon. Has more or less the same functionality than the Update Threads icon. In this case we update 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 an instantaneous picture of our device/emulator screen.
Emulator Control
In this panel, we find some emulator options (this only works when we are working with the emulator, not with real devices). Here we can simulate incoming calls, SMS for testing purposes. We can set the Location coordinates (Latitude, Longitude) like a GPS.
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 alarm is set to in the Emulator.
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.
First of all, install the Android SDK on your computer. You will also need to install the Android USB drivers to connect the SDK to your phone via USB. You can download it from here http://dl.google.com/android/android_usb_windows.zip . To install applications from other sources, you also need go to Settings -> Application Settings and enable Unknown Sources. Also go to Settings -> SD Card and Phone Storage -> Disable Use for USB Storage. You can enable it again later. Next, just open Command Prompt and type: adb install path/file.apk where path is the full path to the APK file and file is the name of the APK application file. Your application is now installed. This is all you need to do, now just open the application on your phone and use it.
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
You can also Install APK files on your Android phone directly.
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.