Android Studio Designer displaying widgets & fragments differently than my phone

Question

I'm having problems with how items appear in the Android Studio Designer and my phone. The first problem is that widgets & fragments appear differently in the designer/emulator than on my phone. I have tried lowering the resolution in the designer to test other device resolutions but it still appears differently on my phone despite the resolutions being relatively the same.

Designer view:

http://i.imgur.com/5kZKFDd.png

HTC Desire 510:

http://i.imgur.com/SqDiyBy.png

The designer view is using the Nexus S's resolution which is smaller than my phone's resolution, yet the items still appear differently. I am in fact using RelativeLayout.

The other problem is that if you noticed, the button and text appears differently in the designer/emulator than on my phone. When I click the button on my phone, there is no button down effect, yet in the emulator, the effect is present. This is problematic because I want my designs to be consistent across all devices.

Answer 1

The designer/emulator use the official frameworks of android, while Some mobile device manufacturer may modify some appearance of widgets in frameworks, so the "View" you see in designer may be different from what you see in real devices, even different devices have different appearance for some widgets.

Support the real device have not modified widgets appearance in frameworks, then you can expect them have the same appearance with designer/emulator. One thing to notice, Android studio designer renders "Views" using some theme, you can specify the theme using "tools:context" attribute or select one in options, for example:

<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="horizontal"
          tools:context=".MainActivity"/>