Good day everyone, currently i'm trying to make my first Android app, and then the first thing i realized, that idiotic XML UI designing.
I have this 2 view (button) and i'd like to make them so the first one fill the half of the parent (RelativeLayout) and the second one fills the other half of the parent...
My Code is:
<Button
android:id="#+id/Top1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/Top2"
android:text="top1"/>
<Button
android:id="#+id/Top2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/Top1"
android:text="TOP2"/>
The problem, that i'm get this error:
"No resource found that matches the given name (at 'layout_toLeftOf' with value '#id/Top2')."
It seems, that not even Android want to use XML.
Like an old C program where if a method is written below the call, it will give an error...
So i have 2 question:
1: How to solve this problem in the XML?
2: Or can i avoid this XML designing, and use code-like design like in C# ?
There are a few ways you can go about this and I provided you with two ways to have buttons aligned side by side.:
Use a LinearLayout with orientation set as horizontal
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/btn_container">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Left Button"
android:layout_weight="1"
android:id="#+id/btn_left" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Right Button"
android:id="#+id/btn_right" />
</LinearLayout>
Use a RelativeLayout and an extra View to align your buttons.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/strut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/btn_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#id/strut"
android:text="Left Button" />
<Button
android:id="#+id/btn_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/strut"
android:layout_alignParentRight="true"
android:text="Right Button" />
</RelativeLayout>
You are correct, Top2 needs to be defined first in the XML before you can refer to it. That being said, if all you are doing is putting 2 buttons next to each other and have them fill the parent, you should consider using a LinearLayout. Order is important there, too: for horizontal orientation the children are laid out left to right, for vertical they are laid out top to bottom.
Related
I want to make an base calculator app, so i started to make buttons for each number and operation. To keep them align i used an RelativeLayout but under it i have five LinearLayouts, each LinerarLayout represents a row of buttons.
My problem is the following, after i use layout_alignBottom to the first row in order to keep it at the bottom of the screen, i tried to use layout_above to align the second row above the first but it seems that i can't do that because i get an No resource found that matches the given name (at 'layout_above' with value '#id/firstRow'). error, in fact i get this error for all the alignments attributes.
Here is a part of my xml
<LinearLayout
android:id="#+id/secondRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#id/firstRow">
<Button
android:id="#+id/b1"
android:layout_width="85dp"
android:layout_height="85dp"
android:text="1" />
<!-- more buttons -->
</LinearLayout>
<LinearLayout
android:id="#+id/firstRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<Button
android:id="#+id/bP"
android:layout_width="85dp"
android:layout_height="85dp"
android:layout_marginLeft="0dp"
android:text="." />
<!-- more buttons -->
</LinearLayout>
How can i align the LinearLayouts in an way that the first row is at the bottom of the screen and the others are one above each others ?
The XML is rendered from top to bottom, therefore, if you want to add a reference to an element that is after the one you are adding the reference to, you need to call #+id instead of #id. In your case you should write this:
android:layout_above="#+id/firstRow"
This happens because at the time you are running the code from your first LinearLayout, Android doesn't have any element registered with the id "firstRow" since it wasn't compiled yet, so you need to add the + meaning that if it find any reference later on, it will be set, if not, it just aligns the view without the reference.
Try using android:layout_toStartOf and android:layout_toEndOf
You're doing this in a more complicated way than is necessary.
Just wrap them in a vertical oriented linear layout.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/b1"
android:layout_width="85dp"
android:layout_height="85dp"
android:text="1" />
<!-- more buttons -->
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/b1"
android:layout_width="85dp"
android:layout_height="85dp"
android:text="3" />
<!-- more buttons -->
</LinearLayout>
<!-- Your rows in order from top to bottom -->
</LinearLayout>
I am trying to display 4 ImageButtons at the bottom of the layout. I am able to get only 3 ImageButtons. The fourth ImageButton is not visible. and here is my code for that.
I am using Relative Layout for to display the application.
<ImageButton
android:id="#+id/Button1"
android:layout_weight="1.0"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:longClickable="true"
android:layout_width="wrap_content"
android:layout_height="75sp"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton2"/>
<ImageButton
android:id="#+id/Button2"
android:layout_gravity="bottom"
android:layout_toRightOf="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="75sp"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton1"
android:layout_weight="1.0"
android:layout_marginLeft="2dp"
android:longClickable="true"/>
<ImageButton
android:id="#+id/Button3"
android:layout_gravity="bottom"
android:layout_toRightOf="#+id/Button2"
android:layout_height="75sp"
android:layout_width="wrap_content"
android:layout_weight="1.0"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton1"
android:layout_marginLeft="2dp"
android:longClickable="true"/>
<ImageButton
android:id="#+id/Button4"
android:layout_gravity="bottom"
android:layout_height="75sp"
android:layout_width="wrap_content"
android:layout_weight="1.0"
android:background="#android:color/transparent"
android:src="#drawable/imagebutton1"
android:layout_marginLeft="2dp"
android:longClickable="true"
android:layout_alignParentRight="true"/>
Put it in a LinearLayout with weights and align this LinearLayout tot he bottom of the parent like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true" >
<ImageButton
android:id="#+id/ib1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/ib2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/ib3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/ib4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
Note that this method will decrease the performance somewhat.
First you need to remove this from your ImageButton attributes if you want to keep using RelativeLayout as their parent layout:
android:layout_weight="1.0"
It is used in LinearLayout, Lint should be giving you a warning about it (invalid layout param in RelativeLayout).
If you want your 4 buttons to show in the bottom of the screen you need to include
android:layout_alignParentBottom="true"
in all 4 ImageButtons, I tried the xml you provide and only the 1st button is showing in the bottom.
And last but not least, if you want your button to have the same size to have some design consistency, I would suggest putting them in a horizontal LinearLayout with
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
and configure the ImageButtons with
android:layout_width="0dp"
android:layout_weight="1.0"
then include that LinearLayout in your RelativeLayout.
Another thing : since you're using
android:layout_width="wrap_content"
for your ImageButtons, you need to make sure the image is not too wide, otherwise some of your buttons might not be shown on screen because the first one(s) is taking too much space, leaving the last one(s) to the right of your screen.
On a side note, I hope you're not trying to make a iOS-style lower tab bar, this is frowned upon in Android, more info here ...
Have a good one !
Like some people say, in the last button, you don't have android:layout_toRightOf = "#id/Button3" so it's going to be in the top of the layout.
Other way to do this that I usually do is:
android:layout_toRightOf = "#id/Button1"
android:layout_alignbottom = #id/Button1"
It's going to align with the bottom of the button1. I do this because sometimes this button isn't align with the other one, depends of the layout.
At the last ImageButton you don't have:
android:layout_toRightOf="#+id/Button3"
You will need this if you want it to be at the bottom.
I would also suggest that you remove some of your code:
android:layout_gravity="bottom"
android:layout_weight="1.0"
This only works in FrameLayout or LinearLayout.
If you want to know for sure every ImageButton is at the bottom of the screen use what you used for the first button:
android:layout_alignParentBottom="true"
I have in my Android app a fairly simple Activity that displays three buttons, each launching a different Activity. Currently, I use a RelativeLayout to center the middle button both horizontally and vertically, then place the top and bottom buttons 30dp off the middle one (and also horizontally centered).
What I'd like to do, however, is make the buttons stretch to be a certain percentage of the screen width. I can't figure out how to do this and keep the buttons centered. Is there a good object I can use as a "filler" in a LinearLayout on either side of the buttons (so I could just set the weights)? Or is there a way to do this that doesn't involve a LinearLayout?
The XML for the layout as it stands is:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
android:onClick="button1Callback"
android:text="#string/button1Label" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="button2Callback"
android:text="#string/button2Label" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:text="#string/button3Label" />
</RelativeLayout>
Sure. View or Frame both work.
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View android:layout_height="0dp"
android:layout_width="0dp"
android:layout_weight="60" />
<Button android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="20" />
<View android:layout_height="0dp"
android:layout_width="0dp"
android:layout_weight="20" />
</LinearLayout>
works fine as a spacer and seems to be utterly harmless as far as I can tell. I use this quite a bit in my app (although honestly, most of my buttons are fixed-width).
At one point I actually wrote a custom view with proportional layout. But in the end I ended up not using it at all. In almost all cases you can get equivalent proportional layout with judiciously applied weights in a linear layout.
I have this header:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dip">
<Button android:id="#+id/home"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Home"
/>
<Button android:id="#+id/questions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Questions"
/>
<Button android:id="#+id/questions"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Questions"
android:layout_toRightOf="#+id/home" />
<Button android:id="#+id/businesses"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Businesses"
android:layout_toRightOf="#+id/businesses"
/>
<Button android:id="#+id/learn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Learn"
android:layout_toRightOf="#+id/learn"
/>
<Button android:id="#+id/extra_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Help"
android:layout_toRightOf="#+id/learn"
/>
</RelativeLayout>
and for some reason, the buttons display 50% on top of each other all bunched up, each covering half of the other.
Any idea what is wrong with my layout?
Thanks!
You are using a relative layout, you need to manage both horizontal and vertical alignment. For example, all the android:layout_toRightOf are used for horizontal positioning, you need to also add attributes to handle the vertical positioning.
All the possible attributes are found here:
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
UPDATE
Seeing your comments below, it seems you just want to have one horizontal row. In that case, just make sure each is aligned to the previous one(But then why not use a linear layout?)
Check your id's though, and #+id/learn is aligned to the right of itself. Revisit that. And you also have a button right after "Home" that isn't handled at all.
Looks like there's a plenty of questions about centering, same size etc, but so far I didn't find the exactly my case so I dare to ask :)
What I need is a layout of three buttons like this:
[ previous ][*select*] [ next ]
where [previous] and [next] buttons are of the same size (i.e. in this case, size of the [previous] button as it is bigger), and the [*select*] button should stretch to occupy all of the available width.
Following the hints of making two buttons in LinearLayout same sized, i came up with the following xml file:
<LinearLayout
android:id="#+id/button_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Previous" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Select" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Next" />
</LinearLayout>
This almost works :)
Except one thing: instead of making Next button to match the size of Previous button, android makes Previous button to be the size of the Next :)
And because of this the text "Previous" gets wrapped in two lines, like
Previ
ous
Dunno if this is a bug or not, but can you advice me a workaround or some another way to achive the desired layout?
Thank you!
I'd suggest using a RelativeLayout
<RelativeLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false">
<Button
android:id="#+id/previous"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="Previous"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/next"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="Next"
android:layout_alignParentRight="true"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Select"
android:layout_toRightOf="#id/previous"
android:layout_toLeftOf="#id/next" />
</RelativeLayout>
This should work.
If you are including "android:layout_weight" you should give either "android:layout_width" or "android:layout_height" as "fill_parent"
modify your code like this
<LinearLayout
android:id="#+id/button_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Previous" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:text="Select" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Next" />
In that sort of case I would go for a TableLayout, in which you have one row, and a weight of 1 for EACH button. and the stretchColumn attribute put to column 1. Does this make any difference?
I'm not sure if you can match a size to some other besides by doing this in code. The easiest solution is probably adjusting the previous and next button widths in dp/sp units until they look good and have the select button be the only one with the layout_weight attribute.