CODEWITHSUNDEEP
androidandroid-layoutandroid-linearlayout
f4bzen
f4bzen

Reputation: 299

layout_below in linearlayout

Is it possible to align a view below another view in a linearlayout?

I would like to do something like this: https://i.sstatic.net/6yL0w.png

Is this possible with a linearlayout?

I also would like to do this without using fixed values (like fixed height/width) and those views should fill the screen equally (like in the example).

Thanks in advance

Upvotes: 0

Views: 16421

Answers (5)

Pawan Yadav
Pawan Yadav

Reputation: 1782

Linearlayout put child either vertical or horizontal. In link there are imageview textview and table layout so relative layout is better solution. You can do this by using linearlayout to.

Use two linearlayout layoutOne and layoutTwo.

In layoutTwo put orientation vertical and put textview and tablelayout.

in layoutOne put orientation horizontal and put imageview and layoutTwo.

in this way you can achieve it.

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

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/background_dark"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="6dp"
            android:src="@drawable/ic_launcher" />

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

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingRight="20dp"
                android:text="TextView" />

            <TableLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <TableRow
                    android:id="@+id/tableRow1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" >

                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="@android:color/background_light"
                        android:text="tablelayout" />
                </TableRow>
            </TableLayout>
        </LinearLayout>
    </LinearLayout>

    <!-- second part -->

    <LinearLayout
        android:layout_width="0dp"
        android:layout_marginLeft="10dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/background_light"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="6dp"
            android:src="@drawable/ic_launcher" />

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

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingRight="20dp"
                android:text="TextView" />

            <TableLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <TableRow
                    android:id="@+id/tableRow1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" >

                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="@android:color/background_light"
                        android:text="tablelayout" />
                </TableRow>
            </TableLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Upvotes: 4

Niko Adrianus Yuwono
Niko Adrianus Yuwono

Reputation: 11122

Yes it's possible, but why you must use linear layout?

this is the code with linear layout : 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2" >

    <!-- MAIN CONTAINER -->

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

        <!-- FIRST CONTAINER -->

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

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

            <!-- CHILD OF FIRST CONTAINER -->

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

            <TableLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" >
            </TableLayout>
        </LinearLayout>
    </LinearLayout>

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

        <!-- SECOND CONTAINER -->

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

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

            <!-- CHILD OF SECOND CONTAINER -->

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

            <TableLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" >
            </TableLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

and this is the code with RelativeLayout : 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView1"
        android:layout_toRightOf="@+id/imageView1"
        android:layout_alignTop="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TableLayout
        android:layout_toRightOf="@+id/imageView1"
        android:layout_below="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </TableLayout>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_toRightOf="@+id/textView1"
        android:layout_alignTop="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView2"
        android:layout_toRightOf="@+id/imageView2"
        android:layout_alignTop="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TableLayout
        android:layout_toRightOf="@+id/imageView2"
        android:layout_below="@+id/textView2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </TableLayout>

</RelativeLayout>

I'm not 100% sure my code will appear 100% as the picture that you give in your question but I'm sure you can get the big picture from my code how to create a layout like that. And if you want to use linear layout just because you've just learned android and haven't learned about relativelayout I think now is the best time to learn it as you can see the code in relative layout is much simpler than the linear layout one. I hope my answer can help you and if you have another question feel free to ask in the comment :)

Upvotes: 0

codeMagic
codeMagic

Reputation: 44571

Sure this is possible but you will be much better of with a RelativeLayout. This will make it much more flexible with less coding and fewer nested Layouts. You could have a LinearLayout with horizontal orientation as the root layout and 2 RelativeLayouts inside of that. It would basically be something like

<RelativeLayout
...>
    <ImageView
         .../>
    <TextView
        ...
        android:layout_toRightOf="@+id/imagevViewID"
        android:layout_alignParentTop="true"
    .../>
    <TableLayout
        android:layout_below="@+id/textviewID"
        android:layout_toRightOf="@+id/imageViewID"
    .../>
</RelativeLayout>

I'm not going to write the whole Layout for you but something like that would get you started. You, of course, need to add in the properties for width, height, etc...

Look at the RelativeLayout Docs for the exact properties that you need but in my opinion, RelativeLayout is much better in a lot of situations

Upvotes: 0

Adesh Atole
Adesh Atole

Reputation: 762

No, you cannot use layout_below in Linear layout.

If you want to place items one below another, use android:orientation="vertical"

And if you want them to be placed side by side, then use android:orientation="horizontal"

Upvotes: 1

bakriOnFire
bakriOnFire

Reputation: 2681

To align a view below another view in a LinearLayout you just have to set the orientation of the LinearLayout to Vertical

android:orientation="vertical"

Views should fill the screen equally

To do this you use match_parent with the width and height attributes of the view.

Upvotes: 0

Related Questions