Arrangement and alignment in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Effect of Gravity on View Alignment

Given a LinearLayout with vertical orientation and a child TextView with gravity set to Gravity.END, where will the text appear inside the TextView?

Android Kotlin

val layout = LinearLayout(this).apply {
  orientation = LinearLayout.VERTICAL
  layoutParams = LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,
    LinearLayout.LayoutParams.WRAP_CONTENT
  )
}
val textView = TextView(this).apply {
  text = "Hello"
  gravity = Gravity.END
  layoutParams = LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,
    LinearLayout.LayoutParams.WRAP_CONTENT
  )
}
layout.addView(textView)

A Text is aligned to the right inside the TextView

B Text is aligned to the left inside the TextView

C Text is centered horizontally inside the TextView

D Text is aligned to the top inside the TextView

💡 Hint

Gravity.END aligns content to the right side in left-to-right layouts.

The gravity property inside a TextView controls the alignment of the text inside the view's bounds. Gravity.END aligns the text to the right side horizontally.

❓ ui_behavior

intermediate

LinearLayout Weight Distribution

In a horizontal LinearLayout with two Buttons, if the first Button has layout_weight=1 and the second Button has layout_weight=2, how will the available horizontal space be divided?

Android Kotlin

<LinearLayout
  android:orientation="horizontal"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Button 1" />

  <Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Button 2" />

</LinearLayout>

A Button 1 takes 1/3 and Button 2 takes 2/3 of the horizontal space

B Button 1 takes 2/3 and Button 2 takes 1/3 of the horizontal space

C Buttons ignore weight and size themselves to content

D Both buttons take equal horizontal space

💡 Hint

Weights divide space proportionally based on their values.

The total weight is 3 (1+2). Button 1 gets 1/3 of the space, Button 2 gets 2/3.

❓ lifecycle

advanced

ConstraintLayout Chain Behavior

In a ConstraintLayout, when three buttons are chained horizontally with chainStyle set to spread, how are the buttons arranged?

Android Kotlin

<androidx.constraintlayout.widget.ConstraintLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button2" />

  <Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@+id/button1"
    app:layout_constraintEnd_toStartOf="@+id/button3" />

  <Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="parent" />

  <!-- Chain style set in code or XML -->
</androidx.constraintlayout.widget.ConstraintLayout>

A Buttons are packed together at the start with no space between

B Buttons overlap each other in the center

C Buttons are packed together at the center with no space between

D Buttons are spread evenly with equal space between them and edges

💡 Hint

spread chain style places equal gaps between buttons and edges.

The spread style distributes buttons evenly with equal space between them and the parent edges.

❓ navigation

advanced

Effect of Layout Gravity in FrameLayout

Inside a FrameLayout, a child ImageView has layout_gravity set to bottom|center_horizontal. Where will the ImageView appear?

Android Kotlin

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center_horizontal"
    android:src="@drawable/sample" />

</FrameLayout>

A ImageView is aligned to the top-left corner

B ImageView is centered horizontally and aligned to the bottom of the FrameLayout

C ImageView is stretched to fill the FrameLayout

D ImageView is centered vertically and aligned to the right

💡 Hint

layout_gravity controls the child's position inside the parent FrameLayout.

The layout_gravity attribute positions the child inside the FrameLayout. bottom|center_horizontal means horizontally centered and aligned to the bottom edge.

📝 Syntax

expert

Correct ConstraintSet Code for Centering a View

Which Kotlin code snippet correctly centers a Button horizontally and vertically inside a ConstraintLayout using ConstraintSet?

Android Kotlin

val constraintSet = ConstraintSet()
constraintSet.clone(constraintLayout)
// Missing code here
constraintSet.applyTo(constraintLayout)

A

constraintSet.setHorizontalBias(R.id.button, 0.5f)
constraintSet.setVerticalBias(R.id.button, 0.5f)

B

constraintSet.centerHorizontally(R.id.button, ConstraintSet.PARENT_ID)
constraintSet.centerVertically(R.id.button, ConstraintSet.PARENT_ID)

C

constraintSet.connect(R.id.button, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START)
constraintSet.connect(R.id.button, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END)
constraintSet.connect(R.id.button, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP)
constraintSet.connect(R.id.button, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM)

D

constraintSet.connect(R.id.button, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT)
constraintSet.connect(R.id.button, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT)

💡 Hint

Centering requires connecting all four sides to parent edges.

To center a view in ConstraintLayout using ConstraintSet, you connect all four sides of the view to the corresponding sides of the parent.

Practice

1. Which property in a LinearLayout controls whether items are stacked vertically or horizontally?

easy

A. layout_width

B. gravity

C. orientation

D. padding

Solution

1. Step 1: Understand LinearLayout properties

   The orientation property defines if children are stacked vertically or horizontally.

2. Step 2: Differentiate from other properties

   gravity controls alignment inside the container, not stacking direction.

3. Final Answer:

   orientation -> Option C

4. Quick Check:

   Stack direction = orientation [OK]

Hint: Stacking direction is set by orientation property [OK]

Common Mistakes:

• Confusing gravity with orientation
• Thinking padding controls stacking
• Mixing layout_width with arrangement

2. Which of the following is the correct syntax to center all child views inside a LinearLayout using gravity in Kotlin XML?

easy

A. android:orientation="center"

B. android:gravity="center"

C. android:layout_gravity="center"

D. android:align="center"

Solution

1. Step 1: Identify property for child alignment inside container

   android:gravity aligns children inside the LinearLayout.

2. Step 2: Check syntax correctness

   android:gravity="center" is the correct attribute and value to center children.

3. Final Answer:

   android:gravity="center" -> Option B

4. Quick Check:

   Center children = android:gravity="center" [OK]

Hint: Use android:gravity to align children inside layout [OK]

Common Mistakes:

• Using layout_gravity instead of gravity for children
• Setting orientation to center (invalid)
• Using non-existent align attribute

3. Given this Kotlin XML snippet:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_vertical">
    <Button android:text="A" />
    <Button android:text="B" />
</LinearLayout>

How will the buttons be arranged on the screen?

medium

A. Buttons side by side horizontally and centered vertically

B. Buttons stacked vertically aligned to bottom

C. Buttons side by side horizontally aligned to top

D. Buttons stacked vertically and centered horizontally

Solution

1. Step 1: Analyze orientation property

   android:orientation="horizontal" means children are placed side by side horizontally.

2. Step 2: Analyze gravity property

   android:gravity="center_vertical" aligns children vertically centered inside the container.

3. Final Answer:

   Buttons side by side horizontally and centered vertically -> Option A

4. Quick Check:

   Horizontal orientation + center_vertical gravity = Buttons side by side horizontally and centered vertically [OK]

Hint: Orientation sets direction; gravity sets alignment inside container [OK]

Common Mistakes:

• Confusing orientation with gravity effects
• Assuming vertical stacking with horizontal orientation
• Ignoring gravity vertical centering

4. What is wrong with this Kotlin XML layout snippet?

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center_horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
</LinearLayout>

medium

A. layout_gravity="center" on TextView is redundant here

B. Using both gravity and layout_gravity causes conflict

C. orientation="vertical" is invalid for LinearLayout

D. Missing closing tag for LinearLayout

Solution

1. Step 1: Understand gravity vs layout_gravity

   android:gravity on LinearLayout aligns children inside it; layout_gravity aligns the child itself inside its parent.

2. Step 2: Check redundancy in this context

   Since LinearLayout has gravity="center_horizontal", the child TextView is already centered horizontally, so layout_gravity="center" on TextView is unnecessary.

3. Final Answer:

   layout_gravity="center" on TextView is redundant here -> Option A

4. Quick Check:

   Redundant layout_gravity when parent gravity centers children [OK]

Hint: Parent gravity centers children; child layout_gravity may be redundant [OK]

Common Mistakes:

• Thinking orientation="vertical" is invalid
• Confusing gravity and layout_gravity roles
• Missing closing tags (actually present here)

5. You want to create a LinearLayout that stacks three buttons vertically, but the middle button should be aligned to the right edge while the others are centered horizontally. Which arrangement and alignment setup achieves this?

hard

A. Set orientation="vertical" on LinearLayout, gravity="center_horizontal", and layout_gravity="center_horizontal" on the middle button

B. Set orientation="horizontal" on LinearLayout, gravity="center_vertical", and layout_gravity="end" on the middle button

C. Set orientation="vertical" on LinearLayout, gravity="end", and layout_gravity="center_horizontal" on the middle button

D. Set orientation="vertical" on LinearLayout, gravity="center_horizontal", and layout_gravity="end" on the middle button

Solution

1. Step 1: Set vertical stacking

   orientation="vertical" stacks buttons top to bottom.

2. Step 2: Center all buttons horizontally by default

   Set gravity="center_horizontal" on LinearLayout to center children horizontally.

3. Step 3: Align middle button to right edge

   Override middle button's alignment with layout_gravity="end" to push it to the right.

4. Final Answer:

   orientation="vertical", gravity="center_horizontal", layout_gravity="end" on middle button -> Option D

5. Quick Check:

   Vertical stack + center default + override middle button end [OK]

Hint: Use layout_gravity on child to override parent gravity alignment [OK]

Common Mistakes:

• Using horizontal orientation instead of vertical
• Setting gravity="end" on parent causing all children right aligned
• Not overriding middle button alignment