Applying a top and bottom border to TextView using background doesn't work, but foreground does

Question

I've been trying to set a top and bottom border to a TextView, which rests inside a ConstraintLayout, which is sitting in a CardView:

<androidx.cardview.widget.CardView
    android:id="@+id/ham_frame"
    android:layout_width="244dp"
    android:layout_height="100dp"
    android:layout_marginTop="24dp"
    android:layout_marginEnd="24dp"
    app:cardBackgroundColor="?attr/background"
    app:cardCornerRadius="4dp"
    app:cardElevation="3dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/ham_frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView6"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:background="@drawable/border_top_bottom"
            android:text="TextView"
            android:textAlignment="center"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

The layer-list:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-2dp" android:left="-2dp" android:right="-2dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="?attr/colorSeperator" />
            <solid android:color="#00000000" />
        </shape>
    </item>
    <item android:bottom="-2dp" android:left="-2dp" android:right="-2dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="?attr/colorSeperator" />
            <solid android:color="#00000000" />
        </shape>
    </item>
</layer-list>

Now, I have gone through the questions asked about how to do that earlier, and followed multiple variations of the layer-list drawable to set as the background of the TextView, but that is simply not working for me (no borders are rendered in both a device and the editor).

Instead of that, setting the drawable as foreground just works, but the issue with that is it seems to be unsupported below API 23 (which is not acceptable).

Multiple answers here: Is there an easy way to add a border to the top and bottom of an Android View? seem to instruct to set the drawable as background, and there doesn't seem to be anyone facing the same issue - what could I be doing wrong?

EDIT: ?attr/colorSeperator is correctly set to #764AFF1A Double-checked, neither the editor (API 26-29) nor my LG device (G7+ Pie) render the borders.

On device, with drawable set as background:

With drawable set as foreground:

Please note the shadow-esque appearance at the top and left edges are of the container, not the TextView (which is supposed to display a slight purple-ish border).

I tried your layer-list, it can't resolve `colorSeperator`; so changed it to some custom color and the boarders are showing — Zain, Jun 06 '20 at 13:56
Hey, which device/API are you using? I've edited the question a bit to show that it doesn't render - I'm using the exact code I pasted — Vedaant Arya, Jun 06 '20 at 15:35
Hi, I tested it on android studio emulator Pixel 2, API27... — Zain, Jun 06 '20 at 17:45
I attempted a run in an emulated Pixel 2 API 29 now, and it also doesn't render correctly. So it's not a device-specific issue, must be something else in my themeing. I gave up eventually though, I'm using plain views as horizontal rules now — Vedaant Arya, Jun 06 '20 at 18:20
Yes, I've done that as well, I'll attempt making a blank activity and trying the same — Vedaant Arya, Jun 06 '20 at 18:22
[this](https://imgur.com/a/V5sunSv) is how it looks like in mine — Zain, Jun 06 '20 at 18:24
Okay, a new Empty Activity also had the same issue, so I played around with the preview settings and set the preview theme to AppCompat.Light.NoActionBar (a default theme). The borders showed up then! I'll scour through my theme attributes now, once I find what attribute I messed up, I'll post the details here. Thanks for all your help @Zain! :) — Vedaant Arya, Jun 06 '20 at 18:27

score 0 · Accepted Answer · answered Jun 06 '20 at 18:43

Exploring as in the discussion in the question comments with Zain, the theme (under styles) I was using had set the backgroundTint to the background color of the activity (and other components in which the TextView was lying).

So, even though the background was being set as the border drawable, it was being tinted to the color (by default) of the background of its parent, so the background was indistinguishable.

Note however that setting an explicit backgroundTint on the TextView (while the one in styles existed), did not make the background visible, so the backgroundTint from default styling had precedence over the one set individually.
This behavior seems to contradict Style hierarchy
If I misinterpreted, kindly correct me

TL;DR: If you're having a similar issue, check the backgroundTint property in styles.xml among the other fixes (the drawable itself).

Applying a top and bottom border to TextView using background doesn't work, but foreground does

1 Answers1