Develop Reference

XML Layout is different from emulator

I have spent 4 hours to resolve this issue but I couldn't solve it Please any help would be appreciated. As I update my android studio this issues stuck in my android studio. I am using android studio latest version 3.2.1.
<?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=".View.First_Screen">
<ImageView
android:id="#+id/firstScreen_image"
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:background="#drawable/snap"
android:src="#drawable/black_transparent" />
<LinearLayout
android:id="#+id/firstScreen_buttonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/firstScreen_image"
android:layout_marginTop="38dp"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/firstScreen_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="2dp"
android:layout_weight="0.5"
android:background="#drawable/button_background"
android:text="Login" />
<Button
android:id="#+id/firstScreen_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="5dp"
android:layout_weight="0.5"
android:background="#drawable/button_background"
android:text="register" />
</LinearLayout>
<TextView
android:id="#+id/firstScreen_connectDriver"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/firstScreen_buttonLayout"
android:layout_marginLeft="5dp"
android:layout_marginTop="32dp"
android:text="Or be a captain of uber"
android:textColor="#311B92"
android:textSize="18dp"
android:textStyle="bold" />
</RelativeLayout>
Here is attached image where you can see the difference of layout on both devices

First I would like to confirm which emulator you are using, is it nexus 4 or some other emulator, because in the preview your screen is selected nexus 4 and the view is shown for devices that has the same pixel density and resolution as nexus 4,
Next you have given a fixed height in dp to your ImageView with id - "firstScreen_image". that fixed height i.e. 350dp will behave differently for different devices.
So next question what do you want your screen to look like and how can I help?

Opened previously functional basic xml code -- no longer works

I've search thoroughly but it doesn't appear that this is a common problem -- this may be increased by the fact that I'm still new and don't really know what to look for in this regard.
Regardless, the last time that I ran this code it worked fine however, now the display is simply white -- so even with the black writing it doesn't show up. Thank you very much for any help you can offer.
The xml code is below:
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:scaleType="fitXY"
android:src="#drawable/background" />
<TextView
android:id="#+id/mocha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/price_mocha"
android:layout_alignParentStart="true"
android:layout_marginStart="15dp"
android:text="Price of mocha"
android:textColor="#060505" />
<TextView
android:id="#+id/price_mocha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="234dp"
android:layout_marginStart="35dp"
android:text="3.99"
android:textColor="#ffffff" />
</RelativeLayout>

Why Emulator renders different result to Android Studio?

I have played around with Android Studio and just wonder why the render result is so different to what i created
Here is the image of my screen, you can see that the 2 screen of Android Studio and Genymotion are completely different
Here is the XML file for the layout, basically i just drag and adjust the margin, width and height.
<?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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="tk.miendatmoi.widgetexperiments.WidgetExperimentsActivity"
tools:showIn="#layout/activity_widget_experiments"
android:visibility="visible">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left Button"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:width="150dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="100dp"
android:layout_marginRight="50dp"
android:layout_marginBottom="50dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:id="#+id/button2"
android:layout_alignBottom="#+id/button"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:width="80dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:textSize="65sp"
android:width="150dp"
android:height="150dp"
android:gravity="center"
android:alpha=".5"
android:background="#342a2a"
android:textColor="#fdfdfd"
android:typeface="serif"
android:visibility="visible" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="45dp"
android:src="#android:mipmap/sym_def_app_icon"
android:contentDescription="incon" />
</RelativeLayout>

This is because you are using two different layouts. It seems like the genymotion layout is using tablet layout which has a different resolution to the one is in android studio which is using the nexus 4 resolution.

The result in the emulator is different from the Android Studio preview because you are displaying your layout inside a widget. The tools in the Android Studio layout preview are unable to display the layout inside a widget, so they instead show you the layout as if it were allowed to take up the entire screen. The layout it is displayed correctly inside the widget when you run the application.

Number picker in android not showing properly

I'm starting to build an app with android studio and right away I'm having a bit of an issue. Currently my number pickers look like this in the XML preview:
But when I run the app (on the emulator) it looks like this:
There is a text view that you can't see in the preview but appears when the app is run, that is why you see the text "Time's up" in the emulator screenshot. What I'm wondering is why are the number pickers so close to my textview and off to the left? I don't mind the change in style (in fact I welcome it) but I can't figure out why they moved. Any help is greatly appreciated! Here is my XML code:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.skytbest.intervaltrainer.MainActivity">
<TextView
android:id="#+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:paddingRight="10dip"
android:paddinBottom="50dip"
android:textSize="50dp"
/>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Start" />
<NumberPicker
android:id="#+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/timer"
android:layout_toLeftOf="#+id/timer"
android:paddingTop="50dp" />
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/numberPicker"
android:layout_toRightOf="#+id/numberPicker"
android:paddingTop="50dp" />
</RelativeLayout>

Here is a working layout using the suggestion in my comment. Note that it is helpful to put some text in the TextView to better enable the UI designer to show the layout. Even then it sometimes does not match what you see on screen, especially when you have invalid combinations of layout constraints.
<?xml version="1.0" encoding="utf-8"?>
<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="com.skytbest.intervaltrainer.MainActivity">
<TextView
android:id="#+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:text="Label"
android:paddingBottom="50dp"
android:paddingTop="50dp"
android:textSize="50dp"
/>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Start"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/timer">
<NumberPicker
android:id="#+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>

You need to set setMinValue and setMaxValue otherwise it will get stack on 0.

Changing Buttons from Relative Layout to Linear Layout weird side-effects

The strangest thing happened to me today and caused hours of frustration and anger-management issues.
I had a working Android slideshow application. However, I was unhappy with the buttons (which were in a Relative Layout), and moved them to a Linear Layout. However, when running my application, the behavior of the buttons got swapped around (ie Button 1 did Button 2's work and vice-versa). I was able to remedy this by changing the id of ONE of the buttons, not all (that didn't work). Also related to this, was that my application started crashing when I switched orientation. It had worked previously when I had the Relative Layout. (I am using a Handler to change the UI for the slideshow)
I was unable to solve this issue, so I reverted to my Relative Layout, but I would like to know how this could have happened in the first place.
The layout that works:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:contentDescription="#string/imageView"
android:scaleType="centerInside"
android:src="#drawable/image1" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageButton
android:id="#+id/startStop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#string/startStop"
android:src="#drawable/ic_menu_slideshow" />
<ImageButton
android:id="#+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="false"
android:layout_toRightOf="#+id/startStop"
android:contentDescription="#string/next"
android:src="#drawable/ic_media_next" />
<ImageButton
android:id="#+id/previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_toLeftOf="#+id/startStop"
android:contentDescription="#string/previous"
android:src="#drawable/ic_media_previous" />
</RelativeLayout>
The code that causes problems:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:contentDescription="#string/imageView"
android:scaleType="centerInside"
android:src="#drawable/image1" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#30eee9e9" >
<ImageButton
android:id="#+id/previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/previous"
android:src="#drawable/ic_media_previous" />
<ImageButton
android:id="#+id/bla"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/startStop"
android:src="#drawable/ic_menu_slideshow" />
<ImageButton
android:id="#+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/next"
android:src="#drawable/ic_media_next" />

I had the same problem but with Relative Layout as parent & Linear Layout as child layout I took four imagebuttons
PLAY
SCORE
HELP
QUIT
And buttons functionality was shifted to one below next i.e. when I pressed PLAY nothing happened when pressed SCORE Game started playing when clicked HELP showed me score and so on.. I put my whole night for solving the problem but nothing happened I shutted off dam thing tried to watch movie but for a while I was getting boared watching it I started Eclipse again and the magic that it was working so fine. Dont know But Rebuild & Clean has solved my problem as DeeV said