Search code examples
androidborderviewgroupmultiple-views

Android: Putting a border around multiple views


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?


Solution

  • 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.