Monday 31 March 2014

Android Basics: Create a Linear Layout

In previous post we learned how the webpages differ from an android app. This is required so as to understand how to create different view-pages (layouts) for your app. In this post, we'll learn how to create a linear layout for your app. This is pretty simple and a single reading through should do good enough.

A. Create a Sample project:
  • Open Eclipse IDE from C:\Program Files\Android\android-sdk\eclipse (assuming that you have installed Android SDK in C: drive).
  • Click on File menu->New->Project. From drop down list, select 'Android->Android Application Project'. Click next. Enter Application name as 'My Sample App'. 
  • Leave the rest of the two fields until you're developing a professional app. Click next until you reach last screen and click 'Finish'. A large number of files will be added by default to your project.
B. Create a Linear layout:
  •  Open 'activity.xml' from 'res/layout' folder. Usually, project hierarchy is shown on the left so you can find it easily from there.
  • Delete <TextView> element and change <RelativeView> to <LinearView>.
  • Add the orientation attribute to it. This specifies what would be the screen orientation (vertical/horizontal) when the app starts. You can have different orientations for different pages. Add android:orientation as horizontal: <RelativeView android:orientation="horizontal".../>
  • <LinearLayout> is a View  group (subclass of ViewGroup that lays out child views in either vertical or horizontal orientation)
  • IMPORTANT: Each children of <LinearLayout> appears on the screen in exactly the sequence as specified in XML file.
  • android:layout_width and android:layout_height are required for all the views in order to specify their sizes.
  • Setting their value to "match_parent" expands the width and height of layout to match as of their parents.
So, your layout has been set. If you would run your app now, you would see 'Hello World' printed on screen in horizontal layout. In next tut, we'll discuss adding text field to this layout.

Migrating from Web to Android

Hello there! If you're here, I assume you're a web developer who is getting to learn Android, much like me. When I dipped into Android, the very first thing that confused me was 'how navigation works in Android apps, like we've several pages in a website which we can create an edit, where to do all such stuff in Android?' and 'what is this all heck of activity and XML files?'. While I had a little (yes, little and theoretical only) experience of Java, I knew about concepts of OOP (Polymorphism, Abstraction, Encapsulation and Inheritance). If you don't know about them, you better check out some links on these topics before returning to this page.
So, the first thing to understand in Android is that, 'Activities' are what we typically call 'pages' in Websites and the much likeinteraction that we did with the UI items in websites (such as with 'buttons ' in a webpage), we do so here with the help of Intents. Intents specify an "app's intent to do something with the app". This can, besides, be used to perform a number of tasks, however, we primarily use it perform interaction between activities. We'll discuss them all later.
So, as many pages your want to have in your app, you'll have to create that many activities. In fact, activities are more closely similar to 'views' and that's exactly what we call in Android.
The following post and the upcoming ones will contain important points, using the standard android documentation from it's site. I hope that i do not sound  confusing and that it helps you out in understanding Android.

1. Building a Simple UI
  •  The graphical user interface (GUI) of an app is create using a hierarchy of View and ViewGroup objects. It forms a tree structure where each leaf node can contain either a View object or a ViewGroup object. In simple language, any page can contain a view (page layout) as well as ViewGroup object. And actually, that's how we link Views in Android apps. A basic diagram (above) shows the concept. The LinearLayout and RelativeLayout are the ViewGroup object types which define the type of view layout selected.
  •  View objects are usually UI widgets such as buttons, text-fields, like we have them in a typical web page. However, their attribute declaration is different here. Generally, we define everything in an XML file (which we'll discuss later).
  •  ViewGroup objects are 'invisible' (yes, they're mere a definition) containers that define how the child views are laid out, such as in a grid or a vertical list.
  • UI layout is defined in XML using hierarchy of UI elements.
 Next, we'll discuss how to create a Linear layout in Android. Follow up!