Main navigation

Basics of an Android App – Activity and Layout

adsense

Pre-requisites:

1) Android Studio installed on your PC (Unix or Windows). You can learn how to install it here .
2) A real time android device (Smartphone or Tablet) configured with Android Studio. .
3) A basic knowledge of Android lifecycle and different classes & functions used in Android Studio.

Basics of an Android App:

  1. Activity: An activity is a class in Android SDK which is responsible for interaction between user and information on screen. So to add functionality in an App we need to extend different classes from Activity class. A simple one may require only one subclass, but a complex one could have more than one.
  2. Layout: A layout is what you see in front of you in Android App. All the buttons and text are arranged through layout. You can arrange different elements in different ways. A layout can be of following types:

a) Linear layout: It arrange all the elements in a linear way which can be horizontal or vertical. The difference factor is orientation attribute. If you set orientation: horizontal then elements will be arranged in horizontal fashion and similarly for vertical.

Note: By default it will take horizontal.

LinearLayout is used in a linear layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout>
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.androidtutorialpoint.newapplication.MillionaireApp"
    tools:showIn="@layout/activity_millionaire_app"
    
</LinearLayout>

This is how a linear layout is declared. If you are starter then you only need to know about layout_width and layout_height which in this case is match_parent (it signifies its height and width will be equal to parent).

xmlns: implies XML namespace of the document. For example if you use android:id anywhere then xml will replace it with https://schemas.android.com/apk/res/android:id. Similarly tools: are added to reference elements or attributes.

Let’s go somewhat deeper to see how to declare horizontal and vertical layout.

Creating new project

Please follow following steps:

  1. Open Android Studio and make a new project with name “Android Layouts” and company domain application.example.com (I used my company domain i.e androidtutorialpoint.com. Similarly you can use yours).
  2. Click Next and choose android version Lollipop. Again Click Next and Choose Blank Activity.
  3. Leave all things remaining same and Click Finish.

Now you can see MainActivity.java, content_main.xml and strings.xml. If you are not able to see them then click on the left window where these files can easily be located as shown in following figure:

java_xml_view

In this code we are using two buttons to differentiate between horizontal and vertical layout.

Horizontal Layout:

Comment previous code and add following code in content_main.xml (In an XML file comment is done using ):

<?xml version="1.0" encoding="utf-8"?>

<!-- Horizontal Layout  -->
<LinearLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.androidtutorialpoint.androidlayouts.MainActivity"
    tools:showIn="@layout/activity_main"
    android:orientation="horizontal">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Horizontal layout 1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Horizontal layout 2" />

</LinearLayout>
  

Run this code and you will see following screen:

linear_horizontal_layout

Vertical Layout:

content_main.xml:

<?xml version="1.0" encoding="utf-8"?>

<!-- Vertical Layout  -->
<LinearLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.androidtutorialpoint.androidlayouts.MainActivity"
    tools:showIn="@layout/activity_main"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Vertical layout 1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Vertical layout 2" />

</LinearLayout>

Run this code and you will see following screen:

linear_vertical_layout

b) Relative Layout: A relative layout is used to position an element with respect to other elements. Other elements here could be its parent or sibling or any other id. Following attributes are used to arrange it in either left or right, start or end, above or below.

android:layout_toEndOf – Positions the start edge of this view to the end of the given anchor view ID.
android:layout_toLeftOf – Positions the right edge of this view to the left of the given anchor view ID.
android:layout_toRightOf – Positions the left edge of this view to the right of the given anchor view ID.
android:layout_toStartOf – Positions the end edge of this view to the start of the given anchor view ID.
android:layout_below – Positions the top edge of this view below the given anchor view ID.
android:layout_above – Positions the bottom edge of this view above the given anchor view ID.

Here I am going to discuss one of the attribute. Rest take as an exercise. Let me know if anything is blocking. I will try to provide solution.

Let’s discuss android:layout_toRightOf :-

Comment previous code of content_main.xml and Paste following code:

<?xml version="1.0" encoding="utf-8"?>

<!-- Relative Layout  -->
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

    <EditText android:id="@+id/inputEmail" android:layout_width="fill_parent"
              android:layout_height="wrap_content" />

    <Button android:id="@+id/parent_button" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:layout_below="@id/inputEmail"
            android:text="Button_1" />

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_toRightOf="@id/parent_button" android:layout_below="@id/inputEmail"
            android:text="Button_2" />
</RelativeLayout>

You will see following image:

relative_layout

So here we first define button (Button_1) with a particular id parent_button. This id used as a reference for the second button (button_2).
When we write android:layout_toRightOf=”@id/parent_button” it implies place this element (in our case it is button_2) on right of element with id:parent_button (in our case it is button_1).

Similarly we can use other attributes like android:layout_toLeftOf, android:layout_toEndOf etc. Try them.

For detailed info. you can refer android developer guide here.

Note: Sometimes it become confusing which one to choose between Relative and Linear Layout. So here a trick: When you want to arrange elements linearly in one line then choose Linear layout but if you want to arrange elements in a random manner then go for Relative. Following image describe it meaningfully:

c) Grid View:

In this layout elements are placed in a grid manner in which grids can be rectangular or perfect square. Each grid is separated by infinitely small lines. They can be arranged in either row or column spanning with each element occupying space in a rectangular cell.

Grid layout in mainly differentiated from other layouts because of two attributes i.e columnCount and rowCount which specify number of columns and rows in the layout. Have a look at the following code:

<?xml version="1.0" encoding="utf-8"?>

<GridLayout xmlns:android="https://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:columnCount="3"
   android:orientation="vertical"
   android:rowCount="3" >

   <!-- Child views -->

</GridLayout>

In the above code we have 3×3 grid view which has vertical orientation. Vertical orientation in Grid layout implies first column will be filled first then second column then third etc. Similarly we can have a horizontal orientation.

Vertical Orientation:

Comment the previous code of Relative layout and type following:

<?xml version="1.0" encoding="utf-8"?>

<!-- Vertical Grid Layout  -->
<GridLayout xmlns:android="https://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:columnCount="7"
            android:orientation="vertical"
            android:rowCount="7" >

    <TextView android:text="C_1" android:padding="7dp"/>
    <TextView android:text="C_2" android:padding="7dp"/>
    <TextView android:text="C_3" android:padding="7dp"/>
    <TextView android:text="C_4" android:padding="7dp"/>
    <TextView android:text="C_5" android:padding="7dp"/>
    <TextView android:text="C_6" android:padding="7dp"/>
    <TextView android:text="C_7" android:padding="7dp"/>
    <TextView android:text="C_8" android:padding="7dp"/>
    <TextView android:text="C_9" android:padding="7dp"/>
    <TextView android:text="C_10" android:padding="7dp"/>
    <TextView android:text="C_11" android:padding="7dp"/>
    <TextView android:text="C_12" android:padding="7dp"/>
    <TextView android:text="C_13" android:padding="7dp"/>
    <TextView android:text="C_14" android:padding="7dp"/>

</GridLayout>

You will see following image:

grid_view_vertical

So here it can be easily seen that first column is filled first according to its size (in this case it is 7) and then second column starts filling.

Horizontal Orientation:

Type following code and comment previous:

<?xml version="1.0" encoding="utf-8"?>
<!-- Horizontal Grid Layout  -->
<GridLayout xmlns:android="https://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:columnCount="4"
            android:orientation="horizontal"
            android:rowCount="7" >

<TextView android:text="C_1" android:padding="7dp"/>
<TextView android:text="C_2" android:padding="7dp"/>
<TextView android:text="C_3" android:padding="7dp"/>
<TextView android:text="C_4" android:padding="7dp"/>
<TextView android:text="C_5" android:padding="7dp"/>
<TextView android:text="C_6" android:padding="7dp"/>
<TextView android:text="C_7" android:padding="7dp"/>
<TextView android:text="C_8" android:padding="7dp"/>
<TextView android:text="C_9" android:padding="7dp"/>
<TextView android:text="C_10" android:padding="7dp"/>
<TextView android:text="C_11" android:padding="7dp"/>
<TextView android:text="C_12" android:padding="7dp"/>
<TextView android:text="C_13" android:padding="7dp"/>
<TextView android:text="C_14" android:padding="7dp"/>

</GridLayout>

You will see following image:

grid_view_horizontal

Here it can be easily seen ROWS are filled first. C_1 C_2… etc are not visible because they are covered with default Android Layouts. But anyways I hope you got the concept.

d) Table Layout: In this layout a table can be formed with the elements. This is very much self explanatory.

Just comment previous code and type following:

<!-- Table Layout -->
<TableLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stretchColumns="*" android:background="#f5f5dc">
    <!-- One Row and One Column -->
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textSize="15dp" android:text="Column 1" android:layout_span="3"
            android:padding="15dip" android:background="#234567" 
            android:gravity="center_horizontal" android:textColor="#000000"/>
    </TableRow>
    <!-- One Row and Two Columns -->
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textSize="15dp" android:text="Column 1" android:layout_weight="0.8"
            android:padding="15dip" android:background="#0eafa5" 
            android:gravity="center_horizontal" android:textColor="#000000"/>
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textSize="15dp" android:text="Column 2" android:layout_weight="0.2"
            android:padding="15dip" android:background="#6449b0" 
            android:gravity="center_horizontal" android:textColor="#000000"/>
    </TableRow>
    <!-- One Row and Three Columns -->
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textSize="15dp" android:text="Column 1" android:layout_weight="0.33"
            android:padding="15dip" android:background="#0eafa5" 
            android:gravity="center_horizontal" android:textColor="#000000"/>
        <TextView
            android:layout_width="match_parent" android:layout_height="wrap_content"
            android:textSize="15dp" android:text="Column 2" android:layout_weight="0.33"
            android:padding="15dip" android:background="#6449b0"   
            android:gravity="center_horizontal" android:textColor="#000000"/>
        <TextView
            android:layout_width="match_parent" android:layout_height="wrap_content"
            android:textSize="15dp" android:text="Column 3" android:layout_weight="0.33"
            android:padding="15dip" android:background="#234567" 
            android:gravity="center_horizontal" android:textColor="#000000"/>
    </TableRow>
</TableLayout>

So now here you will see following Image:

table_layout

As we could see 3 rows with different number of columns giving some background colour using android:background. The main point to note here is layout_span layout_weight and .
android::layout_weight is used to stretch the columns according to weight. So as you would have notice layout_weight=0.8 means 80% and layout_weight=0.2 means 20% which simply implies column would take 4/5th part of screen and column 2 will take 1/5th.
Similarly android::layout_span tells us how much columns text will span over. Try playing with it.

One more attribute to notice is android:stretchColumns which implies columns are stretched.



What’s Next

You can see our next tutorial of How to make a basic App. Here You will be able to make an App from scratch without any external help.

Let us know if you have any doubts or suggestions. Thanks for reading :). Don’t forget to subscribe for latest Android Tutorials. Also do Like our Facebook Page or Add us on Twitter.

If you want to download code Click below.


Android Tutorial Point Download Now


Reader Interactions

Comments

  1. Thanks for this Explanations.. It proved to be a good foundation for my android programming. I appreciate you bro .. Kudos to you and i Expect to see more from you

Leave a Reply

Advertisment ad adsense adlogger