Custom view for the banner

library/ui-styles/src/main/res/values/styles_location.xml

@@ -8,4 +8,12 @@
         <item name="android:gravity">center</item>
     </style>
 
+    <style name="Widget.Vector.Button.Text.LocationLive">
+        <item name="android:background">?selectableItemBackground</item>
+        <item name="android:textAppearance">@style/TextAppearance.Vector.Body.Medium</item>
+        <item name="android:textColor">?colorError</item>
+        <item name="android:padding">0dp</item>
+        <item name="android:gravity">center</item>
+    </style>
+
 </resources>

vector/src/main/java/im/vector/app/features/location/live/LocationLiveMessageBannerView.kt

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2022 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package im.vector.app.features.location.live
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.widget.Button
+import androidx.constraintlayout.widget.ConstraintLayout
+import im.vector.app.databinding.ViewLocationLiveMessageBannerBinding
+import im.vector.app.databinding.ViewLocationLiveStatusBinding
+
+class LocationLiveMessageBannerView @JvmOverloads constructor(
+        context: Context,
+        attrs: AttributeSet? = null,
+        defStyleAttr: Int = 0
+) : ConstraintLayout(context, attrs, defStyleAttr) {
+
+    private val binding = ViewLocationLiveMessageBannerBinding.inflate(
+            LayoutInflater.from(context),
+            this
+    )
+
+    val stopButton: Button
+        get() = binding.locationLiveMessageBannerStop
+}

vector/src/main/res/layout/view_location_live_message_banner.xml

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge 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="wrap_content"
+    tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
+
+    <View
+        android:id="@+id/locationLiveMessageBannerBackground"
+        android:layout_width="0dp"
+        android:layout_height="48dp"
+        android:alpha="0.85"
+        android:background="?colorSurface"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <ImageView
+        android:id="@+id/locationLiveMessageBannerIcon"
+        android:layout_width="32dp"
+        android:layout_height="32dp"
+        android:layout_marginHorizontal="8dp"
+        android:background="@drawable/circle"
+        android:backgroundTint="?vctr_live_location"
+        android:padding="3dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="@id/locationLiveMessageBannerBackground"
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_attachment_location_live_white"
+        tools:ignore="ContentDescription" />
+
+    <TextView
+        android:id="@+id/locationLiveMessageBannerTitle"
+        style="@style/Widget.Vector.TextView.Caption"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginHorizontal="8dp"
+        android:text="@string/location_share_live_enabled"
+        android:textColor="?colorOnSurface"
+        app:layout_constraintBottom_toTopOf="@id/locationLiveMessageBannerSubTitle"
+        app:layout_constraintStart_toEndOf="@id/locationLiveMessageBannerIcon"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_chainStyle="packed" />
+
+    <TextView
+        android:id="@+id/locationLiveMessageBannerSubTitle"
+        style="@style/Widget.Vector.TextView.Caption"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:textColor="?vctr_content_secondary"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="@id/locationLiveMessageBannerTitle"
+        app:layout_constraintTop_toBottomOf="@id/locationLiveMessageBannerTitle"
+        tools:text="9min left" />
+
+    <Button
+        android:id="@+id/locationLiveMessageBannerStop"
+        style="@style/Widget.Vector.Button.Text.LocationLive"
+        android:layout_width="wrap_content"
+        android:layout_height="0dp"
+        android:layout_marginHorizontal="8dp"
+        android:text="@string/location_share_live_stop_long_version"
+        app:layout_constraintBottom_toBottomOf="@id/locationLiveMessageBannerBackground"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="@id/locationLiveMessageBannerBackground" />
+</merge>

vector/src/main/res/values/strings.xml

@@ -3011,6 +3011,7 @@
     <string name="location_share_live_enabled">Live location enabled</string>
     <string name="location_share_live_started">Loading live location…</string>
     <string name="location_share_live_stop">Stop</string>
+    <string name="location_share_live_stop_long_version">Stop sharing</string>
     <string name="live_location_sharing_notification_title">${app_name} Live Location</string>
     <string name="live_location_sharing_notification_description">Location sharing is in progress</string>