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.

Elements overlapping on each other in my android studio emulator

I am new to Android Studio, when I created my app all my elements overlapped on each other. I am not sure how to edit this code. Please give me a detailed description.
Layout editor and emulator result
Code for the layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="schemas.android.com/apk/res/android";
xmlns:app="schemas.android.com/apk/res-auto";
xmlns:tools="schemas.android.com/tools";
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.first.anew.MainActivity">
<TextView
android:layout_width="216dp"
android:layout_height="60dp"
android:text="Hello World!"
tools:layout_editor_absoluteY="16dp"
tools:layout_editor_absoluteX="61dp" />
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="45dp"
android:text="Login"
tools:layout_editor_absoluteY="343dp"
tools:layout_editor_absoluteX="177dp" />
<TextView
android:id="#+id/textView"
android:layout_width="215dp"
android:layout_height="65dp"
android:text="username"
tools:layout_editor_absoluteY="117dp"
tools:layout_editor_absoluteX="61dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="20dp"
android:orientation="horizontal" />
<EditText
android:id="#+id/editText"
android:layout_width="217dp"
android:layout_height="57dp"
android:ems="10"
android:inputType="textPassword"
tools:layout_editor_absoluteY="218dp"
tools:layout_editor_absoluteX="61dp" />
</android.support.constraint.ConstraintLayout>

Your emulator screen and the layout editor are different because of tools namespace. In a few words, it is a tool that helps you to better visualise the written code. This tool also generates constraints like tools:layout_editor_absoluteY="343dp", which inform the layout editor on how it should draw the views. The problem is that this constraints will not be present in your app code, resulting in that weird behaviour when all views are overlapped (since the above mentioned constraints are not used in the app code we can deduct that there are no constraint at all).
Since you are a beginner I would recommend to start with a LinearLayout or RelativeLayout because I think that ConstraintLayout is harder to understand, use and debug.

put the whole code. if you are using Relativelayout, this will happen. change it to Linearlayout at the top i mean the bottom most element, and put orientation as vertical

see this - for me my soltion works...
add this in xml to the button etc
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.57"
then play with it in the design.
Good luck! :)

you can click the infer Constraints buttonclick on this
and run your programme again..it will solve your problem

Making the Button's align_parentBottom = "true" when other view's height is not Zero

First the title may look senseless but I don't know how I describe my problem well in the title.
I have a Relative layout which has 2 buttons (Past games and Upcoming Games) and 2 listviews. Whenever a button is pressed the associated listview is collapsed (height will be zero) if it is already expanded or the reverse will happen. ( i used this solution)
Problem:
Everything is fine when I run it on a 5-inch screen phone. Please see the following picture:
[![][2]][2]
But if I run it on a 10-inch tablet it looks like this:
[![][3]][3]
The same will happen when it will run on less than 5-inch phone.
My questions
Do I need to make another layout for the tablet? like in the layout-large folder?
or I can use some event(s) in Jave file that dynamically set the buttons align parent bottom property when the listview is not collapsed.
or it can be fixed in my current XML
Below is the code for that part I am asking for help
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnPastGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Past Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvPastGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:layout_marginTop="5dp"
android:divider="#null" />
<Button
android:id="#+id/btnUpcommigGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/lvPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Up Coming Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvUpcomingGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnUpcommigGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:divider="#null" />
</RelativeLayout>
</LinearLayout>
If you guys can give me some advice on making the user interface that will run on all screen sizes and densities I will be very thankful
Thanks to anyone who will help me

You are trying to workaround functionality of ExpandableListView. Look at the following page:
http://www.androidhive.info/2013/07/android-expandable-list-view-tutorial/

Android Relative Layout - doesn't work like I want

I'm trying this now days and it still doesn't work. I read lots of tutorials about the Relative layout but I still can't do it. Please give me an idea, what I can do. I want a simple layout like in the picture.![enter image description here][1]
edit: Looks like I can't upload images ... :(
Its a layout for a simple quiz App with these widgets below each other. A ProgressBar, a TextView for a question, 4 Buttons for the answers. The TextView should take all the place the other widgets don't need. The Button should be always at the end.
I tried with alignParentTop, Bottom, nested LinearLayouts and it still doesn't work. What can I do? It would be REALLY REALLY great to have an idea? Thanks a lot!
Good idea: I uploaded the image: http://imgur.com/Z0YmLw2
Here is the actual code. (I edited it about 20x times)
<?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">
<ProgressBar
android:id="#+id/answerProgressBar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/countdownTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/answerProgressBar"
android:text="00:00:00" />
<ImageView
android:id="#+id/questionImageView"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="#id/countdownTextView"
android:layout_margin="5dp"
android:background="#drawable/ic_launcher"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/questionTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/answerProgressBar"
android:layout_margin="5dp"
android:layout_toRightOf="#id/questionImageView"
android:text="jfh rhguijfhg fhge hugutbh r rut hruteruzt dkjfh uzdt ggu zguzg zuh ftz huuh rh grhtughrtu thiohjriwetk lkj rgjrjkrjek"
android:textSize="22dp" />
<Button
android:id="#+id/answert1Button"
style="#style/answerButton"
android:text="answer 1" />
<Button
android:id="#+id/answer2Button"
style="#style/answerButton"
android:text="answer 2" />
<Button
android:id="#+id/answer3Button"
style="#style/answerButton"
android:text="answer 3" />
<Button
android:id="#+id/answer4Button"
style="#style/answerButton"
android:text="answer 4 Butto d uzrr rd drtd gzugt ffzft drtn" />
</RelativeLayout>

With RelativeLayout it's the easiest way to position your widgets to the screen. However, it may take some time until you master it. Since if you're designing your layout with Graphic Tool, it will be harder.
Try editing it in XML Text. Make sure to read this Android Dev Tutorial on all the options you can access with using RelativeLayout.
I am sure you did check it, but I'm also quite sure that you were only searching for the obvious solutions. Sometimes, some not so obvious options will lead you to your goal - so be patient and try to do it from scratch with help of the tutorial.
Otherwise you could also use FrameLayout which divides your screen into several frames. BUT, again, it might complicate things for you in your App.

First, to make it easier, remove countdownTextView and questionImageView, and let's try.
I think you need to place layout_alignParentTop attribute with the ProgressBar:
<ProgressBar
android:id="#+id/answerProgressBar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
And put all Buttons in a vertical LinearLayout with layout_alignParentBottom:
<LinearLayout
android:id="#+id/answerButtons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<Button
android:id="#+id/answerButton1"
style="#style/answerButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="answer1" />
(...)
</LinearLayout>
And at last, the TextView has to have both layout_below and layout_above attributes with setting layout_height="match_parent":
<TextView
android:id="#+id/questionTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="R.id.answerProgressBar"
android:layout_above="R.id.answerButtons"
android:text="blah blah blah" />

I can't drag or drop anything to layout graphical interface in Android

I am using Eclipse. I can't Drag or Drop anything into graphical interface of my xml file.
When ever I drag anything like a button or a text view it just shows that position dotted block and just stuck at there.
<?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">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:layout_marginTop="88dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:layout_marginTop="120dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:layout_marginTop="160dp"
android:text="Type your secret password"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>

I just copied and pasted your code into a RelativeLayout file I just made on Eclipse, and it seems to be working fine. Have you tried maybe playing around with the height and width of the TextViews or adding background images to the buttons to try and locate them easier? It is possible the wrap_content may be making it too small. And if this is your first time using Android layouts, I would recommend using LinearLayout instead. RelativeLayout can be tough and hard to work with, even for more experienced programmers.