Develop Reference

Two buttons overlap in android app

First and foremost, I am new to Android Development, so this question might sound a little juvenile, but I am not able to get an answer to this. I have an app in which I need to display two different buttons side-by-side. I have specified the tags necessary to this and they run in one emulator but not in the other. Below is my code for button design:
file_name.xml:
<RelativeLayout>
//some code here
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="50dp"
android:layout_height="50dp"
android:paddingTop="15dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="36dp"
android:layout_marginStart="36dp"
android:layout_marginBottom="36dp" />
<Button
android:id="#+id/button2"
android:layout_width="45dp"
android:layout_height="45dp"
android:paddingTop="15dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="96dp"
android:layout_marginStart="36dp"
android:layout_marginBottom="36dp"
android:layout_toRightOf="#+id/button1" />
</RelativeLayout>
Is there something wrong with my tags, because as far as my knowledge goes, layout_toRightOF will place button2 after button1's layout completes. Also I have statically provided marginLeft for both.
Both the buttons appear in one emulator(google play services installed) and not in other(google play services not installed). Is it because of google play services not installed? Or some fault in the design of my buttons?
Any kind of help would be helpful.
Thank You in advance.

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="1"
android:id="#+id/button1"
android:layout_width="50dp"
android:layout_height="50dp"
android:paddingTop="15dp"
android:layout_marginLeft="36dp"
android:layout_marginStart="36dp"
android:layout_marginBottom="36dp" />
<Button
android:text="2"
android:id="#+id/button2"
android:layout_width="45dp"
android:layout_height="45dp"
android:paddingTop="15dp"
android:layout_marginLeft="96dp"
android:layout_marginStart="36dp"
android:layout_marginBottom="36dp"
android:layout_toRightOf="#+id/button1" />
</RelativeLayout
Hope this helps

Is it necessary to use relative layout ??
If you need two button side by side you can just use one linear horizontal. So something like this.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="10"
android:orientation="horizontal"
>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
/>
</LinearLayout>
Relative layouts provides you more flexibility but it has to do two measure passes (Reference). So, it's better if you go with linear layout.

Android Xml button layout

I have a problem while placing the buttons in my xml file.
Now what I want is that the "ok" button at the bottom should come below the mileage edit text that is at the second last strip. I am using a scroll view before the button. Also I am using a single image as a background.
How is it possible that all my buttons in my application only come on the second last strip (gray color)? The rest of the layout should come in between (i.e. between top gray strip and the bottom gray strip).
I tried using margin_top or margin_bottom in 'dp' but its not coming properly plus on every other phone the layout of button changes. Here is my code (.xml file):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/menu"
android:padding="10dp">
<ScrollView
android:id="#+id/scv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="105dp"
android:layout_marginBottom="105dp" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:ems="10"
android:hint="Year"
android:inputType="date" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/editText1"
android:layout_alignRight="#+id/editText1"
android:layout_below="#+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner1"
android:layout_alignRight="#+id/spinner1"
android:layout_below="#+id/spinner1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<Spinner
android:id="#+id/spinner3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner2"
android:layout_alignRight="#+id/spinner2"
android:layout_below="#+id/spinner2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner3"
android:layout_below="#+id/spinner3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:ems="10"
android:hint="Mileage"
android:inputType="number" />
</RelativeLayout>
</ScrollView>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:text="OK" />
</RelativeLayout>

You should never use a single image for your complete layout on Android. That just doesn't run very well as you have so many different screen sizes.
I'd recommend you cut the graphic out in portions and make it stretch so it will fit depending on the screen size. It's not really possible to help you much more based on the poorly copy paste of your own code and the lack of visualization of what you want the graphic to look like.

For your button xml, try
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scv"
android:layout_centerHorizontal="true"
android:text="OK" />
You can add android:layout_marginTop="5sp" changing the value if necessary.
This will place your button below your scrollview.

Cannot completely fill the screen with RelativeLayout and cannot resize on Keyboard opening

So here is my XML. I am trying to fill the whole screen and when I view it in Eclipse, it fills the whole screen. However, when I open it on my phone, everything is smaller and there are views overlaying. I don't know what's going on.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/front"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Front"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/frontInput"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_below="#+id/front"
android:ems="10" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/frontInput"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Back"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/backInput"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/back"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:ems="10"
android:inputType="textMultiLine" />
<TextView
android:id="#+id/background"
android:layout_width="wrap_content"
android:layout_marginLeft="5dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/backInput"
android:layout_marginTop="44dp"
android:text="Background"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Spinner
android:id="#+id/colors_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/backInput"
android:layout_marginLeft="30dp"
android:layout_marginTop="22dp"
android:layout_toRightOf="#+id/background"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/colors_spinner" >
<Button
android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</RelativeLayout>
this is what it looks in Eclipse.
But I get this:
Another thing is that when I open the keyboard my view does not rezise so you can see everything but smaller so you can see what you are typing etc... I have added the android:windowSoftInputMode="adjustResize" for the specific activity but nothing is happening... Any ideas? Thanks guys...

If you use adjustResize it will resize everything to fit as best it can. The other option is adjustPan, which will scroll the window so that the focused EditText will be in the view and the caret visibile. Other than that there's no real way to control things.
In your case you have some exact heights in there, so it won't work well with a resize, since you can't shrink an exact height.
Also, never trust how things look in Eclipse. Its an attempt to lay things out that shares no code with how Android really does things, it should be viewed as an estimate. Real layouts may end up looking significantly different, especially for complex layouts.

XML layout overlapping text issue

I used relativelayout and here is what I've got. I can't get the image to fill the section I want. I don't know how to fix it. I've heard something about using layout weight, is that some thing I should use?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background">
<ImageView
android:id="#+id/imagehome"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_margin="10dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvtitle1"
android:src="#drawable/one" />
<TextView
android:id="#+id/tvtitle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Voted Best Dentist five years running by"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvtitle2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="6dp"/>
<TextView
android:id="#+id/tvtitle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="The Oakland Tribune"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvhome"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"/>
<TextView
android:id="#+id/tvhome"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" You&apos;ll be cared for by our highly trained staff of dental professionals,energized to work as a team while providing the highest quality of care for your dental health. We offer complete dentistry for the entire family at a single location. "
android:textColor="#4C2016"
android:textSize="15dp"
android:layout_centerHorizontal="true"
android:layout_above="#+id/special"
android:layout_marginBottom="25dp" />
<Button
android:id="#+id/special"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:text="Specials"
android:textColor="#F6E6C6"
android:textSize="17dp"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvbutton"
android:layout_marginBottom="15dp" />
<TextView
android:id="#+id/tvbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App provided by Bay Area Dental Marketing"
android:layout_centerHorizontal="true"
android:textSize="10dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
on the xml file,
and on the device
It got better but it'snot there yet!

Not sure how much flexibility you have but the best solution would be to remove the text and image from the background and add them as views instead. As you have experienced unless each piece is added as a view it is nearly impossible to guarantee it will look correct on all devices.

When working with multiple screen sizes, I have found it best practice to either (a) use RelativeLayout, or (b) set a LinearLayout inside a ScrollView.

Use RelativeLayout so you won't have to specify the pixels.
Alternativley if you are doing that for one particular phone select corresponding screen size in the XML designer in Eclipse. Yet, using RelativeLayout guarantees it will work on all the phones

Even using the suggested answers above you may still run into problem on different size screens. The best solution I can think of is to create separate image resources for the background and foreground then add an image view with the foreground image as the source.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background" >
<!-- This method makes this layout redundant, dont need this anymore
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="23dip"
android:layout_marginRight="15dip"
android:layout_marginTop="255dip"
android:orientation="vertical" >-->
<!-- put the foreground image in an imageview -->
<ImageView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/foregroundImage"/>
<TextView
android:layout_width="276dp"
android:layout_height="132dp"
android:textSize="15dp"
android:gravity="center_vertical"
android:text="some text"
android:textColor="#4C2016"/>
<Button
android:id="#+id/special"
android:layout_width="131dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:layout_marginTop="20dip"
android:layout_marginLeft="75dip"
android:textSize="17dp"
android:textStyle="bold"
android:text="Specials"
android:textColor="#F6E6C6" />
</LinearLayout>

android can android:gravity do this?

Searched all day and came up with a poor solution i think.
i want three ImageButton placed on the right sida of the screen.
Not centered but just above center position..
With the code below i get the result i want but,
If the user have a bigger screen they will not have this position right?
I have tried the android:gravityall day and all i can do with it is
to center the three buttons very nicely.
What should i use to make the three buttons always stay at the positions that
they are on the image belove.
i have the button image in 3 different sizes in hdpi,mdpi,xhdpi folder.
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="A"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="B"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_A"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="C"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_B"
/>
</RelativeLayout>
Picture of the three buttons placed on the right side, and my daughter of course.

One option would be to put all three buttons within a LinearLayout (for simplicity's sake) and then set the layout of this container programmatically.
You can see the size of the screen using getResources().getDisplayMetrics().heightPizels and then set the top margin accordingly.

You could add a LinearLayout inside the RelativeLayout, and then use the following properties on the LinearLayout:
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
EDIT: Ok, I've done some testing and found a way of doing what you want without the use of styling it programatically, here's the xml:
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="80dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
</LinearLayout>
</RelativeLayout>