Skip to content

Custom Modal Styles/Theme for Android #7849

Open

Description

@bradmartin

Is your feature request related to a problem? Please describe.
On android when presenting dialogs you can apply a theme declared in the res/values/styles... (typically). That will apply certain flags and system attributes.

Describe the solution you'd like
Additional prop on the modal to pass a custom theme for the modal. This would also allow the animation of the modal window to be declared with this approach.

Describe alternatives you've considered
Keeping forked core-modules :)

Additional context
Being able to set some parts of a modal style would be nice to be exposed as an android style that was applied during the constructor of the DialogFragment https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/core/view/view.android.ts#L163

For example, I might have a modal that I want to style differently than the rest of my app, maybe I want it to have a blue statusbar and the rest of my app has a red statusbar. Right now there is no simple way to do this.

Also, allowing a theme to be set on the dialog fragment would be a simple way to allow overriding the entrance/exit animation applied to modals in NS.

Suppose I have this style declared in values-v21:

 // Set in dialog class
    <style name="WhiteDialogTheme" parent="AppThemeBase">
        <item name="android:windowNoTitle">true</item>
        <item name="colorPrimaryDark">#FFFFFF</item>
        <item name="android:windowIsFloating">false</item>
        <!-- Set this to true if you want Full Screen without status bar -->
        <item name="android:windowFullscreen">false</item>
        <!-- Additionally if you want animations when dialog opening -->
        <!--<item name="android:windowEnterAnimation">@anim/slide_up</item>-->
        <!--<item name="android:windowExitAnimation">@anim/slide_down</item>-->
    </style>

I'm not entirely sure the best approach to handling this with NS and making it user friendly so maybe we can start a discussion on the best API for allowing users to define custom themes/styles to the modals.

At first glance, maybe adding customAndroidTheme to the showModal options.

Which then it just pulls from the R.style.CustomModalTheme or whatever the style declared by the user under styles.xml they want to use.

Would allow for simple/reusable styles and enter/exit animations for modals in NS.

Getting the theme from resources is straight forward:

   var resources = this.getActivity().getResources();
   var theme = resources.getIdentifier(
        'CustomDialogTheme',
        'style',
        this.getActivity()
          .getApplication()
          .getPackageName()
      );

      this.setStyle(androidx.fragment.app.DialogFragment.STYLE_NO_TITLE, theme);

This also might be something the team needs to consider to support dark mode on android. I haven't looked at the dark mode support issue and how modals are being styled, but if the underlying dark mode on android doesn't change the running app theme then the status bar is likely to be wrong when switching between dark/light.

Activity

  1. bradmartin commented on Sep 20, 2019

    @bradmartin
    ContributorAuthor

    I can work on the PR for this if the team is interested and has any thoughts on the direction to open up the showModal for this behavior 👍

  2. bradmartin commented on Sep 20, 2019

    @bradmartin
    ContributorAuthor

    I just noticed the ShowModalOptions already has an android on it. So maybe:

      android: {
              styleTheme: 'MyCustomDialogTheme'
            }
    

    Then if this is set, it's used on the setStyle method creating the dialog, if not continue using 0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions