[Android] Update input error visual cue rendering to support custom background drawables

[almedina-ms]

An accident happened and #4895 got merged, redoing the PR
Fixes #4830

Description

Adds options to modify the rendering of the error visual cues for validated inputs. The original version of this feature only considered the default drawable which has a transparent background, due to this when tinting the background it could have unintended side effect such as tinting the whole background, such as in the example below

For this fix we added two new attributes called adaptiveUsingCustomTextInputs and adaptiveUsingCustomChoiceSetInputs.

• adaptiveUsingCustomTextInputs: boolean flag that signalize the renderer to set the state_error with a value of true instead of tinting the text input background.
• adaptiveUsingCustomChoiceSetInputs: boolean flag to control some internal rendering for compact choice sets. If the value is set to true but no background is provided results may vary

On the other hand we added a new drawable state called state_error which allows customers to define background drawables which define how an invalid input would look like

Finally, we also added two new drawable selector files adaptive_choiceset_compact_background.xml and adaptive_choiceset_expanded_background.xml:

• compact drawable: controls the background for compact choicesets, if the adaptiveUsingCustomTextInputs flag is not set or set to false, the drawable is applied to a linear layout that encloses the spinner and is tinted in attention color.
• expanded drawable: controls the background for expanded choicesets (mono and multi select) and the background for Toggle inputs. In all cases this background is tinted with the attention color to mimic the current JS and iOS behaviours.

How Verified

The fix was verified by adding the previously mentioned properties into our app theme (which will be modified for each of the examples below)

<item name="adaptiveUsingCustomTextInputs">true</item>
<item name="adaptiveUsingCustomChoiceSetInputs">true</item>
<item name="android:editTextBackground">@drawable/layered_edit_text_styles</item>

For reference, layered_edit_text_styles is a selector which only defines a drawable for invalid state and a default drawable

<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:adaptivecards="http://schemas.android.com/apk/res-auto" >
    <item adaptivecards:state_error="true" android:drawable="@drawable/layered_edit_text_invalid" />
    <item android:drawable="@drawable/layered_edit_text" />
</selector>

Example 1: No custom inputs

<item name="adaptiveUsingCustomTextInputs">false</item>
<!-- <item name="android:editTextBackground">@drawable/layered_edit_text_styles</item> -->

Example 2: Having a custom drawable, but stating that is not using custom inputs

<item name="adaptiveUsingCustomTextInputs">false</item>
<item name="android:editTextBackground">@drawable/layered_edit_text_styles</item>

NOTE: the image is tinted, as it has a semi transparent background color it tints it in a lighter shade of Attention color

Example 3: Having a custom drawable

<item name="adaptiveUsingCustomTextInputs">true</item>
<item name="android:editTextBackground">@drawable/layered_edit_text_styles</item>

Example 4: Default behavior for choiceset and toggle input validations

<item name="adaptiveUsingCustomChoiceSetInputs">false</item>

Also, the default behaviour for choiceset inputs validation has changed to show a border around the inputs

Toggle Input has changed too

And the default behaviour of compact choice set is as follows

Example 5: Overriding a compact choiceset

styles.xml

<item name="adaptiveUsingCustomChoiceSetInputs">true</item>

The default background drawable for spinners can be updated by creating a file called adaptive_choiceset_compact_background.xml in the drawables folder, in this file an state_error flag can be set in the selector to define how the compact choice set should look like

adaptive_choiceset_compact_background.xml in drawables folder

<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:adaptivecards="http://schemas.android.com/apk/res-auto">
    <item adaptivecards:state_error="true">
        <layer-list android:opacity="transparent">
            <item android:gravity="left" android:width="300dp" android:end="300dp">
                <shape>
                    <solid android:color="@color/colorWhite">
                    </solid>
                </shape>
            </item>
            <item android:gravity="left" android:width="100dp" android:start="300dp">
                <shape>
                    <solid android:color="@color/colorAccent">
                    </solid> 
                </shape>
            </item>
            <item android:width="100dp" android:start="300dp" android:height="40dp">
                <bitmap android:src="@drawable/cat1" android:gravity="fill"/>
            </item>
        </layer-list>
    </item>
</selector>

Example 6: Overriding the rendering of expanded choicesets

The rendering for the expanded choice set and toggle inputs can also be modified (in this case no flag is required), the only consideration is that the border is always tinted with the attention color to keep consistency. As can be seen in the image below, the corners can be changed to be more rounded or change the width of the enclosing rectangle

Microsoft Reviewers: Open in CodeFlow

[shalinijoshi19]

@almedina-ms this is running into asome Android build failures

[shalinijoshi19]

@jwoo-msft is this actually going into 20.10?

[golddove]

I still think we should try to detect custom input rather than requiring a flag, but this is something we can revisit in the future, as it wouldn't be a breaking change.

[ghost]

🎉AdaptiveCards@2020.10 has been released which fixes this issue.:tada:

Handy links:

• Release Notes
• AdaptiveCards Website
• Official NPM Designer Release
• Official NPM Templating Release
• Official NPM Renderer Release
• Official Nuget Templating Release
• Official Nuget Renderer Release
• Official Maven Renderer Release
• Official CocoaPod Renderer Release