Android Tutorials for Beginners: Relative Layout

Showing posts with label Relative Layout. Show all posts

Monday, June 24, 2013

Android Layout Tutorial

Linear Layout

A Linear Layout arranges all its children in one direction either vertical or horizontal.
this direction is set by using setOrientation() methd in Actiivty or android:orientation in .xml file. See the example.

To see the the Attributes and method of Linear Layout visit the page

Example: Vertical Linear Layout

main.xml

Example: Horizontal Linear Layout

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_marginTop="30dp">

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />

</LinearLayout>

*********************************************************************************************************************************************************
***************************************************************************************************************************************

Table Layout

Table Layout organizes content into rows and columns. The rows are defined in the layout XML, and the columns are determined automatically by Android. This is done by creating at least one column for each element. So, for example, if you had a row with two elements and a row with five elements then you would have a layout with two rows and five columns.

You can specify that an element should occupy more than one column using android:layout_span. This can increase the total column count as well, so if we have a row with two elements and each element has android:layout_span=”3? then you will have at least six columns in your table.

By default, Android places each element in the first unused column in the row. You can, however, specify the column an element should occupy using android:layout_column.

Table Layout Example

Here is an example of Table Layout in which there are 3 Rows and each rows has 1 or more Columns

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shrinkColumns="*"
android:stretchColumns="*"
android:background="#ffffff">



<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="Row 1"
android:layout_span="3"
android:padding="18dip"
android:background="#b0b0b0"
android:textColor="#000"/>

</TableRow>



<TableRow
android:id="@+id/tableRow1"
android:layout_height="wrap_content"
android:layout_width="match_parent">

<TextView
android:id="@+id/TextView04"
android:text="Row 2 column 1"
android:layout_weight="1"
android:background="#dcdcdc"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView04"
android:text="Row 2 column 2"
android:layout_weight="1"
android:background="#d3d3d3"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView04"
android:text="Row 2 column 3"
android:layout_weight="1"
android:background="#cac9c9"
android:textColor="#000000"
android:padding="20dip"
android:gravity="center"/>
</TableRow>



<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">

<TextView
android:id="@+id/TextView04"
android:text="Row 3 column 1"
android:layout_weight="1"
android:background="#b0b0b0"
android:textColor="#000000"
android:padding="18dip"
android:gravity="center"/>

<TextView
android:id="@+id/TextView04"
android:text="Row 3 column 2"
android:layout_weight="1"
android:background="#a09f9f"
android:textColor="#000000"
android:padding="18dip"
android:gravity="center"/>
</TableRow>

</TableLayout>

*********************************************************************************

Lets have a live example and create a User Login Screen

Create Login Screen Using Table Layout

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >


<TableRow
android:paddingTop="10px"
android:gravity="center">

<TextView
android:id="@+id/status"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_span="2"
android:text="LOGIN"
android:textColor="#890000"
android:textSize="15sp"
android:textStyle="bold" />

</TableRow>

<TableRow android:layout_marginTop="20dip" >

<TextView
android:layout_width="wrap_content"
android:text="Username :"
android:textSize="20sp"
android:textColor="#000000"
android:layout_marginLeft="20dip">
</TextView>

<EditText
android:id="@+id/screenName"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_weight="1" >

</EditText>

</TableRow>

<TableRow android:layout_marginTop="20dip" >

<TextView
android:text="Password :"
android:layout_width="wrap_content"
android:textSize="20sp"
android:textColor="#000000"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip">

</TextView>

<EditText
android:id="@+id/password"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_weight="1" >

</EditText>

</TableRow>

<TableRow
android:gravity="center"
android:layout_marginTop="20dip" >

<Button
android:text="Submit"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/save"
android:layout_span="2" >

</Button>
</TableRow>

</TableLayout>

***********************************************************************************************************************************************************************************
************************************************************************************************************************************************************************************

Frame Layout

FrameLayout is designed to display a single item at a time. You can have multiple elements within a FrameLayout but each element will be positioned based on the top left of the screen. Elements that overlap will be displayed overlapping. I have created a simple XML layout using FrameLayout that shows how this works.

Frame Layout Example

<FrameLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 xmlns:android="http://schemas.android.com/apk/res/android">
 <ImageView 
  android:src="@drawable/icon"
  android:scaleType="fitCenter"
  android:layout_height="fill_parent"
  android:layout_width="fill_parent"/>
 <TextView
  android:text="Learn-Android.com"
  android:textSize="24sp"
  android:textColor="#000000"
  android:layout_height="fill_parent"
  android:layout_width="fill_parent"
  android:gravity="center"/>
</FrameLayout>

*************************************************************************************************************************************************************************************
*************************************************************************************************************************************************************************************

GridLayout

GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.

GridView Example

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView1"
    android:numColumns="auto_fit"
    android:gravity="center"
    android:columnWidth="50dp"
    android:stretchMode="columnWidth"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
</GridView>

GridViewActivity

public class GridViewActivity extends Activity {
 
 GridView gridView;
 
 static final String[] numbers = new String[] { 
   "A", "B", "C", "D", "E",
   "F", "G", "H", "I", "J",
   "K", "L", "M", "N", "O",
   "P", "Q", "R", "S", "T",
   "U", "V", "W", "X", "Y", "Z"};
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
 
  setContentView(R.layout.main);
 
  gridView = (GridView) findViewById(R.id.gridView1);
 
  ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
    android.R.layout.simple_list_item_1, numbers);
 
  gridView.setAdapter(adapter);
 
  gridView.setOnItemClickListener(new OnItemClickListener() {
   public void onItemClick(AdapterView<?> parent, View v,
    int position, long id) {
      Toast.makeText(getApplicationContext(),
    ((TextView) v).getText(), Toast.LENGTH_SHORT).show();
   }
  });
 
 }
 
}

Thursday, May 9, 2013

Relative Layout In Android

RelativeLayout is a ViewGroup that displays child View elements in relative positions. The position of a View can be specified as relative to sibling elements (such as to the left-of or below a given element) or in positions relative to the RelativeLayout area (such as aligned to the bottom, left of center).

Using Relative Layout we can design fancy and beautiful GUI.

We should understand and remember some of the attributes in order to work with Relative Layout .

More Layout Tutorial In Android
Relative Layout In Android
Table Layout
Frame Layout(With Example)
Absolute Layout
Grid Layout
To learn Basic of Android Animation go to Android Animation Basics

Properties Relative To Parent/Container

These properties will layout elements relative to the parent container.

android:layout_alignParentBottom – Places the bottom of the element on the bottom of the container
android:layout_alignParentLeft – Places the left of the element on the left side of the container
android:layout_alignParentRight – Places the right of the element on the right side of the container
android:layout_alignParentTop – Places the element at the top of the container
android:layout_centerHorizontal – Centers the element horizontally within its parent container
android:layout_centerInParent – Centers the element both horizontally and vertically within its container
android:layout_centerVertical – Centers the element vertically within its parent container

Relative To Other Elements

These properties allow you to layout elements relative to other elements on screen. The value for each of these elements is the id of the element you are using to layout the new element. Each element that is used in this way must have an ID defined using android:id=”@+id/viewID” where viewIDis replaced with the desired id. You use “@id/viewID” to reference an element by its id. One thing to remember is that referencing an element before it has been declared will produce an error.

android:layout_above – Places the element above the specified element
android:layout_below – Places the element below the specified element
android:layout_toLeftOf – Places the element to the left of the specified element
android:layout_toRightOf – Places the element to the right of the specified element

Alignment With Other Elements

These properties allow you to specify how elements are aligned in relation to other elements.

android:layout_alignBaseline – Aligns baseline of the new element with the baseline of the specified element
android:layout_alignBottom – Aligns the bottom of new element in with the bottom of the specified element
android:layout_alignLeft – Aligns left edge of the new element with the left edge of the specified element
android:layout_alignRight – Aligns right edge of the new element with the right edge of the specified element
android:layout_alignTop – Places top of the new element in alignment with the top of the specified element

Example of Relative Layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <Button
        android:id="@+id/btnButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"/>
 
    <Button
        android:id="@+id/btnButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_toRightOf="@+id/btnButton1"/>
 
     <Button
        android:id="@+id/btnButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:layout_below="@+id/btnButton1"/>
 
     <TextView
         android:id="@+id/textView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@+id/btnButton3"
         android:layout_marginTop="94dp"
         android:text="User :"
         android:textAppearance="?android:attr/textAppearanceLarge" />
 
     <EditText
         android:id="@+id/editText1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_alignTop="@+id/textView1"
         android:layout_toRightOf="@+id/btnButton3" />
 
     <Button
         android:id="@+id/btnSubmit"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_below="@+id/editText1"
         android:text="Submit" />
 
</RelativeLayout>

Advance Android Topics

New Advance Topics:                   Android LiveWallpaer Tutorial
Android ImageSwitcher                Android TextSwitcher              Android ViewFlipper
Android Gesture Detector       Handling/Detecting Swap Events              Gradient Drawable
Detecting Missed Calls            Hide Title Bar                           GridView Animation
Android AlarmManager                 Android BootReceiver                 Vibrate Phone In a Desirable Pattern
Developing for Different Screen Sizes Showing Toast for Longer Time       Publishing your App
How to publish Android App on Google Play

Beginning With Android
Android : Introduction(What is Android)                                            Configuring Eclipse for Android Development
   Creating Your First Android Project                 Understanding Android Manifest File of your android app

Advance Android Topics                                                            Customizing Android Views

Customizing Toast In Android Customizing Radio Buttons

Showing Toast for Longer Time Customizing Checkboxes In Android

Customizing the Display Time of Toast Customizing ProgressBar

Using TimePickerDialog and DatePickerDialog In android Customizing Toast In Android

Animating A Button In Android

Populating ListView With DataBase Android Animation

Increasin Size of Checkboxes Using Android ImageSwitcher

Android ProgressBar Using Android TextSwitcher

Designing For Different Screen Sizes GridView Animation

Handling Keyboard Events Animating A Button In Android

Alarm Manager
Android AlarmManger
Scheduling Task Using AlarmManger

Working With Layouts                                                                Working With Views

Understanding Layouts in Android                                                 Using Buttons and EditText in Android
Working with Linear Layout (With Example)                                     Using CheckBoxes in Android
Nested Linear Layout (With Example)                                              Using AutoCompleteTextView in Android                                                                                          Grid View
Relative Layout In Android                                                             ListView
Table Layout                                                                                   Android ProgressBar
Frame Layout(With Example)                                                          Customizing ProgressBar
Absolute Layout                                                                             Customizing Radio Buttons
Grid Layout                                                                                    Customizing Checkboxes In Android

Android Components                                                                 Dialogs In Android

Activity In Android                                                                    Working With Alert Dialog
Activity Life Cycle                                                                    Adding Radio Buttons In Dialog
Starting Activity For Result                                                   Adding Check Boxes In Dialog
Sending Data from One Activity to Other in Android              Creating Customized Dialogs in Android
Returning Result from Activity                                             Creating Dialog To Collect User Input
Android : Service                                                                     DatePicker and TimePickerDialog
BroadcastReceiver                                                                   Using TimePickerDialog and DatePickerDialog In android

Menus In Android                                                                ListView:
Creating Option Menu                                 Populating ListView With DataBase
Creating Context Menu In Android            Populating ListView with ArrayList
                                                                                               ListView with Custom Adapter

Toast                                                                                      Working With SMS
Customizing Toast In Android                                               How to Send SMS in Android
Customizing the Display Time of Toast                                How To Receive SMS
Customizing Toast At Runtime                                                Accessing Inbox In Android
Adding Image in Toast
Showing Toast for Longer Time

TelephonyManager                                                            Storage: Storing Data In Android
Using Telephony Manager In Android                                SharedPreferences In Android
                                                                                              Reading and Writing files to Internal Stoarage

Working With Incoming Calls                                       DataBase : Introduction of SQLiteDataBase
How To Handle Incoming Calls in Android                        Working With Database in Android
How to Forward an Incoming Call In Android                            Creating Table In Android
CALL States In Android                                                        Inserting, Deleting and Updating Records In Table in Android

Miscellaneous
Notifications In Android
How To Vibrate The Android Phone
Sending Email In Android
Opening a webpage In Browser
How to Access PhoneBook In Android
Prompt User Input with an AlertDialog

10 Tips to Increase Windows 10 Performnace

Monday, June 24, 2013

Android Layout Tutorial

Linear Layout

Example: Vertical Linear Layout

main.xml

Example: Horizontal Linear Layout

main.xml

Table Layout

Table Layout Example

Create Login Screen Using Table Layout

Frame Layout

Frame Layout Example

GridLayout

GridView Example

GridViewActivity

Thursday, May 9, 2013

Relative Layout In Android

Properties Relative To Parent/Container

Relative To Other Elements

Alignment With Other Elements

Example of Relative Layout:

Advance Android Topics