Android Beginners : Views & Layouts

Android Beginners : Views & Layouts

This post is for beginners in Android Development. At the end of this story, You would get the basic idea about views and layouts in Android.

Let’s Start!

View

A View occupies a rectangular area on the screen and is responsible for drawing and event handling.The View class is a superclass for all GUI components in Android.

Commonly used Views are :

• EditText
• ImageView
• TextView
• Button
• ImageButton
• CheckBox

Attributes

id : These ids are typically assigned in the layout XML files, and are used to find specific views within the view tree.View IDs need not be unique throughout the tree, but it is good practice to ensure that they are at least unique within the part of the tree you are searching.

Syntax : android:id=”@+id/my_id”

height & width : As the name itself suggests, both of these attributes describes the height and width of the given view. These are necessary attributes for every view in a xml file.

Syntax : android:layout_width="match_parent"
android:layout_height="match_parent"

FILL_PARENT (renamed MATCH_PARENT in API Level 8 and higher), which means that the view wants to be as big as its parent (minus padding)WRAP_CONTENT, which means that the view wants to be just big enough to enclose its content (plus padding). Ideally, Value should be in “dp” i.e density independent pixels.

Padding & margin

Padding is the space inside the border, between the border and the actual view’s content. Note that padding goes completely around the content.

Margins are the spaces outside the border, between the border and the other elements next to this view. In the image, the margin is the grey area outside the entire object.

Syntax : android:padding="10dp" android:layout_margin="10dp"

Gravity & Layout_gravity

android:gravity sets the gravity of the content of the View its used on.
android:layout_gravity sets the gravity of the View or Layout in its parent.

OnClick

android:onclick= “buttonClick” , that can be used to handle clicks directly in the view’s activity without need to implement any interface (onClickListener).

text : It sets the text to be displayed on the View.android:text="Click me!"

src: android:src=”@drawable/firstpic” Sets a drawable as the content of this ImageView.

Some more attributes

android:maxHeight:An optional argument to supply a maximum height for this view.

android:maxWidth :An optional argument to supply a maximum width for this view.

android:scaleType:Controls how the image should be resized or moved to match the size of this ImageView.

android:hintHint text to display when the text is empty.

android:inputTypeThe type of data being placed in a text field, used to help an input method decide how to let the user enter text.

android:textAppearanceBase text color, typeface, size, and style.

android:textColorText color.

android:textSizeSize of the text.

ViewGroup

A ViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers. This class also defines the ViewGroup.

Android contains the following commonly used ViewGroupsubclasses:

• LinearLayout
• RelativeLayout
• FrameLayout
• ScrollView

These are not the only ViewGroup subclasses Android contains.

LinearLayout

A layout that arranges other views either horizontally in a single column or vertically in a single row.

The following snippet shows how to include a linear layout in your layout XML file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal">
   <!-- Include other widget or layout tags here. These are considered
           "child views" or "children" of the linear layout -->
 </LinearLayout>

Set android:orientation to specify whether child views are displayed in a row or column.

LinearLayout

RelativeLayout

RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).

FrameLayout

FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that’s scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.

Child views are drawn in a stack, with the most recently added child on top.

ScrollView

A view group that allows the view hierarchy placed within it to be scrolled. Scroll view may have only one direct child placed within it. To add multiple views within the scroll view, make the direct child you add a view group, for example LinearLayout, and place additional views within that LinearLayout.

Scroll view supports vertical scrolling only. For horizontal scrolling, use HorizontalScrollView instead.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">
    
    <!-- everything you already have -->
    
</ScrollView>

Yayyyy! Congratulation! You can now build your own custom layout using basic layouts.

I’ll cover more complex Layouts in next post. Thanks for reading, Suggestions are welcome for next post :)

MAY THE CODE BE WITH YOU! ❤