Merge branch 'main_ui' into 'master'

Update UI for Bitmask

See merge request leap/bitmask_android!218

9 files changed, 1695 insertions, 0 deletions

diff --git a/app/src/normal/java/se.leap.bitmaskclient.base.fragments/EipFragment.java b/app/src/normal/java/se.leap.bitmaskclient.base.fragments/EipFragment.java
new file mode 100644
index 00000000..0210077c
--- /dev/null
+++ b/app/src/normal/java/se.leap.bitmaskclient.base.fragments/EipFragment.java
@@ -0,0 +1,654 @@
+/**
+ * Copyright (c) 2018 LEAP Encryption Access Project and contributers
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+package se.leap.bitmaskclient.base.fragments;
+
+import static de.blinkt.openvpn.core.ConnectionStatus.LEVEL_NONETWORK;
+import static se.leap.bitmaskclient.R.string.vpn_certificate_user_message;
+import static se.leap.bitmaskclient.base.models.Constants.ASK_TO_CANCEL_VPN;
+import static se.leap.bitmaskclient.base.models.Constants.EIP_ACTION_START;
+import static se.leap.bitmaskclient.base.models.Constants.EIP_EARLY_ROUTES;
+import static se.leap.bitmaskclient.base.models.Constants.EIP_RESTART_ON_BOOT;
+import static se.leap.bitmaskclient.base.models.Constants.PROVIDER_KEY;
+import static se.leap.bitmaskclient.base.models.Constants.REQUEST_CODE_CONFIGURE_LEAP;
+import static se.leap.bitmaskclient.base.models.Constants.REQUEST_CODE_LOG_IN;
+import static se.leap.bitmaskclient.base.models.Constants.REQUEST_CODE_SWITCH_PROVIDER;
+import static se.leap.bitmaskclient.base.models.Constants.SHARED_PREFERENCES;
+import static se.leap.bitmaskclient.base.utils.ConfigHelper.isDefaultBitmask;
+import static se.leap.bitmaskclient.base.utils.PreferenceHelper.getPreferredCity;
+import static se.leap.bitmaskclient.eip.EipSetupObserver.reconnectingWithDifferentGateway;
+import static se.leap.bitmaskclient.eip.GatewaysManager.Load.UNKNOWN;
+import static se.leap.bitmaskclient.providersetup.ProviderAPI.DOWNLOAD_GEOIP_JSON;
+import static se.leap.bitmaskclient.providersetup.ProviderAPI.UPDATE_INVALID_VPN_CERTIFICATE;
+import static se.leap.bitmaskclient.providersetup.ProviderAPI.USER_MESSAGE;
+
+import android.app.Activity;
+import android.content.ComponentName;
+import android.content.Context;
+import android.content.Intent;
+import android.content.ServiceConnection;
+import android.content.SharedPreferences;
+import android.os.Bundle;
+import android.os.IBinder;
+import android.text.Spannable;
+import android.text.SpannableString;
+import android.text.TextUtils;
+import android.text.style.RelativeSizeSpan;
+import android.util.Log;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+
+import androidx.annotation.ColorRes;
+import androidx.annotation.NonNull;
+import androidx.appcompat.app.AlertDialog;
+import androidx.appcompat.widget.AppCompatImageView;
+import androidx.appcompat.widget.AppCompatTextView;
+import androidx.core.content.ContextCompat;
+import androidx.fragment.app.DialogFragment;
+import androidx.fragment.app.Fragment;
+import androidx.fragment.app.FragmentTransaction;
+
+import java.util.Observable;
+import java.util.Observer;
+import java.util.concurrent.atomic.AtomicBoolean;
+
+import de.blinkt.openvpn.core.ConnectionStatus;
+import de.blinkt.openvpn.core.IOpenVPNServiceInternal;
+import de.blinkt.openvpn.core.OpenVPNService;
+import de.blinkt.openvpn.core.VpnStatus;
+import de.blinkt.openvpn.core.connection.Connection;
+import se.leap.bitmaskclient.R;
+import se.leap.bitmaskclient.base.FragmentManagerEnhanced;
+import se.leap.bitmaskclient.base.MainActivity;
+import se.leap.bitmaskclient.base.models.Provider;
+import se.leap.bitmaskclient.base.models.ProviderObservable;
+import se.leap.bitmaskclient.base.utils.PreferenceHelper;
+import se.leap.bitmaskclient.base.views.LocationButton;
+import se.leap.bitmaskclient.base.views.MainButton;
+import se.leap.bitmaskclient.databinding.FEipBinding;
+import se.leap.bitmaskclient.eip.EipCommand;
+import se.leap.bitmaskclient.eip.EipStatus;
+import se.leap.bitmaskclient.eip.GatewaysManager;
+import se.leap.bitmaskclient.providersetup.ProviderAPICommand;
+import se.leap.bitmaskclient.providersetup.ProviderListActivity;
+import se.leap.bitmaskclient.providersetup.activities.CustomProviderSetupActivity;
+import se.leap.bitmaskclient.providersetup.activities.LoginActivity;
+import se.leap.bitmaskclient.providersetup.models.LeapSRPSession;
+import se.leap.bitmaskclient.tor.TorServiceCommand;
+import se.leap.bitmaskclient.tor.TorStatusObservable;
+
+public class EipFragment extends Fragment implements Observer {
+
+    public final static String TAG = EipFragment.class.getSimpleName();
+
+
+    private SharedPreferences preferences;
+    private Provider provider;
+
+    AppCompatImageView background;
+    AppCompatImageView stateView;
+    MainButton mainButton;
+    LocationButton locationButton;
+    AppCompatTextView mainDescription;
+    AppCompatTextView subDescription;
+
+    private EipStatus eipStatus;
+    private ProviderObservable providerObservable;
+    private TorStatusObservable torStatusObservable;
+
+    private GatewaysManager gatewaysManager;
+
+    //---saved Instance -------
+    private final String KEY_SHOW_PENDING_START_CANCELLATION = "KEY_SHOW_PENDING_START_CANCELLATION";
+    private final String KEY_SHOW_ASK_TO_STOP_EIP = "KEY_SHOW_ASK_TO_STOP_EIP";
+    private boolean showPendingStartCancellation = false;
+    private boolean showAskToStopEip = false;
+    //------------------------
+    AlertDialog alertDialog;
+
+    private IOpenVPNServiceInternal mService;
+    // We use this service connection to detect if openvpn is running without network
+    private EipFragmentServiceConnection openVpnConnection;
+
+    @Override
+    public void onAttach(Context context) {
+        super.onAttach(context);
+        Bundle arguments = getArguments();
+        Activity activity = getActivity();
+        if (activity != null) {
+            if (arguments != null) {
+                provider = arguments.getParcelable(PROVIDER_KEY);
+                if (provider == null) {
+                    handleNoProvider(activity);
+                } else {
+                    Log.d(TAG, provider.getName() + " configured as provider");
+                }
+            } else {
+                handleNoProvider(activity);
+            }
+        }
+    }
+
+    private void handleNoProvider(Activity activity) {
+        if (isDefaultBitmask()) {
+            activity.startActivityForResult(new Intent(activity, ProviderListActivity.class), REQUEST_CODE_SWITCH_PROVIDER);
+        } else {
+            Log.e(TAG, "no provider given - try to reconfigure custom provider");
+            startActivityForResult(new Intent(activity, CustomProviderSetupActivity.class), REQUEST_CODE_CONFIGURE_LEAP);
+
+        }
+
+    }
+
+    @Override
+    public void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        openVpnConnection = new EipFragmentServiceConnection();
+        eipStatus = EipStatus.getInstance();
+        providerObservable = ProviderObservable.getInstance();
+        torStatusObservable = TorStatusObservable.getInstance();
+        Activity activity = getActivity();
+        if (activity != null) {
+            preferences = getActivity().getSharedPreferences(SHARED_PREFERENCES, Context.MODE_PRIVATE);
+        } else {
+            Log.e(TAG, "activity is null in onCreate - no preferences set!");
+        }
+
+        gatewaysManager = new GatewaysManager(getContext());
+
+
+    }
+
+    @Override
+    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
+        FEipBinding binding = FEipBinding.inflate(LayoutInflater.from(getContext()), container, false);
+        background = binding.background;
+        mainButton = binding.mainButton;
+        locationButton = binding.gatewayLocationButton;
+        locationButton.setTextColor(R.color.black800);
+        mainDescription = binding.mainDescription;
+        subDescription = binding.subDescription;
+        stateView = binding.stateView;
+
+        eipStatus.addObserver(this);
+        torStatusObservable.addObserver(this);
+        providerObservable.addObserver(this);
+
+        try {
+            Bundle arguments = getArguments();
+            if (arguments != null && arguments.containsKey(ASK_TO_CANCEL_VPN) && arguments.getBoolean(ASK_TO_CANCEL_VPN)) {
+                arguments.remove(ASK_TO_CANCEL_VPN);
+                setArguments(arguments);
+                askToStopEIP();
+            }
+        } catch (IllegalStateException e) {
+            // probably setArguments failed because the fragments state is already saved
+            e.printStackTrace();
+        }
+
+        restoreFromSavedInstance(savedInstanceState);
+        locationButton.setOnClickListener(v -> {
+                FragmentManagerEnhanced fragmentManager = new FragmentManagerEnhanced(getActivity().getSupportFragmentManager());
+                Fragment fragment = new GatewaySelectionFragment();
+                fragmentManager.replace(R.id.main_container, fragment, MainActivity.TAG);
+        });
+
+        mainButton.setOnClickListener(v -> {
+            handleIcon();
+        });
+        return binding.getRoot();
+    }
+
+    @Override
+    public void onStart() {
+        super.onStart();
+        if (DonationReminderDialog.isCallable(getContext())) {
+            showDonationReminderDialog();
+        }
+    }
+
+    @Override
+    public void onResume() {
+        super.onResume();
+        if (!eipStatus.isDisconnected()) {
+            openVpnConnection.bindService();
+        }
+        handleNewState();
+    }
+
+    @Override
+    public void onPause() {
+        super.onPause();
+        openVpnConnection.unbindService();
+    }
+
+    @Override
+    public void onSaveInstanceState(@NonNull Bundle outState) {
+        super.onSaveInstanceState(outState);
+        if (showAskToStopEip) {
+            outState.putBoolean(KEY_SHOW_ASK_TO_STOP_EIP, true);
+            alertDialog.dismiss();
+        } else if (showPendingStartCancellation) {
+            outState.putBoolean(KEY_SHOW_PENDING_START_CANCELLATION, true);
+            alertDialog.dismiss();
+        }
+    }
+
+    private void restoreFromSavedInstance(Bundle savedInstanceState) {
+        if (savedInstanceState != null && savedInstanceState.containsKey(KEY_SHOW_PENDING_START_CANCELLATION)) {
+            showPendingStartCancellation = true;
+            askPendingStartCancellation();
+        } else if (savedInstanceState != null && savedInstanceState.containsKey(KEY_SHOW_ASK_TO_STOP_EIP)) {
+            showAskToStopEip = true;
+            askToStopEIP();
+        }
+    }
+
+    @Override
+    public void onDestroyView() {
+        super.onDestroyView();
+        Activity activity = getActivity();
+        if (activity != null) {
+            ((MainActivity) activity).setDefaultActivityBarColor();
+        }
+        eipStatus.deleteObserver(this);
+        providerObservable.deleteObserver(this);
+        torStatusObservable.deleteObserver(this);
+        background = null;
+        mainButton = null;
+        locationButton = null;
+        mainDescription = null;
+        subDescription = null;
+        stateView = null;
+    }
+
+    private void saveStatus(boolean restartOnBoot) {
+        preferences.edit().putBoolean(EIP_RESTART_ON_BOOT, restartOnBoot).apply();
+    }
+
+    void handleIcon() {
+        if (isOpenVpnRunningWithoutNetwork() || eipStatus.isConnected() || eipStatus.isConnecting() || eipStatus.isUpdatingVpnCert())
+            handleSwitchOff();
+        else
+            handleSwitchOn();
+    }
+
+    private void handleSwitchOn() {
+        Context context = getContext();
+        if (context == null) {
+            Log.e(TAG, "context is null when switch turning on");
+            return;
+        }
+
+        if (canStartEIP()) {
+            startEipFromScratch();
+        } else if (canLogInToStartEIP()) {
+            askUserToLogIn(getString(vpn_certificate_user_message));
+        } else {
+            // provider has no VpnCertificate but user is logged in
+            updateInvalidVpnCertificate();
+        }
+    }
+
+    private boolean canStartEIP() {
+        boolean certificateExists = provider.hasVpnCertificate();
+        boolean isAllowedAnon = provider.allowsAnonymous();
+        return (isAllowedAnon || certificateExists) && !eipStatus.isConnected() && !eipStatus.isConnecting();
+    }
+
+    private boolean canLogInToStartEIP() {
+        boolean isAllowedRegistered = provider.allowsRegistered();
+        boolean isLoggedIn = LeapSRPSession.loggedIn();
+        return isAllowedRegistered && !isLoggedIn && !eipStatus.isConnecting() && !eipStatus.isConnected();
+    }
+
+    private void handleSwitchOff() {
+        if (isOpenVpnRunningWithoutNetwork() || eipStatus.isConnecting() || eipStatus.isUpdatingVpnCert()) {
+            askPendingStartCancellation();
+        } else if (eipStatus.isConnected()) {
+            askToStopEIP();
+        }
+    }
+
+    private void setMainButtonEnabled(boolean enabled) {
+        locationButton.setEnabled(enabled);
+        mainButton.setEnabled(enabled);
+    }
+
+    public void startEipFromScratch() {
+        saveStatus(true);
+        Context context = getContext();
+        if (context == null) {
+            Log.e(TAG, "context is null when trying to start VPN");
+            return;
+        }
+        if (!provider.getGeoipUrl().isDefault() && provider.shouldUpdateGeoIpJson()) {
+            Bundle bundle = new Bundle();
+            bundle.putBoolean(EIP_ACTION_START, true);
+            bundle.putBoolean(EIP_EARLY_ROUTES, false);
+            ProviderAPICommand.execute(context, DOWNLOAD_GEOIP_JSON, bundle, provider);
+        } else {
+            EipCommand.startVPN(context, false);
+        }
+        EipStatus.getInstance().updateState("UI_CONNECTING", "", 0, ConnectionStatus.LEVEL_START);
+    }
+
+    protected void stopEipIfPossible() {
+        Context context = getContext();
+        if (context == null) {
+            Log.e(TAG, "context is null when trying to stop EIP");
+            return;
+        }
+        EipCommand.stopVPN(context);
+    }
+
+    private void askPendingStartCancellation() {
+        Activity activity = getActivity();
+        if (activity == null) {
+            Log.e(TAG, "activity is null when asking to cancel");
+            return;
+        }
+
+        try {
+            AlertDialog.Builder alertBuilder = new AlertDialog.Builder(getActivity());
+            showPendingStartCancellation = true;
+            alertDialog = alertBuilder.setTitle(activity.getString(R.string.eip_cancel_connect_title))
+                    .setMessage(activity.getString(R.string.eip_cancel_connect_text))
+                    .setPositiveButton((android.R.string.yes), (dialog, which) -> {
+                        Context context = getContext();
+                        if (context != null && eipStatus.isUpdatingVpnCert() &&
+                                TorStatusObservable.isRunning()) {
+                            TorServiceCommand.stopTorServiceAsync(context.getApplicationContext());
+                        }
+                        stopEipIfPossible();
+                    })
+                    .setNegativeButton(activity.getString(android.R.string.no), (dialog, which) -> {
+                    }).setOnDismissListener(dialog -> showPendingStartCancellation = false).show();
+        } catch (IllegalStateException e) {
+            e.printStackTrace();
+        }
+
+    }
+
+    protected void askToStopEIP() {
+        Activity activity = getActivity();
+        if (activity == null) {
+            Log.e(TAG, "activity is null when asking to stop EIP");
+            return;
+        }
+        try {
+            AlertDialog.Builder alertBuilder = new AlertDialog.Builder(activity);
+            showAskToStopEip = true;
+            alertDialog = alertBuilder.setTitle(activity.getString(R.string.eip_cancel_connect_title))
+                    .setMessage(activity.getString(R.string.eip_warning_browser_inconsistency))
+                    .setPositiveButton((android.R.string.yes), (dialog, which) -> stopEipIfPossible())
+                    .setNegativeButton(activity.getString(android.R.string.no), (dialog, which) -> {
+                    }).setOnDismissListener(dialog -> showAskToStopEip = false).show();
+        } catch (IllegalStateException e) {
+            e.printStackTrace();
+        }
+
+    }
+
+    @Override
+    public void update(Observable observable, Object data) {
+        if (observable instanceof EipStatus) {
+            eipStatus = (EipStatus) observable;
+            handleNewStateOnMain();
+
+            if (eipStatus.isConnecting()) {
+                openVpnConnection.bindService();
+            }
+            if ("NOPROCESS".equals(EipStatus.getInstance().getState())) {
+                //assure that the Service is shutdown completely if openvpn was stopped
+                openVpnConnection.unbindService();
+            }
+        } else if (observable instanceof ProviderObservable) {
+            provider = ((ProviderObservable) observable).getCurrentProvider();
+        } else if (observable instanceof TorStatusObservable && EipStatus.getInstance().isUpdatingVpnCert()) {
+            handleNewStateOnMain();
+        }
+    }
+
+    private void handleNewStateOnMain() {
+        Activity activity = getActivity();
+        if (activity != null) {
+            activity.runOnUiThread(this::handleNewState);
+        } else {
+            Log.e("EipFragment", "activity is null");
+        }
+    }
+
+    private void setActivityBarColor(@ColorRes int primaryColor, @ColorRes int secondaryColor) {
+        Activity activity = getActivity();
+        if (activity == null) {
+            return;
+        }
+        ((MainActivity) getActivity()).setActivityBarColor(primaryColor, secondaryColor, R.color.actionbar_dark_color);
+    }
+
+    private void handleNewState() {
+        Activity activity = getActivity();
+        if (activity == null) {
+            Log.e(TAG, "activity is null while trying to handle new state");
+            return;
+        }
+
+        Log.d(TAG, "eip fragment eipStatus state: " + eipStatus.getState() + " - level: " + eipStatus.getLevel() + " - is reconnecting: " + eipStatus.isReconnecting());
+        if (eipStatus.isUpdatingVpnCert()) {
+            setMainButtonEnabled(true);
+            String city = getPreferredCity(getContext());
+            String locationName = VpnStatus.getCurrentlyConnectingVpnName() != null ?
+                    VpnStatus.getCurrentlyConnectingVpnName() :
+                    city == null ? getString(R.string.gateway_selection_recommended_location) : city;
+            locationButton.setText(locationName);
+            locationButton.setLocationLoad(UNKNOWN);
+            locationButton.showBridgeIndicator(false);
+            locationButton.showRecommendedIndicator(false);
+            mainDescription.setText(R.string.eip_status_connecting);
+            String torStatus = TorStatusObservable.getStringForCurrentStatus(getContext());
+            if (!TextUtils.isEmpty(torStatus)) {
+                Spannable spannable = new SpannableString(torStatus);
+                spannable.setSpan(new RelativeSizeSpan(0.75f), 0, spannable.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
+                subDescription.setText(TextUtils.concat(getString(R.string.updating_certificate_message) + "\n", spannable));
+            } else {
+                subDescription.setText(getString(R.string.updating_certificate_message));
+            }
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_connecting));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.yellow_mask));
+            mainButton.updateState(false, true, false);
+            setActivityBarColor(R.color.bg_connecting_top, R.color.bg_connecting_top_light_transparent);
+        } else if (eipStatus.isConnecting()) {
+            setMainButtonEnabled(true);
+            String city = getPreferredCity(getContext());
+            String locationName = VpnStatus.getCurrentlyConnectingVpnName() != null ?
+                    VpnStatus.getCurrentlyConnectingVpnName() :
+                    city == null ? getString(R.string.gateway_selection_recommended_location) : city;
+            locationButton.setText(locationName);
+            locationButton.setLocationLoad(UNKNOWN);
+            locationButton.showBridgeIndicator(false);
+            locationButton.showRecommendedIndicator(false);
+            mainDescription.setText(R.string.eip_status_connecting);
+            subDescription.setText(null);
+            background.setImageDrawable(ContextCompat.getDrawable(activity, R.drawable.bg_connecting));
+            stateView.setImageDrawable(ContextCompat.getDrawable(activity, R.drawable.yellow_mask));
+            mainButton.updateState(false, true, false);
+            setActivityBarColor(R.color.bg_connecting_top, R.color.bg_connecting_top_light_transparent);
+        } else if (eipStatus.isConnected()) {
+            setMainButtonEnabled(true);
+            mainButton.updateState(true, false, false);
+            Connection.TransportType transportType = PreferenceHelper.getUseBridges(getContext()) ? Connection.TransportType.OBFS4 : Connection.TransportType.OPENVPN;
+            locationButton.setLocationLoad(PreferenceHelper.useObfuscationPinning(getContext()) ? GatewaysManager.Load.UNKNOWN : gatewaysManager.getLoadForLocation(VpnStatus.getLastConnectedVpnName(), transportType));
+            locationButton.setText(VpnStatus.getLastConnectedVpnName());
+            locationButton.showBridgeIndicator(VpnStatus.isUsingBridges());
+            locationButton.showRecommendedIndicator(getPreferredCity(getContext()) == null);
+            mainDescription.setText(R.string.eip_status_secured);
+            subDescription.setText(null);
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_connected));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.green_mask));
+            setActivityBarColor(R.color.bg_running_top, R.color.bg_running_top_light_transparent);
+        } else if(isOpenVpnRunningWithoutNetwork()) {
+            Log.d(TAG, "eip fragment eipStatus - isOpenVpnRunningWithoutNetwork");
+            setMainButtonEnabled(true);
+            mainButton.updateState(true, false, true);
+            locationButton.setText(VpnStatus.getCurrentlyConnectingVpnName());
+            locationButton.showBridgeIndicator(VpnStatus.isUsingBridges());
+            locationButton.showBridgeIndicator(VpnStatus.isUsingBridges());
+            locationButton.showRecommendedIndicator(getPreferredCity(getContext())== null);
+            mainDescription.setText(R.string.eip_state_connected);
+            subDescription.setText(R.string.eip_state_no_network);
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_connecting));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.yellow_mask));
+            setActivityBarColor(R.color.bg_connecting_top, R.color.bg_connecting_top_light_transparent);
+        } else if (eipStatus.isDisconnected() && reconnectingWithDifferentGateway()) {
+            locationButton.setText(VpnStatus.getCurrentlyConnectingVpnName());
+            locationButton.setLocationLoad(UNKNOWN);
+            locationButton.showBridgeIndicator(false);
+            locationButton.showRecommendedIndicator(false);
+            mainDescription.setText(R.string.eip_status_connecting);
+            subDescription.setText(R.string.reconnecting);
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_connecting));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.yellow_mask));
+            setActivityBarColor(R.color.bg_connecting_top, R.color.bg_connecting_top_light_transparent);
+
+        } else if (eipStatus.isDisconnecting()) {
+            setMainButtonEnabled(false);
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_disconnected));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.red_mask));
+            mainButton.updateState(false, false, false);
+            mainDescription.setText(R.string.eip_status_unsecured);
+            setActivityBarColor(R.color.bg_disconnected_top, R.color.bg_disconnected_top_light_transparent);
+        } else if (eipStatus.isBlocking()) {
+            setMainButtonEnabled(true);
+            mainButton.updateState(true, false, true);
+            locationButton.setText(getString(R.string.no_location));
+            locationButton.setLocationLoad(UNKNOWN);
+            locationButton.showBridgeIndicator(false);
+            locationButton.showRecommendedIndicator(false);
+            mainDescription.setText(R.string.eip_state_connected);
+            subDescription.setText(getString(R.string.eip_state_blocking, getString(R.string.app_name)));
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_disconnected));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.red_mask));
+            setActivityBarColor(R.color.bg_disconnected_top, R.color.bg_disconnected_top_light_transparent);
+        } else {
+            locationButton.setText(getContext().getString(R.string.vpn_button_turn_on));
+            setMainButtonEnabled(true);
+            mainButton.updateState(false, false, false);
+            locationButton.setLocationLoad(UNKNOWN);
+            locationButton.showBridgeIndicator(false);
+            String city = getPreferredCity(getContext());
+            locationButton.setText(city == null ? getString(R.string.gateway_selection_recommended_location) : city);
+            locationButton.showRecommendedIndicator(false);
+            mainDescription.setText(R.string.eip_status_unsecured);
+            subDescription.setText(null);
+            background.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.bg_disconnected));
+            stateView.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.red_mask));
+            setActivityBarColor(R.color.bg_disconnected_top, R.color.bg_disconnected_top_light_transparent);
+        }
+    }
+
+    private boolean isOpenVpnRunningWithoutNetwork() {
+        boolean isRunning = false;
+        try {
+            isRunning = eipStatus.getLevel() == LEVEL_NONETWORK &&
+                    mService.isVpnRunning();
+        } catch (Exception e) {
+            //eat me
+            e.printStackTrace();
+        }
+
+        return isRunning;
+    }
+
+    private void updateInvalidVpnCertificate() {
+        eipStatus.setUpdatingVpnCert(true);
+        ProviderAPICommand.execute(getContext(), UPDATE_INVALID_VPN_CERTIFICATE, provider);
+    }
+
+    private void askUserToLogIn(String userMessage) {
+        Intent intent = new Intent(getContext(), LoginActivity.class);
+        intent.putExtra(PROVIDER_KEY, provider);
+
+        if(userMessage != null) {
+            intent.putExtra(USER_MESSAGE, userMessage);
+        }
+
+        Activity activity = getActivity();
+        if (activity != null) {
+            activity.startActivityForResult(intent, REQUEST_CODE_LOG_IN);
+        }
+    }
+
+    private class EipFragmentServiceConnection implements ServiceConnection {
+        private final AtomicBoolean bind = new AtomicBoolean(false);
+
+        void bindService() {
+            Activity activity = getActivity();
+            if (activity == null) {
+                Log.e(TAG, "activity is null when binding OpenVpn");
+                return;
+            }
+            if (!bind.get()) {
+                activity.runOnUiThread(() -> {
+                        Intent intent = new Intent(activity, OpenVPNService.class);
+                        intent.setAction(OpenVPNService.START_SERVICE);
+
+                        activity.bindService(intent, EipFragmentServiceConnection.this, Context.BIND_AUTO_CREATE);
+                        bind.set(true);
+                });
+            }
+        }
+
+        void unbindService() {
+            Activity activity = getActivity();
+            if (activity == null) {
+                return;
+            }
+            if (bind.get()) {
+                activity.runOnUiThread(() -> {
+                    activity.unbindService(EipFragmentServiceConnection.this);
+                    bind.set(false);
+                });
+            }
+        }
+
+        @Override
+        public void onServiceConnected(ComponentName className,
+                                       IBinder service) {
+            mService = IOpenVPNServiceInternal.Stub.asInterface(service);
+            handleNewState();
+        }
+
+        @Override
+        public void onServiceDisconnected(ComponentName arg0) {
+            mService = null;
+        }
+    }
+
+    public void showDonationReminderDialog() {
+        try {
+            FragmentTransaction fragmentTransaction = new FragmentManagerEnhanced(
+                    getActivity().getSupportFragmentManager()).removePreviousFragment(
+                    DonationReminderDialog.TAG);
+            DialogFragment newFragment = new DonationReminderDialog();
+            newFragment.setCancelable(false);
+            newFragment.show(fragmentTransaction, DonationReminderDialog.TAG);
+        } catch (IllegalStateException | NullPointerException e) {
+            e.printStackTrace();
+        }
+    }
+}
diff --git a/app/src/normal/java/se/leap/bitmaskclient/base/views/MainButton.java b/app/src/normal/java/se/leap/bitmaskclient/base/views/MainButton.java
new file mode 100644
index 00000000..715063b5
--- /dev/null
+++ b/app/src/normal/java/se/leap/bitmaskclient/base/views/MainButton.java
@@ -0,0 +1,57 @@
+package se.leap.bitmaskclient.base.views;
+
+import android.annotation.TargetApi;
+import android.content.Context;
+import android.util.AttributeSet;
+import android.view.LayoutInflater;
+import android.widget.RelativeLayout;
+
+import androidx.appcompat.widget.AppCompatImageView;
+import androidx.core.content.ContextCompat;
+
+import se.leap.bitmaskclient.R;
+import se.leap.bitmaskclient.databinding.VMainButtonBinding;
+
+public class MainButton extends RelativeLayout {
+
+    private static final String TAG = MainButton.class.getSimpleName();
+
+    AppCompatImageView button;
+
+    public MainButton(Context context) {
+        super(context);
+        initLayout(context);
+    }
+
+    public MainButton(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        initLayout(context);
+    }
+
+    public MainButton(Context context, AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        initLayout(context);
+    }
+
+
+    @TargetApi(21)
+    public MainButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
+        super(context, attrs, defStyleAttr, defStyleRes);
+        initLayout(context);
+    }
+
+    private void initLayout(Context context) {
+        VMainButtonBinding binding = VMainButtonBinding.inflate(LayoutInflater.from(context), this, true);
+        button = binding.button;
+    }
+
+    public void updateState(boolean isOn, boolean isProcessing, boolean isError) {
+        if (isProcessing) {
+            button.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.button_circle_cancel));
+        } else {
+            button.setImageDrawable(
+                    ContextCompat.getDrawable(getContext(),
+                    isOn ? R.drawable.button_circle_stop : R.drawable.button_circle_start));
+        }
+    }
+}
diff --git a/app/src/normal/res/drawable/rotate_progress_image.xml b/app/src/normal/res/drawable/rotate_progress_image.xml
new file mode 100644
index 00000000..44a35ba9
--- /dev/null
+++ b/app/src/normal/res/drawable/rotate_progress_image.xml
@@ -0,0 +1,103 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
+    android:name="circle"
+    android:viewportWidth="91"
+    android:viewportHeight="91"
+    android:width="91dp"
+    android:height="91dp">
+    <path
+        android:pathData="M83.9459 61.7492C81.6735 67.1718 78.2509 72.0496 73.9091 76.0535L45.5808 46.0417L83.9459 61.7492Z"
+        android:fillColor="#FFCC80" />
+    <path
+        android:pathData="M74.9439 75.0657C70.7802 79.1812 65.7785 82.3744 60.2709 84.4334L45.5806 46.0421L74.9439 75.0657Z"
+        android:fillColor="#FFE082" />
+    <path
+        android:pathData="M61.4719 83.9632C55.9543 86.2222 50.0087 87.2783 44.0406 87.0594L45.5806 46.0421L61.4719 83.9632Z"
+        android:fillColor="#FFF59D" />
+    <path
+        android:pathData="M45.5803 87.088C39.516 87.088 33.5253 85.7751 28.0292 83.2417L45.5803 46.0425L45.5803 87.088Z"
+        android:fillColor="#E6EE9C" />
+    <path
+        android:pathData="M29.6888 83.9635C24.2224 81.7254 19.303 78.3586 15.2601 74.0885L45.5801 46.0424L29.6888 83.9635Z"
+        android:fillColor="#C5E1A5" />
+    <path
+        android:pathData="M16.2165 75.0658C11.9261 70.825 8.62802 65.7065 6.55433 60.0703L45.5798 46.0422L16.2165 75.0658Z"
+        android:fillColor="#A5D6A7" />
+    <path
+        android:pathData="M7.21455 61.7497C4.89145 56.2061 3.82625 50.2265 4.09398 44.232L45.5796 46.0422L7.21455 61.7497Z"
+        android:fillColor="#80CBC4" />
+    <path
+        android:pathData="M4.05357 46.0421C4.05357 40.2602 5.28944 34.5435 7.68023 29.2665L45.5796 46.0421L4.05357 46.0421Z"
+        android:fillColor="#80DEEA" />
+    <path
+        android:pathData="M7.21454 30.3342C9.56893 24.716 13.1569 19.685 17.7191 15.6051L45.5796 46.0416L7.21454 30.3342Z"
+        android:fillColor="#81D4FA" />
+    <path
+        android:pathData="M16.216 17.0181C20.5162 12.7677 25.7084 9.50267 31.4256 7.45389L45.5793 46.0416L16.216 17.0181Z"
+        android:fillColor="#90CAF9" />
+    <path
+        android:pathData="M29.6883 8.12016C35.3597 5.79816 41.4814 4.7479 47.6127 5.04498L45.5796 46.0413L29.6883 8.12016Z"
+        android:fillColor="#9FA8DA" />
+    <path
+        android:pathData="M45.5798 4.99576C51.3771 4.99576 57.1101 6.19555 62.4099 8.51791L45.5798 46.0413L45.5798 4.99576Z"
+        android:fillColor="#B39DDB" />
+    <path
+        android:pathData="M61.4714 8.11991C66.8116 10.3063 71.6312 13.5706 75.6218 17.7038L45.5801 46.041L61.4714 8.11991Z"
+        android:fillColor="#CE93D8" />
+    <path
+        android:pathData="M74.9437 17.0175C79.0466 21.0729 82.2441 25.9333 84.3301 31.2851L45.5803 46.041L74.9437 17.0175Z"
+        android:fillColor="#F48FB1" />
+    <path
+        android:pathData="M83.9456 30.3337C86.2094 35.7356 87.2793 41.5533 87.0839 47.3971L45.5806 46.0411L83.9456 30.3337Z"
+        android:fillColor="#EF9A9A" />
+    <path
+        android:pathData="M87.1066 46.0416C87.1066 51.4632 86.02 56.831 83.9094 61.8351L45.5806 46.0416L87.1066 46.0416Z"
+        android:fillColor="#FFAB91" />
+    <path
+        android:pathData="M83.8543 60.835C81.5944 66.2576 78.1907 71.1354 73.8728 75.1393L45.7004 45.1276L83.8543 60.835Z"
+        android:fillColor="#FFCC80" />
+    <path
+        android:pathData="M74.9019 74.1516C70.7611 78.2671 65.787 81.4604 60.3097 83.5193L45.7002 45.1281L74.9019 74.1516Z"
+        android:fillColor="#FFE082" />
+    <path
+        android:pathData="M61.5041 83.0491C56.0168 85.3082 50.1039 86.3642 44.1687 86.1453L45.7002 45.1281L61.5041 83.0491Z"
+        android:fillColor="#FFF59D" />
+    <path
+        android:pathData="M45.7002 86.1734C39.6693 86.1734 33.7115 84.8606 28.2457 82.3272L45.7002 45.1279L45.7002 86.1734Z"
+        android:fillColor="#E6EE9C" />
+    <path
+        android:pathData="M29.8961 83.049C24.4598 80.811 19.5675 77.4442 15.5469 73.1741L45.7 45.1279L29.8961 83.049Z"
+        android:fillColor="#C5E1A5" />
+    <path
+        android:pathData="M16.4977 74.1517C12.231 69.911 8.95103 64.7924 6.88875 59.1563L45.6995 45.1282L16.4977 74.1517Z"
+        android:fillColor="#A5D6A7" />
+    <path
+        android:pathData="M7.54558 60.8351C5.23527 55.2915 4.17593 49.3119 4.44219 43.3175L45.6995 45.1277L7.54558 60.8351Z"
+        android:fillColor="#80CBC4" />
+    <path
+        android:pathData="M4.40175 45.1277C4.40175 39.3457 5.63082 33.6291 8.00845 28.3521L45.6992 45.1277L4.40175 45.1277Z"
+        android:fillColor="#80DEEA" />
+    <path
+        android:pathData="M7.54533 29.4201C9.88677 23.8019 13.455 18.7709 17.992 14.691L45.6992 45.1276L7.54533 29.4201Z"
+        android:fillColor="#81D4FA" />
+    <path
+        android:pathData="M16.4972 16.104C20.7738 11.8536 25.9374 8.5886 31.6231 6.53981L45.699 45.1276L16.4972 16.104Z"
+        android:fillColor="#90CAF9" />
+    <path
+        android:pathData="M29.8956 7.20611C35.5358 4.88411 41.6238 3.83384 47.7214 4.13092L45.6995 45.1272L29.8956 7.20611Z"
+        android:fillColor="#9FA8DA" />
+    <path
+        android:pathData="M45.6997 4.08133C51.465 4.08133 57.1665 5.28113 62.4371 7.60349L45.6997 45.1268L45.6997 4.08133Z"
+        android:fillColor="#B39DDB" />
+    <path
+        android:pathData="M61.5036 7.20587C66.8144 9.39225 71.6074 12.6565 75.576 16.7898L45.6997 45.127L61.5036 7.20587Z"
+        android:fillColor="#CE93D8" />
+    <path
+        android:pathData="M74.9017 16.1034C78.982 20.1589 82.162 25.0192 84.2365 30.3711L45.7 45.127L74.9017 16.1034Z"
+        android:fillColor="#F48FB1" />
+    <path
+        android:pathData="M83.8541 29.4196C86.1054 34.8216 87.1695 40.6392 86.9751 46.4831L45.7002 45.1271L83.8541 29.4196Z"
+        android:fillColor="#EF9A9A" />
+    <path
+        android:pathData="M86.9979 45.1272C86.9979 50.5487 85.9172 55.9166 83.8183 60.9207L45.7004 45.1272L86.9979 45.1272Z"
+        android:fillColor="#FFAB91" />
+</vector>
\ No newline at end of file
diff --git a/app/src/normal/res/layout-port/f_eip.xml b/app/src/normal/res/layout-port/f_eip.xml
new file mode 100644
index 00000000..eed5fde6
--- /dev/null
+++ b/app/src/normal/res/layout-port/f_eip.xml
@@ -0,0 +1,154 @@
+<?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"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/eipServiceFragment"
+    >
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_left"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.3"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_center"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.175"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_outer_left"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintGuide_percent="0.125"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_outer_right"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.875"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_bottom"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.66"
+        />
+
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_right"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.7"
+        />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/background"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        app:srcCompat="@drawable/bg_disconnected"
+        android:scaleType="fitXY"
+        android:layout_marginTop="-300dp"
+        android:layout_marginBottom="-300dp"
+        android:layout_marginLeft="-300dp"
+        android:layout_marginRight="-300dp"
+
+        />
+
+
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/main_description"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintBottom_toTopOf="@+id/sub_description"
+        android:padding="@dimen/activity_margin"
+        android:layout_marginTop="@dimen/activity_margin"
+        android:textAppearance="@android:style/TextAppearance.Large"
+        android:textStyle="bold"
+        android:textSize="34sp"
+        android:autoSizeMinTextSize="28sp"
+        android:autoSizeTextType="uniform"
+        android:textColor="@color/colorEipFragmentFont"
+        app:layout_constraintDimensionRatio="1:1"
+        tools:text="Connection secure"
+        android:gravity="center"
+        android:maxLines="1"
+        />
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/sub_description"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toBottomOf="@id/main_description"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        android:padding="@dimen/activity_margin"
+        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"
+        android:textStyle="bold"
+        android:textColor="@color/colorEipFragmentFont"
+        app:layout_constraintDimensionRatio="1:1"
+        tools:text="A LONG TEXT WITH SEVERAL THINGS BLABLkk \n kdjfkj \n kjdfkjdf"
+        android:gravity="center"
+        android:maxLines="3"
+        android:ellipsize="end"
+        />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/state_view"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toTopOf="@id/guideline_horizontal_bottom"
+        app:layout_constraintTop_toTopOf="@id/guideline_horizontal_center"
+        app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_outer_left"
+        app:layout_constraintRight_toRightOf="@id/guideline_vertical_outer_right"
+        app:layout_constraintVertical_bias="1"
+        app:srcCompat="@drawable/red_mask"
+        />
+    <se.leap.bitmaskclient.base.views.MainButton
+        android:id="@+id/main_button"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:layout_margin="@dimen/stdpadding"
+        app:layout_constraintTop_toBottomOf="@+id/guideline_horizontal_bottom"
+        app:layout_constraintBottom_toTopOf="@id/gateway_location_button"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_right"
+        app:layout_constraintStart_toStartOf="@+id/guideline_vertical_left"
+        />
+
+    <se.leap.bitmaskclient.base.views.LocationButton
+        android:id="@+id/gateway_location_button"
+        android:layout_width="match_parent"
+        android:layout_height="64dp"
+        android:layout_marginBottom="@dimen/stdpadding"
+        android:layout_marginEnd="@dimen/stdpadding"
+        android:layout_marginStart="@dimen/stdpadding"
+        android:layout_marginTop="@dimen/stdpadding"
+        android:layout_marginLeft="@dimen/stdpadding"
+        android:layout_marginRight="@dimen/stdpadding"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:text="SEATTLE"
+        android:gravity="center_vertical" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/normal/res/layout-xlarge-port/f_eip.xml b/app/src/normal/res/layout-xlarge-port/f_eip.xml
new file mode 100644
index 00000000..ae548c82
--- /dev/null
+++ b/app/src/normal/res/layout-xlarge-port/f_eip.xml
@@ -0,0 +1,162 @@
+<?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"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:id="@+id/eipServiceFragment"
+    >
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_left"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.3"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_top"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.025"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_center"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.175"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_outer_left"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintGuide_percent="0.15"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_outer_right"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.85"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_bottom"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.66"
+        />
+
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_right"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.7"
+        />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/background"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        app:srcCompat="@drawable/bg_disconnected"
+        android:scaleType="fitXY"
+        android:layout_marginTop="-300dp"
+        android:layout_marginBottom="-300dp"
+        android:layout_marginLeft="-300dp"
+        android:layout_marginRight="-300dp"
+
+        />
+
+
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/main_description"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toTopOf="@id/guideline_horizontal_top"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintBottom_toTopOf="@+id/sub_description"
+        android:padding="@dimen/activity_margin"
+        android:layout_marginTop="@dimen/activity_margin"
+        android:textAppearance="@android:style/TextAppearance.Large"
+        android:textSize="45sp"
+        android:textStyle="bold"
+        android:autoSizeMinTextSize="38sp"
+        android:autoSizeTextType="uniform"
+        android:textColor="@color/colorEipFragmentFont"
+        app:layout_constraintDimensionRatio="1:1"
+        tools:text="Connection secure"
+        android:gravity="center"
+        android:maxLines="1"
+        />
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/sub_description"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toBottomOf="@id/main_description"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        android:padding="@dimen/activity_margin"
+        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
+        android:textStyle="bold"
+        android:textColor="@color/colorEipFragmentFont"
+        app:layout_constraintDimensionRatio="1:1"
+        tools:text="A LONG TEXT WITH SEVERAL THINGS BLABLkk \n kdjfkj \n kjdfkjdf"
+        android:gravity="center"
+        android:maxLines="2"
+        android:ellipsize="end"
+        />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/state_view"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toTopOf="@id/guideline_horizontal_bottom"
+        app:layout_constraintTop_toTopOf="@id/guideline_horizontal_center"
+        app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_outer_left"
+        app:layout_constraintRight_toRightOf="@id/guideline_vertical_outer_right"
+        app:layout_constraintVertical_bias="1"
+        app:srcCompat="@drawable/red_mask"
+        />
+    <se.leap.bitmaskclient.base.views.MainButton
+        android:id="@+id/main_button"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:layout_margin="@dimen/stdpadding"
+        app:layout_constraintTop_toBottomOf="@+id/guideline_horizontal_bottom"
+        app:layout_constraintBottom_toTopOf="@id/gateway_location_button"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_right"
+        app:layout_constraintStart_toStartOf="@+id/guideline_vertical_left"
+        />
+
+    <se.leap.bitmaskclient.base.views.LocationButton
+        android:id="@+id/gateway_location_button"
+        android:layout_width="match_parent"
+        android:layout_height="64dp"
+        android:layout_marginBottom="@dimen/stdpadding"
+        android:layout_marginEnd="@dimen/stdpadding"
+        android:layout_marginStart="@dimen/stdpadding"
+        android:layout_marginTop="@dimen/stdpadding"
+        android:layout_marginLeft="@dimen/stdpadding"
+        android:layout_marginRight="@dimen/stdpadding"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:text="SEATTLE"
+        android:gravity="center_vertical" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/normal/res/layout-xlarge/f_eip.xml b/app/src/normal/res/layout-xlarge/f_eip.xml
new file mode 100644
index 00000000..a4d94394
--- /dev/null
+++ b/app/src/normal/res/layout-xlarge/f_eip.xml
@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+    This is the layout for extra large landscape, extra large portrait
+    can be found in layout-xlarge-port
+-->
+<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"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/eipServiceFragment"
+    >
+
+
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_center"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.25"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_left"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.3" />
+
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_bottom"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.55" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_button_top"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.875"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_button_bottom"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.98"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_right"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintGuide_percent="0.7" />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/background"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:scaleType="fitXY"
+        android:layout_marginLeft="-300dp"
+        android:layout_marginRight="-300dp"
+        android:layout_marginTop="-300dp"
+        android:layout_marginBottom="-300dp"
+        app:srcCompat="@drawable/bg_disconnected" />
+
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/main_description"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintBottom_toTopOf="@+id/sub_description"
+        android:padding="@dimen/stdpadding"
+        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
+        android:textSize="45sp"
+        android:textStyle="bold"
+        android:textColor="@color/colorEipFragmentFont"
+        app:layout_constraintDimensionRatio="1:1"
+        tools:text="Connection secure"
+        />
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/sub_description"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toBottomOf="@id/main_description"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_center"
+        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
+        android:textStyle="bold"
+        android:textColor="@color/colorEipFragmentFont"
+        android:paddingLeft="@dimen/stdpadding"
+        android:paddingStart="@dimen/stdpadding"
+        android:paddingRight="@dimen/stdpadding"
+        android:paddingEnd="@dimen/stdpadding"
+        android:paddingBottom="@dimen/stdpadding"
+        app:layout_constraintDimensionRatio="1:1"
+        tools:text="Your traffic is securly routed through \n another"
+        android:maxLines="2"
+        android:gravity="center"
+        />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/state_view"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toTopOf="@id/guideline_horizontal_bottom"
+        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_center"
+        app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_left"
+        app:layout_constraintRight_toRightOf="@id/guideline_vertical_right"
+        app:layout_constraintVertical_bias="1"
+        app:srcCompat="@drawable/red_mask"
+        />
+
+    <se.leap.bitmaskclient.base.views.MainButton
+        android:id="@+id/main_button"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:layout_margin="@dimen/stdpadding"
+        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_bottom"
+        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_button_top"
+        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_right"
+        app:layout_constraintStart_toStartOf="@+id/guideline_vertical_left"
+        app:layout_constraintDimensionRatio="1:1"
+        />
+
+
+    <se.leap.bitmaskclient.base.views.LocationButton
+        android:id="@+id/gateway_location_button"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_marginEnd="@dimen/stdpadding"
+        android:layout_marginStart="@dimen/stdpadding"
+
+        android:layout_marginLeft="@dimen/stdpadding"
+        android:layout_marginRight="@dimen/stdpadding"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_button_top"
+        app:layout_constraintBottom_toBottomOf="@+id/guideline_horizontal_button_bottom"
+        tools:text="SEATTLE"
+        android:gravity="center_vertical" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/normal/res/layout/f_eip.xml b/app/src/normal/res/layout/f_eip.xml
new file mode 100644
index 00000000..9c921721
--- /dev/null
+++ b/app/src/normal/res/layout/f_eip.xml
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+    This is the default layout for landscape, portrait can be found
+    in layout-port
+-->
+<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"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/eipServiceFragment"
+    >
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_top"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.1"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_center"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.25"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_left"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.3" />
+
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_bottom"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.45" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_button_top"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.8"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_horizontal_button_bottom"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.98"
+        />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline_vertical_right"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintGuide_percent="0.7" />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/background"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:scaleType="fitXY"
+        android:layout_marginLeft="-300dp"
+        android:layout_marginRight="-300dp"
+        android:layout_marginTop="-300dp"
+        android:layout_marginBottom="-300dp"
+        app:srcCompat="@drawable/bg_disconnected" />
+
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/main_description"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintBottom_toTopOf="@+id/sub_description"
+        android:paddingLeft="@dimen/stdpadding"
+        android:paddingStart="@dimen/stdpadding"
+        android:paddingRight="@dimen/stdpadding"
+        android:paddingEnd="@dimen/stdpadding"
+        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
+        android:textSize="26sp"
+        android:textStyle="bold"
+        android:textColor="@color/colorEipFragmentFont"
+        app:layout_constraintDimensionRatio="1:1"
+        tools:text="Connection secure"
+        />
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/sub_description"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toBottomOf="@id/main_description"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_center"
+        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Medium"
+        android:textStyle="bold"
+        android:textColor="@color/colorEipFragmentFont"
+        android:paddingLeft="@dimen/stdpadding"
+        android:paddingStart="@dimen/stdpadding"
+        android:paddingRight="@dimen/stdpadding"
+        android:paddingEnd="@dimen/stdpadding"
+        android:paddingBottom="@dimen/stdpadding"
+        app:layout_constraintDimensionRatio="1:1"
+        tools:text="Your traffic is securly routed through \n another"
+        android:maxLines="2"
+        android:gravity="center"
+        />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/state_view"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toTopOf="@id/guideline_horizontal_bottom"
+        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_center"
+        app:layout_constraintLeft_toLeftOf="@id/guideline_vertical_left"
+        app:layout_constraintRight_toRightOf="@id/guideline_vertical_right"
+        app:layout_constraintVertical_bias="1"
+        app:srcCompat="@drawable/red_mask"
+        />
+
+    <se.leap.bitmaskclient.base.views.MainButton
+        android:id="@+id/main_button"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:layout_margin="@dimen/stdpadding"
+        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_bottom"
+        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal_button_top"
+        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_right"
+        app:layout_constraintStart_toStartOf="@+id/guideline_vertical_left"
+        app:layout_constraintDimensionRatio="1:1"
+        />
+
+
+    <se.leap.bitmaskclient.base.views.LocationButton
+        android:id="@+id/gateway_location_button"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_marginEnd="@dimen/stdpadding"
+        android:layout_marginStart="@dimen/stdpadding"
+
+        android:layout_marginLeft="@dimen/stdpadding"
+        android:layout_marginRight="@dimen/stdpadding"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_button_top"
+        app:layout_constraintBottom_toBottomOf="@+id/guideline_horizontal_button_bottom"
+        tools:text="SEATTLE"
+        android:gravity="center_vertical" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/normal/res/layout/v_location_button.xml b/app/src/normal/res/layout/v_location_button.xml
new file mode 100644
index 00000000..8aaf4978
--- /dev/null
+++ b/app/src/normal/res/layout/v_location_button.xml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:orientation="horizontal"
+    android:layout_width="match_parent"
+    android:layout_gravity="center_vertical"
+    android:layout_height="match_parent"
+    android:padding="@dimen/stdpadding"
+    android:background="@drawable/cust_button_light_rect"
+    >
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/world_icn"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignTop="@+id/text_location"
+        android:layout_alignBottom="@+id/text_location"
+        android:scaleType="fitCenter"
+        android:src="@drawable/ic_web"
+        android:layout_gravity="center"
+        app:tint="@color/colorLocationButtonTint"
+        />
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/recommended_icn"
+        android:scaleType="fitCenter"
+        android:layout_marginRight="-13dp"
+        android:layout_marginEnd="-13dp"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignTop="@id/text_location"
+        android:layout_alignBottom="@+id/text_location"
+        android:layout_toEndOf="@id/world_icn"
+        android:layout_toRightOf="@id/world_icn"
+        android:src="@drawable/ic_lightning_bolt"
+        app:tint="@color/colorLocationButtonTint"
+
+        android:visibility="gone"
+        tools:visibility="visible"
+        />
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/text_location"
+        android:paddingStart="@dimen/stdpadding"
+        android:paddingLeft="@dimen/stdpadding"
+        android:paddingEnd="@dimen/stdpadding"
+        android:paddingRight="@dimen/stdpadding"
+        android:maxLines="1"
+        android:ellipsize="end"
+        android:layout_height="match_parent"
+        android:layout_width="match_parent"
+        app:autoSizeTextType="uniform"
+        android:gravity="center_vertical"
+        app:autoSizeMinTextSize="15sp"
+        app:autoSizeMaxTextSize="24sp"
+        android:layout_toEndOf="@id/recommended_icn"
+        android:layout_toRightOf="@+id/recommended_icn"
+        android:layout_toLeftOf="@+id/bridge_icn"
+        android:layout_toStartOf="@+id/bridge_icn"
+        android:layout_gravity="center_vertical"
+        android:layout_centerInParent="true"
+        android:textAppearance="@style/TextAppearance.AppCompat.Large"
+        android:textStyle="bold"
+        android:textColor="@color/white"
+        tools:text="Seattle along message"
+        />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/bridge_icn"
+
+        android:paddingStart="@dimen/compact_padding"
+        android:paddingLeft="@dimen/compact_padding"
+        android:paddingRight="@dimen/compact_padding"
+        android:paddingEnd="@dimen/compact_padding"
+        android:scaleType="fitCenter"
+        android:layout_width="48dp"
+        android:layout_height="wrap_content"
+        android:layout_alignTop="@id/text_location"
+        android:layout_alignBottom="@+id/text_location"
+        android:layout_toStartOf="@id/load_indicator"
+        android:layout_toLeftOf="@id/load_indicator"
+        android:src="@drawable/ic_bridge_36"
+        android:visibility="gone"
+        tools:visibility="visible"
+        app:tint="@color/colorLocationButtonTint"
+        />
+
+    <se.leap.bitmaskclient.base.views.LocationIndicator
+        android:id="@+id/load_indicator"
+        android:layout_marginBottom="4dp"
+        android:layout_width="48dp"
+        android:layout_height="40dp"
+        android:layout_alignParentEnd="true"
+        android:layout_alignParentRight="true"
+        android:layout_centerVertical="true"
+        android:paddingTop="@dimen/stdpadding"
+        android:paddingBottom="@dimen/stdpadding"
+        android:visibility="visible"
+        android:layout_gravity="center_vertical"
+        app:tint="@color/colorLocationButtonTintTransparent"
+        />
+
+
+
+</RelativeLayout>
\ No newline at end of file
diff --git a/app/src/normal/res/layout/v_main_button.xml b/app/src/normal/res/layout/v_main_button.xml
new file mode 100644
index 00000000..e3f96693
--- /dev/null
+++ b/app/src/normal/res/layout/v_main_button.xml
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/vpn_btn_guideline_left"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.125" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/vpn_btn_guideline_right"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.875" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/vpn_btn_guideline_top"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.125" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/vpn_btn_guideline_bottom"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.875" />
+
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/icn_guideline_left"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.2" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/icn_guideline_right"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.8" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/icn_guideline_top"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.2" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/icn_guideline_bottom"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.8" />
+
+   <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/border_guideline_left"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.025" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/border_guideline_right"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.975" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/border_guideline_top"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.025" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/border_guideline_bottom"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.975" />
+
+
+   <!-- <ProgressBar
+        android:id="@+id/progressBar"
+        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
+
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toBottomOf="@id/border_guideline_bottom"
+        app:layout_constraintEnd_toEndOf="@id/border_guideline_right"
+        app:layout_constraintStart_toStartOf="@id/border_guideline_left"
+        app:layout_constraintTop_toTopOf="@id/border_guideline_top"
+        app:layout_constraintDimensionRatio="1:1"
+        android:indeterminate="true"
+        android:indeterminateDuration="800"
+        android:indeterminateDrawable="@drawable/progressbar_circle"
+        android:interpolator="@android:anim/decelerate_interpolator"
+        android:indeterminateBehavior="cycle"
+        />-->
+
+    <!--<androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/progress_circular"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:scaleType="fitXY"
+
+        app:layout_constraintTop_toTopOf="@+id/button"
+        app:layout_constraintBottom_toBottomOf="@+id/button"
+        app:layout_constraintLeft_toLeftOf="@+id/button"
+        app:layout_constraintRight_toRightOf="@+id/button"
+        app:layout_constraintDimensionRatio="1:1"
+        android:src="@drawable/rainbow_circle" />-->
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/button"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toTopOf="@+id/vpn_btn_guideline_bottom"
+        app:layout_constraintEnd_toStartOf="@+id/vpn_btn_guideline_right"
+        app:layout_constraintStart_toStartOf="@+id/vpn_btn_guideline_left"
+        app:layout_constraintTop_toTopOf="@+id/vpn_btn_guideline_top"
+        app:layout_constraintDimensionRatio="1:1"
+        app:srcCompat="@drawable/button_circle_start"
+        />
+
+
+
+
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file