Develop Reference

Apps not looking same when i run them in actual device

I am new to android programming but I know how everything works, recently I was trying to create an app just like uber after I finished creating the launch activity i tested it on my actual device just to check whether everything looks fine but when I launched it on my device everything (layouts, imageViews, Textviews..etc) were misplaced, I have never had this problem before its just this time. could anyone please tell me where am I going wrong?
I am attaching screenshots below.
<?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"
android:background="#ffffff"
tools:context="com.example.keyur.uber.MainActivity">
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/layout1"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/showtext"
android:layout_width="300dp"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="20dp"
android:background="#ffffff"
android:fontFamily="monospace"
android:text="#string/get_moving_with_uber"
android:textColor="#000000"
android:textSize="20sp"
android:typeface="monospace" />
<ImageView
android:layout_width="40dp"
android:id="#+id/imgv"
android:layout_height="30dp"
android:layout_below="#id/showtext"
android:layout_marginLeft="30dp"
android:background="#drawable/india"
/>
<TextView
android:layout_width="40dp"
android:id="#+id/countrycode"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginStart="13dp"
android:layout_toEndOf="#+id/imgv"
android:text="#string/_91"
android:textColor="#000000"
android:textSize="22sp"
android:fontFamily="monospace"
/>
<EditText
android:id="#+id/editText"
android:layout_width="250dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:background="#ffffff"
android:fontFamily="monospace"
android:hint="#string/enter_your_mobile_number"
android:textColor="#000000"
android:textColorHint="#484848"
android:textSize="17sp"
android:inputType="number"
/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imgone"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#drawable/layoutbg" />
</RelativeLayout>
</LinearLayout>
screenshots-
this is what the app looks on pixel 4 as it is set on default.
enter image description here
this is what it looks when I switch it to pixel xl, everything gets messed up
enter image description here

Due do you are fixing the layout hight an width so each and very device have different screen size. You should use match_parent and wrap_content. If you want to split all device space in the same manner, you have to use weight.
How to use weight reference

Either you can go for "Weight Sum", or you should set your
TextView for country-code "layout_toRightOf" to image view
instead of "layout_toEndOf".

Code shows on Android Studio Preview but not on Smartphone

I wrote some very simple code with one image and two text views in a Relative Layout.
It all seems fine in the preview but as soon as I try to run the code on my phone, one text view disappears.
I have tried everything, but can't fix the problem (check out the screenshots).
Code in Android Studio Preview
Code on my smartphone
This is my code:
<?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="wrap_content"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#+id/hb_isabel"
android:contentDescription="TODO"
android:scaleType="centerInside"
android:src="#drawable/androidparty"
/>
<TextView
android:id="#+id/hb_isabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Happy Birthday,Isabel!"
android:textSize="36sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="From, Nathalie"
android:textSize="36sp"
/>
</RelativeLayout>
Is there anyone who can help me out?

Grey area on nexus 9

I'm facing an issue on nexus 9.
I have a "basic layout" for my view:
<RelativeLayout android:id="#+id/micContainer" android:layout_width="match_parent" android:layout_height="wrap_content"
android:background="#99ffffff" android:layout_alignParentBottom="true" android:layout_marginBottom="15dp" >
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_centerInParent="true">
<TextView android:id="#+id/main_ment_0" style="#style/ment_txt" android:text="" android:layout_margin="5dp" />
<TextView android:id="#+id/main_ment_1" style="#style/ment_txt" android:text="" android:layout_margin="10dp" android:layout_marginLeft="10dp" android:visibility="gone" />
<TextView android:id="#+id/main_ment_2" style="#style/ment_txt" android:text="" android:layout_margin="10dp" android:layout_marginLeft="10dp" android:visibility="gone" />
</LinearLayout>
<ImageView android:id="#+id/main_mic" android:layout_width="70dp" android:layout_height="70dp" android:background="#drawable/mic_0" android:layout_margin="3dp" android:layout_centerVertical="true" />
</RelativeLayout>
This works well on a nexus 5:
However on a nexus 9, a grey area is visible and I can't figure why:
Do you have any idea why this grey area is visible (and if yes why it doesn't show on nexus 5) ?
Thank you in advance for your help.
Edit: the background you see behind the relativeLayout is a videoView.
I also tried on other phones (Samsung S*, Pantech Vega) and it's working well.
Here is the complete screenshot of what I have (and what I want) on my nexus 5:

your base RelativeLayout height is wrap_content, change to
android:layout_height="match_parent"

Navigation Drawer with header in Android

Using the help of http://www.learn2crack.com/2014/06/android-sliding-navigation-drawer-example.html
I managed to get my navigation drawer working. I have also added a header to my Drawer. In my header, I have a Imageview, two TextView
The data is showing up properly, but for some reason the UI is different in each phone. The image is getting cut or the background image is showing up big.
Here is the screen shot of Galaxy Nexus and Nexus 5 I have tested:
Nexus 5
Galaxy Nexus
Here is the header XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearTotalLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/backgroundforprofile"
android:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/LinearLayoutforImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".30"
android:padding="10dp" >
<ImageView
android:id="#+id/imageforprofile"
android:layout_width="45dp"
android:layout_height="45dp"
android:src="#drawable/profilepic" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutforText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:layout_weight=".70"
android:orientation="vertical" >
<TextView
android:id="#+id/textforprofile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:text="Joe David"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<TextView
android:id="#+id/textforprofileemail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:text="JoeDavidJoeDavi#joedavidjoedavid.com"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
Can somebody help me fix this issue?
Thanks!
Update
As per advice from #Rohan Pawar and #westito I change the layout to relative The ImageView is not getting cut and text is coming out properly, but the background image is still a difference in Galaxy Nexus and Nexus 5. Please see my screenshot below.
Galaxy Nexus
Nexus 5
Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearTotalLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/backgroundforprofile"
android:baselineAligned="false"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageforprofile"
android:layout_width="45dp"
android:layout_height="45dp"
android:paddingLeft="5dp"
android:paddingTop="10dp"
android:src="#drawable/profilepic" />
<TextView
android:id="#+id/textforprofile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imageforprofile"
android:gravity="left"
android:paddingLeft="5dp"
android:paddingTop="10dp"
android:text="Dushyant Prabhu"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<TextView
android:id="#+id/textforprofileemail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textforprofile"
android:layout_toRightOf="#+id/imageforprofile"
android:gravity="left"
android:paddingLeft="5dp"
android:text="developer#sybershocknetworks.com"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</RelativeLayout>

The problem is your layout. Instead of LinearLayouts, try using RelativeLayout. It is more efficient for this layout.
<RelativeLayout>
<ImageView id="#+id/image" />
<TextView layout_toRightOf="#+id/image" />
</RelativeLayout>
This is a "pseudo" sample. You can position your TextView next to ImageView

#TheDevMan i have both devices Nexus 5 and Galaxy nexus, i have tested out your code works on both device perfectly
Samsung Galaxy Nexus = 720 x 1280 pixels, 4.65 inches (~316 ppi pixel density)
LG Nexus 5= 1080 x 1920 pixels, 4.95 inches (~445 ppi pixel density)
but i dont have your background image to test

try this for your header & customize it as you want it will work for sure
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginLeft="12dp"
android:layout_marginBottom="7dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/image_header"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_marginTop="4dp"
android:background="#drawable/placeholder"
android:scaleType="fitXY" />
<TextView
android:id="#+id/nav_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="18dp"
android:text="Krunal Patel"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffff"
android:textSize="19dp" />
</LinearLayout>
</LinearLayout>

How to make my layout fit in all screens

I have gone through many relative answers on stockoverflow and link's such as Supporting Different Screens or Screen Compatibility Mode
I have created the following relative layout and I am trying to make it look alike in all android screens.
My images fit perfect for 4.8 inch phones but when I try to use a 2.8 inch display or something like like that, some buttons go on top of others, and they do not shrink.
Does anyone have any suggestion how to improve that?
And preferably without increasing the size of my app.
Thanks in advance!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".MainActivity" >
<ImageButton
android:id="#+id/Switch_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="someMethod"
android:background="#drawable/switch_off"/>
<ImageView
android:id="#+id/warning_shot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/more"
android:onClick="someMethod" />
<ImageView
android:id="#+id/imageViewBatteryState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/Switch_off"
/>
<ImageView
android:id="#+id/sh"
android:layout_width="147dp"
android:layout_height="54dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
android:background="#drawable/me"/>
<ImageView
android:id="#+id/sit"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/textViewBatteryInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold"
android:typeface="monospace"
android:layout_alignBottom="#+id/sit"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

I will suggest you to use LinearLayout instead of Relativelayout specially for the issue :
My images fit perfect for 4.8 inch phones but when I try to use a 2.8
inch display or something like like that, some buttons go on top of
others, and they do not shrink.
Because When you give orientation to Linearlayout then Its child will never get on top of each other for any resolution or screen size.
And If you give them Weight then Views will be in fix position for Each and Every device.
For example Put below Xml in your project and Check this out in Any resolution, It will give the same Result.
XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 3" />
</LinearLayout>
</LinearLayout>