how to create a border around constraint layout along with an option for title

All above answers are focusing on creating new layouts. But you don't suppose to do that. Just create a TextView below your constraint layout.

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif"
        android:text="@string/time_range"
        android:textColor="@color/logoDark"
        android:textCursorDrawable="@drawable/cursor_style"

        // Below are very important to achieve title on border 
        android:paddingStart="2dp" 
        android:paddingEnd="2dp" 
        android:layout_marginStart="10dp" 
        android:background="@color/cnstrbkg" 
        app:layout_constraintBottom_toTopOf="@+id/cnstLyt" 
        app:layout_constraintStart_toStartOf="@+id/cnstLyt" 
        app:layout_constraintTop_toTopOf="@+id/cnstLyt" /> 

The positioning of textview is very very important thing. Change it to move text view at any position you want.

It's sounds like your TextView is inside the ConstraintLayout you want to frame, it should be outside. So that you overlay the ConstraintLayout. Somehow like this

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@android:color/white">

       <androidx.constraintlayout.widget.ConstraintLayout
          android:id="@+id/framed_layout"
          android:layout_width="200dp"
          android:layout_height="100dp"
          android:background="@drawable/outside_shape"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent">

          ....
          ....
          ....

       </androidx.constraintlayout.widget.ConstraintLayout>

       <TextView
         android:layout_width="30dp"
         android:layout_height="wrap_content"
         android:background="@android:color/white"
         android:textAlignment="center"
         android:text="title"
         app:layout_constraintBottom_toTopOf="@+id/framed_layout"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="@+id/framed_layout" />

</androidx.constraintlayout.widget.ConstraintLayout>

or you wrap it with a CoordinatorLayout, looks the same

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@android:color/white">

   <androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/framed_layout"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/outside_shape">

    ....
    ....
    ....
    
   </androidx.constraintlayout.widget.ConstraintLayout>

   <TextView
    android:layout_width="30dp"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:textAlignment="center"
    android:layout_gravity="center_horizontal"
    android:text="title" />

   </androidx.coordinatorlayout.widget.CoordinatorLayout>

outside_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle" >
     <corners
       android:radius="10dp"
     />
     <solid
       android:color="@android:color/white"
     />
     <stroke
       android:width="1dp"
       android:color="@android:color/black"
     />
     </shape>

with outside_shape it looks like this