Develop Reference

Layout on phone & emulator quite different from designer

I am trying out a simple layout exercise but am struggling to get even a simple layout to work.
In the designer it is as follows:
But when run, the output on an emulator or real phone is:
The Xml markup is as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.hceng.myapplication.MainActivity"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E-mail:"
tools:layout_editor_absoluteY="52dp"
tools:layout_editor_absoluteX="18dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me!"
tools:layout_editor_absoluteX="148dp"
tools:layout_editor_absoluteY="96dp" />
<EditText
android:id="#+id/editText"
android:layout_width="266dp"
android:layout_height="36dp"
android:ems="10"
android:inputType="textEmailAddress"
tools:layout_editor_absoluteX="66dp"
tools:layout_editor_absoluteY="41dp" />
</android.support.constraint.ConstraintLayout>
I am new to this markup language, but I thought it seems simple enough with absolute positioning throughout. In any case, the layout seen in the designer is what I want. Why is the above not working?

According to the documentation
When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints. However, this is only to make editing easier; if a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).
This is the reason why you see layout correctly in editor but not on the emulator.

You can try this, if not bound to ConstraintLayout
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.example.hceng.myapplication.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/email_tv"
android:text="E-mail:" />
<EditText
android:id="#+id/editText"
android:layout_width="266dp"
android:layout_height="36dp"
android:ems="10"
android:layout_toRightOf="#+id/email_tv"
android:inputType="textEmailAddress" />
</RelativeLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me!"
android:gravity="center" />
</LinearLayout>

Constraint layout has some limitations but I am not sure if colour is one of them.
First
You could try changing the constraint layout to maybe coordinator layout or relative layout.
If that fails
Maybe, the target SDK version in your Android Manifest is too high, if the target version is higher than phone version, it reverts to defaults. So you could try doing placing a lower target version.

Android Studio rendering exception: "mBaselineAlignedChildIndex of LinearLayout points to a View that doesn't know how to get its baseline"

What the cause of this design view error in Android Studio?
Exception raised during rendering: mBaselineAlignedChildIndex of LinearLayout points to a View that doesn't know how to get its baseline.
Here's the layout:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mainListView"
android:orientation="vertical">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_btn_btm_actionbar"
android:src="#mipmap/ab_solid_example"/>
<ListView
android:id="#+id/eventStates"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#drawable/listviewimg"
android:drawSelectorOnTop="true"
android:footerDividersEnabled="true"
android:headerDividersEnabled="true"
android:textColor="#000000" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_cancel_callresult"
android:layout_width="153dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom" android:layout_marginRight="#dimen/abc_action_bar_default_padding_material"
android:background="#color/white"
android:onClick="cancelCallResult"
android:text="Cancel"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

Just had this same error. Baseline-alignment has to do with the parent LinearLayout determining the baseline of each child, and specifically, the last child in the layout. My issue involved a TimePicker - in API 21+, it's a graphical clock, so there are no TextViews to provide baseline information.
Here, the problem is in lines 27-35:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_cancel_callresult"
android:layout_width="153dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
You're missing an "android:orientation=vertical" (or horizontal) on this inner LinearLayout around the Button, and the Button itself specifies a gravity within its parent ("linear-gravity") of "bottom". There's no orientation or height specified for any of it, so the outer LinearLayout doesn't know how to determine a baseline for it.
Also, that inner LinearLayout is unnecessary as-is. If you want an empty space between the List and the Button, try using a Space widget, or if you want the List to fill the space all the way to the Button, give the List a weight attribute ("layout-weight=1.0").

I know this is old but for people who run into this problem, this is a known bug, lookup "Issue 214062".
It has been resolved in API 24.
It is only a problem on the Android Studio preview tab, not on the actual emulator or device, when TimePicker visibility is gone.
To fix this issue, use tools namespace as quickfix, so that at least you'll be able to see the preview, while still being hidden on a device, like so:
<TimePicker
android:id="#+id/timerpicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
/>

Layout XML View IDs and R problems

I am creating a layout in XML, and I have noticed this very strange occurrence. It has never happened before, but lately it's been getting on my nerves. I kind of want to abandon Eclipse and find a better IDE because of it.
Here is my layout:
<?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:orientation="vertical" >
<EditText
android:id="#+id/action_search_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="kkm" >
</EditText>
<ListView
android:id="#+id/actions_list"
android:layout_width="90dp"
android:layout_height="match_parent"
android:layout_above="#id/cancel_action_selection"
android:layout_below="#id/action_search_bar" >
</ListView>
<TextView
android:id="#+id/action_preview_pane"
android:layout_width="230dp"
android:layout_height="match_parent"
android:layout_alignBottom="#id/actions_list"
android:layout_alignTop="#id/actions_list"
android:layout_toRightOf="#id/actions_list"
android:gravity="center_vertical|center_horizontal"
android:text="kk" />
<Button
android:id="#+id/cancel_action_selection"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:text="Cancel" />
<Button
android:id="#+id/define_new_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/cancel_action_selection"
android:text="NEW" />
<Button
android:id="#+id/select_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/define_new_action"
android:text="OK" />
</RelativeLayout>
Here is what I'm trying to achieve:
The problem is, if I try to set the ListView to be above the cancel button (via android:layout_above), it will say that it can't find the id for the cancel button.
Now, what I have noticed is that if I try and specify any ids for layouts BEFORE they are created with #+id, then I will get that strange error. What I mean by this is the following:
In the XML, apparently IDs have to be declared in order. Strange, no?
I would have to declare the cancel button's id first with #+id way before I define the ListView and set its layout_above attribute.
If I try to do what I have done here, it will say that it cannot find the id for the cancel button.
I have tried cleaning the project, ending adb.exe, refreshing, etc. and all it does is corrupt my project even more. R is not even generated afterwards. I don't want to have to go in a loop problem after problem because Eclipse can't handle things like this properly.
Does anyone have a solution for this? Or a better IDE?

http://developer.android.com/guide/topics/ui/layout/relative.html
RelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on.
So you are placing listview relative to the button cancel. So you need to define button with a id. Position the listview relative to the button.
http://developer.android.com/guide/topics/ui/layout/linear.html
There is an example in the links posted both for linearlayout and relative layout have a look at it.
Edit:
If you have errors in your resource files R.java will not be generated. So make sure you do not have errors in your resource files and then clean and build the project.
To clarify the confusion. Note android:layout_above="#+id/button1"
<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"
tools:context=".OtherScreenActivity1" >
<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="24dp"
android:text="Button" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button1"
>
</ListView>
</RelativeLayout>
Same as above
<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"
tools:context=".OtherScreenActivity1" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button1"
android:layout_alignParentTop="true" >
</ListView>
<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="24dp"
android:text="Button" />
</RelativeLayout>
You have this
android:layout_above="#id/cancel_action_selection"
Use
android:layout_above="#+id/cancel_action_selection"
http://developer.android.com/guide/topics/ui/declaring-layout.html.
Look at the attribute id in the above link

android app development simple messaging app

I use the following main.xml code but I can only see one edit text box
I need help regarding why does this occur? I have tried many times but I cannot see proper edit box and all other components
<LinearLayout 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"
tools:context=".MainActivity" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="ENTER THE PHONE NUMBER HERE" />
<EditText
android:id="#+id/txtPhoneNo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Message"
/>
<EditText
android:id="#+id/txtMessage"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:gravity="top"
/>
<Button
android:id="#+id/btnSendSMS"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Send SMS"
/>

This is because you haven't set an orientation for your LinearLayout and the default is horizontal. Since you have all of your views width set to fill_parent, there is no room for the others
You have a couple options. You can either set
android:orientation="vertical"
in your root LinearLayout or you can change the width of these views
android:layout_width="wrap_content"
There are other ways too, obviously, but these are the easiest fixes for what you have
LinearLayout Docs
Also Note:
FILL_PARENT (renamed MATCH_PARENT in API Level 8 and higher), which means that the view wants to be as big as its parent (minus padding)
Layout Params
Side Note
I see you are using hard-coded strings in your xml. Eclipse will warn you about this and it may give you headaches in the future if you don't get accustomed to using the strings.xml folder and using the android:text="#string/string_name"
Strings

On your LinearLayout check the orientation=vertical

Android View background layout problem

I am trying to use a empty View to indicate the color for each item in a ListView.
The idea is that the rowColor View is just a 3dp wide line that should automatically size to the height of secondLine and thirdLine (note that all of the content is set in code including the background color of rowColor and that firstLine and thirdLine are often set to GONE).
It shows up perfectly in Eclipse's Graphical Layout but the rowColor does not show up at all on my phone (running 2.3.3) and all the views are stacked. Any idea how to fix it?
The following code for the list_row was adopted from here. I've provided all the code that I would think works based on that layout, but not even close. Does that layout still work?
list_row.xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<TextView
android:id="#+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:singleLine="true"
android:text="First Line" />
<View
android:id="#+id/rowColor"
android:background="#FF0000"
android:layout_width="3dp"
android:layout_height="fill_parent"
android:layout_below="#id/firstLine"
android:layout_alignParentBottom="true" />
<TextView
android:id="#+id/thirdLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:singleLine="true"
android:text="Third Line" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentRight="true"
android:layout_below="#id/firstLine"
android:layout_above="#id/thirdLine"
android:layout_alignWithParentIfMissing="true"
android:gravity="center_vertical"
android:singleLine="true"
android:text="Second Line" />
</RelativeLayout>
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
ListViewTest.java Activity here: http://pastie.org/2035822
Thanks.

I tested your layout in several emulators (from 2.1 to 2.3.3) and it works fine, with or without setting the first TextView visibility to View.GONE.
It must be either a problem in your code elsewhere or a glitch of your specific device.
As a workaround, you can use:
android:layout_height="0dp"
for your rowColor View. Since you are already defining the position of the top and bottom limits with android:layout_below="#id/firstLine" and android:layout_alignParentBottom="true", the actual value of layout_height is irrelevant.

I ran into this recently, and I found that a View with no content apart from a background color will not appear in a RelativeLayout.
If you can, try converting your layout to a LinearLayout. This seems to work for me.