0

As in the title, my material buttons have a strange border around them that appears when I make them transparent. I'm not really sure what's causing this, any help would be appreciated.

My initial thought was that the button automatically contained a textview, and my code was setting the background of the textview and button, making them overlay, making them visible while transparent. However, I tried removing the "text" tag, and removing the android:text xml line, and still had this same result.

enter image description here

Button Style:

    <style name="button" parent="Widget.MaterialComponents.Button">
        <item name="android:textSize">25sp</item>
        <item name="shapeAppearanceOverlay">@style/bgShape</item>
        <item name="android:textAllCaps">false</item>
    </style>
    <style name="clock" parent="Widget.MaterialComponents.TextView">
        <item name="android:textSize">25sp</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">?colorOnPrimary</item>
        <item name="shapeAppearanceOverlay">@style/bgShape</item>
    </style>
    <style name="bgShape">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">15sp</item>
    </style>

Button XML:

    <Button
        android:id="@+id/home"
        android:layout_width="match_parent"
        android:layout_height="80sp"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:layout_gravity="bottom"
        android:text="@string/home"
        style="@style/button"
        android:tag="text-foreground"/>

Code that changes view colours:

    Object tag = view.getTag();
    if(tag != null){
        String sTag = (String) tag;
        if(sTag.contains(bgTag)){
            if(sTag.contains(wpTag)){
    
            } else {
                view.setBackgroundColor(theme.bgColor);
            }
        }
        if(sTag.contains(fgTag)){
            if(!sTag.contains("clock") ){
                view.setBackgroundColor((theme.fgColor & 0x00ffffff) | (180 << 24));
            }
        }
        if(sTag.contains(txTag)){
            if(view instanceof TextView){
                if(sTag.contains(fgTag)){
                    ((TextView)view).setTextColor(theme.fgtxColor);
                } else {
                    ((TextView)view).setTextColor(theme.txColor);
                }
    
            }
        }
    }
  • As jacouille mentions below, that is an artifact from the elevation shadow drawn behind the `Button`. It's not very clear from the linked answer, but the only options really available in the SDK are to avoid it – e.g., use only fully opaque backgrounds – or to disable the shadow altogether, which is usually done by zeroing the elevation. For a `Button`, you'll probably have to set `android:stateListAnimator="@null"`, 'cause it animates its elevation when pressed. If you want both the translucent background and the elevation shadow, without the glitch, it'll take some sort of workaround, AFAIK. – Mike M. Apr 21 '22 at 14:03
  • android:stateListAnimate="@null" solved it! I don't really care about losing the animation as all buttons in my app launch a new screen. The animations are never seen anyways. This works perfectly :) – VectorsAreCool123 Apr 21 '22 at 16:11

1 Answers1

0

It seems this problem is related to your transparent background revealing your button shadow. See this SO answer for possible solution

Jacouille
  • 951
  • 8
  • 14