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.