Joystick view

app/src/main/java/com/example/flightgearcontrollerapp/view_model/JoyStickVM.kt

@@ -0,0 +1,4 @@
+package com.example.flightgearcontrollerapp.view_model
+
+class JoyStickVM {
+}

app/src/main/java/com/example/flightgearcontrollerapp/views/JoyStickView.kt

@@ -1,4 +1,5 @@
 package com.example.flightgearcontrollerapp.views
 
-class JoystickView{
-}
+class JoyStickView{
+
+}

app/src/main/res/drawable/ic_baseline_airplanemode_active_24.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M22,16v-2l-8.5,-5V3.5C13.5,2.67 12.83,2 12,2s-1.5,0.67 -1.5,1.5V9L2,14v2l8.5,-2.5V19L8,20.5L8,22l4,-1l4,1l0,-1.5L13.5,19v-5.5L22,16z"/>
+</vector>

app/src/main/res/layout/activity_main.xml

@@ -8,6 +8,12 @@
         <variable
             name="viewModel"
             type="com.example.flightgearcontrollerapp.view_model.FGViewModel" />
+        <variable
+            name="joystickVM"
+            type="com.example.flightgearcontrollerapp.view_model.JoyStickVM"/>
+        <variable
+            name="model"
+            type="com.example.flightgearcontrollerapp.view_model.FGViewModel"/>
     </data>
 
     <androidx.constraintlayout.widget.ConstraintLayout
@@ -127,13 +133,25 @@
 
                 <RelativeLayout
                     android:layout_width="360sp"
-                    android:layout_height="370sp">
+                    android:layout_height="370sp"
+                    android:layout_gravity="center">
 
-                    <RelativeLayout
+                    <com.jackandphantom.joystickview.JoyStickView
                         android:id="@+id/widget_joystick"
                         android:layout_width="360sp"
                         android:layout_height="360sp"
-                        android:layout_gravity="center" />
+
+                        android:layout_alignParentEnd="true"
+                        android:layout_alignParentBottom="true"
+                        android:layout_marginEnd="0dp"
+                        android:layout_marginBottom="-3dp"
+                        app:innerCircleColor="#f6FFFFFF"
+                        app:innerCircleImage="@drawable/ic_baseline_airplanemode_active_24"
+                        app:outerCircleBorderColor="#fff"
+                        app:outerCircleBorderWidth="5"
+                        app:outerCircleColor="@color/navy_blue_40"
+                        app:shadowColor="#000"
+                        app:shadowRadius="7" />
                 </RelativeLayout>
 
                 <GridLayout

app/src/main/res/values/colors.xml

@@ -11,4 +11,5 @@
     <color name="white_60">#99FFFFFF</color>
     <color name="white_40">#66FFFFFF</color>
     <color name="navy_blue">#FF000080</color>
+    <color name="navy_blue_40">#66000080</color>
 </resources>