Why layout mastery creates professional UIs in Android Kotlin - Build It to Prove It

Build: Professional UI Layout Demo

This screen demonstrates how mastering layouts in Android creates professional and clean user interfaces. It shows a simple profile card with image, text, and buttons arranged neatly.

Target UI

┌─────────────────────────────┐
│        Profile Card          │
│ ┌───────────────┐           │
│ │   [Image]     │           │
│ └───────────────┘           │
│ Name: John Doe              │
│ Title: Android Developer    │
│                             │
│ [Follow]   [Message]        │
└─────────────────────────────┘

Use ConstraintLayout to arrange elements precisely

Include an ImageView for profile picture

Add TextViews for name and title with proper spacing

Place two Buttons side by side aligned at the bottom

Ensure padding and margin create a balanced look

Use styles for text sizes and colors to enhance readability

Starter Code

Android Kotlin

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.constraintlayout.widget.ConstraintSet
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView

class ProfileActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val layout = ConstraintLayout(this).apply {
            id = ConstraintLayout.generateViewId()
            setPadding(32, 32, 32, 32)
        }

        val imageView = ImageView(this).apply {
            id = ImageView.generateViewId()
            // TODO: Set a placeholder image resource
        }

        val nameText = TextView(this).apply {
            id = TextView.generateViewId()
            text = ""
            // TODO: Set text size and style
        }

        val titleText = TextView(this).apply {
            id = TextView.generateViewId()
            text = ""
            // TODO: Set text size and style
        }

        val followButton = Button(this).apply {
            id = Button.generateViewId()
            text = ""
        }

        val messageButton = Button(this).apply {
            id = Button.generateViewId()
            text = ""
        }

        layout.addView(imageView)
        layout.addView(nameText)
        layout.addView(titleText)
        layout.addView(followButton)
        layout.addView(messageButton)

        setContentView(layout)

        // TODO: Add constraints to arrange views
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Android Kotlin

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.constraintlayout.widget.ConstraintSet
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView
import android.graphics.Color
import android.view.ViewGroup.LayoutParams

class ProfileActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val layout = ConstraintLayout(this).apply {
            id = ConstraintLayout.generateViewId()
            setPadding(32, 32, 32, 32)
            layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
        }

        val imageView = ImageView(this).apply {
            id = ImageView.generateViewId()
            setImageResource(android.R.drawable.sym_def_app_icon) // placeholder image
            layoutParams = LayoutParams(200, 200)
            scaleType = ImageView.ScaleType.CENTER_CROP
        }

        val nameText = TextView(this).apply {
            id = TextView.generateViewId()
            text = "John Doe"
            textSize = 20f
            setTextColor(Color.BLACK)
        }

        val titleText = TextView(this).apply {
            id = TextView.generateViewId()
            text = "Android Developer"
            textSize = 16f
            setTextColor(Color.DKGRAY)
        }

        val followButton = Button(this).apply {
            id = Button.generateViewId()
            text = "Follow"
        }

        val messageButton = Button(this).apply {
            id = Button.generateViewId()
            text = "Message"
        }

        layout.addView(imageView)
        layout.addView(nameText)
        layout.addView(titleText)
        layout.addView(followButton)
        layout.addView(messageButton)

        val set = ConstraintSet()
        set.clone(layout)

        // ImageView constraints
        set.connect(imageView.id, ConstraintSet.TOP, layout.id, ConstraintSet.TOP)
        set.connect(imageView.id, ConstraintSet.START, layout.id, ConstraintSet.START)

        // Name TextView constraints
        set.connect(nameText.id, ConstraintSet.TOP, layout.id, ConstraintSet.TOP)
        set.connect(nameText.id, ConstraintSet.START, imageView.id, ConstraintSet.END, 16)
        set.connect(nameText.id, ConstraintSet.END, layout.id, ConstraintSet.END)

        // Title TextView constraints
        set.connect(titleText.id, ConstraintSet.TOP, nameText.id, ConstraintSet.BOTTOM, 8)
        set.connect(titleText.id, ConstraintSet.START, nameText.id, ConstraintSet.START)
        set.connect(titleText.id, ConstraintSet.END, nameText.id, ConstraintSet.END)

        // Follow Button constraints
        set.connect(followButton.id, ConstraintSet.BOTTOM, layout.id, ConstraintSet.BOTTOM)
        set.connect(followButton.id, ConstraintSet.START, layout.id, ConstraintSet.START)

        // Message Button constraints
        set.connect(messageButton.id, ConstraintSet.BOTTOM, layout.id, ConstraintSet.BOTTOM)
        set.connect(messageButton.id, ConstraintSet.END, layout.id, ConstraintSet.END)

        // Buttons horizontal alignment
        set.constrainWidth(followButton.id, ConstraintSet.WRAP_CONTENT)
        set.constrainWidth(messageButton.id, ConstraintSet.WRAP_CONTENT)

        set.applyTo(layout)

        setContentView(layout)
    }
}

This solution uses ConstraintLayout to arrange the profile card elements precisely. The ImageView is placed at the top-left with a fixed size and a placeholder image. The TextView for the name is aligned to the right of the image with larger text size and black color for emphasis. The title text is below the name with smaller, darker gray text for subtlety.

Two buttons, "Follow" and "Message," are aligned side by side at the bottom left and right corners respectively, creating a balanced layout. Padding and margins ensure spacing between elements, making the UI clean and professional.

Mastering layouts like this helps create interfaces that look polished and are easy to use, which is key for professional apps.

Final Result

Completed Screen

┌─────────────────────────────┐
│        Profile Card          │
│ ┌───────────────┐           │
│ │   [Image]     │           │
│ └───────────────┘           │
│ Name: John Doe              │
│ Title: Android Developer    │
│                             │
│ [Follow]           [Message]│
└─────────────────────────────┘

Tapping 'Follow' button could trigger a follow action (not implemented here).

Tapping 'Message' button could open a chat screen (not implemented here).

Stretch Goal

Add a subtle shadow effect around the profile card container to enhance depth.

💡 Hint

Use elevation property on the ConstraintLayout or wrap it in a CardView with elevation.

Practice

1. Why is mastering layouts important for creating professional Android apps?

easy

A. Because layouts control the app's background color only

B. Because layouts replace the need for coding app logic

C. Because layouts are only needed for animations

D. Because good layouts make the app look neat and easy to use

Solution

1. Step 1: Understand the role of layouts in UI

   Layouts arrange views and control how the app looks on screen.

2. Step 2: Connect layout quality to user experience

   Good layouts make the app neat, easy to use, and professional.

3. Final Answer:

   Because good layouts make the app look neat and easy to use -> Option D

4. Quick Check:

   Good layouts = neat, easy to use app [OK]

Hint: Good layouts improve app look and usability [OK]

Common Mistakes:

• Thinking layouts only change colors
• Confusing layouts with animations
• Believing layouts replace app logic

2. Which of the following is the correct way to define a vertical LinearLayout in XML?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify the attribute for orientation

   The attribute to set layout direction is android:orientation.

2. Step 2: Choose the correct value for vertical layout

   android:orientation="vertical" sets views stacked top to bottom.

3. Final Answer:

   <LinearLayout android:orientation="vertical" ... > -> Option C

4. Quick Check:

   Orientation="vertical" means vertical stack [OK]

Hint: Use android:orientation="vertical" for vertical LinearLayout [OK]

Common Mistakes:

• Using layout_width or layout_height instead of orientation
• Confusing horizontal and vertical values
• Missing quotes around attribute values

3. Given this Kotlin code snippet inside an Activity:

val layout = LinearLayout(this)
layout.orientation = LinearLayout.HORIZONTAL
val button1 = Button(this).apply { text = "One" }
val button2 = Button(this).apply { text = "Two" }
layout.addView(button1)
layout.addView(button2)
setContentView(layout)

What will the user see on the screen?

medium

A. Two buttons side by side horizontally labeled 'One' and 'Two'

B. Two buttons stacked vertically labeled 'One' and 'Two'

C. Only one button labeled 'One' is visible

D. App crashes due to missing layout parameters

Solution

1. Step 1: Analyze the LinearLayout orientation

   Orientation is set to HORIZONTAL, so children are side by side.

2. Step 2: Check added views and their labels

   Two buttons labeled "One" and "Two" are added to the layout.

3. Final Answer:

   Two buttons side by side horizontally labeled 'One' and 'Two' -> Option A

4. Quick Check:

   Horizontal layout + 2 buttons = side by side buttons [OK]

Hint: Horizontal orientation stacks views side by side [OK]

Common Mistakes:

• Assuming default vertical stacking
• Thinking only one button shows
• Expecting a crash without layout params

4. This Kotlin code tries to create a vertical LinearLayout but the buttons do not span the full width. What is the likely cause?

val layout = LinearLayout(this)
layout.orientation = LinearLayout.VERTICAL
val button1 = Button(this).apply { text = "A" }
val button2 = Button(this).apply { text = "B" }
layout.addView(button1)
layout.addView(button2)
setContentView(layout)

medium

A. Buttons do not span the full width because orientation is set to HORIZONTAL instead of VERTICAL

B. Buttons do not span the full width because layout_width and layout_height are missing for buttons

C. Buttons do not span the full width because setContentView is called twice

D. Buttons do not span the full width because buttons are not added to the layout

Solution

1. Step 1: Check orientation and view addition

   Orientation is vertical and both buttons are added correctly.

2. Step 2: Identify missing layout parameters

   Buttons need layout_width and layout_height to size properly; missing these causes them not to span the full width.

3. Final Answer:

   Buttons do not span the full width because layout_width and layout_height are missing for buttons -> Option B

4. Quick Check:

   Missing layout params cause narrow buttons [OK]

Hint: Always set layout_width and layout_height for views [OK]

Common Mistakes:

• Confusing orientation with layout params
• Thinking setContentView called twice causes improper sizing
• Assuming views not added cause improper sizing

5. You want to create a professional UI with evenly spaced buttons arranged vertically and centered horizontally. Which layout and attributes should you use in Kotlin code?

hard

A. Use LinearLayout with vertical orientation, set gravity to CENTER_HORIZONTAL, and add equal margins to buttons

B. Use LinearLayout with horizontal orientation and set padding to zero

C. Use RelativeLayout without setting gravity or margins

D. Use FrameLayout and add buttons without layout parameters

Solution

1. Step 1: Choose layout for vertical stacking

   LinearLayout with vertical orientation stacks buttons top to bottom.

2. Step 2: Center buttons horizontally and space evenly

   Set gravity to CENTER_HORIZONTAL to center buttons; add margins for spacing.

3. Final Answer:

   Use LinearLayout with vertical orientation, set gravity to CENTER_HORIZONTAL, and add equal margins to buttons -> Option A

4. Quick Check:

   Vertical LinearLayout + center gravity + margins = professional UI [OK]

Hint: Center with gravity and space with margins in vertical LinearLayout [OK]

Common Mistakes:

• Using horizontal orientation for vertical layout
• Ignoring gravity for alignment
• Not adding margins for spacing