Android Layouts

Android Layouts

• Layouts are subclasses of the ViewGroup class.
• Android layouts are essential for designing the user interface of Android applications.
• They define how UI elements are arranged on the screen.
• A typical layout defines the visual structure for an Android user interface and can be created either at run time using View/ ViewGroup objects or we can declare our layout using a simple XML file which is located in the res/layout folder of our project.

Android Layouts Types

• Several types of Layouts will be used in almost all Android applications to provide a different view, look, and feel. These are:-
  • Linear Layout
    • LinearLayout is a view group that aligns or arranges all children vertically or horizontally in a single row or column direction.
    • The code android:orientation=”horizontal” for a row and android:orientation=”vertical” for a column is used.
  • Relative Layout
    • RelativeLayout is a view group that displays child views in relative positions i.e., this layout allows us to position views relative to each other or to the parent layout.
    • The code android:layout_below, android:layout_toRightOf, etc is used to set this layout.
  • Constraint Layout
    • This is a flexible layout that allows us to create complex layouts by setting constraints between views, offering flexibility and responsiveness with a flat view hierarchy.
    • Android Constraint Layout is used to define a layout by assigning constraints for every child view/widget relative to other views present.
    • Views can be constrained to each other or to the parent, providing more control over positioning.
    • A Constraint Layout is similar to a relative layout but with more power.
    • The aim of Constraint Layout is to improve the performance of the applications by removing the nested views with a flat and flexible design.
    • A view inside the Constraint Layout has handles(or anchor points) on each side which are used to assign the constraints. 
  • Absolute Layout
    • Absolute Layout enables to specification of the exact location of its child views.
  • Frame Layout
    • This layout is designed to display a single item, but we can stack multiple items on top of each other.
    • The Frame Layout is a placeholder on the screen that is used to display more than one view as a single view.
    • It is useful for overlaying views, like adding a loading spinner on top of an image.
    • This layout places child views on top of each other, often used for simple container layouts.
  • List View/ScrollView
    • ListView is a viewgroup that displays a list of scrollable items.
    • It is a special type of layout that allows vertical scrolling of child views.
    • It is typically used for longer content that doesn’t fit on the screen.
  • Grid Layout View
    • This layout organizes views in a grid format, allowing us to specify row and column positions.
    • This layout is suitable for creating a grid-like structure for items (e.g., in a photo gallery).
    • GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.
  • Table Layout
    • This layout organizes views into groups as rows and columns, similar to an HTML table.
    • This layout is useful for forms and structured data.

Android Layouts Attributes

• Each Android layout has a set of attributes that define the visual properties of that layout.
• There are few common attributes among all the layouts and there are other attributes that are specific to that layout.
• The common Layout attributes are as follows –
  • android: id
    • This is the ID that uniquely identifies the view that is used in coding to call or represent it.
    • It is a unique identifier for the view (e.g., android:id=”@+id/viewId”).
  • android: orientation
    • Applicable in Linear Layout view mainly.
    • The android: orientation attribute is used in Android layouts, specifically in the LinearLayout class, to define the direction in which child views are laid out.
    • The LinearLayout can arrange its children in a vertical column or a horizontal row using android:orientation=”vertical”  and android:orientation=”horizontal” respectively.
    • When android:orientation=”vertical” is set, the child views of the LinearLayout are arranged in a vertical column. Each child is stacked below the previous one.
    • When android:orientation=”horizontal” is set, the child views of the LinearLayout are arranged in a rowing manner. Each child is arranged side by side in a row.

  • android:layout_width

    • This attribute specifies the width of the view/layout.
    • Android:layout_width=wrap_content tells about the view occupying the size itself to the dimensions required by its content or the view is only as wide as its content. The view will take up just enough space to fit its content.
    • android:layout_width=fill_parent tells us about the view becoming as big as its parent view.
    • android:layout_width=match_parent tells us about the view to take up as much space as its parent View allows or view takes up all available space. This value is used when we want the view to expand to fill the available space of its parent container. The View will stretch to the width (or height) of the parent View, covering all available space. match_parent is often used for responsive design, ensuring that the View adapts to different screen sizes and orientations.
    • android:layout_width=200dp tells us about the customized view to take the given specific dimensions.
  • android:layout_height
    • This attribute represents the height of the layout/view.
    • It uses the same values as layout_width.
  • android: margin
    • The margin attribute is used to create space around and between child views, ensuring a visually appealing layout.
    • It sets the outer space around the view.
    • A single value of margin applies the same margin to all sides.
    • Margin includes –
      • android:layout_marginTop
        • This attribute represents the extra space on the top side of the layout.
      • android:layout_marginBottom
        • This attribute represents the extra space on the bottom side of the layout.
      • android:layout_marginLeft
        • This attribute represents the extra space on the left side of the layout.
      • android:layout_marginRight
        • This attribute represents the extra space on the right side of the layout.
  • android: padding
    • This attribute sets the inner space between the view’s content and its border.
    • It is similar to Android margins.
    • It can also include:-
      • paddingTop, paddingBottom, paddingLeft, paddingRight.
      • android:padding-left
        • This attribute represents the left padding filled for the layout.
      • android:padding-right
        • This attribute represents the right padding filled for the layout.
      • android:paddingTop
        • This attribute represents the top padding filled for the layout.
      • android:padding-bottom
        • This attribute represents the bottom padding filled for the layout.
  • android:gravity
    • It aligns the content within the view.
    • This attribute is useful in layouts like FrameLayout and LinearLayout.
    • The common values of layout_gravity are:- center, left, right, top, bottom.
  • android:layout_gravity
    • This attribute specifies how a child’s view should be positioned within its parent (e.g., in FrameLayout or LinearLayout).
    • This attribute represents how child Views are positioned either horizontally or vertically.
  • android:layout_weight
    • This specifies how much of the extra space in the layout should be allocated to the View.
    • This attribute is used in LinearLayout to allocate space proportionally among child views.
    • A view with a higher weight will take up more space than a view with a lower weight.
  • android:layout_x
    • This specifies the x-coordinate of the layout.
  • android:layout_y
    • This specifies the y-coordinate of the layout.
  • android: background(for Color/Image)

    • The android: background attribute in Android development is used to specify a background for a View. This background can be a color, a drawable resource/image, or a gradient.
    • We can set a solid color as the background of a View. This color can be defined in the colors.xml resource file or directly in the layout XML file.

(I) For Color

<resources> <color name=“color1”>#FF5722</color> </resources>

• • android: hint
    • The android: hint attribute in Android is used to specify a hint for a text input field such as an EditText.
    • This hint is a text that is displayed inside the text field when it is empty, guiding the user on what kind of input is expected.
    • We can enhance the usability and user experience of our Android application by providing clear guidance on the expected input using Android: hint.
    • It is similar to a Placeholder in HTML. 

• • • <EditText
      • android:layout_width=“match_parent”
      • android:layout_height=“wrap_content”
      • android:hint=“Enter your email” />

• • • <EditText
      • android:layout_width=“match_parent”
      • android:layout_height=“wrap_content”
      • android:hint=“Enter your password”
      • android:inputType=“textPassword” /> 
    • We can change the hint text color using the android:textColorHint attribute.

android:textColorHint=“#FF5722”    directly in XML file  OR

android:textColorHint=“@color/color2”  from Color resource file.

• • • To apply a custom style to the hint text, use a style in your styles.xml file.

<!– res/values/styles.xml –>

• • • • To use/apply the above style to our EditText-
      •  
      • <EditText
        • android:layout_width=“match_parent”
        • android:layout_height=“wrap_content”
        • android:hint=“Enter your name”
        • style=“@style/CustomHintTextStyle” />
  • android: onClick:
    • It specifies the method to be called when the view is clicked (e.g., android:onClick=”submitForm”).
  • android: src:
    • It is used to set the image for ImageView by selecting a source of the image.
  • android: scaleType:
    • It defines how the image should be scaled/appeared within the ImageView.
    • Common values are:

center, centerCrop, fitCenter, fitXY.

• • android:visibility:
    • It defines the visibility state of a view.
    • The values are:
      • visible: This makes the view visible.
      • invisible: This makes the view invisible but still takes up space.
      • gone: This hides the view and does not take up space.
  • Text Specific Attributes:
    • android:text – Sets the text content for views like TextView or Button.
    • android:textSize – Specifies the size of the text (e.g., 16sp).
    • android:textColor – Sets the color of the text.
    • android:textStyle – Defines the style of the text, such as bold, italic, or normal.
    • android:fontFamily – Sets the font family for the text.
    • android:ellipsize – Truncates the text with an ellipsis (…) if it is too long for the available space.
    • android:maxLines – Limits the number of lines a text view can display.

Units Used in Android Layouts Attributes

• dp (Density-independent Pixels): This unit is used to define the object in fixed-size form when we want the View to have a specific dimension regardless of its content or parent size.
• sp ( Scale-independent Pixels):
• pt ( Points which is 1/72 of an inch):
• px( Pixels):
• mm ( Millimeters):
• in (inches):