Develop Reference

How to debug an unexpected Android layout?

My ConstraintLayout is showing some strange plotting of items on app. It is showing the elements correct positions on the preview screen of the android studio but while running app on the phone the positions of the elements are strange.
Here is the screen shot of app:
My layout is:
<?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"
android:background="#drawable/background"
>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="34dp"
android:layout_height="56dp"
android:text="appbar"
android:background="#android:color/transparent"
tools:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="8dp" />
<ImageView
android:id="#+id/imgBooks"
android:layout_width="272dp"
android:layout_height="302dp"
android:src="#drawable/books"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="56dp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/toolbar" />
<ImageView
android:id="#+id/imgName"
android:layout_width="40dp"
android:layout_height="35dp"
app:srcCompat="#drawable/name"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="373dp"
android:layout_below="#+id/imgBooks"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/etEmail"
android:layout_width="320dp"
android:layout_height="43dp"
android:ems="10"
android:text="Email"
android:inputType="textEmailAddress"
tools:layout_editor_absoluteX="67dp"
tools:layout_editor_absoluteY="417dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:layout_above="#+id/etPhone"
android:layout_toEndOf="#+id/imgPhone" />
<ImageView
android:id="#+id/imgEmail"
android:layout_width="38dp"
android:layout_height="34dp"
app:srcCompat="#drawable/email"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="417dp"
android:layout_alignTop="#+id/etEmail"
android:layout_toStartOf="#+id/etEmail" />
<EditText
android:id="#+id/etName"
android:layout_width="320dp"
android:layout_height="43dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
tools:layout_editor_absoluteX="67dp"
tools:layout_editor_absoluteY="373dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:layout_above="#+id/etEmail"
android:layout_alignEnd="#+id/btn" />
<ImageView
android:id="#+id/imgPhone"
android:layout_width="35dp"
android:layout_height="31dp"
app:srcCompat="#drawable/phone"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="463dp"
android:layout_alignTop="#+id/etPhone"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/etPhone"
android:layout_width="320dp"
android:layout_height="43dp"
android:ems="10"
android:inputType="phone"
android:text="Phone"
tools:layout_editor_absoluteX="67dp"
tools:layout_editor_absoluteY="463dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:layout_above="#+id/btn"
android:layout_alignStart="#+id/etName"
android:layout_alignEnd="#+id/btn" />
<Button
android:id="#+id/btn"
android:layout_width="344dp"
android:layout_height="48dp"
android:text="Download Brochure"
android:layout_gravity="center_vertical|center_horizontal"
tools:layout_editor_absoluteX="20dp"
tools:layout_editor_absoluteY="514dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:background="#drawable/curves"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</android.support.constraint.ConstraintLayout>

The problem is you are not using constraints at all which is the whole point of constraint layout.
For example, if you don't use constraints on Download Brochure button and use only tools:layout_editor_absoluteX and tools:layout_editor_absoluteY attributes, the button stays at the position where you put it on the editor but when you compile the app, the button goes top left corner.
You need to add those to Download Brochure button, then set its location. So it will be on the same position in every possible situation.
app:layout_constraintLeft_toLeftOf="parent",
app:layout_constraintRight_toRightOf="parent"
But I suggest you to do it on editor while playing around with constraint layout which is much easier.
You can also watch this video. https://www.youtube.com/watch?v=sO9aX87hq9c. It helps a lot.

Android studio - Relative layout misplaced items after run on phisical device

Hope you can help me with my question, I have three TextViews and a sepparator, on my relative layout, on the designer I have aranged them , but after I run it on a phisical device , only one item appear and even that item is misplaced. I have to tell you that i have searched for many many hours before coming here to ask this question, so please help me!
Here it is the XML file
<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="wrap_content"
android:paddingBottom="44dp"
android:paddingTop="24dp"
tools:ignore="RtlSymmetry">
<TextView
android:id="#+id/tv_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/tv_today_date"
android:gravity="end|center_vertical"
android:paddingEnd="16dp"
android:textAlignment="center"
android:textSize="56sp"
android:visibility="visible"
tools:text="12:34" />
<TextView
android:id="#+id/tv_today_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:paddingEnd="16dp"
android:text="Tue, 20 Apr"
android:textSize="16sp"
android:layout_below="#+id/tv_today_time"
android:layout_toStartOf="#+id/separator" />
<View
android:id="#+id/separator"
android:layout_width="0.05dp"
android:layout_height="0.05dp"
android:layout_alignBottom="#+id/tv_today_date"
android:layout_alignTop="#+id/tv_today_time"
android:layout_centerHorizontal="true"
android:background="#66FFFFFF" />
<TextView
android:id="#+id/tv_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:paddingStart="16dp"
android:textSize="16sp"
tools:text="Bucharest"
android:layout_below="#+id/tv_today_time"
android:layout_toEndOf="#+id/separator" />
If needed, i will post some screenshots.
Also I have also some other questions, so if anyone wants to help me, tell me :)
EDIT
Here iis what I would like it to be:Designer
Here is what i get:Phisical device

Option 1: Use constraint layout (Material design)
Option 2: Wrap tv_today_date separator & tv_location in LinearLayout with horizontal orientation. Place this LinearLayout below tv_time

This is working fine for me.Check it and let me know.
<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="wrap_content"
android:paddingTop="24dp"
>
<TextView
android:id="#+id/tv_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="end|center_vertical"
android:paddingRight="16dp"
android:textAlignment="center"
android:textSize="56sp"
android:visibility="visible"
android:text="12:34" />
<View
android:id="#+id/separator"
android:layout_width="0.05dp"
android:layout_height="0.05dp"
android:layout_alignBottom="#+id/tv_today_date"
android:layout_alignTop="#id/tv_time"
android:layout_centerHorizontal="true"
android:background="#66FFFFFF" />
<TextView
android:id="#+id/tv_today_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:paddingRight="16dp"
android:text="Tue, 20 Apr"
android:textSize="16sp"
android:layout_below="#id/tv_time"
android:layout_toLeftOf="#id/separator" />
<TextView
android:id="#+id/tv_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:paddingLeft="16dp"
android:textSize="16sp"
android:text="Bucharest"
android:layout_below="#id/tv_time"
android:layout_toRightOf="#id/separator" />
</RelativeLayout>

Chat right alignment issue on Samsung Galazy s3 API 18

I am developing an android application that also implements a chat but I am facing a weird issue on a galaxy s3 device running api 18.
s the image clearly show the text aligned on the right isn't well formatted as it should be on a single line. The layout file is as simple as possibile and no issue is shown on other phones and emulators.
Issue Image
Here is my xml layout file:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textMine"
android:layout_marginBottom="15dp"
android:visibility="visible" >
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/silh"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:id="#+id/profilePicMine"
android:layout_alignParentTop="true"
android:focusable="false" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/profilePicMine"
android:layout_toStartOf="#+id/profilePicMine"
android:id="#+id/nuvolaMine">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone"
android:layout_marginRight="10dp"
android:layout_marginLeft="80dp"
android:src="#drawable/home_pic"
android:id="#+id/picMine"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/chat_yellow"
android:paddingRight="15dp"
android:layout_marginRight="10dp"
android:id="#+id/textLayoutMine"
android:paddingBottom="10dp"
android:visibility="visible"
android:paddingTop="10dp"
android:paddingLeft="10dp">
<com.sonarmusic.robotoTextViews.RobotoRegularTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="16sp"
android:text="non so"
android:id="#+id/textMessageMine" />
</RelativeLayout>
</RelativeLayout>
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignBottom="#id/profilePicMine"
android:layout_alignLeft="#id/profilePicMine"
android:src="#drawable/verde_on"
android:id="#+id/isArtistMine"/>
<RelativeLayout
android:layout_width="5dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:background="#color/chat_yellow"
android:layout_alignParentTop="true">
</RelativeLayout>
<com.sonarmusic.robotoTextViews.RobotoLightTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="6sp"
android:textColor="#color/gray_text"
android:text="08-08-2016"
android:id="#+id/timeMine"
android:layout_marginRight="10dp"
android:layout_below="#+id/nuvolaMine"
android:layout_marginTop="5dp"
android:layout_alignLeft="#+id/nuvolaMine" />
</RelativeLayout>
To me it looks like an issue due to right alignment that either android api 18 or both os and device can't render well, another reason why I have this thought is that the texts on the left side(the received ones in green background) are formatted the right way. But I have no clue on how possibily solve it.
PS Not supporting that device is NOT an option

Replace
android:layout_width="wrap_content"
by
android:layout_width="match_parent"
in your RelativeLayouts

All texts in the app are gone after a while

This is probably the weirdest thing it ever happened to me. I inherit this code from another developer and I can't figure out which is the problem.
The app uses the sherlocknabvar and it also has a screen with a mapfragment where you can move a pin around and once the map is settled it calls several APIs to get some info about your position. The rest of the activities are pretty normal, nothing fancy about them. The map activity is quite complex though.
This is the error I have... weirdest thing is that it only happens sometimes, so it's not easy to reproduce it but I still can see it happen from time to time.
After playing with the map for a while (moving the pin, zooming in and out and so on) if I go back to the main activity (by clicking a home button on the navbar or by clicking the back button) all the texts in my app are gone in all the activities. I can see all the different layouts with images and colours but all the texts are completely gone. The only way to have them back is by restarting the app.
Looking at the Android Device Monitor (in case was some memory leak) everything looked pretty stable (28016K/33287K as max) and even worst, I can reproduce that error in an old Sony Xperia but also in a new brand S5.
EDIT
I found out that the texts where not missing, the color was changing to transparent for some reason that I still don't get. I disabled the hardware acceleration and it works but I'm still wondering what the problem could be and why that changed fixed it.
This is one of the layouts I'm having problems with, all the TextViews just change to transparent without any reason. It happens to the TextViews that have an 'static' text and also to the ones that I change the text dynamically.
<?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:fillViewport="true"
android:background="#drawable/new_bg_background_app"
>
<ScrollView
android:layout_alignParentTop="true"
android:layout_above="#+id/anc_button"
android:fadeScrollbars="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/anc_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="25dp"
android:gravity="center"
android:text="#string/lb_confirmed"
android:textColor="#color/orange"
android:textAppearance="#style/Font50PX"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ic_confirmed"
android:layout_marginTop="15dp"
android:src="#drawable/new_ic_active"
android:layout_below="#+id/anc_title"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/lb_pick_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center"
android:layout_below="#+id/ic_confirmed"
android:text="#string/lb_your_pick_up"
android:textAppearance="#style/Font28PX"
android:textColor="#color/text_gray" />
<TextView
android:id="#+id/txt_passengers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_below="#+id/lb_pick_up"
android:text="5 Passengers"
android:textAppearance="#style/Font50PX"
android:textColor="#color/white"/>
<TextView
android:id="#+id/lb_from"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="6dp"
android:layout_below="#+id/txt_passengers"
android:text="#string/lb_from"
android:layout_marginTop="15dp"
android:textAppearance="#style/Font28PX"
android:gravity="center"
android:textColor="#color/text_gray" />
<TextView
android:id="#+id/txt_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="60"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:gravity="center"
android:layout_below="#+id/lb_from"
android:textAppearance="#style/Font50PX"
android:textColor="#color/white"
/>
<TextView
android:id="#+id/txt_post_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="60"
android:gravity="center"
android:layout_below="#+id/txt_address"
android:textAppearance="#style/Font45PX"
android:textColor="#color/text_gray"
/>
<TextView
android:id="#+id/lb_at"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_post_code"
android:text="#string/lb_at"
android:layout_marginTop="15dp"
android:textAppearance="#style/Font28PX"
android:gravity="center"
android:textColor="#color/text_gray" />
<TextView
android:id="#+id/txt_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_below="#+id/lb_at"
android:textAppearance="#style/Font50PX"
android:text="9:00 AM Today"
android:textColor="#color/white"
/>
<TextView
android:id="#+id/txt_note"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_time"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="#string/lb_mini"
android:textAppearance="#style/Font26PX"
android:textColor="#color/text_gray"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_note"
android:layout_marginTop="10dp"
android:gravity="center"
>
<TextView
android:id="#+id/lb_reference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lb_reference"
android:layout_marginTop="15dp"
android:textAppearance="#style/Font32PX"
android:textColor="#color/white"
/>
<TextView
android:id="#+id/txt_reference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/lb_reference"
android:layout_marginLeft="4dp"
android:layout_marginTop="17dp"
android:textAppearance="#style/Font28PX"
android:textColor="#color/white"
/>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
<Button
android:id="#+id/anc_button"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:text="#string/lb_done"
android:background="#drawable/new_btn_orange"
android:layout_margin="5dp"
android:onClick="onDone"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>

This issue was fixed after disabling the hardware acceleration in the manifest just for the activity I was having the problem with
android:hardwareAccelerated="false"

RelativeLayout displays incorrect on real device

I have a question regarding Android RelativeLayout. My layout works perfectly on the emulator which is configured like a LG Nexus4 (screen, resolution). But if I run the app on my real Nexus4 it has serious errors and I don't know how to fix them.
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainMenuLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/zeekedLogo"
android:contentDescription="#string/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="24dp"
android:layout_marginRight="24dp"
android:src="#drawable/badge" />
<TextView
android:id="#+id/textButtonPlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="56dp"
android:text="#string/menu_play"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textButtonResume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textButtonPlay"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="#string/menu_resume"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textLabelLevel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/zeekedLogo"
android:layout_centerHorizontal="true"
android:layout_marginBottom="54dp"
android:text="#string/menu_level"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textButtonSound"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/zeekedLogo"
android:layout_marginLeft="24dp"
android:text="#string/menu_sound_on"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Here are the screenshots of the same layout:
Emulator:
Nexus 4:
Thanks in advance!

After adding a background color to my relativelayout it worked on my Nexus4. It's all I did ... and I think it's strange. But at the end I'm happy that it works.