Apps Help on Layout Issue

[joevj]

Hi guys,

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


my xml is below..

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
    
  <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">
            
          <RadioGroup android:layout_width="wrap_content" android:orientation="vertical" android:layout_height="fill_parent">
                  <RadioButton android:id="@+id/radioAmount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Amount"/>
                  <RadioButton android:id="@+id/radioInt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Int"/>
                  <RadioButton android:id="@+id/radioTerm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Term"/>
                  <RadioButton android:id="@+id/radioEMI" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="EMI"/>
                </RadioGroup>
            
            
          <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="fill_parent">
                          
                    <TextView android:id="@+id/labelAmount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/theAmount" />
                    <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"/>      
                
                        
                    <TextView android:id="@+id/labelInt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/entryAmount" android:text="The Interest:" />
                    <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" />
                        
                    <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):" />
                    <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" />
                        
                    <TextView android:id="@+id/labelEMI" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/entryTerm" android:text="@string/theEMI" />     
                    <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"/>
                           
                </RelativeLayout>
          
        </LinearLayout>
          
    <LinearLayout
        android:layout_weight="1" android:orientation="horizontal" android:layout_height="wrap_content" android:layout_width="fill_parent">
          
        <Button
            android:id="@+id/buttonCalculate"
            android:layout_width="wrap_content"
            android:width="200dip"
            android:text="@string/butCalc"
            android:lines="1"
            android:layout_centerHorizontal="true"
            android:height="20dip" android:gravity="center_vertical|center_horizontal" android:layout_height="wrap_content"/>          
          
    </LinearLayout>
      
</LinearLayout>

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

 

[AlbertPucciani]

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

 

[droidotheplains]

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.

<TableLayout>
   <TableRow>
    <RadioButton></RadioButton><TextView></TextView><EditText></EditText>
   </TableRow>
   <TableRow>
    <RadioButton></RadioButton><TextView></TextView><EditText></EditText>
   </TableRow>
</TableLayout>

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

 

[joevj]

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.

 

[aguywithathing]

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.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
    
  <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">
            
          <RadioGroup android:layout_width="wrap_content" android:orientation="vertical" android:layout_height="fill_parent" android:layout_marginBottom="62dip">
                  <RadioButton android:id="@+id/radioAmount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Amount" android:layout_weight="1"/>
                  <RadioButton android:id="@+id/radioInt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Int" android:layout_weight="1"/>
                  <RadioButton android:id="@+id/radioTerm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="Term" android:layout_weight="1"/>
                  <RadioButton android:id="@+id/radioEMI" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:tag="EMI" android:layout_weight="1"/>
                </RadioGroup>
            
            
          <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="fill_parent">
                          
                    <TextView android:id="@+id/labelAmount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="theAmount" />
                    <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"/>      
                
                        
                    <TextView android:id="@+id/labelInt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/entryAmount" android:text="The Interest:" />
                    <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" />
                        
                    <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):" />
                    <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" />
                        
                    <TextView android:id="@+id/labelEMI" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/entryTerm" android:text="theEMI" />     
                    <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"/>
                           
                </RelativeLayout>
          
        </LinearLayout>
          
    <LinearLayout
        android:layout_weight="1" android:orientation="horizontal" android:layout_height="wrap_content" android:layout_width="fill_parent">
          
        <Button
            android:id="@+id/buttonCalculate"
            android:layout_width="wrap_content"
            android:width="200dip"
            android:text="butCalc"
            android:lines="1"
            android:layout_centerHorizontal="true"
            android:height="20dip" android:gravity="center_vertical|center_horizontal" android:layout_height="wrap_content"/>          
          
    </LinearLayout>
      
</LinearLayout>

See attached.

 

[droidotheplains]

Never mind

 

[joevj]

thanks everybody. I got my layout in a better shape.

click below to see the result.

Android Adventures: Getting the alignment right.

 

[droidotheplains]

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.