Support for OutlinedBox

[leandrofavarin]

Summary

Can't use the Material OutlinedBox variant of the TextInputLayout

Code to reproduce

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
  <com.stripe.android.view.CardInputWidget
    style="@style/Stripe.CardInputWidget.EditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:shouldShowPostalCode="false"
    />
</com.google.android.material.textfield.TextInputLayout>

Android version

Q

Impacted devices

n/A

Installation method

n/A

SDK version

16.0.1

Other information

Also tried using the Stripe.CardInputWidget.TextInputLayout, as well as without the TextInputLayout wrapping the CardInputWidget.

Currently it looks like this:

[mshafrir-stripe]

@leandrofavarin thanks for filing. We'll add this to our backlog.

[leandrofavarin]

Thanks Michael!

[sebj54]

Hi @mshafrir-stripe, is there any update or any workaround while we're waiting for an "official" way of supporting this? Maybe by overriding a layout?

It doesn't seem to work with a FilledBox also.

I found an issue and a related PR which should have addressed this issue but it does not work either:

• https://github.com/stripe/stripe-android/issues/2628
• https://github.com/stripe/stripe-android/pull/2646

I also tested by adding this to my app's styles (code is reduced to the minimum):

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="AppTheme" parent="AppThemeBase">
        <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
    </style>
</resources>

It has no effect either.

Also, it would be very convenient to have a "how to theme widgets" guide in the docs (with at least one example).

Thanks for your help on this!

[sebj54]

Hi Stripe, any update on this in 7 months?

[michelleb-stripe]

@sebj54 Sorry for the delay just looking to see if I have an alternative

[sebj54]

Hi @michelleb-stripe, thanks for catching up!

I don't know if it can be useful, but here's the better I can get with CardMultilineWidget's style: https://github.com/triniwiz/nativescript-plugins/issues/83#issuecomment-925851635

[michelleb-stripe]

@sebj54 Based on that comment looks like you were able to do a lot of the style, but still were unable to make it an OutlineBox. Is that correct?

[sebj54]

Exactly! If I use an OutlineBox in the XML layout file, it throws an error. If I remember well, it is because OutlineBox does not implement everything the Stripe view is using (I don't remember if it's the Layout or the EditText).

[michelleb-stripe]

@sebj54 Thanks for that clarification. We have some work in our backlog to work on our overall widget styling strategy.

[sebj54]

Great! Can't wait to try it 😃

[mtychyna]

It would be great to migrate all the Stripe styles to Material Components. It will give possibility to override any style on any screen. Meanwhile with Stripe I everyday face with AppCompat vs MaterialComponents theme conflicts.

[myroniak]

Hi all. I think it's a not better solution but you can try declaring style like this:

<style name="Stripe.CardMultilineWidget.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="boxStrokeColor">@color/colorAccent</item>
        <item name="boxStrokeWidth">1dp</item>
    </style>

In layout should be like this:

<com.stripe.android.view.CardMultilineWidget
                android:id="@+id/card_widget"
                style="@style/Stripe.CardMultilineWidget.TextInputLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/fragment_screening_add_card_margin_card_input_widget"
                android:layout_marginEnd="@dimen/fragment_screening_add_card_margin_card_input_widget"
                app:shouldShowPostalCode="false" />

Result: