MaterialTextField setting background to Transparent not working

[nicolasHul]

🐛 Bug Report

When setting the BackgroundColor to Transparent on a MaterialTextField the BackgroundColor is still filled with the default color, ignoring the Transparent property on Android. This is tested with a MaterialTextField inside a Grid with a Background image on Android. The Background image is a <Image> component with a rowspan of the total grid rows, and Aspect set to AspectFill. It is not (yet) tested on iOS.

I also tested it without the background image and it results in the same (the Transparent property being ignored).

Expected behavior

The Filled color should be transparent of the MaterialTextField and not default back to the #DCDCDC value.

Screenshots

XAML Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="PCS2.APP.Views.Login.LoginPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:customControls="clr-namespace:PCS2.APP.CustomComponents;assembly=PCS2.APP"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:material="clr-namespace:XF.Material.Forms.UI;assembly=XF.Material"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Shell.FlyoutBehavior="Disabled"
    Shell.NavBarIsVisible="False"
    Shell.PresentationMode="ModalAnimated"
    Shell.TabBarIsVisible="False"
    mc:Ignorable="d">


    <ContentPage.Content>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="70" />
                <RowDefinition Height="70" />
                <RowDefinition Height="70" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>


            <Image
                x:Name="PCSBackground"
                Grid.Row="0"
                Grid.RowSpan="6"
                Aspect="AspectFill" />


            <Image
                x:Name="PCSLogo"
                Grid.Row="1"
                Aspect="AspectFit"
                HeightRequest="70" />


            <material:MaterialTextField
                Grid.Row="2"
                Margin="{StaticResource EntryMargin}"
                AlwaysShowUnderline="True"
                BackgroundColor="Transparent"
                InputType="Email"
                Placeholder="E-mail of gebruikersnaam"
                Text="{Binding Email}" />


            <material:MaterialTextField
                Grid.Row="3"
                Margin="{StaticResource EntryMargin}"
                AlwaysShowUnderline="True"
                BackgroundColor="Transparent"
                InputType="Password"
                Placeholder="Wachtwoord"
                Text="{Binding Password}" />


            <material:MaterialButton
                Grid.Row="4"
                Margin="30,16,30,80"
                BackgroundColor="#3880ff"
                Command="{Binding ExecuteLogin}"
                Text="Inloggen" />


        </Grid>
    </ContentPage.Content>
</ContentPage>

Configuration

Version: 1.7.4

Platform:

• [ ] :iphone: iOS
• [x] :robot: Android
• [ ] :checkered_flag: WPF
• [ ] :earth_americas: UWP
• [ ] :apple: MacOS
• [ ] :tv: tvOS
• [x] :monkey: Xamarin.Forms

Additional information

• Using Xamarin.Forms 4.8.0.1364
• Using Xamarin.Essentials 1.5.3.2
• Targeting framework: Android 10.0 (API Level 29 - Q)

Additional used libraries:

• Splat 9.5.37

[Alextorres950325]

same here, on IOs device

[shubhamkumarnayak]

this issue need to be solved , I am also having the same problem in iOS device.

[ske66]

Because the MaterialtextField Background binding is looking for a colour, it could be an issue with string interpolation. One potential fix could be to use a binding on the Background field and set it to Color.Transparent.

<material:MaterialTextField
                Grid.Row="2"
                Margin="{StaticResource EntryMargin}"
                AlwaysShowUnderline="True"
                BackgroundColor="{Binding BGColor"
                InputType="Email"
                Placeholder="E-mail of gebruikersnaam"
                Text="{Binding Email}" />

public Color BGColor {get; set} = Color.Transparent;

[softlion]

Maybe fixed by https://github.com/Baseflow/XF-Material-Library/pull/378 or https://github.com/Baseflow/XF-Material-Library/pull/379

[softlion]

@divyesh008 if you read carefully you'll see that the pr are not merged yet.

[yasserjarouf]

Dude you confused my world, don't use the BackgroundColor, use this: CardBackgroundColor="Transparent"

[ske66]

@yasserjarouf CardBackgroundColor is not a property of MaterialButton

[felipechavez]

Downgrading XF to 5.0.0.2012 is a temporary workaround for me.