Can someone explain the correct way to use android:layout_to

Put problem concerning Views, Layouts and other XML-Resources (like AndroidManifest) here.

Can someone explain the correct way to use android:layout_to

Postby jonnale » Wed Dec 30, 2009 11:14 pm

A little background info: I am a C++ developer who has worked very little with Java. Picking up Java wasn't very difficult since I know C++, but I am still playing around with the SDK. (In C++, my favorite SDK/API is Qt)

Anyway, I am trying to stick to the Model-View-Controller design philosophy, and was setting up the UI in XML. However, it is not working out the way I wanted it too. I am trying to write a simple app (to help get started with learning the SDK), where there are 4 buttons, all of which cause a different operation on a value in a textview. For example, the textview starts out at 100, and I have 4 buttons: +1, -1, +5, -5. When you press +1, it adds 1 to the value in the textview. When you press -5, it subtracts 5 from the value in the textview, etc etc...

That part is working fine, the buttons are doing what they need to do, however, I am trying to setup the UI as follows:

[TextView]
[+1] [-1]
[+5] [-5]

Basically, I want all the "+ buttons" in one column, and all the "- buttons" in another column. I figured I would use a relativeLayout, however, it is not working the way I want it to. I am getting the following:

[TextView] [-5]
[+1]
[+5]

(the -1 button is totally missing)

I have tried to narrow down possible errors in my code, and I have come to the conclusion that either I am using android:layout_toRightOf wrong, or I misunderstand how this command is implemented.

Here is my main.xml file:
(note: bu1p = button for +1, bu1m = button for -1 [p=positive m=minus]. I also have a custom button in there, so there are really 6 buttons in total)

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <RelativeLayout
  4.  
  5.         xmlns:android="http://schemas.android.com/apk/res/android"
  6.  
  7.    android:layout_width="fill_parent"
  8.  
  9.    android:layout_height="fill_parent"
  10.  
  11.         >
  12.  
  13.         <TextView
  14.  
  15.                 android:id = "@+id/nums"
  16.  
  17.         android:layout_width="fill_parent"
  18.  
  19.         android:layout_height="wrap_content"
  20.  
  21.         android:textSize = "20sp"
  22.  
  23.         android:text = "100"
  24.  
  25.    />
  26.  
  27.         <Button
  28.  
  29.                 android:id = "@+id/bu1p"
  30.  
  31.                 android:layout_width="70sp"
  32.  
  33.                 android:layout_height="wrap_content"
  34.  
  35.         android:text = "+1"
  36.  
  37.         android:layout_below="@id/nums"
  38.  
  39.         />
  40.  
  41.         <Button
  42.  
  43.                 android:id = "@+id/bu1m"
  44.  
  45.                 android:layout_width="70sp"
  46.  
  47.                 android:layout_height="wrap_content"
  48.  
  49.         android:text = "+1"
  50.  
  51.         android:layout_toRightOf="@id/bu1p"
  52.  
  53.         />
  54.  
  55.  
  56.  
  57.         <Button
  58.  
  59.                 android:id = "@+id/bu5p"
  60.  
  61.                 android:layout_width="70sp"
  62.  
  63.                 android:layout_height="wrap_content"
  64.  
  65.         android:text = "+5"
  66.  
  67.         android:layout_below="@id/bu1p"
  68.  
  69.         />
  70.  
  71.         <Button
  72.  
  73.                 android:id = "@+id/bu5m"
  74.  
  75.                 android:layout_width="70sp"
  76.  
  77.                 android:layout_height="wrap_content"
  78.  
  79.         android:text = "-5"
  80.  
  81.         android:layout_toRightOf="@id/bucm"
  82.  
  83.         />
  84.  
  85.         <Button
  86.  
  87.                 android:id = "@+id/bucp"
  88.  
  89.                 android:layout_width="70sp"
  90.  
  91.                 android:layout_height="wrap_content"
  92.  
  93.                 android:text = "Custom"
  94.  
  95.         android:layout_below="@id/bu5p"
  96.  
  97.         />
  98.  
  99.         <Button
  100.  
  101.                 android:id = "@+id/bucm"
  102.  
  103.                 android:layout_width="70sp"
  104.  
  105.                 android:layout_height="wrap_content"
  106.  
  107.                 android:text = "Custom"
  108.  
  109.               android:layout_toRightOf="@id/bucp"
  110.  
  111.         />
  112.  
  113. </RelativeLayout>
  114.  
  115.  
Parsed in 0.006 seconds, using GeSHi 1.0.8.4

(Sorry for the weird tab formatting, it didn't copy over correctly from Eclipse)

Again, just to clarify, this is how I want the UI to look:
[TextView]
[+1] [-1]
[+5] [-5]
[+c] [-c]

(c is the custom value)

Any help is greatly appreciated. I am not even sure a relative layout is the best way to accomplish this task.

Thank you!
jonnale
Junior Developer
Junior Developer
 
Posts: 22
Joined: Wed Dec 30, 2009 11:02 pm

Top

Postby powell » Wed Dec 30, 2009 11:33 pm

I am a beginner myself and I still have doubts, when building my layouts in xml file.

I sometimes look at: Droid Draw page, which can be helpful with simple layouts. Look what it generated for your requirements:


Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3. android:id="@+id/widget28"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. xmlns:android="http://schemas.android.com/apk/res/android"
  7. >
  8. <Button
  9. android:id="@+id/bucm"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:text="-c"
  13. android:layout_alignTop="@+id/bucp"
  14. android:layout_alignLeft="@+id/bu5m"
  15. >
  16. </Button>
  17. <Button
  18. android:id="@+id/bucp"
  19. android:layout_width="wrap_content"
  20. android:layout_height="wrap_content"
  21. android:text="+c"
  22. android:layout_below="@+id/bu5m"
  23. android:layout_alignLeft="@+id/bu5p"
  24. >
  25. </Button>
  26. <Button
  27. android:id="@+id/bu5m"
  28. android:layout_width="wrap_content"
  29. android:layout_height="wrap_content"
  30. android:text="-5"
  31. android:layout_alignTop="@+id/bu5p"
  32. android:layout_alignLeft="@+id/bu1m"
  33. >
  34. </Button>
  35. <Button
  36. android:id="@+id/bu5p"
  37. android:layout_width="wrap_content"
  38. android:layout_height="wrap_content"
  39. android:text="+5"
  40. android:layout_below="@+id/bu1m"
  41. android:layout_alignLeft="@+id/bu1p"
  42. >
  43. </Button>
  44. <Button
  45. android:id="@+id/bu1m"
  46. android:layout_width="wrap_content"
  47. android:layout_height="wrap_content"
  48. android:text="-1"
  49. android:layout_alignTop="@+id/bu1p"
  50. android:layout_toRightOf="@+id/bu1p"
  51. >
  52. </Button>
  53. <Button
  54. android:id="@+id/bu1p"
  55. android:layout_width="wrap_content"
  56. android:layout_height="wrap_content"
  57. android:text="+1"
  58. android:layout_below="@+id/widget29"
  59. android:layout_toRightOf="@+id/widget29"
  60. >
  61. </Button>
  62. <TextView
  63. android:id="@+id/nums"
  64. android:layout_width="wrap_content"
  65. android:layout_height="wrap_content"
  66. android:text="TextView"
  67. android:layout_alignParentTop="true"
  68. android:layout_alignParentLeft="true"
  69. >
  70. </TextView>
  71. </RelativeLayout>
  72.  
Parsed in 0.007 seconds, using GeSHi 1.0.8.4


Hope this helps.
powell
Freshman
Freshman
 
Posts: 9
Joined: Tue Sep 08, 2009 9:31 am

Postby jonnale » Thu Dec 31, 2009 12:05 am

I just figured out the problem, and it's so obvious it is almost embarrassing.

This was my thinking:
android:toRightOf would take value of x-axis and y-axis, and simply just add some value to the x-axis value so that the object would be to the right of the object given.

However, that is not the case. It does in fact take the value of the x-axis, but it DOES NOT take the value of the y-axis.

For every object, I simply needed to do the following:

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <Button
  2.  
  3.                 android:id = "@+id/bu1m"
  4.  
  5.                 android:layout_width="70sp"
  6.  
  7.                 android:layout_height="wrap_content"
  8.  
  9.         android:text = "-1"
  10.  
  11.         android:layout_toRightOf="@id/bu1p"
  12.  
  13.         android:layout_below="<insert object that it goes below>"
  14.  
  15.         />
Parsed in 0.001 seconds, using GeSHi 1.0.8.4
jonnale
Junior Developer
Junior Developer
 
Posts: 22
Joined: Wed Dec 30, 2009 11:02 pm

Top

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: No registered users and 4 guests