Why an android app renders different in emulator and my Galaxy M?

Question

My first design renders on emulator nicely. But when it comes to my physical device, some elements are not showing and the colors are also different...

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--Material Colors-->
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>


    <!--Our Project Colors-->
    <color name="dark_green">#3FC1AF</color>
    <color name="light_green">#89DA91</color>
    <color name="red">#FFC5C5</color>
    <color name="white_green">#D6FFF9</color>
    <color name="gray">#373737</color>
</resources>

In my phone the design shows different Emulator shows exact same output as the Android Studio