Add Background property to Custom TextView component with only border at bottom

Question

I am trying to add a drawable background to a CustomTextView on android. I tried using style attribute in styles.xml but I was unable to apply it. Here is my implementation so far.

CustomTextView.java

public class CustomTextView extends android.support.v7.widget.AppCompatTextView {

public CustomTextView(Context context) {
    super(context);
    Typeface face = Typeface.createFromAsset(context.getAssets(), "font/Montserrat-Regular.ttf");
    context.getDrawable(R.drawable.tv_bottom_line_only);
    this.setTypeface(face);
}

public CustomTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    context.getDrawable(R.drawable.tv_bottom_line_only);
    Typeface face = Typeface.createFromAsset(context.getAssets(), "font/Montserrat-Regular.ttf");
    this.setTypeface(face);
}

public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    Typeface face = Typeface.createFromAsset(context.getAssets(), "font/Montserrat-Regular.ttf");
    context.getDrawable(R.drawable.tv_bottom_line_only);
    this.setTypeface(face);
}

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
  }
}

My drawable file:

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

Here, is my implementation in layout xml.

...
 <com.project.utils.CustomTextView
                            android:id="@+id/profile_et_title"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:imeOptions="actionNext"
                            android:inputType="text"
                            android:padding="@dimen/_4sdp"
                            android:textColor="@color/black"
                            android:textSize="@dimen/_8sdp" />

Here is the snapshot of the issue. I want to remove the border appearing in top.

Thank you

Answer 1

To set the drawable as your background you should use :

setBackground(context.getDrawable(R.drawable.tv_bottom_line_only));

Now to have only a line at the bottom, you should remove the rectangle shape from your drawable.

MainActivity:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Layout xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:gravity="center">

    <org.mayday.myapplication.CustomTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</LinearLayout>

tv_bottom_line_only xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-8dp" android:left="-8dp" android:right="-8dp">
        <shape>
            <stroke android:width="0.5dp" android:color="@android:color/black" />
        </shape>
    </item>
</layer-list>

Result: