Combine two LinearLayouts into one LinearLayout

Question

I have an twoLinearLayout inside the RelativeLayout. I just want to do this LinearLayout inside the one LinearLayout so that my child control will display inside 1 LinearLayout. so that I can make group of this LinearLayout and display with differnt background color android:background="@drawable/my_custom_background so that all child control coupled into it.

see the below screen shot code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#0B95BA"
    android:minWidth="25px"
    android:minHeight="25px">
    <LinearLayout
        android:id="@+id/linearLayoutCont"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="5dp">
        <TextView
            android:id="@+id/txtViewCont"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Contact Billing"
            android:gravity="center"
            android:textSize="25sp"
            android:textColor="#FFFFFF" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/linearLayoutContBillingCall"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@id/linearLayoutCont"
        android:layout_marginTop="5dp">
        <Button
            android:text="Call"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:textSize="15sp"
            android:textColor="#FFFFFF"
            android:layout_gravity="right"
            android:background="@drawable/ButtonStyle"
            android:id="@+id/btnContCall"
            android:drawableLeft="@drawable/PhoneCall" />
        <Button
            android:text="Email"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:textSize="15sp"
            android:textColor="#FFFFFF"
            android:layout_gravity="right"
            android:background="@drawable/ButtonStyle"
            android:id="@+id/btnEmail"
            android:drawableLeft="@drawable/Email" />
    </LinearLayout>
</RelativeLayout>

and o/p should be above pic like Contact at center and two button (Call and Email) are below the contact same corner. also one thing I want to ask how I can create a space between these two buttons.

You are trying to combine 2 LinearLayouts with different orientations - it is not possible to combine them into one. Just use a RelativeLayout to position the controls without any LinearLayouts. — adelphus, May 20 '16 at 10:46
@adelphus i tried android:id="@+id/linearLayoutCont" it shows me child control Contact , Call , Email in on one line i.e. in single line I want it on COntact above and Call and Email button below. — Pritish, May 20 '16 at 10:52
Which is why you use layout_below, layout_toLeftOf and other similar attributes to position elements inside RelativeLayouts. I think you need to read the documentation on how to use RelativeLayout. — adelphus, May 20 '16 at 10:55
You can use linearlayout instead of relative layout and then nest other linearlayouts inside it with desired orientation, width and height. — Akash Amin, May 20 '16 at 10:57
http://www.tutorialspoint.com/android/android_linear_layout.htm — Akash Amin, May 20 '16 at 11:02

score 2 · Accepted Answer · answered May 20 '16 at 11:04

You need to only take one Linear Layout instead of two. Your Text View is child of your Relative Layout. I have applied some Modification to your Layout.

Refer this.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0B95BA">


    <TextView
        android:id="@+id/txtViewCont"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Contact Billing"
        android:textColor="#FFFFFF"
        android:textSize="25sp" />

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


        <Button
            android:id="@+id/btnContCall"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_weight="1"
            android:drawableLeft="@mipmap/ic_launcher"
            android:drawablePadding="5dp"
            android:text="Call"
            android:textColor="#FFFFFF"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btnEmail"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_weight="1"
            android:drawableLeft="@mipmap/ic_launcher"
            android:drawablePadding="5dp"
            android:text="Email"
            android:textColor="#FFFFFF"
            android:textSize="15sp" />

    </LinearLayout>
</RelativeLayout>

Note : Apply your own Drawables and Background as you have in your OP.

thanks for reply I have 1 que what is android:drawableLeft="@mipmap/ic_launcher" ???? — Pritish, May 20 '16 at 11:09
It is a `Drawable` image as you have used in your code `android:drawableLeft="@drawable/PhoneCall"` just same as this. Make it what ever you have just follow sequence of my answer. — Jay Rathod, May 20 '16 at 11:10
Accept and upvote the answer if it is helpful to you thanks :). — Jay Rathod, May 20 '16 at 11:12
I have also one question if I have one more linearlayout inside how I can do it. means same TextView and 2 buttons — Pritish, May 20 '16 at 11:16
If you use that kind the performance of the UI will not as you expected. You will not able to use `Relative Layout's` properties anymore. Best way to do is as this. If you need more two buttons then you can take new 1 `Linear Layout` and add that below other layouts. — Jay Rathod, May 20 '16 at 11:28

score 0 · Answer 2 · answered May 20 '16 at 11:11

Replace relative with linear you will get your desired output.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0B95BA"
    android:minWidth="25px"
    android:minHeight="25px">
    <LinearLayout
        android:id="@+id/linearLayoutCont"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="5dp">
        <TextView
            android:id="@+id/txtViewCont"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Contact Billing"
            android:gravity="center"
            android:textSize="25sp"
            android:textColor="#FFFFFF" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/linearLayoutContBillingCall"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@id/linearLayoutCont"
        android:layout_marginTop="5dp">
        <Button
            android:text="Call"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:textSize="15sp"
            android:textColor="#FFFFFF"
            android:layout_gravity="right"
            android:background="@drawable/ButtonStyle"
            android:id="@+id/btnContCall"
            android:drawableLeft="@drawable/PhoneCall" />
        <Button
            android:text="Email"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:textSize="15sp"
            android:textColor="#FFFFFF"
            android:layout_gravity="right"
            android:background="@drawable/ButtonStyle"
            android:id="@+id/btnEmail"
            android:drawableLeft="@drawable/Email" />
    </LinearLayout>
</LinearLayout>

That's what in the code. LineayLayout for Textview and LineraLayout for buttons — Akash Amin, May 20 '16 at 11:25
I already implement it you jsut replace the relative layout with LinearLayout. I want TextView and Button in one Layout — Pritish, May 20 '16 at 11:26
I think that's not possible using Linear Layout. Because you want buttons side by side and for that you will required another layout. If you want to use one layout for both go for Grid Layout. https://developer.android.com/reference/android/widget/GridLayout.html — Akash Amin, May 20 '16 at 11:34
You should never do this, regardless of the situation. Nested LinearLayouts have terrible performance. — adelphus, May 20 '16 at 11:38
TableLayout is supported on all android versions , while GridLayout requires level 11 (Android ICS 4.0 ) or higher , but it can be easily added through support librarry v7 to support level 7( Android 2.1) or higher....From the link http://stackoverflow.com/questions/7088821/grid-layout-vs-table-layout — Akash Amin, May 20 '16 at 12:02

Combine two LinearLayouts into one LinearLayout

2 Answers2