CODEWITHSUNDEEP
androidandroid-layout
TheUnreal
TheUnreal

Reputation: 24462

Android Layout - 2 Items in a row

I have the following layout:

enter image description here

My root is relativelayout

<LinearLayout
    android:id="@+id/firstLine"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="2"

    >

<com.beardedhen.androidbootstrap.BootstrapLabel
    android:id="@+id/B1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:bootstrapBrand="primary"
    app:bootstrapHeading="h1"
    app:roundedCorners="true"
    android:text="Button 1"
    android:layout_margin="10dp"
    android:layout_weight="1"
    />


    <com.beardedhen.androidbootstrap.BootstrapLabel
        android:id="@+id/B2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:bootstrapBrand="primary"
        app:bootstrapHeading="h1"
        app:roundedCorners="true"
        android:text="Button 2"
        android:layout_margin="10dp"
        android:layout_weight="1"
        />

</LinearLayout>

<LinearLayout
    android:id="@+id/secondLine"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="2"
    android:layout_below="@+id/firstLine"
    >

    <com.beardedhen.androidbootstrap.BootstrapLabel
        android:id="@+id/b3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:bootstrapBrand="primary"
        app:bootstrapHeading="h1"
        app:roundedCorners="true"
        android:text="B3"
        android:layout_margin="10dp"
        android:layout_weight="1"

        />


    <com.beardedhen.androidbootstrap.BootstrapLabel
        android:id="@+id/b4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:bootstrapBrand="primary"
        app:bootstrapHeading="h1"
        app:roundedCorners="true"
        android:text="B4"
        android:layout_margin="10dp"
        android:layout_weight="1"

        />

</LinearLayout>

My goal is to make multiple lines with 2 buttons each line, and each button has to have a TextView above it (see Button 1 and Button 2, I need a small text above them).

As you can see, the 2nd line is not shown, and I can't see it in my app becuase the first line takes all the space. How can I:

  1. Make my layout work with multiple lines of 2 buttons?
  2. Work with a TextView above every button?

Upvotes: 0

Views: 1443

Answers (2)

Alexi V.
Alexi V.

Reputation: 143

Since the rootview is a RelativeLayout perhaps the TextViews and Buttons should all be in separate LinearLayouts with the upper most one having android:layout_alignParentTop="true" and all the other LinearLayours aligned to one another below using android:layout_below. Also, unless you want the LinearLayouts to have a fixed height regardless of their content, the height of the LinearLayouts should be set to wrap_content.

<LinearLayout
    android:id="@+id/firstTextViewLine"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:alignParentTop="true"
    android:orientation="horizontal"
    android:weightSum="2">

    <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:text="TextView 1" />

    <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:text="TextView 2" />

</LinearLayout>

<LinearLayout
    android:id="@+id/firstLine"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layoutBelow="@+id/firstTextViewLine"
    android:orientation="horizontal"
    android:weightSum="2">

    <com.beardedhen.androidbootstrap.BootstrapLabel
        android:id="@+id/B1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:bootstrapBrand="primary"
        app:bootstrapHeading="h1"
        app:roundedCorners="true"
        android:text="Button 1"
        android:layout_margin="10dp"
        android:layout_weight="1" />


    <com.beardedhen.androidbootstrap.BootstrapLabel
        android:id="@+id/B2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:bootstrapBrand="primary"
        app:bootstrapHeading="h1"
        app:roundedCorners="true"
        android:text="Button 2"
        android:layout_margin="10dp"
        android:layout_weight="1" />

</LinearLayout>

<LinearLayout
    android:id="@+id/secondTextViewLine"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_Below="@+id/firstLine"
    android:orientation="horizontal"
    android:weightSum="2">

    <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:text="TextView 1" />

    <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:text="TextView 2" />

</LinearLayout>

<LinearLayout
    android:id="@+id/secondLine"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2"
    android:layout_below="@+id/secondTextViewLine">

    <com.beardedhen.androidbootstrap.BootstrapLabel
        android:id="@+id/b3"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:bootstrapBrand="primary"
        app:bootstrapHeading="h1"
        app:roundedCorners="true"
        android:text="B3"
        android:layout_margin="10dp"
        android:layout_weight="1" />

    <com.beardedhen.androidbootstrap.BootstrapLabel
        android:id="@+id/b4"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:bootstrapBrand="primary"
        app:bootstrapHeading="h1"
        app:roundedCorners="true"
        android:text="B4"
        android:layout_margin="10dp"
        android:layout_weight="1" />

</LinearLayout>

Upvotes: 0

IAmGroot
IAmGroot

Reputation: 13855

Change your linear layouts height to wrap_content. Using match_parent, makes each line the same height as the entire window in your scenario. Which you don't want.

<LinearLayout
   android:id="@+id/firstLine"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   android:weightSum="2" >

To answer your second question, put the TextView in between the linear layouts. (before the start of each one)

Also, ensure your main layout, is LinearLayout, with android:orientation="vertical". I assume it is, but just in-case.

It should look something like this:

<LinearLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>

    <LinearLayout
        android:id="@+id/firstLine"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:weightSum="2"

        >

        <com.beardedhen.androidbootstrap.BootstrapLabel
            android:id="@+id/B1"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:text="Button 1"
            app:bootstrapBrand="primary"
            app:bootstrapHeading="h1"
            app:roundedCorners="true"
            />


        <com.beardedhen.androidbootstrap.BootstrapLabel
            android:id="@+id/B2"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:text="Button 2"
            app:bootstrapBrand="primary"
            app:bootstrapHeading="h1"
            app:roundedCorners="true"
            />

    </LinearLayout>

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>

    <LinearLayout
        android:id="@+id/secondLine"
        android:layout_below="@+id/firstLine"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:weightSum="2"
        >

        <com.beardedhen.androidbootstrap.BootstrapLabel
            android:id="@+id/b3"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:text="B3"
            app:bootstrapBrand="primary"
            app:bootstrapHeading="h1"
            app:roundedCorners="true"

            />


        <com.beardedhen.androidbootstrap.BootstrapLabel
            android:id="@+id/b4"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:text="B4"
            app:bootstrapBrand="primary"
            app:bootstrapHeading="h1"
            app:roundedCorners="true"

            />

    </LinearLayout>
</LinearLayout>

Upvotes: 1

Related Questions