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.