feat(android): initial support for Material You themeing #13028

garymathews · 2021-08-17T06:14:02Z

Initial support for Material You dynamic theming
Colors obtained from platform/frameworks/.../colors_device_defaults.xml to match Google's behavior

NOTES

This does not modify the border radius of Cards, Dialogs, ProgressBars. I expect a revision of Material Components
to support the new aesthetic in Android 12

TEST CASE

SHOW

const win = Ti.UI.createWindow();
const table = Ti.UI.createTableView({ touchFeedback: false });

function section_dayNight() {
    const row = Ti.UI.createTableViewRow();
    const section = Ti.UI.createTableViewSection();
    const view = Ti.UI.createView({
        layout: 'horizontal',
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE
    });
    const center = Ti.UI.createView({
        height: 60
    });
    const label = Ti.UI.createLabel({
        text: 'Toggle dark theme: '
    });
    const toggle = Ti.UI.createSwitch({
        value: false
    });

    toggle.addEventListener('change', e => {
        if (Ti.UI.overrideUserInterfaceStyle != Ti.UI.USER_INTERFACE_STYLE_DARK) {
            Ti.UI.overrideUserInterfaceStyle = Ti.UI.USER_INTERFACE_STYLE_DARK;
        } else {
            Ti.UI.overrideUserInterfaceStyle = Ti.UI.USER_INTERFACE_STYLE_UNSPECIFIED;
        }
    });

    view.add([label, toggle]);
    center.add(view);
    row.add(center);
    section.add(row);

    return section;
}

function section_buttons() {
    const title = Ti.UI.createLabel({
        text: 'Button',
        left: 10,
        font: {
            fontSize: 26
        }
    });
    const row = Ti.UI.createTableViewRow();
    const section = Ti.UI.createTableViewSection({
        headerView: title
    });
    const view = Ti.UI.createView({
        layout: 'vertical',
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE,
        bottom: 10
    });

    view.add([
        Ti.UI.createButton({
            top: 10,
            title: 'BUTTON_STYLE_OPTION_POSITIVE',
            style: Ti.UI.BUTTON_STYLE_OPTION_POSITIVE
        }),
        Ti.UI.createButton({
            top: 5,
            title: 'BUTTON_STYLE_OPTION_NEGATIVE',
            style: Ti.UI.BUTTON_STYLE_OPTION_NEGATIVE
        }),
        Ti.UI.createButton({
            top: 5,
            title: 'BUTTON_STYLE_OPTION_NEUTRAL',
            style: Ti.UI.BUTTON_STYLE_OPTION_NEUTRAL
        }),
        Ti.UI.createButton({
            top: 5,
            title: 'BUTTON_STYLE_OUTLINED',
            style: Ti.UI.BUTTON_STYLE_OUTLINED
        }),
        Ti.UI.createButton({
            top: 5,
            title: 'BUTTON_STYLE_TEXT',
            style: Ti.UI.BUTTON_STYLE_TEXT
        }),
        Ti.UI.createButton({
            top: 5,
            title: 'BUTTON_STYLE_FILLED',
            style: Ti.UI.BUTTON_STYLE_FILLED
        })
    ]);

    row.add(view);
    section.add(row);

    return section;
}

function section_textFields() {
    const title = Ti.UI.createLabel({
        text: 'TextField',
        left: 10,
        font: {
            fontSize: 26
        }
    });
    const row = Ti.UI.createTableViewRow();
    const section = Ti.UI.createTableViewSection({
        headerView: title
    });
    const view = Ti.UI.createView({
        layout: 'vertical',
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE,
        bottom: 10
    });

    view.add([
        Ti.UI.createTextField({
            top: 10,
            left: 10,
            right: 10,
            hintText: 'INPUT_BORDERSTYLE_FILLED',
            borderStyle: Ti.UI.INPUT_BORDERSTYLE_FILLED
        }),
        Ti.UI.createTextField({
            top: 10,
            left: 10,
            right: 10,
            hintText: 'INPUT_BORDERSTYLE_BEZEL',
            borderStyle: Ti.UI.INPUT_BORDERSTYLE_BEZEL
        }),
        Ti.UI.createTextField({
            top: 10,
            left: 10,
            right: 10,
            hintText: 'INPUT_BORDERSTYLE_LINE',
            borderStyle: Ti.UI.INPUT_BORDERSTYLE_LINE
        }),
        Ti.UI.createTextField({
            top: 10,
            left: 10,
            right: 10,
            hintText: 'INPUT_BORDERSTYLE_ROUNDED',
            borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
        }),
        Ti.UI.createTextField({
            top: 10,
            left: 10,
            right: 10,
            hintText: 'INPUT_BORDERSTYLE_NONE',
            borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE
        }),
        Ti.UI.createTextField({
            top: 10,
            left: 10,
            right: 10,
            hintText: 'INPUT_BORDERSTYLE_UNDERLINED',
            borderStyle: Ti.UI.INPUT_BORDERSTYLE_UNDERLINED
        })
    ]);

    row.add(view);
    section.add(row);

    return section;
}

function section_switch() {
    const title = Ti.UI.createLabel({
        text: 'Switch',
        left: 10,
        font: {
            fontSize: 26
        }
    });
    const row = Ti.UI.createTableViewRow();
    const section = Ti.UI.createTableViewSection({
        headerView: title
    });
    const view = Ti.UI.createView({
        layout: 'vertical',
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE,
        bottom: 10
    });

    view.add([
        Ti.UI.createSwitch({
            style: Ti.UI.SWITCH_STYLE_CHECKBOX,
            title: 'SWITCH_STYLE_CHECKBOX',
            top: 10
        }),
        Ti.UI.createSwitch({
            style: Ti.UI.SWITCH_STYLE_SLIDER,
            title: 'SWITCH_STYLE_SLIDER',
            top: 10
        }),
        Ti.UI.createSwitch({
            style: Ti.UI.SWITCH_STYLE_TOGGLE_BUTTON,
            title: 'SWITCH_STYLE_TOGGLE_BUTTON',
            top: 10
        }),
        Ti.UI.createSwitch({
            style: Ti.UI.SWITCH_STYLE_CHIP,
            title: 'SWITCH_STYLE_CHIP',
            top: 10
        })
    ]);

    row.add(view);
    section.add(row);

    return section;
}

function section_alert() {
    const title = Ti.UI.createLabel({
        text: 'Dialog',
        left: 10,
        font: {
            fontSize: 26
        }
    });
    const row = Ti.UI.createTableViewRow();
    const section = Ti.UI.createTableViewSection({
        headerView: title
    });
    const view = Ti.UI.createView({
        layout: 'vertical',
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE,
        bottom: 10
    });
    const button_alert = Ti.UI.createButton({
        top: 10,
        title: 'alert()'
    });
    const button_alertDialog = Ti.UI.createButton({
        top: 10,
        title: 'Ti.UI.AlertDialog'
    });
    const button_optionDialog = Ti.UI.createButton({
        top: 10,
        title: 'Ti.UI.OptionDialog'
    });

    button_alert.addEventListener('click', e => {
        alert('This is an alert.');
    });

    button_alertDialog.addEventListener('click', e => {
        Ti.UI.createAlertDialog({
            cancel: 1,
            buttonNames: ['Okay', 'Cancel'],
            message: 'This is an Ti.UI.AlertDialog.',
            title: 'Ti.UI.AlertDialog'
        }).show();
    });

    button_optionDialog.addEventListener('click', e => {
        Ti.UI.createOptionDialog({
            cancel: 1,
            options: ['Okay', 'Cancel'],
            selectedIndex: 0,
            destructive: 1,
            title: 'Ti.UI.OptionDialog'
        }).show();
    });

    view.add([
        button_alert,
        button_alertDialog,
        button_optionDialog
    ]);

    row.add(view);
    section.add(row);

    return section;
}

function section_cardView() {
    const title = Ti.UI.createLabel({
        text: 'CardView',
        left: 10,
        font: {
            fontSize: 26
        }
    });
    const row = Ti.UI.createTableViewRow();
    const section = Ti.UI.createTableViewSection({
        headerView: title
    });
    const view = Ti.UI.createView({
        layout: 'vertical',
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE,
        bottom: 10
    });

    if (Ti.Platform.osname === 'android') {
        const card = Ti.UI.Android.createCardView({
            layout: 'vertical',
            padding: 16,
            top: 10,
            left: 10,
            right: 10,
        });
        card.add(Ti.UI.createLabel({
            text: 'This is a Ti.UI.Android.CardView',
            maxLines: 1,
            width: Ti.UI.FILL
        }));

        view.add([card]);
    }

    row.add(view);
    section.add(row);

    return section;
}

function section_activityIndicator() {
    const title = Ti.UI.createLabel({
        text: 'ActivityIndicator',
        left: 10,
        font: {
            fontSize: 26
        }
    });
    const row = Ti.UI.createTableViewRow();
    const section = Ti.UI.createTableViewSection({
        headerView: title
    });
    const view = Ti.UI.createView({
        layout: 'vertical',
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE,
        bottom: 10
    });

    function createIndicator(message, style) {
        const indicator = Ti.UI.createActivityIndicator({
            message: message,
            style: style,
            top: 10
        });

        indicator.show();
        return indicator;
    }

    view.add([
        createIndicator('PLAIN', Ti.UI.ActivityIndicatorStyle.PLAIN),
        createIndicator('BIG', Ti.UI.ActivityIndicatorStyle.BIG),
        createIndicator('DARK', Ti.UI.ActivityIndicatorStyle.DARK),
        createIndicator('BIG_DARK', Ti.UI.ActivityIndicatorStyle.BIG_DARK),
    ]);

    row.add(view);
    section.add(row);

    return section;
}

function section_progressBar() {
    const title = Ti.UI.createLabel({
        text: 'ProgressBar',
        left: 10,
        font: {
            fontSize: 26
        }
    });
    const row = Ti.UI.createTableViewRow();
    const section = Ti.UI.createTableViewSection({
        headerView: title
    });
    const view = Ti.UI.createView({
        layout: 'vertical',
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE,
        bottom: 10
    });
    const progressBar = Ti.UI.createProgressBar({
        top: 10,
        min: 0,
        max: 100,
        width: '80%',
        animated: false
    });
    const progressBar_animated = Ti.UI.createProgressBar({
        top: 10,
        min: 0,
        max: 100,
        width: '80%'
    });

    setInterval(_ => {
        if (progressBar.value < progressBar.max) {
            progressBar.value++;
            progressBar.message = `${progressBar.value}%`;
        } else {
            progressBar.value = 0;
        }
        if (progressBar_animated.value < progressBar_animated.max) {
            progressBar_animated.value++;
            progressBar_animated.message = `${progressBar_animated.value}% (animated: true)`;
        } else {
            progressBar_animated.value = 0;
        }
    }, 50);

    view.add([
        progressBar,
        progressBar_animated
    ]);

    row.add(view);
    section.add(row);

    return section;
}

function section_picker() {
    const title = Ti.UI.createLabel({
        text: 'Picker',
        left: 10,
        font: {
            fontSize: 26
        }
    });
    const row = Ti.UI.createTableViewRow();
    const section = Ti.UI.createTableViewSection({
        headerView: title
    });
    const view = Ti.UI.createView({
        layout: 'vertical',
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE,
        bottom: 10
    });
    const button_date = Ti.UI.createButton({
        top: 10,
        title: 'Date'
    });
    const button_time = Ti.UI.createButton({
        top: 10,
        title: 'Time'
    });


    button_date.addEventListener('click', e => {
        const picker = Ti.UI.createPicker({
            type: Ti.UI.PICKER_TYPE_DATE,
            minDate: new Date(2020, 8, 10),
            maxDate: new Date(2021, 1, 24),
            value: new Date(2021, 0, 1)
        });
        picker.showDatePickerDialog({
            title: 'Date Picker'
        });
    });

    button_time.addEventListener('click', e => {
        const picker = Ti.UI.createPicker({
            type: Ti.UI.PICKER_TYPE_TIME,
            value: new Date(2021, 0, 1, 12)
        });
        picker.showTimePickerDialog({
            title: 'Time Picker'
        });
    });

    view.add([
        button_date,
        button_time
    ]);

    row.add(view);
    section.add(row);

    return section;
}

table.data = [
    section_dayNight(),
    section_buttons(),
    section_textFields(),
    section_alert(),
    section_cardView(),
    section_switch(),
    section_activityIndicator(),
    section_progressBar(),
    section_picker()
];

win.add(table);
win.open();

JIRA Ticket

build · 2021-08-17T06:37:22Z

	Fails
🚫	Tests have failed, see below for more information.
🚫	Test suite crashed on iOS simulator. Please see the crash log for more details.

	Messages
📖	✊ The commits in this PR match our conventions! Feel free to Rebase and Merge this PR when ready.
📖	❌ 1 tests have failed There are 1 tests failing and 680 skipped out of 11868 total tests.

Tests:

Classname

Name

Time

Error

ios.iphone.Titanium.Filesystem.File

.remoteBackup assigning Boolean value doesn't throw (14.4.0)

2.227

Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (app.js)
run@file:///Users/build/Library/Developer/CoreSimulator/Devices/17B558FE-C6B3-44C0-BA31-5FAFD231C9CB/data/Containers/Bundle/Application/A3B942F4-BED3-47A0-B32C-CECE7D09930F/mocha.app/ti.main.js:9258:22
processImmediateQueue@file:///Users/build/Library/Developer/CoreSimulator/Devices/17B558FE-C6B3-44C0-BA31-5FAFD231C9CB/data/Containers/Bundle/Application/A3B942F4-BED3-47A0-B32C-CECE7D09930F/mocha.app/ti.main.js:9321:18
drainQueues@file:///Users/build/Library/Developer/CoreSimulator/Devices/17B558FE-C6B3-44C0-BA31-5FAFD231C9CB/data/Containers/Bundle/Application/A3B942F4-BED3-47A0-B32C-CECE7D09930F/mocha.app/ti.main.js:9298:52

Generated by 🚫 dangerJS against 3bef994

hansemannn · 2021-10-06T19:54:33Z

The Material Compontents are currently in v1.5.0 Alpha, which adds support for Material 3 (the implementation of Material You). Happy to help testing once thats ready!

jquick-axway · 2021-10-06T19:59:09Z

@hansemannn , we're already aware of this. It's been in alpha for over a month. We're waiting for a release version

hansemannn · 2022-01-24T09:42:23Z

@jquick-axway @garymathews It has now been released :)

hansemannn · 2022-08-10T20:42:10Z

@m1ga We should slowly prepare for this to become more relevant. Happy to offer a helping hand once it's clear whats to left to do.

feat(android): initial support for Material You themeing

3bef994

garymathews added android feature no tests labels Aug 17, 2021

garymathews requested a review from jquick-axway August 17, 2021 06:14

garymathews added this to the 10.1.0 milestone Aug 17, 2021

jquick-axway modified the milestones: 10.1.0, 10.2.0 Sep 8, 2021

jquick-axway added the work in progress 🚧 label Sep 8, 2021

hansemannn added 2 commits March 19, 2022 22:35

Merge branch 'master' into TIMOB-28512

813a293

Merge branch 'master' into TIMOB-28512

dbe5d09

hansemannn modified the milestones: 11.0.0, 11.1.0 May 27, 2022

hansemannn modified the milestones: 11.1.0, 12.0.0 Oct 7, 2022

Merge branch 'master' into TIMOB-28512

6f6f965

m1ga requested review from m1ga and removed request for jquick-axway October 8, 2022 16:14

This was referenced Oct 8, 2022

feat(android): Material You Themes #13596

Closed

feat(android): material you themes #13597

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(android): initial support for Material You themeing #13028

feat(android): initial support for Material You themeing #13028

garymathews commented Aug 17, 2021 •

edited

Loading

build commented Aug 17, 2021

hansemannn commented Oct 6, 2021

jquick-axway commented Oct 6, 2021

hansemannn commented Jan 24, 2022

hansemannn commented Aug 10, 2022

feat(android): initial support for Material You themeing #13028

Are you sure you want to change the base?

feat(android): initial support for Material You themeing #13028

Conversation

garymathews commented Aug 17, 2021 • edited Loading

NOTES

TEST CASE

build commented Aug 17, 2021

Tests:

hansemannn commented Oct 6, 2021

jquick-axway commented Oct 6, 2021

hansemannn commented Jan 24, 2022

hansemannn commented Aug 10, 2022

garymathews commented Aug 17, 2021 •

edited

Loading