Basic UI Design

XML

• So far, we know that XML does our initial design.

• It's a markup language and it can't do anything by itself.

• It's just a way to represent something in a formatted way.

• For example: We want to represent an email container having two mail. A mail has a sender, receiver, subject and body attribute.

  • This can be represented like this(imaginary tag by us):

    <Container
        containerId="1">
        <Email
            from = "alice@example.com"
            to = "bob@example.com"
            subject = "Project Update"
            body = "Here's the latest update on the project. Let me know if you have questions!">
        </Email>
    
        <Email
            from = "charlie@demo.com"
            to = "diana@sample.com"
            subject = "Reminder: Team Meeting"
            body = "Don't forget about the team meeting tomorrow at 10 AM. See you there!">
        </Email>
    </Container>
    

  • In the above example, we have one container and two emails.
  • What if we consider the Container and Email as a class with the following definition:

        public class Email{
            String from;
            String to;
            String subject;
            String body;
            // other codes
        }
    
        public class Container {
            private String containerId;
            private List<Email> emails;
            // other codes
        }
    

  • What's the benefit we get from here?
  • Remember xml can't run itself. It's just a way to represent.
  • But we need to execute it to get our design.
  • What if we write a complex java code, that can read the XML file and create corresponding java code and execute the code?
  • That's what the android framework does internally.

• Let's consider an example from the android:

  <?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"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/main"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".MainActivity">
  
      <TextView
          android:id="@+id/textViewOne"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Hello World!"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" >
      </TextView>
  
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Hello World!"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/textViewOne" />
      
  </androidx.constraintlayout.widget.ConstraintLayout>
  

  • As we can see, it is similar to our previous xml. Here androidx.constraintlayout.widget.ConstraintLayout, and TextView are the class.
  • We have one object of the ConstraintLayout and two objects of the TextView class.
  • If we consider a TextView object:

        <TextView
            android:id="@+id/textViewOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" >
        </TextView>
    

    • It doesn't contain any other class, but it has few properties like id, layout_width, layout_height, text etc.
    • These properties are used for previewing like defining the width, height, what text to show etc.

• In short, a simple structure of XML looks like below:

  <ClassName
  // -- Properties of the class --
  >
  // -- Nested class if any --
  </ClassName>
  

  • Attributes or properties are defined before the first >, and nested classes are defined within the <> here </>.

Few basic layout/container

• Linear Layout

  • Arranges its child views in a single direction, either vertically or horizontally.
  • Example:

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="8dp">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Item 1"
            android:textSize="24sp"/>
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Item 2"
            android:textSize="24sp"/>
    
    </LinearLayout>
    

  • Output:

  

• Relative Layout

  • Allows positioning of child views relative to each other or to the parent layout.
  • Example:

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Item 1" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Item 2"
            android:layout_below="@id/text1" />
    </RelativeLayout>
    

  • Output:

  

• Constraints Layout

  • Enables us to create complex layouts with a flat view hierarchy by using constraints.
  • Reduces the need for nested layouts, improving performance.
  • Hard to design at beginner level.
  • Practice.