Unity Android NGUI Components shows smaller on the build version than the Emulator version

So i was building this UI for an app in Unity to be deployed on Android Platform.

Here is the preview from the Game Window :

enter image description here

But when i build and run the app on my device, it shows this :

enter image description here

The header log is anchored on Top, the title is anchored on Center and the buttons are anchored on Bottom.

Here is the hierarchy of the components :

enter image description here

Im new to Unity and NGUI so i really dont know what's wrong with this. Thank you guys.

Solution

Different behavior is probably caused by different resolution/ration on your device in compare to your editor window. To emulate such behavior in the unity editor, you can force resolution/ration in your game window, or you can add your specific device resolution (what I actually recommend for you to do as a good start):

adding custom resolution

When you experiment with few of them, you will see that your interface is behaving in different ways.

To change that behavior on different screens, you can check your UIRoot options, especially Scaling, see UIRoot documentation.

Another good places to start is NGUI forum's topic concerned in handling different resolutions or official video about NGUI anchors.

Hope that this will guide you to perfect cross-device interface design.