Develop Reference

My app layout is different from activity_main layout design

I'm trying to make a imperial to metric conversion app, which is going fine, until I ran into problems with the Android Emulator. The layout is totally screwed up in the Emulator, and I have no idea why. http://imgur.com/a/IBOcs
EDIT:
The whole activity_main.xml code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.daniel.converter.MainActivity"
tools:layout_editor_absoluteY="73dp"
tools:layout_editor_absoluteX="0dp">
<TextView
android:id="#+id/textViewMPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MPH"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="90dp" />
<EditText
android:id="#+id/editTextMPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="77dp" />
<TextView
android:id="#+id/textViewTO"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="To"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="132dp" />
<TextView
android:id="#+id/textViewKMH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="KMH"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="168dp" />
<EditText
android:id="#+id/editTextKMH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="156dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Convert!"
tools:layout_editor_absoluteX="146dp"
tools:layout_editor_absoluteY="229dp" />
</android.support.constraint.ConstraintLayout>

Issue is happening because you are using constraint layout but you have not provided any constraints for your items. Thus, every item is shown at (0,0) position.
Contraint Layout description:
The layout editor allows you to place widgets anywhere on the canvas, and it records the current position with designtime attributes (such as layout_editor_absoluteX.) These attributes are not applied at runtime, so if you push your layout on a device, the widgets may appear in a different location than shown in the editor. To fix this, make sure a widget has both horizontal and vertical constraints by dragging from the edge connections.
So either assign x and y values or use LinearLayout/RelativeLayout.

Why these ImageButtons(delete and update) are overlaying

this .xml will be the layout of the item in the RecycleView list, but the last two Buttons are overlaying
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#Ffffff"
android:baselineAligned="false"
android:weightSum="1">
<LinearLayout android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:background="#drawable/favorite"
android:layout_marginRight="5dip">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="25dip"
android:layout_height="25dip"
android:background="#null"
android:src="#drawable/nofavorite"/>
</LinearLayout>
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/thumbnail"
android:layout_toRightOf="#+id/thumbnail"
android:text="Rihanna Love the way lie"
android:textColor="#040404"
android:typeface="sans"
android:textSize="15dip"
android:textStyle="bold"/>
<TextView
android:id="#+id/artist"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#343434"
android:textSize="10dip"
android:layout_toRightOf="#+id/thumbnail"
android:text="Just gona stand there and ..."
android:layout_below="#+id/text_view" />
<ImageButton android:layout_width="wrap_content"
android:id="#+id/update"
android:layout_height="wrap_content"
android:src="#drawable/nofavorite"
android:background="#null"
android:layout_alignRight="#+id/artist" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:id="#+id/delete"
android:src="#drawable/favorite"
android:layout_alignRight="#+id/artist"
/>
</RelativeLayout>
they should be in the end of the right, in the end the DELETE button and in the left of this button but in the right end of the screen the UPDATE button, i will bind something to this buttons later
and another question, how can i make a divider btw the items?
thank you =)

It is because you use layout_alignRight="#+id/artist" on both images which essentially align right edges of the 2 images with the right edge of the View with id artist. To achieve what you want, use layout_alignParentRight="true" on the DELETE button and layout_toLeftOf="#+id/delete" on the UPDATE button. By the way, why do you need layout_weightSum on the parent. It only works with LinearLayout.
For making divider between items, you can either use a background with the left (right) border on one of the items or put a view between them.

Your buttons need to have attributes setting their position relatively to each other. At the moment, the only indication regarding their position is:
android:layout_alignRight="#+id/artist"
That is not enough to place your components since you are using a RelativeLayout (which is good). I suggest you play around with the parameters using the visual editor in you IDE.
One thing to keep in mind is that the component described last in your XML file is the one which should have the position attributes relativ to the other component. So in your case, your DELETE button.

Android XML layout bug

I have an XML layout that has a google map, two text views, and a button in a relative layout. The text views are below the google map with the text values "Latitude:" and "Longitude:" that get updated to "Latitude:xxx" and "Longitude"xxx" when the user moves the cursor on the map. The submit button says "Submit" and does just that, it packages lat/lon in an intent and passes it to the next activity.
This was all fine until I started messing with the layout. I noticed that because I had lazily been using the Graphical design tool in eclipse, everything had set dimensions, meaning on bigger screens it looked silly.
I added another relative layout and placed the lat/long texts and the submit button into it, and placed the new layout under the other relative layout that now only has the MapView.
My intent was to use android:layout_weight to assign the bottom relative layout around 15% or so of the screen on the botton, and the rest of the screen would be the google map.
Physically the dimensions were fine. However if I had the textviews dependant on the submit button at all (android:layout_above/below), the submit button's text would take on the value of the textview dependant on it and would get updated, while the textview would be stuck at "lat/long:" and would not get updated.
I currently have the textviews just set at the top of the relative layout and the independent submit button on the bottom and it works fine. I was just curious as to what the heck was happening.
Here is my xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="80" >
<com.google.android.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mapView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:apiKey="xxx"
android:clickable="true"
android:enabled="true" >
</com.google.android.maps.MapView>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="20" >
<TextView
android:id="#+id/Latitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Latitude:" />
<TextView
android:id="#+id/Longitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/Latitude"
android:text="Longitude:" />
<Button
android:id="#+id/submitbutton"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:onClick="GOTOUPLOADER"
android:text="Submit" />
</RelativeLayout>
And here is the only (i think) relevant code that works with this xml file. Notice that I don't do anything with the button text here. It isn't even an attribute in this class. The only interaction the button has with this class is that it calls a method to start another activity when it is clicked.
//setupmap()instantiates mapview and centers on the given location
public void setupmap()
{
getcoords();//setup coordinates
lattext.setText("Latitude: "+String.valueOf(Lat));
lontext.setText("Longitude: "+String.valueOf(Long));
mapView = (MapView) findViewById(R.id.mapView);//instantiate mapview
mapView.setBuiltInZoomControls(true);//able to zoom
mcontrol = mapView.getController();//mapcontroller contains methods to manipulate mapview
mcontrol.animateTo(point);//zoom to our geopoint
mcontrol.setZoom(19);//zoom level 1-21. 1=world view, 21=as zoomed in as possible
MyOverlay over = new MyOverlay();//instantiate overlay
listofoverlays = mapView.getOverlays();//create a list of overlays
listofoverlays.clear();//clear list
listofoverlays.add(over);//add our overlay
mapView.invalidate();//invalidate for changes to take effect
}//setupmap
Please forgive all the comments.

Okay, I am still not certain I understand your issue fully but to start trying to resolve this:
What I have done here is taken your code and placed the relational positioning back on it. Note that if you relate one object to another then you must place the object you want to reference below the object be referred to. This is due to the id not being in the generated R.java until it is declared with android:id=#+id/object. In this instance if you want to declare an object as above another then we build from the bottom up.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:baselineAligned="false"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="80" >
<com.google.android.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mapView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:apiKey="xxx"
android:clickable="true"
android:enabled="true" >
</com.google.android.maps.MapView>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="20" >
<Button
android:id="#+id/submitbutton"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Submit" />
<TextView
android:id="#+id/Longitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_above="#id/submitbutton"
android:text="Longitude:" />
<TextView
android:id="#+id/Latitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/Longitude"
android:layout_alignParentLeft="true"
android:text="Latitude:" />
</RelativeLayout>
</LinearLayout>
Edit:
Judging by your example, you're issue appears to be in your java. How are you calling on TextView to use the setText you show?
See example below:
TextView lattext = (TextView)findViewById(R.id.Latitude);
lattext.setText("Latitude: " + String.valueOf(Lat));
// And
TextView lontext= (TextView)findViewById(R.id.Longitude);
// Avoid using "Long", Long is reserved... If I am unsure of whether text is reserved
// I will always place my initials in front of it... i.e. "String.valueOf(jjLong));"
lontext.setText("Latitude: " + String.valueOf(Lon));

How to make a fill parent+wrap_content (in that order) Android

I'll try to simplify the problem for avoiding long code pieces: I want to do something like that in my layout
The structure should be easy with something like:
LinearLayoutA (vertical)
LinearLayoutB (vertical)
LinearLayoutC (horizontal)
LinearLayoutC' (horizontal)
LinearLayoutB' (vertical)
LinearLayoutC'' (horizontal)
LinearLayoutC''' (horizontal)
All with weight=1
the problem for me is define what to put within the LinearLayoutC. So focusing now the elements inside LinearLayoutC:
My first option was another LinearLayout (vertical) the problem is that if the image is taller than the LinearLayoutC the TextView is not visible.
So I used that RelativeLayout:
<RelativeLayout
android:id="#+id/RelativeLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Eiffel"
android:textSize="45sp"
android:id="#+id/text"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
></TextView>
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/eiffel2"
android:id="#+id/image"
android:layout_above="#id/text"
android:layout_centerHorizontal="true"></ImageView>
</RelativeLayout>
Nice it works! But not for long =(. (We will call it from now RelativeLayout1) When the screen is smaller than the views the layout seems perfect but when going into a larger screen the block is aligned to the bottom of the parent and I'd like it to be centered in the screen (or the sublayout). Like shows that screen:
That is because of the android:layout_alignParentBottom="true" at the TextView.
Trying to solve that I used a RelativeLayout2 for wrap the RelativeLayout1 with a code like:
<RelativeLayout2
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout1
android:layout_centerInParent="true"
.....
></RelativeLayout1>
</RelativeLayout2>
But even with that the layout RelativeLayout1 still aligned to the bottom of the image (and filling all the screen vertically as it had a height= fill_parent and I don't understand why is that happening and how can I solve it. Please can you help me? I've tried for hours. Thanks in advance

Add
android:adjustViewBounds="true" in your ImageView

remove the android:layout_alignParentBottom="true" from the textview and add this to your root relativelayout tag android:layout_centerInParent="true"

I had debug your code .. try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/RelativeLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity = "center_vertical" >
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/eiffel2"
android:id="#+id/image"
android:layout_centerHorizontal = "true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Eiffel"
android:textSize="45sp"
android:id="#+id/text"
android:layout_below = "#+id/image"
android:layout_centerHorizontal = "true"
/>
</RelativeLayout>

use android:layout_height="wrap_content" for your second RelativeLayout

set
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
in the ImageView and the TextView, and then use a LinearLayout (with gravity= center) as container and it work

Have you considered using TableLayout? It is best suited for grid like views such as this one. You can even specify weights for different columns, etc. and have different column widths.

How to align Button to the right, without being overlapped by TextView?

I'm trying to get something like this: http://img202.imageshack.us/img202/552/layoutoy.png. I'm using this as a list item (technically as the group view of an ExpandableListView).
Here's the XML file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight">
<TextView
android:id="#+id/list_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end" />
<Button
android:id="#+id/list_item_button"
android:text="Click me!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/list_item_text" />
</RelativeLayout>
But this doesn't work. The Button doesn't wrap its contents, instead it uses all available horizontal space. The TextView does wrap its contents, but what I want it to do is to cut off when it overlaps the Button.
In other words, I want all the buttons to be of the same width, regardless of the amount of text in the textviews. Is this at all possible?

I think you should try it the other way round.
Make the TextView be to the left of the button. This way the Textview won't overlap the Button. If you want it to be cut of at the end of the line you have to constrain it to one line. At the moment it would just move the rest of the text to the next line.
This should do the trick:
<Button
android:id="#+id/list_item_button"
android:text="Click me!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<TextView
android:id="#+id/list_item_text"
android:text="veryveryveryveryveryveryveryveryveryverylong"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/list_item_button"
android:ellipsize="end" />
</RelativeLayout>

Before anyone tries the method shown above (with the RelativeLayout), you should use LinearLayout for this. The weights should be set correctly: the element that needs to take up the empty space has to have a weight of 1 and a width set to fill_parent, and the element that needs to keep its minimal size has to have a weight of 0 with a width of wrap_content.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight">
<TextView
android:id="#+id/list_item_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=1
android:ellipsize="end" />
<Button
android:id="#+id/list_item_button"
android:text="Click me!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=0/>
</LinearLayout>