Layout – Why Android

Android Basics – Phone vs Tablet – Which Layout the Device is using ?

In the last Blog Post you learnt how to create device specific resources like Layout, Menu, Images etc.

On a phone the Employee App will display list of Employees initially and on click of an employee the DetailActivity will be called. Whereas on a Tablet the List and the Detail is shown next to each other.

Question is how to achieve this?

If you take a look at the Layout XML file you will find that for a Tablet you have a FrameLayout.

So you can check in the Activity class that if this attribute exists then its a tablet. If not then call the DetailActivity.

Source Code – Github

Follow the video to understand this better.

Android Basics : Phone vs Tablet – Screen specific Layouts

Most of the time your App will have a different layout on a Phone vs a Tablet. On a device with a larger screen, like a Tablet, you will want to use the extra space.

In your Employee App it will be better to display only list of Employees on a Phone. While on a Tablet you can display Employee List and Employee Details side by side.

So how can you achieve this ?

In Android you can have resources like Layouts, Images etc. specific to Screen Size, Orientation and Aspect Ratio. For this you need to create specific folder and then place the
resource in that.

For example you need to create two layout xml files. One for Phone and one for Tablet. For this you need to create a layout-large folder and put the tablet layout file in that.

The options you have can be categorized into –

Resource Type – Screen Size – Screen Density – Orientation – Aspect Ratio

Resource Type can be layout, menu etc.

Screen Size can be small, normal, large, xlarge

Screen Density can be ldpi, mdpi, hdpi etc.

Orientation can be land, port.

Now you can create folders using these parameters like layout-large.

Follow the video to understand this better.

Android Basics – Learn how to use Images in your App

If you want to use images in your Android App you will need to put them in the drawable folder under the res directory.

Like on my System the path is /HelloAndroid/app/src/main/res/drawable

Android also gives you the option to put images for different screen densities.

For this you can create the following folders under drawable.

android-ldpi : Low Density Screens around 120dpi
android-mdpi : Medium – 160dpi
android-hdpi : High Density – 240dpi
android-xhdpi
android-xxhdpi
android-xxxhdpi

Source Code https://github.com/ankur-srivastava/HelloAndroid/blob/master/app/src/main/res/layout/ui_components.xml

Android Basics – Learn about the Grid Layout

Introduction

Grid Layout is very useful if you want your App to display elements in Rows and Columns.

This Layout allows you to divide your UI into Rows and Columns similar to HTML tables.

Doing this is pretty simple. Please refer to the Image.

I have recorded a Video to help you understand how to use this Layout.

Some Code Snippets

<GridLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:columnCount=”2″>

<TextView
android:layout_height=”wrap_content”
android:layout_width=”wrap_content”
android:layout_row=”0″
android:layout_column=”0″
android:text=”Email”
android:layout_margin=”5dp”
android:padding=”5dp”
/>

The Source Code is available at : https://github.com/ankur-srivastava/HelloAndroid/blob/master/app/src/main/res/layout/grid_layout.xml

Android Basics – Using gravity and layout_gravity attributes to align View Elements

If you are using Linear Layout you have two attributes available to help you align the UI elements.

Gravity Attribute

Use gravity attribute to align the View Content – center, left, right etc.

Layout Gravity Attribute

Use layout_gravity to align the View element itself.

In the following Video I show you how to use these attributes

Source Code : https://github.com/ankur-srivastava/HelloAndroid/blob/master/app/src/main/res/layout/activity_main.xml

Android Basics – Learn about Linear Layout

In the last post you learnt about Relative Layout which let’s you place UI components relative to one another.

Linear Layout’s help you to place UI elements next to each other either vertically or horizontally.

In the following Video I will explain this in more detail

Source Code : https://github.com/ankur-srivastava/HelloAndroid/blob/master/app/src/main/res/layout/content_main.xml

Android Basics – A closer look at the Relative Layout

In this Article you will Learn about the Relative Layout.

In the last post you saw how Android provides us with three Layout options – Relative, Linear and Grid.

Relative Layout will help you to position the UI components relative to the Parent or other UI elements.

In the following Video you will learn how to use this Layout.

Source Code : https://github.com/ankur-srivastava/HelloAndroid/blob/master/app/src/main/res/layout/content_main.xml

Android Basics – Learn about Relative, Linear and Grid Layouts

In this Post you will learn the basics of using Layouts. Layouts enable you to position the UI elements on the App Screens.

You can refer to the image and the video to understand the concept better.

You can use three types of Layouts

Relative Layout

Use this Layout to position the UI elements relative to each other.

Continue reading “Android Basics – Learn about Relative, Linear and Grid Layouts”

Android Basics – A quick look at the Layout File in Android Project

In the last Article you learnt about MainActivity class. Let’s look at the Layout XML file.

The Layout file is responsible for the User Interface (UI). It’s what you see when you Launch an App.

The File can have Text, Buttons and other elements. Just like a website.

Go ahead an open the content_main.xml file in the new Project. As you can see this XML file contains two primary XML tags:

1. RelativeLayout : This Element tells Android to put elements relative to each other.
2. TextView : This Element is used to display Text.

The android:text attribute in the TextView element is used to display Text. Go ahead and modify this. Save and test. In the next Video we will add a Button to this Layout file.