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.

No comments:

Post a Comment