WIP: Implementing mockups from Carrie, added "Toolbar"

The Toolbar is the new thing from Google which acts as an ActionBar.
It is not a special view like the action bar is, it is
implemented and added to your layout the same as any view.

The InnerView classes of the swap workflow have the choice of what
colour to make the toolbar, so that they can distinguish themselves
as per the mockups (some deep blue, others bright blue).

Added icons for close, but they don't do anything yet.

Minor tweaks to layout so that it looks more like the latest mockups.

F-Droid/res/layout/swap_activity.xml

@@ -1,14 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout
+<LinearLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
+        android:layout_height="match_parent"
+        android:orientation="vertical">
+    
+    <android.support.v7.widget.Toolbar
+            android:id="@+id/toolbar"
+            android:layout_height="wrap_content"
+            android:layout_width="match_parent"
+            android:titleTextAppearance="@style/SwapTheme.Wizard.Text"
+            android:minHeight="?attr/actionBarSize"
+            android:background="?attr/colorPrimary" />
 
     <FrameLayout
             android:id="@+id/fragment_container"
             android:layout_width="fill_parent"
-            android:layout_height="fill_parent">
+            android:layout_height="fill_parent" />
 
-    </FrameLayout>
-
-</RelativeLayout>
+</LinearLayout>

F-Droid/res/layout/swap_wifi_qr.xml

@@ -12,13 +12,6 @@
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content">
 
-        <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:id="@+id/textView"
-                android:text="@string/swap_scan_or_type_url"
-                style="@style/SwapTheme.Wizard.MainText"/>
-
         <ImageView
                 android:layout_width="250dp"
                 android:layout_height="250dp"
@@ -26,6 +19,13 @@
                 android:id="@+id/wifi_qr_code"
                 tools:src="@drawable/swap_qr_example"/>
 
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:id="@+id/textView"
+            android:text="@string/swap_scan_or_type_url"
+            style="@style/SwapTheme.Wizard.MainText"/>
+
         <!--
         <Button style="@style/SwapTheme.Wizard.OptionButton"
                 android:id="@+id/btn_not_working"
@@ -45,8 +45,11 @@
                 android:layout_gravity="center"
                 android:id="@+id/btn_qr_scanner"/>
 
+        <!-- Mark as "gone" for now, until it appears in a future mockup. Don't comment it out,
+             because then we'd need to modify the code which adds a listener for it too. -->
         <Button style="@style/SwapTheme.Wizard.OptionButton"
                 android:id="@+id/btn_cancel_swap"
+                android:visibility="gone"
                 android:text="@string/cancel" />
 
     </LinearLayout>

F-Droid/res/menu/swap_next.xml

@@ -2,6 +2,7 @@
 
     <item
         android:id="@+id/action_next"
+        android:icon="@drawable/ic_arrow_forward_white"
         android:title="@string/next"
         android:titleCondensed="@string/next"/>
 

F-Droid/res/menu/swap_next_search.xml

@@ -1,14 +1,15 @@
 <menu xmlns:android="http://schemas.android.com/apk/res/android" >
 
-    <item
-        android:id="@+id/action_next"
-        android:title="@string/next"
-        android:titleCondensed="@string/next"/>
-
     <item
         android:id="@+id/action_search"
         android:icon="@drawable/ic_search_white"
         android:title="@string/menu_search"
         android:titleCondensed="@string/menu_search"/>
 
+    <item
+        android:id="@+id/action_next"
+        android:icon="@drawable/ic_arrow_forward_white"
+        android:title="@string/next"
+        android:titleCondensed="@string/next"/>
+
 </menu>

F-Droid/res/menu/swap_skip.xml

@@ -2,6 +2,7 @@
 
     <item
         android:id="@+id/action_next"
+        android:icon="@drawable/ic_arrow_forward_white"
         android:title="@string/skip"
         android:titleCondensed="@string/skip"/>
 

F-Droid/res/values-v11/styles.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="SwapTheme.Wizard" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="android:actionButtonStyle">@style/SwapTheme.Wizard.ActionButton</item>
+    </style>
+
+</resources>

F-Droid/res/values-v21/styles.xml

@@ -13,4 +13,8 @@
         <item name="android:colorEdgeEffect">@color/fdroid_blue</item>
     </style>
 
+    <style name="SwapTheme.Wizard" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="android:colorButtonNormal">#04b9e6</item>
+    </style>
+
 </resources>

F-Droid/res/values/colors.xml

@@ -18,5 +18,6 @@
     <color name="swap_deny_pressed">#ff3096b9</color>
     <color name="swap_wifi_may_work">#fbb040</color>
     <color name="swap_wifi_likely_to_work">#00a14b</color>
+    <color name="swap_bright_blue">#00b9e6</color>
 
 </resources>

F-Droid/res/values/strings.xml

@@ -299,8 +299,9 @@
     <string name="system_permission_denied_body">This option is only available when F-Droid is installed as a system-app.</string>
 
     <string name="app_description">F-Droid is an installable catalogue of FOSS (Free and Open Source Software) applications for the Android platform. The client makes it easy to browse, install, and keep track of updates on your device.</string>
+    <string name="swap_nfc_title">Touch to swap</string>
     <string name="swap_nfc_description">If your friend has <b>F-Droid and NFC turned on</b> touch your phones together.</string>
-    <string name="swap_join_same_wifi">Join the same Wifi as your friend</string>
+    <string name="swap_join_same_wifi">Join the same WiFi</string>
     <string name="swap_join_this_hotspot">Help your friend join your hotspot</string>
     <string name="swap_use_bluetooth">Use Bluetooth instead</string>
     <string name="swap_wifi_help">Learn more about Wifi</string>
@@ -310,10 +311,10 @@
     <string name="swap_success">Swap success!</string>
     <string name="swap_no_wifi_network">No network yet</string>
     <string name="swap_active_hotspot">Your hotspot is active</string>
-    <string name="swap_view_available_networks">(Tap to open available networks)</string>
-    <string name="swap_switch_to_wifi">(Tap to switch to a WiFi network)</string>
+    <string name="swap_view_available_networks">Tap to open available networks</string>
+    <string name="swap_switch_to_wifi">Tap to switch to a WiFi network</string>
     <string name="swap_wifi_qr_not_working">It\'s not working</string>
-    <string name="open_qr_code_scanner">Open QR Code Scanner</string>
+    <string name="open_qr_code_scanner">Open QR Scanner</string>
     <string name="swap_welcome">Welcome to F-Droid!</string>
     <string name="swap_confirm_connect">Do you want to get apps from %1$s now?</string>
     <string name="swap_introduction">Your mobile device becomes an app store with Swap!</string>
@@ -322,7 +323,7 @@
     <string name="swap_tap_to_select_apps">Tap to select the apps you want to swap.</string>
     <string name="swap_dont_show_again">Don\'t show this again</string>
     <string name="swap_tap_for_details_and_install">Tap an app for details and to install.</string>
-    <string name="swap_scan_or_type_url">One person needs to scan the code, or type the URL of the other swapper into a browser.</string>
+    <string name="swap_scan_or_type_url">One person needs to scan the code, or type the URL of the other in a browser.</string>
     <!-- WiFi AP status for Swap flow -->
     <string name="wifi_ap_public">Public</string>
     <string name="wifi_ap_private">Private</string>
@@ -330,4 +331,6 @@
     <string name="wifi_warning_public">May work</string>
     <string name="wifi_warning_private">Promising</string>
     <string name="wifi_warning_personal">Best bet</string>
+	<string name="swap_choose_apps">Choose Apps</string>
+	<string name="swap_scan_qr">Scan QR Code</string>
 </resources>

F-Droid/res/values/styles.xml

@@ -32,10 +32,11 @@
         <!-- customizations that are not API-level specific go here. -->
     </style>
 
-    <style name="SwapTheme.Wizard" parent="AppThemeLight">
+    <style name="SwapTheme.Wizard" parent="Theme.AppCompat.Light.NoActionBar">
         <!--<item name="android:windowBackground">@drawable/swap_window_background</item>-->
         <!--<item name="android:actionBarStyle">@style/Widget.AppCompat.ActionBar.Solid</item>-->
-        <item name="android:actionButtonStyle">@style/SwapTheme.Wizard.ActionButton</item>
+        <item name="actionButtonStyle">@style/SwapTheme.Wizard.ActionButton</item>
+        <item name="colorButtonNormal">@color/swap_bright_blue</item>
     </style>
 
     <style name="SwapTheme.StartSwap" parent="AppThemeLight">
@@ -98,6 +99,10 @@
         <item name="android:textColorSecondary">#fff</item>
     </style>
 
+    <style name="SwapTheme.Wizard.Text.Toolbar" parent="SwapTheme.Wizard.Text">
+        <item name="android:textSize">22sp</item>
+    </style>
+
     <style name="SwapTheme.Wizard.ActionButton" parent="Widget.AppCompat.ActionButton">
         <item name="android:textAppearance">@style/SwapTheme.Wizard.Text</item>
         <item name="android:paddingLeft">10dp</item>
@@ -109,17 +114,16 @@
     <style name="SwapTheme.Wizard.MainText" parent="@style/SwapTheme.Wizard.Text">
         <item name="android:paddingLeft">40dp</item>
         <item name="android:paddingRight">40dp</item>
-        <item name="android:paddingTop">39.3dp</item> <!-- 70px * 96dpi / 160dpi -->
-        <item name="android:paddingBottom">29.25dp</item> <!-- 52px * 96dpi / 160dpi -->
+        <item name="android:paddingTop">20dp</item>
+        <item name="android:paddingBottom">15dp</item>
         <item name="android:fontFamily">sans-serif-light</item>
     </style>
 
     <style name="SwapTheme.Wizard.LocalIpAddress" parent="@style/SwapTheme.Wizard.Text">
-        <item name="android:textSize">26.5sp</item> <!-- 58px * 96dpi / 160dpi = 32.5sp (ended up making a bit smaller, because longer addresses didn't fit well) -->
+        <item name="android:textSize">20sp</item>
         <item name="android:paddingLeft">40dp</item>
         <item name="android:paddingRight">40dp</item>
-        <item name="android:paddingTop">22.5dp</item> <!-- 40px * 96dpi / 160dpi -->
-        <item name="android:paddingBottom">42.5dp</item> <!-- 75px * 96dpi / 160dpi -->
+        <item name="android:paddingBottom">15dp</item>
         <item name="android:textStyle">bold</item>
     </style>
 
@@ -132,7 +136,7 @@
         <item name="android:textStyle">bold</item>
     </style>
 
-    <style name="SwapTheme.Wizard.ButtonBase">
+    <style name="SwapTheme.Wizard.ButtonBase" parent="Widget.AppCompat.Button">
         <item name="android:layout_width">match_parent</item>
         <item name="android:layout_height">wrap_content</item>
         <item name="android:padding">19dp</item> <!-- 34px * 96dpi / 160dpi -->
@@ -145,8 +149,11 @@
     Buttons down the bottom of the screen, which prompt the user for further
     info, or to change the process somehow (e.g. Use Bluetooth instead of Wifi).
     -->
-    <style name="SwapTheme.Wizard.OptionButton" parent="SwapTheme.Wizard.ButtonBase">
-        <item name="android:background">@drawable/swap_button_skin</item>
+    <!--<style name="SwapTheme.Wizard.OptionButton" parent="SwapTheme.Wizard.ButtonBase">-->
+    <style name="SwapTheme.Wizard.OptionButton" parent="Widget.AppCompat.Button">
+        <item name="android:textColor">@android:color/white</item>
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
         <item name="android:layout_margin">0dp</item>
     </style>
 

F-Droid/src/org/fdroid/fdroid/localrepo/SwapManager.java

@@ -207,6 +207,7 @@ public class SwapManager {
         } else {
             Log.e(TAG, "Couldn't disable swap, because service was not running.");
         }
+        setStep(STEP_INTRO);
     }
 
     /**

F-Droid/src/org/fdroid/fdroid/views/swap/JoinWifiView.java

@@ -7,6 +7,7 @@ import android.content.Intent;
 import android.content.IntentFilter;
 import android.net.wifi.WifiManager;
 import android.os.Build;
+import android.support.annotation.ColorRes;
 import android.support.annotation.NonNull;
 import android.support.v4.content.LocalBroadcastManager;
 import android.support.v4.view.MenuItemCompat;
@@ -128,4 +129,14 @@ public class JoinWifiView extends RelativeLayout implements SwapWorkflowActivity
     public int getPreviousStep() {
         return SwapManager.STEP_SELECT_APPS;
     }
+
+    @ColorRes
+    public int getToolbarColour() {
+        return getResources().getColor(R.color.swap_blue);
+    }
+
+    @Override
+    public String getToolbarTitle() {
+        return getResources().getString(R.string.swap_join_same_wifi);
+    }
 }

F-Droid/src/org/fdroid/fdroid/views/swap/NfcView.java

@@ -3,6 +3,7 @@ package org.fdroid.fdroid.views.swap;
 import android.annotation.TargetApi;
 import android.content.Context;
 import android.os.Build;
+import android.support.annotation.ColorRes;
 import android.support.annotation.NonNull;
 import android.support.v4.view.MenuItemCompat;
 import android.util.AttributeSet;
@@ -76,4 +77,14 @@ public class NfcView extends RelativeLayout implements SwapWorkflowActivity.Inne
     public int getPreviousStep() {
         return SwapManager.STEP_JOIN_WIFI;
     }
+
+    @ColorRes
+    public int getToolbarColour() {
+        return getResources().getColor(R.color.swap_blue);
+    }
+
+    @Override
+    public String getToolbarTitle() {
+        return getResources().getString(R.string.swap_nfc_title);
+    }
 }

F-Droid/src/org/fdroid/fdroid/views/swap/SelectAppsView.java

@@ -9,6 +9,7 @@ import android.graphics.drawable.Drawable;
 import android.net.Uri;
 import android.os.Build;
 import android.os.Bundle;
+import android.support.annotation.ColorRes;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.support.v4.app.LoaderManager;
@@ -89,9 +90,6 @@ public class SelectAppsView extends ListView implements
         adapter = new AppListAdapter(this, getContext(),
                 getContext().getContentResolver().query(InstalledAppProvider.getContentUri(), InstalledAppProvider.DataColumns.ALL, null, null, null));
 
-        // Has to be _before_ "setAdapter()", as per the API docs.
-        addHeaderView(inflate(getContext(), R.layout.swap_create_header, null), null, false);
-
         setAdapter(adapter);
         setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
 
@@ -100,10 +98,7 @@ public class SelectAppsView extends ListView implements
 
         setOnItemClickListener(new AdapterView.OnItemClickListener() {
             public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
-                if (position > 0) {
-                    // Ignore the headerView at position 0.
-                    toggleAppSelected(position);
-                }
+                toggleAppSelected(position);
             }
         });
 
@@ -145,8 +140,18 @@ public class SelectAppsView extends ListView implements
         return SwapManager.STEP_INTRO;
     }
 
+    @ColorRes
+    public int getToolbarColour() {
+        return getResources().getColor(R.color.swap_bright_blue);
+    }
+
+    @Override
+    public String getToolbarTitle() {
+        return getResources().getString(R.string.swap_choose_apps);
+    }
+
     private void toggleAppSelected(int position) {
-        Cursor c = (Cursor) adapter.getItem(position - 1);
+        Cursor c = (Cursor) adapter.getItem(position);
         String packageName = c.getString(c.getColumnIndex(InstalledAppProvider.DataColumns.APP_ID));
         if (getState().hasSelectedPackage(packageName)) {
             getState().deselectPackage(packageName);
@@ -179,13 +184,13 @@ public class SelectAppsView extends ListView implements
     public void onLoadFinished(Loader<Cursor> loader, Cursor cursor) {
         adapter.swapCursor(cursor);
 
-        for (int i = 0; i < getCount() - 1; i++) {
-            Cursor c = ((Cursor) getItemAtPosition(i + 1));
+        for (int i = 0; i < getCount(); i++) {
+            Cursor c = ((Cursor) getItemAtPosition(i));
             String packageName = c.getString(c.getColumnIndex(InstalledAppProvider.DataColumns.APP_ID));
             getState().ensureFDroidSelected();
             for (String selected : getState().getAppsToSwap()) {
                 if (TextUtils.equals(packageName, selected)) {
-                    setItemChecked(i + 1, true);
+                    setItemChecked(i, true);
                 }
             }
         }
@@ -279,7 +284,7 @@ public class SelectAppsView extends ListView implements
             labelView.setText(appLabel);
             iconView.setImageDrawable(icon);
 
-            final int listPosition = cursor.getPosition() + 1; // To account for the header view.
+            final int listPosition = cursor.getPosition();
 
             // Since v11, the Android SDK provided the ability to show selected list items
             // by highlighting their background. Prior to this, we need to handle this ourselves
@@ -319,7 +324,7 @@ public class SelectAppsView extends ListView implements
                 int colour;
                 if (checked) {
                     resource = R.drawable.ic_check_circle_white;
-                    colour = getResources().getColor(R.color.fdroid_blue);
+                    colour = getResources().getColor(R.color.swap_bright_blue);
                 } else {
                     resource = R.drawable.ic_add_circle_outline_white;
                     colour = 0xFFD0D0D4;

F-Droid/src/org/fdroid/fdroid/views/swap/StartSwapView.java

@@ -3,6 +3,7 @@ package org.fdroid.fdroid.views.swap;
 import android.annotation.TargetApi;
 import android.content.Context;
 import android.os.Build;
+import android.support.annotation.ColorRes;
 import android.support.annotation.NonNull;
 import android.util.AttributeSet;
 import android.view.Menu;
@@ -75,4 +76,15 @@ public class StartSwapView extends LinearLayout implements SwapWorkflowActivity.
         // else.
         return SwapManager.STEP_INTRO;
     }
+
+    @Override
+    @ColorRes
+    public int getToolbarColour() {
+        return getResources().getColor(R.color.swap_bright_blue);
+    }
+
+    @Override
+    public String getToolbarTitle() {
+        return getResources().getString(R.string.swap_start);
+    }
 }

F-Droid/src/org/fdroid/fdroid/views/swap/SwapWorkflowActivity.java

@@ -7,10 +7,12 @@ import android.content.Intent;
 import android.net.Uri;
 import android.os.AsyncTask;
 import android.os.Bundle;
+import android.support.annotation.ColorRes;
 import android.support.annotation.LayoutRes;
 import android.support.annotation.NonNull;
 import android.support.v4.app.FragmentActivity;
 import android.support.v7.app.ActionBarActivity;
+import android.support.v7.widget.Toolbar;
 import android.view.LayoutInflater;
 import android.view.Menu;
 import android.view.MenuInflater;
@@ -51,10 +53,15 @@ public class SwapWorkflowActivity extends ActionBarActivity {
         @SwapManager.SwapStep int getStep();
 
         @SwapManager.SwapStep int getPreviousStep();
+
+        @ColorRes int getToolbarColour();
+
+        String getToolbarTitle();
     }
 
     private static final int CONNECT_TO_SWAP = 1;
 
+    private Toolbar toolbar;
     private SwapManager state;
     private InnerView currentView;
     private boolean hasPreparedLocalRepo = false;
@@ -76,6 +83,11 @@ public class SwapWorkflowActivity extends ActionBarActivity {
         super.onCreate(savedInstanceState);
         state = SwapManager.load(this);
         setContentView(R.layout.swap_activity);
+
+        toolbar = (Toolbar) findViewById(R.id.toolbar);
+        toolbar.setTitleTextAppearance(getApplicationContext(), R.style.SwapTheme_Wizard_Text_Toolbar);
+        setSupportActionBar(toolbar);
+
         container = (ViewGroup) findViewById(R.id.fragment_container);
         showRelevantView();
     }
@@ -134,10 +146,24 @@ public class SwapWorkflowActivity extends ActionBarActivity {
         View view = ((LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE)).inflate(viewRes, container, false);
         currentView = (InnerView)view;
         state.setStep(currentView.getStep());
+        toolbar.setBackgroundColor(currentView.getToolbarColour());
+        toolbar.setTitle(currentView.getToolbarTitle());
+        toolbar.setNavigationIcon(R.drawable.ic_close_white);
+        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                onToolbarCancel();
+            }
+        });
         container.addView(view);
         supportInvalidateOptionsMenu();
     }
 
+    private void onToolbarCancel() {
+        SwapManager.load(this).disableSwapping();
+        finish();
+    }
+
     private void showIntro() {
         inflateInnerView(R.layout.swap_blank);
     }

F-Droid/src/org/fdroid/fdroid/views/swap/WifiQrView.java

@@ -8,6 +8,7 @@ import android.content.IntentFilter;
 import android.graphics.LightingColorFilter;
 import android.net.Uri;
 import android.os.Build;
+import android.support.annotation.ColorRes;
 import android.support.annotation.NonNull;
 import android.support.v4.content.LocalBroadcastManager;
 import android.text.TextUtils;
@@ -122,6 +123,16 @@ public class WifiQrView extends ScrollView implements SwapWorkflowActivity.Inner
         return SwapManager.STEP_JOIN_WIFI;
     }
 
+    @ColorRes
+    public int getToolbarColour() {
+        return getResources().getColor(R.color.swap_blue);
+    }
+
+    @Override
+    public String getToolbarTitle() {
+        return getResources().getString(R.string.swap_scan_qr);
+    }
+
     private void setUIFromWifi() {
 
         if (TextUtils.isEmpty(FDroidApp.repo.address))

F-Droid/tools/download-material-icon.sh

@@ -48,7 +48,7 @@ function download {
 
 RES_DIR=$1
 CATEGORY=$2
-ICON="${3}_black"
+ICON="${3}_white"
 BASE_URL="https://raw.githubusercontent.com/google/material-design-icons/master"
 SCREENS="mdpi hdpi xhdpi xxhdpi xxxhdpi"