Help on Layout Issue


Last Updated:

  1. joevj

    joevj Member This Topic's Starter

    Joined:
    Nov 1, 2010
    Messages:
    18
    Likes Received:
    1
    Hi guys,

    I have an issue with keeping things aligned in my layout. I have a nested LinearLayout & RelativeLayout.


    my xml is below..

    Code (Text):
    1.  
    2.  
    3. <?xml version="1.0" encoding="utf-8"?>
    4.  
    5. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
    6.    
    7.   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="10">
    8.            
    9.           <RadioGroup android:layout_width="wrap_content" android:orientation="vertical" android:layout_height="fill_parent">
    10.                   <RadioButton android:id="@+id/radioAmount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Amount"/>
    11.                   <RadioButton android:id="@+id/radioInt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Int"/>
    12.                   <RadioButton android:id="@+id/radioTerm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Term"/>
    13.                   <RadioButton android:id="@+id/radioEMI" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="EMI"/>
    14.                 </RadioGroup>
    15.            
    16.            
    17.           <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="fill_parent">
    18.                          
    19.                     <TextView android:id="@+id/labelAmount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/theAmount" />
    20.                     <EditText android:id="@+id/entryAmount" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background" android:layout_below="@id/labelAmount" android:inputType="numberDecimal" android:layout_marginBottom="10dip"/>      
    21.                
    22.                        
    23.                     <TextView android:id="@+id/labelInt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/entryAmount" android:text="The Interest:" />
    24.                     <EditText android:id="@+id/entryInt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background" android:layout_below="@id/labelInt" android:inputType="numberDecimal" android:layout_marginBottom="10dip" />
    25.                        
    26.                     <TextView android:id="@+id/labelTerm" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/entryInt" android:text="The Term (months):" />
    27.                     <EditText android:id="@+id/entryTerm" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background" android:layout_below="@id/labelTerm" android:inputType="numberDecimal" android:layout_marginBottom="10dip" />
    28.                        
    29.                     <TextView android:id="@+id/labelEMI" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/entryTerm" android:text="@string/theEMI" />    
    30.                     <EditText android:id="@+id/entryEMI" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background" android:layout_below="@id/labelEMI" android:inputType="numberDecimal" android:layout_marginBottom="10dip"/>
    31.                            
    32.                 </RelativeLayout>
    33.          
    34.         </LinearLayout>
    35.          
    36.     <LinearLayout
    37.         android:layout_weight="1" android:orientation="horizontal" android:layout_height="wrap_content" android:layout_width="fill_parent">
    38.          
    39.         <Button
    40.             android:id="@+id/buttonCalculate"
    41.             android:layout_width="wrap_content"
    42.             android:width="200dip"
    43.             android:text="@string/butCalc"
    44.             android:lines="1"
    45.             android:layout_centerHorizontal="true"
    46.             android:height="20dip" android:gravity="center_vertical|center_horizontal" android:layout_height="wrap_content"/>          
    47.          
    48.     </LinearLayout>
    49.      
    50. </LinearLayout>
    51.  
    52.  
    When I see this in Eclipse, it looks like "Layout in Eclipse.jpg" {attached} It had issues, but thought the alignment was better.

    But When I see this Emulator (or my mobile), it looks like "Layout in Emulator.jpg" {attached}. Its much worse!


    I want the radio button to be aligned with each text box. I tried to wrap it vertically and i thought it would get aligned automatically. It turned to be not that easy...


    Can someone help me fix the issue...


    thanks in advance
     

    Attached Files:


    Advertisement
  2. AlbertPucciani

    AlbertPucciani Well-Known Member

    Joined:
    Oct 2, 2010
    Messages:
    71
    Likes Received:
    8
    See the attachment. I think you might have that button pressed. You'll have better luck with the layout if you do heights in dip (density independent pixels) or learn how fill_parent and wrap_content work.

    Also, it might make more sense to have horizontal rows rather than two columns with their own independent horizontal rows.

    Hope that helps
    Albert
     

    Attached Files:

  3. droidotheplains

    droidotheplains Member

    Joined:
    Nov 11, 2010
    Messages:
    15
    Likes Received:
    1
    In order to use RelativeLayout effectively you should extend it and @Override its onLayout(), where you'd have to calculate a left, top, right, and bottom for each of its children then call each child's layout(). You get its children overriding the onFinishInflate() and get the size of the area you're working in overriding onSizeChanged(), quite complicated but well worth the effort; it allows you absolute control over all the sizes and alignments of all of the children. You would also include the RadioGroup as one of your sub-class's children.

    The easy way would be to use TableLayout and TableRow and add a RadioButton, then a TextView then a EditText to each TableRow and you would get better alignments than you have.
    Code (Text):
    1.  
    2. <TableLayout>
    3.    <TableRow>
    4.     <RadioButton></RadioButton><TextView></TextView><EditText></EditText>
    5.    </TableRow>
    6.    <TableRow>
    7.     <RadioButton></RadioButton><TextView></TextView><EditText></EditText>
    8.    </TableRow>
    9. </TableLayout>
    10.  
    11.  
    ,etc, but I'm not sure if you can use the RadioGroup, because then each radio button would have to be a child of two different parents, I'm pretty sure that's not doable. Do your RadioButtons mutually exclude each other?
     
  4. joevj

    joevj Member This Topic's Starter

    Joined:
    Nov 1, 2010
    Messages:
    18
    Likes Received:
    1
    thanks both.

    @albert,
    the snapshot was taken for easy understanding. I have to keep the radios together otherwise it will not function as a group.

    @droidotheplains,
    I thought about table. but as u said, radio will not be functioning as it should.

    but as much I have tried out, my logic of wrapping 4 radio and 4 other sets vertically side by side should make it aligned. but no idea why its not.

    pls suggest some modification on this. otherwise i have to scrap this and try something new.
     
  5. aguywithathing

    aguywithathing Member

    Joined:
    Oct 12, 2010
    Messages:
    18
    Likes Received:
    5
    The eclipse editor is quite flakey, here is a quick fix solution for you:

    What I did was pad the initial RadioGroup with a bottom margin of 62dip, this was to compensate for the TextView elements in the Relative Layout. Then applied a layout_weight of 1 to all the Radio buttons, this evenly distributes their height within the parent view.

    Code (Text):
    1. <?xml version="1.0" encoding="utf-8"?>
    2.  
    3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
    4.    
    5.   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="10">
    6.            
    7.           <RadioGroup android:layout_width="wrap_content" android:orientation="vertical" android:layout_height="fill_parent" android:layout_marginBottom="62dip">
    8.                   <RadioButton android:id="@+id/radioAmount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Amount" android:layout_weight="1"/>
    9.                   <RadioButton android:id="@+id/radioInt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Int" android:layout_weight="1"/>
    10.                   <RadioButton android:id="@+id/radioTerm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Term" android:layout_weight="1"/>
    11.                   <RadioButton android:id="@+id/radioEMI" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="EMI" android:layout_weight="1"/>
    12.                 </RadioGroup>
    13.            
    14.            
    15.           <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="fill_parent">
    16.                          
    17.                     <TextView android:id="@+id/labelAmount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="theAmount" />
    18.                     <EditText android:id="@+id/entryAmount" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/labelAmount" android:inputType="numberDecimal" android:layout_marginBottom="10dip"/>      
    19.                
    20.                        
    21.                     <TextView android:id="@+id/labelInt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/entryAmount" android:text="The Interest:" />
    22.                     <EditText android:id="@+id/entryInt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/labelInt" android:inputType="numberDecimal" android:layout_marginBottom="10dip" />
    23.                        
    24.                     <TextView android:id="@+id/labelTerm" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/entryInt" android:text="The Term (months):" />
    25.                     <EditText android:id="@+id/entryTerm" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/labelTerm" android:inputType="numberDecimal" android:layout_marginBottom="10dip" />
    26.                        
    27.                     <TextView android:id="@+id/labelEMI" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/entryTerm" android:text="theEMI" />    
    28.                     <EditText android:id="@+id/entryEMI" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/labelEMI" android:inputType="numberDecimal" android:layout_marginBottom="10dip"/>
    29.                            
    30.                 </RelativeLayout>
    31.          
    32.         </LinearLayout>
    33.          
    34.     <LinearLayout
    35.         android:layout_weight="1" android:orientation="horizontal" android:layout_height="wrap_content" android:layout_width="fill_parent">
    36.          
    37.         <Button
    38.             android:id="@+id/buttonCalculate"
    39.             android:layout_width="wrap_content"
    40.             android:width="200dip"
    41.             android:text="butCalc"
    42.             android:lines="1"
    43.             android:layout_centerHorizontal="true"
    44.             android:height="20dip" android:gravity="center_vertical|center_horizontal" android:layout_height="wrap_content"/>          
    45.          
    46.     </LinearLayout>
    47.      
    48. </LinearLayout>
    See attached.
     

    Attached Files:

    joevj likes this.
  6. droidotheplains

    droidotheplains Member

    Joined:
    Nov 11, 2010
    Messages:
    15
    Likes Received:
    1
    Never mind
     
  7. joevj

    joevj Member This Topic's Starter

    Joined:
    Nov 1, 2010
    Messages:
    18
    Likes Received:
    1
  8. droidotheplains

    droidotheplains Member

    Joined:
    Nov 11, 2010
    Messages:
    15
    Likes Received:
    1
    Greetings,

    Upon reading this thread I became rather obsessed with finding a solution to the problem of alignment discussed herein and have implemented one. It actually makes the RadioGroup the slave of each EditText with regard to its alignment and size within the context of the LinearLayout within which both the RadioGroup and the LinearLayout within which the EditTexts reside reside.

    It functions as designed, but I'm not sure if it's proper. All comments and criticisms are welcomed and encouraged.

    An .apk file and the source code are attached. Add new lines to any of the EditText widgets to increase their height, or press "Bigger" to increase the height of all of them by 10px.

    At least I learned something.
     

    Attached Files:

Share This Page

Loading...