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

You need to actually set it as the background: `setBackground(context.getDrawable(R.drawable.tv_bottom_line_only));`. — Mike M., Jan 26 '19 at 08:17
@MikeM. Thanks for the solution. It worked partially. Now the issue is the line is appearing in top and bottom. I am required line only in bottom. you can review my implementation in layout in my updated post. — Rakshit Sorathiya, Jan 26 '19 at 09:06

113408 · Accepted Answer · 2019-01-26T11:00:36.237

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:

Thanks for solution. But the borders are not visible in all four sides this solution. — Rakshit Sorathiya, Jan 26 '19 at 09:31
This is supposed to be trivial. To have just the bottom line we just need to not give it a padding so it is not hidden under our TextView. Could you update your question with the latest code ? — 113408, Jan 26 '19 at 09:44
Post Updated. Please check and help me with my mistake. I also tried removing padding in xml but its not working. Thank you — Rakshit Sorathiya, Jan 26 '19 at 10:09
@RakshitSorathiya have you tried actually to remove shape rectangle and decrease the item top to -8dp for example ? Check my xml — 113408, Jan 26 '19 at 10:11
Yes. Actually I forgot to update that. But I tried. Here it is, It I remove bottom according to your post that the text view is becoming transparent. — Rakshit Sorathiya, Jan 26 '19 at 10:27

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

1 Answers1