How to place one object beneath another with LinearLayout?

Question

I have to use LinearLayout to make this little app type thing in Android Studio.

The instructions say we have to use vertical orientation for the root tag (and this text at the top says "Here are my widgets") and then horizontal orientation for each row. My only issue is how to place things on different rows?

It's supposed to look like:

Row 1: "Here are my widgets" (Vert orientation)

Row 2: BUTTON IMAGEBUTTON

Row 3: CHECKBOX SWITCH

My issue is, when I make a new nested LinearLayout, it shows up on row 2. How do I make a row 3 with horizontal orientation? I tried putting an empty LinearLayout thing with vertical orientation to maybe split the two rows up, but that didn't work. How do I make the CheckBox and switch show up beneath the buttons? I have to use LinearLayout, and the orientation has to be horizontal. Here's my code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_message"
    android:textSize="30dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">


<Button
    android:gravity="fill"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:layout_width="200dp"
    android:text="@string/ButtonText" />

<ImageButton
    android:gravity="fill"
    android:layout_weight="1"
    android:layout_height="match_parent"
    android:layout_width="200dp"
    android:src="@drawable/flag"
    android:scaleType="centerInside"/>

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

    <CheckBox
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <Switch
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>
</LinearLayout>

</LinearLayout>

score 1 · Answer 1 · answered Jan 14 '19 at 21:14

Here is your layout will look like briefly:

<LinearLayout
    android:id="@+id/root_linear_layout"
    android:orientation="vertical"
    // other attributes... > 

    <TextView
        // This is ROW 1!
        //welcome text goes here />

    <LinearLayout
        // This is ROW 2!
        android:orientation="horizontal">

           <Button
               ... />

           <ImageButton 
                .../>

     </LinearLayout>   <-- Closing of the Row2 horizontal LinearLayout


    <LinearLayout
        // This is ROW 3!
        android:orientation="horizontal">

           <CheckBox
                ... />

           <Switch
                 .../>

     </LinearLayout> <-- Closing of the Row3 horizontal LinearLayout
</LinearLayout> <-- Closing of the root vertical LinearLayout

You can fill in additional attributes (id, height, width, etc... ) depending on your needs.

I noticed you used android:layout_weight attribute to each Views. If you use this attribute, it is desirable to use android:weightSum to the Views parent layout. For example, if you need 50:50 width ratio of your Button and ImageButton:

<LinearLayout
   android:weightSum="2">  <--- starting of Row2 LinearLayout

      <Button
          android:layout_weight="1"     ... />

      <ImageButton 
          android:layout_weight="1      ... />

</LinearLayout> <--- closing of Row2 LinearLayout

For more details about weight, see here :)

That makes sense, didn't realize I had to close off the first one. Thank you. — J.Griff2, Jan 20 '19 at 21:54
@J.Griff2 Glad my answer helped you. It will be great if you can accept my answer :) happy coding — WasabiTea, Jan 20 '19 at 23:12

score 0 · Answer 2 · answered Jan 14 '19 at 20:52

Like this:

<?xml version="1.0" encoding="utf-8"?>

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

    <ImageButton
        android:gravity="center"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:scaleType="centerInside"/>
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <CheckBox
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="50dp"
        android:text="Check Box"
        android:layout_weight="1"/>

    <Switch
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="50dp"
        android:layout_weight="1"/>

</LinearLayout>

How to place one object beneath another with LinearLayout?

2 Answers2