how to put a border around an android relativelayout?

Question

I've seen this subject about puting a border around an android textview, and I used it. But now, I would like to put a border around widgets which are situated into a relative layout. How can I do it?

Answer 1

1. in your res/drawable folder, create a new file background_border.xml

In this file, you will define the background for widget like this:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle" >
    <!-- This is the stroke you want to define -->
    <stroke android:width="1dp" 
            android:color="@color/color_stroke"/>

    <!-- Optional, round your corners -->
    <corners android:bottomLeftRadius="0dp"
             android:topLeftRadius="5dp"
             android:bottomRightRadius="5dp"
             android:topRightRadius="0dp" />

    <!-- Optional, fill the rest of your background with a color or gradient, use transparent if you only want the border to be displayed-->
    <gradient android:startColor="@android:color/transparent"
              android:endColor="@android:color/transparent"
              android:angle="90"/>
</shape>

2. set the background of your widget to the drawable configuration you've just created

eg. if you want to put your border on a relativelayout:

<RelativeLayout            
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/background_border"
            android:padding="15dp">
    ...
</RelativeLayout>

Answer 2

RelativeLayout layout = (RelativeLayout) view.findViewById(R.id.borderEffect); // id fetch from xml
ShapeDrawable rectShapeDrawable = new ShapeDrawable(); // pre defined class

// get paint
Paint paint = rectShapeDrawable.getPaint();

// set border color, stroke and stroke width
paint.setColor(Color.GRAY);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(5); // you can change the value of 5
layout.setBackgroundDrawable(rectShapeDrawable);

Answer 3

Create a FrameLayout that gets the background color of your border, and a margin or padding of your border width, and place that FrameLayout in your RelativeLayout. Place the TextView in your FrameLayout instead of directly in the RelativeLayout. poof instant border.

Answer 4

Though all the provided answers work,they are very rigid.what if you want to customise border color,borderthickness for different screens. for that you should try my solution.We are going to follow three steps in creating a custom RelativeLayout that allow you to provide borderColor and Thickness for bottom border.

1)Create a class that extends RelativeLayout and override on Draw method

public class BorderRelativeLayout extends RelativeLayout {

  private float borderThickness;
  private int borderColor;

  public BorderRelativeLayout(Context context) {
    this(context, null, 0);
  }

  public BorderRelativeLayout(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public BorderRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    Rect rect = new Rect();
    Paint paint = new Paint();
    paint.setColor(borderColor);
    paint.setStrokeWidth(borderThickness);
    getLocalVisibleRect(rect);
    canvas.drawLine(rect.left, rect.bottom, rect.right, rect.bottom, paint);
  }

  private void init(Context context, AttributeSet attrs) {
    setWillNotDraw(false);

    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.BorderRelativeLayout);

    borderThickness = array.getDimension(R.styleable.BorderRelativeLayout_borderThickness, 0.5f);
    borderColor = array.getColor(R.styleable.BorderRelativeLayout_borderColor,
        ContextCompat.getColor(context, R.color.colorPrimary));
  }
}

2)Define stylable properties in attrs.xml

<declare-styleable name="BorderRelativeLayout">
    <attr name="borderThickness" format="dimension"/>
    <attr name="borderColor" format="color"/>
  </declare-styleable>

3) you are done and you can use it like

<com.spacewek.spacewek.controls.BorderRelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/headLayout"
      app:borderThickness="2dp"
      app:borderColor="@color/divider_new_color">

 </com.spacewek.spacewek.controls.BorderRelativeLayout>