CODEWITHSUNDEEP
androidandroid-layoutandroid-sdk-2.3
jakobiyem
jakobiyem

Reputation: 107

How to divide screen with three different-sized panel in android?

i want to create a screen like this on the android : 

enter image description here
and achieving this, i write some codes like that.. But i didn't do what i want. The text area doesn't exist in the screen. What should i do ? Any opinion.. thank you in advance..

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/linearLayout123" 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:weightSum="1.0"
        android:gravity="fill">

    <LinearLayout
        android:id="@+id/linearLayout12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top" >

     <Button android:id="@+id/button1"              
         android:layout_width="wrap_content"                                          
         android:layout_height="wrap_content"           
         android:text="Hello, I am a Button" />

        </LinearLayout>


    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="118dp"
        android:layout_height="fill_parent"
        android:layout_gravity="right"
        android:orientation="vertical" >

         <Button android:id="@+id/button2"              
         android:layout_width="wrap_content"                                          
         android:layout_height="wrap_content"           
         android:text="Hello, I am a Button" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="228dp"
        android:layout_height="fill_parent"
        android:layout_gravity="left" >

           <TextView 
                android:id="@+id/text2"              
                android:layout_width="wrap_content"             
                android:layout_height="wrap_content"              
                android:text="Hello, I am a TextView" />

           </LinearLayout>


    </LinearLayout>

Upvotes: 1

Views: 3779

Answers (2)

dymmeh
dymmeh

Reputation: 22306

A RelativeLayout will accomplish what you want

<?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">

     <LinearLayout
        android:id="@+id/rightLayout"
        android:layout_width="100dip"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:background="#003300"
        android:orientation="vertical" >
    </LinearLayout>


    <LinearLayout
        android:id="@+id/topLayout"
        android:layout_toLeftOf="@id/rightLayout"
        android:layout_width="fill_parent"
        android:layout_height="100dip"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="#330033"
        android:orientation="vertical" >
    </LinearLayout>

    <LinearLayout
        android:id="@+id/bottomLayout"
        android:layout_toLeftOf="@id/rightLayout"
        android:layout_below="@id/topLayout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:background="#334433"
        android:orientation="vertical" >
    </LinearLayout>

</RelativeLayout>

The result as LinearLayouts and as Buttons/TextViews (since I wasn't sure which you wanted):

Result Result2

If you are using the LinearLayouts as a container to hold multiple views then leave it as I have it.

If you plan on having only one view in each of your "parts" change the LinearLayouts in my layout file to that type. Ex. if you want Part 1 to be just a button change 

<LinearLayout
        android:id="@+id/topLayout"

to be 

<Button
        android:id="@+id/topLayout"

Nested views are bad so its good to avoid them if you can

Upvotes: 6

Jayyrus
Jayyrus

Reputation: 13061

you could :

Main linear layout with vertical alignment
add a new linear layout with horizontal alignment
add a new linear layout with horizontal or vertical alignment

So in the first layout ( the left part of main layout) you add a new linear layout with horizontal alignment and add the two elements you want. In the second layout ( the right part of main layout) you add a new linear layout or directly the object you want to show

Upvotes: 1

Related Questions