CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-fragmentsandroid-studio
Bhetzie
Bhetzie

Reputation: 2932

Nested vertical layout in horizontal layout

I'm creating an android app and I want to create a layout that has two buttons side by side and three buttons underneath. An example of what I am trying to do can be found here:

http://mycolorscreen.com/2014/11/29/flatdrop-zw-skin/

I am struggling to get the two buttons to be side by side in a horizontal linear layout and also have the three buttons in a vertical linear layout. Since the first linear layout is horizontal it will make my buttons become horizontal as well. My code is as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:weightSum="1">

<TextView
        android:layout_width="164dp"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/textView2"
        android:layout_gravity="left"
        android:layout_weight="0.1" />

    <TextView
        android:layout_width="174dp"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/textView"
        android:layout_gravity="right"
        android:layout_weight="0.1" />

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    style="@style/AppTheme"
    android:longClickable="false"
    android:weightSum="1">



    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btnFitnessGoalsDefaultString"
        android:textColor="#FFFFFF"
        android:id="@+id/btnFitnessGoals"
        android:background="@drawable/buttondefault"
        android:layout_marginBottom="10dp"
        android:layout_weight="0.10"
        android:layout_gravity="top" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="@string/btnNutritionGoalsDefaultString"
        android:textColor="#FFFFFF"
        android:id="@+id/btnNutritionGoals"
        android:background="@drawable/buttondefault"
        android:layout_weight="0.10" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btnBonusEventsDefaultString"
        android:textColor="#FFFFFF"
        android:id="@+id/btnBonusEvents"
        android:background="@drawable/buttondefault"
        android:layout_weight="0.10" />
</LinearLayout>
</LinearLayout>

Upvotes: 2

Views: 15257

Answers (5)

Sinan G.
Sinan G.

Reputation: 61

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1">

    <TextView
        android:id="@+id/costOperatingText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Operating cost:" />

    <TextView
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="0"/>
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="6">

    <TextView
        android:id="@+id/earnings"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Daily Earnings:  " />

    <TextView
        android:id="@+id/earningsValue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="0" />
</LinearLayout>

Upvotes: 0

Son Nguyen Thanh
Son Nguyen Thanh

Reputation: 1209

This layout will work fine with all device screen. try with it .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<!-- 2 buttons side by side -->

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <!-- btn 1 -->

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#00ff00"
        android:foreground="?android:attr/selectableItemBackground" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Button 1" />
    </FrameLayout>

    <!-- btn 2 -->

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#446600"
        android:foreground="?android:attr/selectableItemBackground" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Button 2" />
    </FrameLayout>
</LinearLayout>

<!-- three buttons underneath -->

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="2"
    android:orientation="vertical" >

    <!-- btn 3 -->

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#dd77ff"
        android:foreground="?android:attr/selectableItemBackground" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Button 3" />
    </FrameLayout>
    <!-- btn 4 -->

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#9977ff"
        android:foreground="?android:attr/selectableItemBackground" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Button 4" />
    </FrameLayout>
    <!-- btn 5 -->

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#1277ff"
        android:foreground="?android:attr/selectableItemBackground" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Button 5" />
    </FrameLayout>
</LinearLayout>

Upvotes: 0

Alain Goy&#233;
Alain Goy&#233;

Reputation: 21

A little bit simpler:

<LinearLayout
  android:orientation="vertical">

  <LinearLayout
     android:orientation="horizontal">

       <!-- horizontal buttons here -->

  </LinearLayout>

       <!-- vertical buttons here -->

</LinearLayout>

Upvotes: 0

Hemanth
Hemanth

Reputation: 2737

Use something like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

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

        <Button
                android:id="@+id/button3"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:text="Button" />

            <Button
                android:id="@+id/button5"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:text="Button" />

    </LinearLayout>

</LinearLayout>

Upvotes: 2

Shooky
Shooky

Reputation: 1299

You need to do something like this 

<LinearLayout
    android:orientation="vertical">

      <LinearLayout
         android:orientation="horizontal">

           <!-- horizontal buttons here -->

      </LinearLayout>

      <LinearLayout
        android:orientation="vertical">

           <!-- vertical buttons here -->

      </LinearLayout>
</LinearLayout>

Upvotes: 6

Related Questions