Android: Putting a border around multiple views

Question

I am trying to figure out how to put a border around multiple views for an android app I'm working on. It seems like it should be very simple but I can't seem to figure it out. I have the following XML file saved in my drawable folder:

<?xml version="1.0" encoding="UTF-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#ffffff" />
    <stroke android:width="1dp" android:color="#000000"/>
    <padding android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp"/>

</shape>

I then have multiple TextViews and one plain View as part of my main Android app:

<TextView
    android:id="@+id/tvTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/backTop"
    android:gravity="center"
    android:text="@string/title"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/tvProvHeader"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignStart="@+id/tvTitle"
    android:layout_below="@+id/tvTitle"
    android:layout_marginEnd="20dp"
    android:layout_marginStart="30dp"
    android:layout_marginTop="35dp"
    android:text="@string/providerHeader"
    android:textAppearance="?android:attr/textAppearanceSmall" />

<TextView
    android:id="@+id/tvSigStrHeader"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/tvProvHeader"
    android:layout_alignBottom="@+id/tvProvHeader"
    android:layout_marginStart="50dp"
    android:layout_toEndOf="@+id/tvProvHeader"
    android:text="@string/sigStrHeader"
    android:textAppearance="?android:attr/textAppearanceSmall" />

<View
    android:layout_width="fill_parent"
    android:layout_height="4dp"
    android:layout_alignStart="@+id/tvTitle"
    android:layout_alignEnd="@+id/tvTitle"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_below="@+id/tvProvHeader"
    android:background="#cccccc" />

<TextView
    android:id="@+id/tvProv1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignStart="@+id/tvProvHeader"
    android:layout_below="@+id/tvProvHeader"
    android:layout_marginTop="16dp"
    android:text="" />

<TextView
    android:id="@+id/tvProv2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignStart="@+id/tvProv1"
    android:layout_below="@+id/tvProv1"
    android:text="" />

<TextView
    android:id="@+id/tvProv3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignStart="@+id/tvProv2"
    android:layout_below="@+id/tvProv2"
    android:text="" />

<TextView
    android:id="@+id/tvProv4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignStart="@+id/tvProv3"
    android:layout_centerVertical="true"
    android:text="" />

I would like to place the border (from the drawable) around all but the first TextView. I have looked at using ViewGroup but I can't seem to figure out how to make that work. How would I go about doing this?

Chad Bingham · Accepted Answer · 2015-04-14T00:05:37.967

3

Make a LinearLayout within your root layout. Then in that layout, put all the TextViews. Then set the linear layout background to your drawable.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <TextView
      android:id="@+id/tvTitle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentEnd="true"
      android:layout_alignParentStart="true"
      android:layout_alignParentTop="true"
      android:background="@drawable/backTop"
      android:gravity="center"
      android:text="@string/title"
      android:textAppearance="?android:attr/textAppearanceMedium" />

  <LinearLayout
      android:orientation="vertical"
      android:id="@+id/llLinearLayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@drawable/your_borderShape>

      ///All of the other text views here

  <LinearLayout/>

You do not have to use LinearLayout by the way. RelativeLayout is another popular option.

edited Apr 14 '15 at 00:05

answered Apr 13 '15 at 23:56

Chad Bingham

32,650
19
86
115

Thanks, I've tried both and I keep getting these warnings: http://oi58.tinypic.com/2sb25hz.jpg Can they safely be ignored, or am I missing a step? – DerStrom8 Apr 14 '15 at 00:03
LinearLayout doesn't allow for align start, or anything that requires another view to tell its position. That is what you would use relativeLayout for. Linear layout will just add all the view one-after-the other – Chad Bingham Apr 14 '15 at 00:07
Perfect! When I first tried this I was getting errors saying something about not being a sibling to the same layout, but that was just a reference issue. I removed references to the outer view and all worked fine. Thanks for the help! – DerStrom8 Apr 14 '15 at 00:13
Not a problem! Cheers – Chad Bingham Apr 14 '15 at 00:14
Works for Relative layouts, too. But I used wrap content to place the border just around a limited set of buttons – Brian Reinhold Feb 07 '18 at 00:29

Android: Putting a border around multiple views

1 Answers1