Android Layouts

Layouts

• Layouts are subclasses of the ViewGroup class.
• 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.

Layouts Types

• There are several types of Layouts that 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 in a single direction, vertically or horizontally.
  • Relative Layout
    • RelativeLayout is a view group that displays child views in relative positions i.e., Positions child views relative to each other or relative to the parent view..
  • Constraint Layout
    • Allows creating complex layouts by setting constraints between views, offering flexibility and responsiveness.
    • Android Constraint Layout is used to define a layout by assigning constraints for every child view/widget relative to other views present.
    • 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 specify the exact location of its child views.
  • Frame Layout
    • The Frame Layout is a placeholder on the screen that is used to display more than one view as a single view.
    • Places child views on top of each other, often used for simple container layouts.
  • List View
    • ListView is a viewgroup that displays a list of scrollable items.
  • Grid View
    • GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.
  • Table Layout
    • TableLayout is a view that groups views into rows and columns.

Layouts Attributes

• Each 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. These are –
  • android: id
    • This is the ID that uniquely identifies the view that is used in coding to call or represent it.
  • android: orientation
    • 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 either 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 represents the width of the layout.
    • android:layout_width=wrap_content tells about the view occupying the size itself to the dimensions required by 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. 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_height
    • This attribute represents the height of the layout
  • android: margin
    • Margin is used to create space around and between child views, ensuring a visually appealing layout.
  • 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:layout_gravity
    • 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.
  • android:layout_x
    • This specifies the x-coordinate of the layout.
  • android:layout_y
    • This specifies the y-coordinate of the layout.
  • android:layout_width
    • This attribute represents the width of the layout.
  • 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: 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: padding
    • Padding is used to create extra space around and between child views, ensuring a visually appealing layout.

Units Used in 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):