NativeScript / NativeScript/NativeScript

Custom Modal Styles/Theme for Android

Open
#7,849 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature
Dominant language
TypeScript
Stars
25.7k
Forks
1.7k
Avg merge
1d 5h
Merged PRs (30d)
35

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at ui/core/view/view.android.ts around line 163 and trace the DialogFragment construction plus the showModal options and their types. Review how an Android style resource could be passed to the modal; done means a modal can use a declared custom theme, including window attributes and animations, without changing existing modal behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, typescript
Domain
mobile
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.