Develop Reference

Android Studio Layout changes on real device

I have a problem with the layout on the Android Studio. The Editor (XML file) and Emulator (Nexus 10) shows the layout right. But if I run the app on my Huawei Mediaped M5, the layout changes and everything is mixed.
The Emulator and my device have the same Resolution(2560*1600).
The XML file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">
<Button
android:id="#+id/button_fahrzeugsimulation"
android:layout_width="461dp"
android:layout_height="203dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="108dp"
android:layout_marginTop="173dp"
android:background="#android:color/holo_blue_dark"
android:text="Fahrzeugsimulation"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_uebungen"
android:layout_width="457dp"
android:layout_height="182dp"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/button_fahrzeugsimulation"
android:layout_marginBottom="106dp"
android:background="#android:color/holo_blue_dark"
android:text="Übungen"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_Weiterbildungsangebot"
android:layout_width="wrap_content"
android:layout_height="207dp"
android:layout_alignBottom="#+id/button_fahrzeugsimulation"
android:layout_alignParentEnd="true"
android:layout_marginEnd="107dp"
android:background="#android:color/holo_blue_dark"
android:text="Weiterbildungsangebot"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_Unterlagen"
android:layout_width="498dp"
android:layout_height="185dp"
android:layout_alignStart="#+id/button_Weiterbildungsangebot"
android:layout_alignTop="#+id/button_uebungen"
android:layout_marginStart="-6dp"
android:layout_marginTop="-2dp"
android:background="#android:color/holo_blue_dark"
android:text="Unterlagen"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView_eMobility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="eMobility"
android:textColor="#android:color/holo_blue_dark"
android:textStyle="bold"
android:textSize="64sp" />
<TextView
android:id="#+id/textView_Lab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/textView_eMobility"
android:layout_toEndOf="#+id/textView_eMobility"
android:text="Lab"
android:textColor="#android:color/holo_red_light"
android:textStyle="bold"
android:textSize="52sp" />

I think the problem is that the screen width of real device is not the same of the emulator, so you need
to create different layouts to support design for your screen width and height and in each layout,
change views dimensions to fit the screen..
this documentation would help : https://developer.android.com/training/multiscreen/screensizes

The device which your testing resolution is different from which you are trying to test on device(Huawei Mediaped M5)
So you are facing the issue.Even you are using marginstart in your layout.There are some static values which will vary with devices.
like this values:
android:layout_width="457dp"
android:layout_height="182dp"
android:layout_marginStart="108dp"
android:layout_marginTop="173dp"
device screen sizes check below link which shows nexus10 and Huawei Mediaped M5
screen size is different

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

Not displaying check box on other device

This is very strange. I have two Asus MeMo Pad 7 devices. One of them runs everything perfectly but the other has a strange quirk where two check boxes on one of the screens are not being displayed. One is required to be checked before proceeding so this is a complete fail.
Both devices are identical and running Android OS 4.4.2.
Why is this happening and what can I do to resolve? While it would be bad enough if the devices were different and running differing versions of Android, these are identical so very bad. I'm worried now as to what else could be wrong?
Thanks in advance
Conor
UPDATE:
Out of four identical devices, 3 are running correctly. I will need to check specifics of Kernel Version etc. In case it is relevant all installations came from HockeyApp. The offending device is remote so I cannot install via ADB right now.
UPDATE:
Please see the image where the issue is occurring. The red dots are where the check boxes should be appearing.
Following the image is the XML layout.
XML Layout:
<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"
android:background="#color/Company_grey"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="ie.Company.android.dws.ActivityMain" >
<ImageView
android:id="#+id/imgCompanyLogo"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentLeft="true"
android:contentDescription="#string/Company_logo"
android:src="#drawable/Company_main_logo" />
<TextView
android:id="#+id/lblBeforeWeBegin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgCompanyLogo"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:gravity="center"
android:text="#string/Registration_Prompt"
android:textColor="#color/Company_green"
android:textSize="30sp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/lblBeforeWeBegin"
android:layout_centerHorizontal="true"
android:layout_marginTop="80dp"
android:background="#color/Company_grey" >
<EditText
android:id="#+id/txtName"
android:layout_width="450dp"
android:layout_height="45dp"
android:background="#drawable/rounded_edittext"
android:hint="#string/Name"
android:inputType="text|textCapSentences|textPersonName"
android:paddingLeft="10dp"
android:textColor="#color/Company_blue" />
<EditText
android:id="#+id/txtNickname"
android:layout_width="450dp"
android:layout_height="45dp"
android:layout_below="#id/txtName"
android:layout_marginTop="25dp"
android:background="#drawable/rounded_edittext"
android:hint="#string/Nickname"
android:inputType="text"
android:paddingLeft="10dp"
android:textColor="#color/Company_blue" />
<EditText
android:id="#+id/txtEmail"
android:layout_width="450dp"
android:layout_height="45dp"
android:layout_below="#id/txtNickname"
android:layout_marginTop="25dp"
android:background="#drawable/rounded_edittext"
android:hint="#string/Email"
android:inputType="textNoSuggestions|textEmailAddress"
android:paddingLeft="10dp"
android:textColor="#color/Company_blue" />
<CheckBox
android:id="#+id/chkAgreeTermsConditions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txtEmail"
android:layout_marginTop="25dp" />
<TextView
android:id="#+id/lblAgreeTermsConditions"
android:layout_width="405dp"
android:layout_height="wrap_content"
android:layout_below="#id/txtEmail"
android:layout_marginLeft="10dp"
android:layout_marginTop="23dp"
android:layout_toRightOf="#id/chkAgreeTermsConditions"
android:text="#string/AgreeTermsConditions"
android:textColor="#color/Company_green"
android:textSize="25sp" />
<CheckBox
android:id="#+id/chkOptInMarketing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/chkAgreeTermsConditions"
android:layout_marginTop="25dp" />
<TextView
android:id="#+id/lblOptInMarketing"
android:layout_width="400dp"
android:layout_height="wrap_content"
android:layout_below="#+id/lblAgreeTermsConditions"
android:layout_marginLeft="10dp"
android:layout_marginTop="25dp"
android:layout_toRightOf="#id/chkOptInMarketing"
android:text="#string/OptInMarketing"
android:textColor="#color/Company_green"
android:textSize="25sp" />
<Button
android:id="#+id/btnStartQuiz"
android:layout_width="450dp"
android:layout_height="100dp"
android:layout_below="#id/chkOptInMarketing"
android:layout_marginTop="50dp"
android:background="#drawable/rounded_button"
android:text="#string/Start_Quiz_exclamation"
android:textColor="#color/white"
android:textSize="65sp" />
</RelativeLayout>

How to set the position of image

i am new in android , i am facing problem in setting the image position . i set image position in layout but when i check on device or emulator it changes position.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lay_ring"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backfull_a"
android:orientation="vertical" >
<ImageButton
android:id="#+id/id_ringButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="44dp"
android:layout_marginTop="16dp"
android:background="#android:color/transparent"
android:src="#drawable/button_ring" />
<ImageView
android:id="#+id/image_hand_lastACt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:src="#drawable/white" />
<ImageView
android:id="#+id/id_ring_finger"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="144dp"
android:layout_marginRight="70dp"
android:layout_toLeftOf="#+id/id_ringButton"
android:src="#null" />
<ImageView
android:id="#+id/id_fingA_ring"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/id_imgback"
android:layout_marginRight="21dp"
android:layout_marginTop="48dp"
android:src="#drawable/a_style_a" />
<ImageView
android:id="#+id/id_fingB_ring"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/id_ringButton"
android:layout_marginRight="44dp"
android:layout_toLeftOf="#+id/id_fingA_ring"
android:src="#drawable/a_style_b" />
<ImageButton
android:id="#+id/id_next_ring"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/id_ringButton"
android:layout_alignTop="#+id/id_ring_finger"
android:layout_marginTop="46dp"
android:background="#android:color/transparent"
android:src="#drawable/aero_right" />
</RelativeLayout>
i tried but did not find proper solution . give some demo or link that is easily understandable .

android handset has many DPIs. so,you should not set the position too accurate.
You can use some relative description like toRightof / alignPerentRight etc.