Dividing a RelativeLayout into two halves

Question

Hi I have created a RelativeLayout containing 2 buttons, a radio button and a graph view.

I want to display two different data in graph now.

How do I split the RelativeLayout into two halves?

This is my present XML code:

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

    <Button
        android:id="@+id/BtnStart"
        android:layout_width="100dip"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="5dip"
        android:text="SlaveEnable" />

    <Button
        android:id="@+id/BtnStop"
        android:layout_width="100dip"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="5dip"
        android:layout_toRightOf="@id/BtnStart"
        android:text="SlaveDisable" />

    <RadioButton
        android:id="@+id/BtnSaveFile"
        android:layout_width="100dip"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@id/BtnStop"
        android:text="SaveFile" />

    <helog.diwesh.NugaBest.GraphView
        android:id="@+id/gview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/BtnStart"
        android:layout_alignParentRight="true" />

</RelativeLayout>

I did not get question here? What exactly you want to do? do you want to add two graphs in screen, both occupying equal space ? or you can upload sample drawing showing desired layout. — Sagar, Aug 26 '13 at 04:27
Yes my present layout is a relative layout with a graphview showing ECG signals in wave form . I want to now divide this graph into half and in the other half show the signals of respiration . Three buttons are there at the bottom which should be there at the same place — Rahul Sharma, Aug 26 '13 at 04:32

Kevin Coppock · Answer 1 · 2013-08-26T05:03:33.123

So, for this, the best way I've found (which feels like a total hack, but works like a charm) is to have a zero-size View aligned to the center of the layout, then align the left half to the left of that View, the align the right half to the right of that View. For example:

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

    <View
        android:id="@+id/anchor"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/left_side"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/anchor"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="5dip"
        android:text="Left Side" />

    <Button
        android:id="@+id/right_side"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/anchor"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="5dip"
        android:text="Right Side" />

</RelativeLayout>

Hi thanks I tried this but it gave me the following error : error: Error: String types not allowed (at 'layout_toRightOf' with value 'anchor'). — Rahul Sharma, Aug 26 '13 at 04:26
Fixed. Just forgot the ID, but that's a common one you should be able to check into. — Kevin Coppock, Aug 26 '13 at 05:03

Sagar · Accepted Answer · 2013-08-26T05:29:07.870

2

Try this layout. This should work with some changes if not perfect. This will add two graphs.

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

    <Button
        android:id="@+id/BtnStart"
        android:layout_width="100dip"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="5dip"
        android:text="SlaveEnable" />

    <Button
        android:id="@+id/BtnStop"
        android:layout_width="100dip"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="5dip"
        android:layout_toRightOf="@id/BtnStart"
        android:text="SlaveDisable" />

    <RadioButton
        android:id="@+id/BtnSaveFile"
        android:layout_width="100dip"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@id/BtnStop"
        android:text="SaveFile" />

<LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
            android:layout_above="@id/BtnStart"
            android:layout_alignParentRight="true"
        android:orientation="vertical" 
    android:weightSum="2" >

    <helog.diwesh.NugaBest.GraphView
                android:id="@+id/gview1"
                android:layout_height="0dp"
                android:layout_width="match_parent"
        android:layout_weight="1" />

    <helog.diwesh.NugaBest.GraphView
                android:id="@+id/gview2"
                android:layout_height="0dp"
                android:layout_width="match_parent"
        android:layout_weight="1" />

</LinearLayout>

</RelativeLayout>

edited Aug 26 '13 at 05:29

answered Aug 26 '13 at 04:50

Sagar

1,242
7
22
49

Thanks something similar . But the first rouble is that the two graphviews are like vertically but I require horizontal like screen divided into two . Also both the graphs are looking exactly duplicate copies of each other . There Is something like values on the first graph but I want to put something else on the canvas . eg : my graphview comprised of HR and temperature on the canvas , now I want to paste the Respiratory details on the canvas . – Rahul Sharma Aug 26 '13 at 04:58
@RahulSharma: Can draw simple sketch of desired layout and upload? it will be easier to understand. – Sagar Aug 26 '13 at 05:17
I know @sagar but unfortunately I don't have enough reputation points to paste a screenhot as I am new .......But let me try to show something in text ---------------------------------------------------------- graphview1 : temperature --------------------------------------------------------------- graphview2 : respiration -------------------------------------------------------------- 3 button – Rahul Sharma Aug 26 '13 at 05:20
@RahulSharma : when we ask question there is option in top bar of editor to add image. I don't think it has reputation restriction. – Sagar Aug 26 '13 at 05:25
Thanks a ton brother . Ok and I checked it takes 10 reputation points to add image . Now the trouble is that the two graphviews are replica of each other . The upper one is fine but the lower one should have a different caption there ... Also in my class file on which I created the first canvas object mcanvas , can it be simply corporated by creating another canvas object mcanvas2 and pointing my Graphview to gview2 like mGraphView = (GraphView) findViewById(R.id.gview2); – Rahul Sharma Aug 26 '13 at 05:54
I tried running your layout but it just gives me a blank black screen and I see some signal running at the very bottom where the buttons are – Rahul Sharma Aug 26 '13 at 06:14
@RahulSharma: it should work by creating another canvas object as you said. – Sagar Aug 26 '13 at 07:18
:it is unfortunately not displaying even the previous data ... The layout in output has gone completely blank – Rahul Sharma Aug 26 '13 at 07:21
@RahulSharma: I do not have android setup on my machine so can not simulate this layout here. It is difficult to say what went wrong. Try giving different background color to buttons and linear layout. It will show exactly how much space is occupied by that element. – Sagar Aug 26 '13 at 07:24
I do see a small graphical line going just below where the buttons are ..... but I think it is hidden behind the three buttons below . – Rahul Sharma Aug 26 '13 at 07:26
Suppose if I am able to see the graph , is there a way that I can save a history of it everytime I run my application ? – Rahul Sharma Aug 26 '13 at 07:39
@RahulSharma : Consider asking different question. This is out of scope of current question. – Sagar Aug 26 '13 at 21:47

Ye Lin Aung · Answer 3 · 2013-08-26T04:34:43.307

0

This should work. I removed the RelativeLayout with LinearLayout for using layout_weight.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight=".50" >

        <Button
            android:id="@+id/BtnStart"
            android:layout_width="100dip"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dip"
            android:text="SlaveEnable" />

        <Button
            android:id="@+id/BtnStop"
            android:layout_width="100dip"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dip"
            android:text="SlaveDisable" />

        <RadioButton
            android:id="@+id/BtnSaveFile"
            android:layout_width="100dip"
            android:layout_height="wrap_content"
            android:text="SaveFile" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight=".50" >

        <helog.diwesh.NugaBest.GraphView
            android:id="@+id/gview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

</LinearLayout>

edited Aug 26 '13 at 04:34

answered Aug 26 '13 at 03:15

Ye Lin Aung

11,234
8
45
51

Thanks for the prompt reply @ Ye Lin Aung .... But when I paste your code and see in the graphical layout . I see no changes . – Rahul Sharma Aug 26 '13 at 03:19
Hi thanks I got the following error : The markup in the document following the root element must be well-formed. – Rahul Sharma Aug 26 '13 at 04:28
fixed again. you can try. – Ye Lin Aung Aug 26 '13 at 04:35
Thanks for all your efforts . It worked very close to what I required . I have to though put the graphview on the top and the buttons at the bottom , which I was able to manage by just reversing your code . however my other half comes out to be a simple layout . How to make that other half also look like a graphview ? – Rahul Sharma Aug 26 '13 at 04:45
you mean the below path also a graphview ? – Ye Lin Aung Aug 26 '13 at 04:47
Yes please , the one below should also be a graph view – Rahul Sharma Aug 26 '13 at 05:00

Dividing a RelativeLayout into two halves

3 Answers3