Android, layout_width and width, alignBaseline, TableLayout and layout_span related questions

Question

[First, sorry, I couldn't come up with a more intelligent question title.]

Okay, hang with me while you read this long post.

I am new to Android, this is my very first dummy Pizza Order application. I am playing with XML layouts and have got some questions.

• The editText_CardNo goes out of screen, its column isn't stretching, why? (Image)

[EDIT]

• Can I specify a global layout_marginRight for all TableRow?

Resolved

• I have aligned elements using alignBaseline but I don't see it working.
• In the Crust section i have done layout_span="2" but no use, the second radio button's text still wraps. (Image)

• Inner Tables e.g. TableLayout inside TableRow appear really ugly, only left half is visible, also tried with adding layout_span inside TableLayout or the TableRow containing it but no use. (Image)

• How can I collapse the subsections e.g. TableLayout inside TableRow using properties?

main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="@+id/scrollView_PizzaOrder"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" 
android:layout_height="wrap_content">

<TableLayout android:id="@+id/tableLayout_PizzaOrder"
android:shrinkColumns="0"
android:stretchColumns="1"
android:layout_gravity="left"
android:layout_width="fill_parent" 
android:layout_height="fill_parent">

<TableRow android:id="@+id/tableRow_PizzaType"
android:layout_marginTop="10px" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">


<TextView android:text="Type" 
android:id="@+id/textView_Type"
android:textStyle="bold"
android:layout_alignBaseline="@+id/spinner_Type"     
android:layout_width="wrap_content" 
android:layout_height="wrap_content">
</TextView>


<Spinner android:id="@+id/spinner_Type"
android:drawSelectorOnTop="true" 
android:layout_width="200px" 
android:layout_height="wrap_content">
</Spinner>  
</TableRow>




<TableRow android:id="@+id/tableRow_PizzaSize" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">


<TextView android:text="Size" 
android:id="@+id/textView_Size"  
android:textStyle="bold"
android:layout_alignBaseline="@+id/spinner_Size" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content">
</TextView>


<Spinner android:id="@+id/spinner_Size"
android:drawSelectorOnTop="true"
android:layout_marginBottom="20px"   
android:layout_width="200px" 
android:layout_height="wrap_content">
</Spinner>
</TableRow>



<TableRow android:id="@+id/tableRow_Crust" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">

<RadioGroup android:id="@+id/radioGroup_Crust" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content">

<RadioButton android:text="Single Crust" 
android:id="@+id/radioButton_SingleCrust"
android:checked="true" 
android:layout_span="2"
android:layout_width="wrap_content" 
android:layout_height="wrap_content">
</RadioButton>

<RadioButton android:text="Double Crust" 
android:id="@+id/radiobutton_DoubleCrust"
android:layout_span="2"
android:layout_marginBottom="20px" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content">
</RadioButton>



</RadioGroup>

</TableRow>


<TableRow android:id="@+id/tableRow_Toppings"  
android:layout_width="fill_parent" 
android:layout_height="wrap_content">

<CheckBox android:text="Extra Toppings?" 
android:id="@+id/checkbox_ExtraToppings"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</CheckBox>

</TableRow>


<TableRow android:id="@+id/tableRow_ToppingsTable"  
android:layout_width="fill_parent" 
android:layout_height="wrap_content">


<TableLayout android:id="@+id/tableLayout_Toppings"
android:layout_marginLeft="20px"      
android:layout_gravity="left"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TableRow android:id="@+id/tableRow_SelectToppings"
android:layout_width="fill_parent"
android:layout_height="wrap_content">


<CheckBox android:text="Olives"
android:id="@+id/checkbox_Olives"
android:checked="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</CheckBox>

<CheckBox android:text="Cheese"
android:id="@+id/checkbox_Cheese"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</CheckBox>

</TableRow>


<TableRow android:id="@+id/tableRow_SelectCustomToppings"
android:layout_width="fill_parent"
android:layout_height="wrap_content">

<CheckBox android:text="Custom"
android:id="@+id/checkbox_Custom"
android:layout_marginRight="10px"
android:layout_alignBaseline="@+id/editText_Custom"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</CheckBox>

<EditText android:text=""
android:id="@+id/editText_Custom"
android:singleLine="true"    
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</EditText>

</TableRow>
</TableLayout> 
</TableRow>






<TableRow android:id="@+id/tableRow_SeparaterDrinks" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">

<View android:layout_height="2px"
android:background="#884400"
android:layout_span="2"
android:layout_margin="25px" />

</TableRow>


<TableRow android:id="@+id/tableRow_Drinks"
android:layout_span="2" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">

<CheckBox android:text="Drinks?" 
android:id="@+id/checkbox_Drinks"
android:checked="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</CheckBox>
</TableRow> 


<TableRow android:id="@+id/tableRow_DrinksTable" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">

<TableLayout android:id="@+id/tableLayout_Drinks"
android:layout_marginLeft="20px"
android:layout_gravity="left"
android:layout_width="fill_parent"
android:layout_height="fill_parent">



<TableRow android:id="@+id/tableRow_SelectDrinksPepsi"
android:layout_width="fill_parent"
android:layout_height="wrap_content">

<!-- Drinks links, for now static generation, later use XML and Dynamic Generation -->

<CheckBox android:text="Pepsi"
android:id="@+id/checkbox_Pepsi"
android:checked="true"
android:layout_alignBaseline="@+id/textView_QuantityPepsi"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</CheckBox>

<TextView android:text="Quantity:"
android:id="@+id/textView_QuanityPepsi"
android:textStyle="bold"
android:layout_alignBaseline="@+id/editText_QuantityPepsi"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>

<EditText android:text="1"
android:id="@+id/editText_QuantityPepsi"
android:singleLine="true"
android:maxLength="3"
android:numeric="integer"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</EditText>


</TableRow> 




<TableRow android:id="@+id/tableRow_SelectDrinksCoke"
android:layout_width="fill_parent"
android:layout_height="wrap_content">


<CheckBox android:text="Coke"
android:id="@+id/checkbox_Coke"
android:layout_alignBaseline="@+id/textView_QuantityCoke"
android:layout_width="wrap_content"
android:layout_height="wrap_content">     
</CheckBox>

<TextView android:text="Quantity:"
android:id="@+id/textView_QuantityCoke"
android:textStyle="bold"
android:layout_alignBaseline="@+id/editText_QuantityCoke"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>

<EditText android:text="0"
android:id="@+id/editText_QuantityCoke"
android:singleLine="true"
android:maxLength="3"
android:numeric="integer"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</EditText>

</TableRow>



<TableRow android:id="@+id/tableRow_SelectDrinksSprite"
android:layout_width="fill_parent"
android:layout_height="wrap_content">


<CheckBox android:text="Sprite"
android:id="@+id/checkbox_Sprite"
android:layout_alignBaseline="@+id/textView_QuantitySprite"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</CheckBox>

<TextView android:text="Quantity:"
android:id="@+id/textView_QuantitySprite"
android:layout_alignBaseline="@+id/editText_QuanitySprite"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content">     
</TextView>

<EditText android:text="0"
android:id="@+id/editText_QuantitySprite"
android:singleLine="true"
android:maxLength="3"
android:numeric="integer"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</EditText>


</TableRow>



<TableRow android:id="@+id/tableRow_SelectDrinksMountainDew"
android:layout_width="fill_parent"
android:layout_height="wrap_content">


<CheckBox android:text="Mirinda"
android:id="@+id/checkbox_Mirinda"
android:layout_alignBaseline="@+id/textView_QuantityMirinda"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</CheckBox>

<TextView android:text="Quantity:"
android:id="@+id/textView_QuantityMirinda"
android:layout_alignBaseline="@+id/editText_QuantityMirinda"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>

<EditText android:text="0"
android:id="@+id/editText_QuantityMirinda"
android:singleLine="true"
android:maxLength="3"
android:numeric="integer"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</EditText>


</TableRow>


<TableRow android:id="@+id/tableRow_SelectDrinks7up"     
android:layout_width="fill_parent"
android:layout_height="wrap_content">


<CheckBox android:text="7up"
android:id="@+id/checkbox_7up"
android:layout_alignBaseline="@+id/textView_Quantity7up"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</CheckBox>

<TextView android:text="Quantity: "
android:id="@+id/textView_Quantity7up"
android:layout_alignBaseline="@+id/editText_Quantity7up"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>

<EditText android:text="0"
android:id="@+id/editText_Quantity7up"
android:singleLine="true"
android:maxLength="3"
android:numeric="integer"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</EditText>

</TableRow>
</TableLayout>
</TableRow>




<TableRow android:id="@+id/tableRow_SeparaterMember" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">

<View android:layout_height="2px"
android:background="#884400" 
android:layout_span="2"
android:layout_margin="25px" />

</TableRow>

<TableRow android:id="@+id/tableRow_Member" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">

<CheckBox android:text="Are you a Member?" 
android:id="@+id/checkbox_Member"
android:layout_span="2" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content">
</CheckBox>

</TableRow>

<TableRow android:id="@+id/tableRow_MemberData"
android:layout_marginLeft="20px" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">

<TextView android:text="Card #:" 
android:id="@+id/textView_CardNo" 
android:textStyle="bold"
android:layout_alignBaseline="@+id/editText_CardNo"
android:layout_width="wrap_content" 
android:layout_height="wrap_content">
</TextView>

<EditText android:text="" 
android:id="@+id/editText_CardNo"
android:singleLine="true"
android:maxLength="8"  
android:numeric="integer" 
android:layout_width="200px" 
android:layout_height="wrap_content">
</EditText>


</TableRow>

<TableRow android:id="@+id/tableRow_SeparaterMemberData" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">

<View android:layout_height="2px"
android:background="#884400"
android:layout_span="2"
android:layout_margin="25px" />


</TableRow>



<TableRow android:id="@+id/tableRow_Name" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">


<TextView android:text="Name:" 
android:id="@+id/textView_Name"
android:layout_alignBaseline="@+id/editText_Name"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>

<EditText android:text="" 
android:id="@+id/editText_Name"
android:singleLine="true"
android:maxLength="35"
android:layout_width="200px" 
android:layout_height="wrap_content">
</EditText>




</TableRow>

<TableRow android:id="@+id/tableRow_CellNumber" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">



<TextView android:text="Cell:" 
android:id="@+id/textView_Cell"
android:textStyle="bold"
android:layout_alignBaseline="@+id/editText_Cell"    
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>

<EditText android:text="" 
android:id="@+id/editText_Cell"
android:singleLine="true"
android:phoneNumber="true"
android:maxLength="15"
android:layout_width="200px" 
android:layout_height="wrap_content">
</EditText>

</TableRow>


<TableRow android:id="@+id/tableRow_Address" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">



<TextView android:text="Address:" 
android:id="@+id/textView_Address"
android:textStyle="bold"
android:layout_alignBaseline="@+id/editText_Address"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>

<EditText android:text="" 
android:id="@+id/editText_Address"
android:singleLine="true"
android:maxLength ="200"
android:layout_width="200px" 
android:layout_height="wrap_content">
</EditText>

</TableRow>


<TableRow android:id="@+id/tableRow_PlaceOrder" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content">


<Button android:text="Place Order!" 
android:id="@+id/button_PlaceOrder"  
android:onClick="placeOrder"
android:layout_column="1"        
android:layout_width="wrap_content" 
android:layout_height="wrap_content">
</Button>




</TableRow>

</TableLayout>
</ScrollView>

Answer 1

layout_alignBaseline is for RelativeLayout only. LinearLayout (and therefore TableLayout) perform baseline alignment by default.

The layout_span needs to go on the RadioGroup, not the RadioButtons.

The editText_CardNo goes out of screen because you set its width to android:layout_width="200px". This is too large. The column is stretched only when smaller than the screen. You want it to shrink. You can set a column both shrinkable AND stretchable.

How can i collapse the subsections e.g. TableLayout inside TableRow using properties? >> Use android:visibility="gone"