Add Switch image connection functionality.

ui/src/main/java/com/wireguard/android/activity/MainActivity.java

@@ -9,17 +9,24 @@ import android.os.Bundle;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.widget.Button;
+import android.widget.ImageView;
 import android.widget.TextView;
 import com.wireguard.android.R;
 import com.wireguard.android.viewmodel.MainViewModel;
 
 public class MainActivity extends AppCompatActivity {
+
     private MainViewModel mainViewModel;
     private TextView bubbleStatus;
+    private TextView titleMyBubble;
     private Button connectButton;
+    private ImageView imageMyBubble;
+    private ImageView mark;
     private boolean connectionStateFlag;
 
     private static final int REQUEST_CODE_VPN_PERMISSION = 23491;
+    public static final int LEFT = 16;
+    public static final int RIGHT = 16;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
@@ -55,6 +62,9 @@ public class MainActivity extends AppCompatActivity {
     private void initViews() {
         bubbleStatus = findViewById(R.id.bubbleStatus);
         connectButton = findViewById(R.id.connectButton);
+        imageMyBubble = findViewById(R.id.imageMyBubble);
+        mark = findViewById(R.id.mark);
+        titleMyBubble = findViewById(R.id.titleMyBubble);
     }
 
     private void initListeners() {
@@ -95,10 +105,20 @@ public class MainActivity extends AppCompatActivity {
     private void setConnectionStateUI(boolean state) {
         if (state) {
             bubbleStatus.setText(getString(R.string.connected_bubble));
+            bubbleStatus.setTextColor(getResources().getColor(R.color.connectedColor));
+            bubbleStatus.setPadding(LEFT, 160, RIGHT,100);
             connectButton.setText(getString(R.string.disconnect));
+            imageMyBubble.setImageResource(R.drawable.bubble_connected);
+            mark.setVisibility(View.VISIBLE);
+            titleMyBubble.setVisibility(View.GONE);
         } else {
             bubbleStatus.setText(getString(R.string.not_connected_bubble));
+            bubbleStatus.setTextColor(getResources().getColor(R.color.gray));
+            bubbleStatus.setPadding(LEFT,140,RIGHT,130);
             connectButton.setText(getString(R.string.connect));
+            imageMyBubble.setImageResource(R.drawable.bubble_disconnected);
+            mark.setVisibility(View.GONE);
+            titleMyBubble.setVisibility(View.VISIBLE);
         }
     }
 }

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

@@ -65,19 +65,34 @@
         app:layout_constraintStart_toStartOf="@+id/imageMyBubble"
         app:layout_constraintTop_toTopOf="@+id/imageMyBubble" />
 
+    <ImageView
+        android:id="@+id/mark"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/margin_start_and_end"
+        android:layout_marginTop="70dp"
+        android:visibility="gone"
+        android:layout_marginEnd="@dimen/margin_start_and_end"
+        android:src="@drawable/mark"
+        app:layout_constraintEnd_toEndOf="@+id/imageMyBubble"
+        app:layout_constraintStart_toStartOf="@+id/imageMyBubble"
+        app:layout_constraintTop_toTopOf="@+id/imageMyBubble" />
+
     <TextView
         android:id="@+id/bubbleStatus"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginStart="@dimen/margin_start_and_end"
-        android:layout_marginTop="14dp"
+        android:layout_marginTop="140dp"
         android:layout_marginEnd="@dimen/margin_start_and_end"
+        android:layout_marginBottom="130dp"
         android:text="@string/not_connected_bubble"
         android:textColor="@color/gray"
         android:textSize="@dimen/text_title"
+        app:layout_constraintBottom_toTopOf="@+id/linearLayout"
         app:layout_constraintEnd_toEndOf="@+id/imageMyBubble"
         app:layout_constraintStart_toStartOf="@+id/imageMyBubble"
-        app:layout_constraintTop_toBottomOf="@+id/titleMyBubble" />
+        app:layout_constraintTop_toTopOf="@+id/imageMyBubble" />
 
     <LinearLayout
         android:id="@+id/linearLayout"

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

@@ -34,4 +34,5 @@
     <color name="colorPrimary">#3F51B5</color>
     <color name="colorPrimaryDark">#b5e6ff</color>
     <color name="colorAccent">#FF4081</color>
+    <color name="connectedColor">#17AEA6</color>
 </resources>

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

@@ -243,9 +243,9 @@
     <string name="turnInternet">Please turn on internet connection</string>
     <string name="progress_bar_text">Loading</string>
     <string name="not_connected_bubble">Not Connected ...</string>
-    <string name="connected_bubble">Connected</string>
+    <string name="connected_bubble">Connected!</string>
     <string name="failed_bubble">Failed</string>
-    <string name="disconnect">Disconnect</string>
+    <string name="disconnect">DISCONNECT</string>
     <string name="hostname_not_valid">Hostname not valid</string>
     <string name="login_failed">Login Failed</string>
     <string name="cerificate_install">"Please install a certificate"</string>