set the statausbarcolor according to desighn guideliness requirement

[NiranjanNlc]

Following the concept described in this link, i performed the following steps to solve the issuse :

Defining color in the colors.xml

Based on ODK- X Desighn Guideliness , I add color on the color.xml to be used in the app :

<color name="background_txtButton">#fdfdfd</color>

In the desighn guidelines, It is said that the #fdfdfd would be used for the background and button text .

Overrding the colorPrimary and colorPrimaryDark on the theme with same color :

<item name="android:colorPrimary">@color/background_txtButton</item>  
<item name="android:colorPrimaryDark">@color/background_txtButton</item>

Adding windowLightStatusBar value as true to ensure the visibility of wifi, battery , mobile netwrk status like component on status bar :

<item name="android:windowLightStatusBar" tools:ignore="NewApi">true</item>

Changing the theme from the light theme to the DayNight theme .

Final style looks like this :

<style name="Opendatakit" parent="Theme.AppCompat.DayNight">  
  <item name="android:scrollbarThumbHorizontal">@drawable/thumb</item>  
  <item name="android:scrollbarThumbVertical">@drawable/thumb</item>  
  <item name="android:scrollbarSize">2.5mm</item>  
  <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>  
  <item name="android:scrollbarAlwaysDrawHorizontalTrack">true</item>  
  <item name="android:colorPrimary">@color/background_txtButton</item>  
  <item name="android:colorPrimaryDark">@color/background_txtButton</item>  
  <item name="android:windowLightStatusBar" tools:ignore="NewApi">true</item>  
  <item name="actionBarStyle">@style/OdkActionBar</item>  
  <item name="preferenceTheme">@style/PreferenceThemeOverlay.v14.Material</item>  
</style>

Adding the color.xml (night ) file and putting the value of background_txtButton to #1d1d1d in order to meet the design guidelines for dark mode

<color name="background_txtButton"> #1d1d1d </color>

[maprehensive]

Looks good @NiranjanNlc - well done.
Note that screenshots of the output can help reviewers immediately see the results.
I've asked for someone to review the code. Will get some more feedback soon.

[NiranjanNlc]

Looks good @NiranjanNlc - well done. Note that screenshots of the output can help reviewers immediately see the results. I've asked for someone to review the code. Will get some more feedback soon.

Thanks for the suggestion . I have attached the screenshots too .After making the changes , the app will preview like this in light mode and dark mode respectively :

ODK-X Service :

ODK-X Survey :

ODK-X Tables :

[wbrunette]

Your changes looked good. When I tried applying the theme to Services on Android version 10 only the 3 dots icon turned white. The others were still black. Something you may want to investigate. it could also be you made changes in services so they came out white, but it's not referenced in the pull request.

[NiranjanNlc]

Your changes looked good. When I tried applying the theme to Services on Android version 10 only the 3 dots icon turned white. The others were still black. Something you may want to investigate. it could also be you made changes in services so they came out white, but it's not referenced in the pull request.

Hey @wbrunette , could you please attach the screenshots of your result ? I have used the fresh repo from the github to make sure that no change has been made to the services . I can clearly view the same result as above screenshots in my device . The android version on which my device is running is 10 .

[NiranjanNlc]

Hey @wbrunette I investigated the issuses and found that the screen is showing differently on the emulator and device. For me also , only three dots was turning white and other do not change on emulator .

It is actually that the night mode is not properly implemented in our pull request.

In order to address the issuse, i have done the followings :

• Added the theme.xml for the night mode .

• Added the drawable-night folder for the night mode .

• Added the images of svg ( .xml extension ) inside the drawable-night folder so that they are shown while changing into night mode

• Complementary pull request has been made on the service repository to do the same for more images .

Given screen cast verify the result from emulator :

[Redeem-Grimm-Satoshi]

@NiranjanNlc Glad you figured it out, you don't need specific tools for svg.

[wbrunette]

@NiranjanNlc I did a quick look and I did not notice anything wrong.

The combination of PRs looks improved.

Of course, testing is the only way to make sure by going through all the screens.