TheUnreal TheUnreal - 4 months ago 16
Android Question

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?


Answer

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>
Comments