Defining a specific xml layout with a nested layout

Question

I am in the process of designing my first Android application and I am trying to get the hang of creating an XML layout. (I have a great deal of experience with Java)

Essentially what I wanna do:

Where the outlines describes:

Blue: A basic View (where i can set a text)

Red: A ButtonView (Used so the user can synchronize data)

Green: A nested RelativeLayout (Where i am going to add a lot of other stuff)

More specifically what i wanna do:

enter image description here

So my question is this: How can i set up the different layouts? I am having the must trouble with setting up the blue and red views because i want the red view to fill up around 25% of the screen width(and the blue to fill up the last 75%).

Thank you in advance.

Do you want to create custom layout? Because it looks like actionbar. But if you want to do it alone you are looking for android:layout_weight=".25" - it uses 25% of the space. Set the layout_width to 0dp or your views may not be scaled properly — Martin, Feb 14 '13 at 09:55
Well the intention is actually to make it like an actionbar - so if there is actually an easier way to do it then manually setting views, please let me know. And I have tried the weighting properties (and a lot of other ones) but i just cant seem to get it right. — NicoPanduro, Feb 14 '13 at 09:57

score 0 · Accepted Answer · answered Feb 14 '13 at 09:57

Use layout_weight property to specify the percentage of screen space a view takes.

Like here, for e.g:

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

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

           <EditText android:layout_height="wrap_content" android:layout_width="0dip"
           android:layout_weight="3"/>

           <Button android:layout_height="wrap_content" android:layout_width="0dip"
           android:layout_weight="1"/>

     </LinearLayout>

     //Other view

</LinearLayout>

This was simple enough to do it for me. I Thank you kind sir. — NicoPanduro, Feb 14 '13 at 11:03

Shridutt Kothari · Answer 2 · 2013-02-14T10:03:57.713

Use following xml, this is specially designed for you.

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_alignParentLeft="true"
        android:layout_weight="0.75">

        <TextView
            android:id="@+id/headingTextView"
            style="@android:style/TextAppearance.WindowTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:text="Cafe Vigeos"
            android:textColor="@android:color/white"
            android:textSize="30sp" />
         </RelativeLayout>
         <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_alignParentRight="true"
        android:layout_weight="0.25">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/nested_relative_layout"
        android:layout_width="match_parent"
        android:layout_height="fill_parent" >
    </RelativeLayout>

</LinearLayout>

Though I appreciate the extra effort, i couldn't quite get this to pan out. I was having trouble getting the button to acutally only fit the 25%. — NicoPanduro, Feb 14 '13 at 11:04

Defining a specific xml layout with a nested layout

2 Answers2