More on UI

So far

• We have learnt how xml works and its structure.
• We have learnt very basic design using it.

Topics to cover

• Today, we will be discussing on the common layouts and views used for designing.

Linear Layout

• Intro

  • It's linear.
  • It arranges its childs in single direction.(horizontal or vertical).

• Common properties

  • android:orientation:
    • horizontal: Places the childs in horizontal direction(left to right).
    • vertical: Places the childs in vertical direction(top to bottom).
  • android:gravity:
    • For aligning the child to center, top, bottom.
  • android:weightSum:
    • Total weight for the layout.
    • We can give weight to child, and child will that weight amount from parent weight in horizontal or vertical direction.
  • android:layout_weight:
    • Add this to the child to give some weight.
    • Make sure to use width(for horizontal) or height(for vertical) to 0dp before using it.

• Example design with code

  • What we want:

    

  • Code:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".DesignActivity"
        android:orientation="vertical"
        android:weightSum="10">
    
        <LinearLayout
            android:id="@+id/llTop"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:gravity="center"
            android:orientation="vertical"
            android:background="#890E0E">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:textColor="@color/white"
                android:text="height = 30% of parent"/>
    
        </LinearLayout>
    
        <LinearLayout
            android:id="@+id/llCenter"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:weightSum="100"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:background="#0C990C">
    
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="20"
                android:gravity="center"
                android:textSize="20sp"
                android:padding="8dp"
                android:textColor="@color/white"
                android:background="#000000"
                android:text="20%"/>
    
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="30"
                android:gravity="center"
                android:textSize="20sp"
                android:padding="8dp"
                android:textColor="@color/white"
                android:background="#505050"
                android:text="30%"/>
    
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="50"
                android:gravity="center"
                android:textSize="20sp"
                android:padding="8dp"
                android:textColor="@color/white"
                android:background="#000000"
                android:text="50%"/>
    
        </LinearLayout>
    
        <LinearLayout
            android:id="@+id/llBottom"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="4"
            android:background="#060695"
            android:orientation="vertical"
            android:gravity="center">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:textColor="@color/white"
                android:text="height = 40% of parent"/>
    
        </LinearLayout>
    
    </LinearLayout>
    

    • As you can see, the whole code is nothing but some combination of weight and gravity property.

• When to use

  • When we just need items in some direction.
  • For example: For multiple inputs, multiple EditText can be put inside a LinearLayout with vertical orientation.

Relative Layout

• Intro

  • As the name suggest, it align child relative to other child.
  • Allows complex design with fewer nesting.
  • Very useful for designing overlapping views.

• Common Properties

  • layout_alignParentTop / layout_alignParentBottom
    • Aligns a view to the top or bottom of the parent.
  • layout_alignParentLeft / layout_alignParentRight
    • Aligns a view to the left or right edge of the parent.
  • layout_centerInParent
    • Centers the view within the parent container.
  • layout_toRightOf / layout_toLeftOf
    • Takes the view id as value.
    • Positions a view relative to another view’s right or left side.
  • layout_above / layout_below
    • Takes the view id as value.
    • Places a view above or below another view.

• Example design with code

  • What we want

    

  • Code

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#6BB1B4B2"
        android:layout_margin="16dp"
        android:padding="4dp">
    
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="#00ff00"
            android:contentDescription="close icon"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:src="@drawable/baseline_close_24"/>
    
        <ImageView
            android:id="@+id/ivAlert"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:contentDescription="battery alert icon"
            android:src="@drawable/baseline_battery_alert_24"
            app:tint="#F22B2B" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/ivAlert"
            android:padding="4dp"
            android:text="Battery low. Charge your device"
            android:textSize="20sp"
            android:layout_centerHorizontal="true"/>
    
    
    </RelativeLayout>
    

• When to use

  • Use when we need overlapping views.
  • In the previous example, the close icon is on top of other views. We can't do it easily using LinearLayout.

Constraint Layout

• Intro

  • Hard to code.
  • Allows to create complex design with high performance than LinearLayout and RelativeLayout.
  • When we add a child inside the ConstraintLayout, we have to fix the constraints on 4 sides.
  • Attaching constraint to a side is like attaching a rope on that side.
  • By default, child is added on left top side.

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="My First App"
            android:textSize="25sp"
            android:textStyle="bold" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

  • Preview:

    

  • As we can see, we haven't added any constraints(See all four sides has blank cirle), so item is on left-top by default.
  • Let's add constraint on left and right side:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="My First App"
            android:textSize="25sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

  • Preview:

    

  • See, the circle on left and right are now filled. Basically we have added two ropes on both left and right side. They pull the view with equal force, and the view become in center.

• Common Properties

  • layout_constraintTop_toTopOf
    • Aligns the top of the view to the top of another view or parent.
  • layout_constraintBottom_toBottomOf
    • Aligns the bottom of the view to another view or parent.
  • layout_constraintStart_toStartOf / layout_constraintEnd_toEndOf
    • Aligns the start/end of a view to another view or parent.
  • layout_constraintHorizontal_bias / layout_constraintVertical_bias
    • Controls the bias (position) of the view along the horizontal or vertical axis.
    • Value is between 0 to 1 and horizontal constraint(for horizontal bias) and vertical constraint(for vertical bias) must be set.
  • layout_constraintDimensionRatio
    • Sets an aspect ratio for the view (e.g., "1:1" for a square).
  • layout_constraintStart_toEndOf
    • Positions the start edge of the view next to the end edge of another view.
  • layout_constraintEnd_toStartOf
    • Positions the end edge of the view next to the start edge of another view.
  • layout_constraintTop_toBottomOf
    • Positions the top edge of the view below the bottom edge of another view.
  • layout_constraintBottom_toTopOf
    • Positions the bottom edge of the view above the top edge of another view.

• Explanation for one

  • app:layout_constraintEnd_toStartOf="@+id/textViewRight"
    • It will set a constraint on the End of the view with the start of the textViewRight.
    • See the structure. It's similar like:

      <view_constraint> _ <other_constraint> of <other_view_id>
      

    • For previous line:
      • view_constraint = layout_constraintEnd. This is constraint for current view.
      • other_constraint = toStartOf. This is constraint for other view.
      • other_view_id = textViewRight.
      • In short, it will set a constraint from end of current view to start of textViewRight.

• Example with design code

  • What we want

    

  • Code:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="#890E0E"
            android:gravity="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="height = 30% of parent"
                android:textColor="@color/white"
                android:textSize="30sp" />
    
        </LinearLayout>
    
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/llCenter"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="#0C990C"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/linearLayout2">
    
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentTop="true"
                android:layout_alignParentEnd="true"
                android:background="#ffffff"
                android:contentDescription="close icon"
                android:src="@drawable/baseline_close_24"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
    
            <TextView
                android:id="@+id/textViewLeft"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="#000000"
                android:gravity="center"
                android:padding="8dp"
                android:text="33%"
                android:textColor="@color/white"
                android:textSize="20sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/textViewMiddle"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
    
            <TextView
                android:id="@+id/textViewMiddle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="#505050"
                android:gravity="center"
                android:padding="8dp"
                android:text="33%"
                android:textColor="@color/white"
                android:textSize="20sp"
                app:layout_constraintBottom_toBottomOf="@+id/textViewLeft"
                app:layout_constraintEnd_toStartOf="@+id/textViewRight"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/textViewLeft"
                app:layout_constraintTop_toTopOf="@+id/textViewLeft" />
    
            <TextView
                android:id="@+id/textViewRight"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="#000000"
                android:gravity="center"
                android:padding="8dp"
                android:text="33%"
                android:textColor="@color/white"
                android:textSize="20sp"
                app:layout_constraintBottom_toBottomOf="@+id/textViewMiddle"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/textViewMiddle"
                app:layout_constraintTop_toTopOf="@+id/textViewMiddle" />
    
        </androidx.constraintlayout.widget.ConstraintLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="#060695"
            android:gravity="center"
    
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".4"
            app:layout_constraintTop_toBottomOf="@+id/llCenter">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="height = 40% of parent"
                android:textColor="@color/white"
                android:textSize="30sp" />
    
        </LinearLayout>
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

Few common Views

• Views are like a component like for showing text, taking input etc.

• TextView

  • A TextView is used to display text to the user.
  • It can show static or dynamic text and can be styled with various attributes.
  • Example:

    <TextView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        android:textSize="18sp"
        android:textColor="#000000"
        android:padding="16dp" />
    

  • Output

    Hello, World!
    

• EditText

  • An EditText is an element that allows users to input text.
  • It is a subclass of TextView with added functionalities for user input.
  • Example:

    <EditText
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name"
        android:inputType="text"
        android:maxLength="20"
        android:padding="16dp" />
    

  • Output: will show a box, when clicked, it will show keyboard and user can input text.
  • We can also use the TextInputLayout with TextInputEditText to have more customization.
  • For example:

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editTextName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter your name" />
    
    </com.google.android.material.textfield.TextInputLayout>
    

  • Preview:

    

• Button

  • A Button is a push button that the user can press to perform an action.
  • Example:

    <android.widget.Button
        android:id="@+id/buttonAddPrefix"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:background="@drawable/button_ripple"
        android:text="Add prefix"
        android:textColor="#ffffff"
        android:textSize="18sp" />
    

  • Preview:

    

  • Here we have used a custom background for button. Place it inside drawable/button_ripple.xml file.

    <?xml version="1.0" encoding="utf-8"?>
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="#002300">
    
        <item android:id="@android:id/mask">
            <shape android:shape="rectangle">
                <corners android:radius="4dp"/>
                <solid android:color="#002300"/>
            </shape>
        </item>
    
        <item android:id="@android:id/background">
    
            <shape android:shape="rectangle">
                <corners android:radius="4dp"/>
                <solid android:color="#026102"/>
            </shape>
    
        </item>
    
    </ripple>
    

• Progress Bar

  • A ProgressBar indicates the progress of an operation.
  • It can be displayed in a circular or horizontal format.
  • Example:

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:indeterminate="true"
    />
    

  • Preview: