Make Faq look nicer, especially on large device by using cardviews

5 files changed, 180 insertions, 161 deletions

diff --git a/main/src/main/java/de/blinkt/openvpn/fragments/FaqFragment.java b/main/src/main/java/de/blinkt/openvpn/fragments/FaqFragment.java
index 907ae226..471d62c1 100644
--- a/main/src/main/java/de/blinkt/openvpn/fragments/FaqFragment.java
+++ b/main/src/main/java/de/blinkt/openvpn/fragments/FaqFragment.java
@@ -8,42 +8,75 @@ package de.blinkt.openvpn.fragments;
 import android.app.Fragment;
 import android.os.Build;
 import android.os.Bundle;
-import android.text.Html;
-import android.text.method.LinkMovementMethod;
+import android.support.v7.widget.RecyclerView;
+import android.support.v7.widget.StaggeredGridLayoutManager;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
-import android.widget.TextView;
+
 import de.blinkt.openvpn.R;
 
 public class FaqFragment extends Fragment  {
+private static int[] faqitems[] =
+        {
+                {R.string.faq_howto_title, R.string.faq_howto},
+                {R.string.faq_vpndialog43_title, R.string.faq_vpndialog43},
+                {R.string.faq_system_dialogs_title, R.string.faq_system_dialogs},
+                {R.string.faq_duplicate_notification_title, R.string.faq_duplicate_notification},
+                {R.string.battery_consumption_title, R.string.baterry_consumption},
+                {R.string.tap_mode, R.string.faq_tap_mode},
+                {R.string.vpn_tethering_title, R.string.faq_tethering},
+                {R.string.faq_security_title, R.string.faq_security},
+                {R.string.broken_images, R.string.broken_images_faq},
+                {R.string.faq_shortcut, R.string.faq_howto_shortcut},
+                {R.string.tap_mode, R.string.tap_faq2},
+                {R.string.copying_log_entries, R.string.faq_copying},
+                {R.string.tap_mode, R.string.tap_faq3},
+                {R.string.faq_routing_title, R.string.faq_routing}
+        };
+    private RecyclerView mRecyclerView;
+
 
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
     		Bundle savedInstanceState) {
     	View v= inflater.inflate(R.layout.faq, container, false);
-    	
-    	insertHtmlEntry(v, R.id.broken_images_faq,R.string.broken_images_faq);
-    	insertHtmlEntry(v, R.id.faq_howto,R.string.faq_howto);
-    	insertHtmlEntry(v, R.id.baterry_consumption, R.string.baterry_consumption);  
-    	insertHtmlEntry(v, R.id.faq_tethering, R.string.faq_tethering);
-        insertHtmlEntry(v, R.id.faq_vpndialog43, R.string.faq_vpndialog43);
-        insertHtmlEntry(v, R.id.faq_system_dialog_xposed, R.string.faq_system_dialog_xposed);
-
-        /* I think the problem mentioned in there should not affect, 4.3+ */
-        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2) {
-            v.findViewById(R.id.broken_images_faq).setVisibility(View.GONE);
-            v.findViewById(R.id.broken_images_faq_title).setVisibility(View.GONE);
-        }
+
+        int dpwidth = (int) (container.getWidth()/getResources().getDisplayMetrics().density);
+        int columns = dpwidth/400;
+        columns = Math.max(1, columns);
+
+
+        mRecyclerView = (RecyclerView) v.findViewById(R.id.gridview);
+
+        // use this setting to improve performance if you know that changes
+        // in content do not change the layout size of the RecyclerView
+        mRecyclerView.setHasFixedSize(true);
+
+
+        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(columns, StaggeredGridLayoutManager.VERTICAL));
+
+        mRecyclerView.setAdapter(new FaqViewAdapter(getActivity(), getFAQEntries()));
 
 		return v;
     }
 
-	private void insertHtmlEntry (View v, int viewId, int stringId) {
-		TextView faqItem = (TextView) v.findViewById(viewId);
-    	faqItem.setText(Html.fromHtml(getActivity().getString(stringId)));
-    	faqItem.setMovementMethod(LinkMovementMethod.getInstance());
+    /* I think the problem mentioned in there should not affect, 4.3+ */
+    private int[][] getFAQEntries() {
+        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2) {
+            int[][] newFaqItems = new int[faqitems.length - 1][2];
+            int j=0;
+            for (int i = 0;i < faqitems.length;i++) {
+                if (faqitems[i][0] != R.string.broken_images) {
+                    newFaqItems[j] = faqitems[i];
+                    j++;
+                }
+            }
+            return newFaqItems;
 
-	}
+        } else {
+            return faqitems;
+        }
+    }
 
 }
diff --git a/main/src/main/java/de/blinkt/openvpn/fragments/FaqViewAdapter.java b/main/src/main/java/de/blinkt/openvpn/fragments/FaqViewAdapter.java
new file mode 100644
index 00000000..f667d798
--- /dev/null
+++ b/main/src/main/java/de/blinkt/openvpn/fragments/FaqViewAdapter.java
@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2012-2014 Arne Schwabe
+ * Distributed under the GNU GPL v2. For full terms see the file doc/LICENSE.txt
+ */
+
+package de.blinkt.openvpn.fragments;
+
+import android.content.Context;
+import android.support.v7.widget.CardView;
+import android.support.v7.widget.RecyclerView;
+import android.text.Html;
+import android.text.Spanned;
+import android.text.TextUtils;
+import android.text.method.LinkMovementMethod;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.TextView;
+
+import de.blinkt.openvpn.R;
+
+import static android.support.v7.widget.RecyclerView.ViewHolder;
+
+public class FaqViewAdapter extends RecyclerView.Adapter<FaqViewAdapter.FaqViewHolder> {
+    private final int[][] mFaqItems;
+    private final Spanned[] mHtmlEntries;
+
+    public FaqViewAdapter(Context context, int[][] faqItems) {
+        mFaqItems = faqItems;
+
+        mHtmlEntries = new Spanned[faqItems.length];
+        for (int i =0; i < faqItems.length; i++) {
+            mHtmlEntries[i] = Html.fromHtml(context.getString(faqItems[i][1]));
+
+            // Add hack R.string.faq_system_dialogs_title -> R.string.faq_system_dialog_xposed
+            if (faqItems[i][0] == R.string.faq_system_dialogs_title)
+            {
+                Spanned xposedtext = Html.fromHtml(context.getString(R.string.faq_system_dialog_xposed));
+                mHtmlEntries[i] = (Spanned) TextUtils.concat(mHtmlEntries[i], xposedtext);
+            }
+
+        }
+
+    }
+
+    public static class FaqViewHolder extends RecyclerView.ViewHolder {
+
+        private final CardView mView;
+        private final TextView mBody;
+        private final TextView mHead;
+
+        public FaqViewHolder(View itemView) {
+            super(itemView);
+
+            mView = (CardView) itemView;
+            mBody = (TextView)mView.findViewById(R.id.faq_body);
+            mHead = (TextView)mView.findViewById(R.id.faq_head);
+            mBody.setMovementMethod(LinkMovementMethod.getInstance());
+        }
+    }
+
+    @Override
+    public FaqViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
+        View view = LayoutInflater.from(viewGroup.getContext())
+                .inflate(R.layout.faqcard, viewGroup, false);
+        return new FaqViewHolder(view);
+    }
+
+    @Override
+    public void onBindViewHolder(FaqViewHolder faqViewHolder, int i) {
+        faqViewHolder.mHead.setText(mFaqItems[i][0]);
+        faqViewHolder.mBody.setText(mHtmlEntries[i]);
+    }
+
+    @Override
+    public int getItemCount() {
+        return mFaqItems.length;
+    }
+
+}
diff --git a/main/src/main/res/layout/faq.xml b/main/src/main/res/layout/faq.xml
index 63ae54a9..a48dc495 100644
--- a/main/src/main/res/layout/faq.xml
+++ b/main/src/main/res/layout/faq.xml
@@ -4,144 +4,12 @@
   ~ Distributed under the GNU GPL v2. For full terms see the file doc/LICENSE.txt
   -->
 
-<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
+<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/gridview"
+    android:paddingleft="@dimen/stdpadding"
+    android:paddingRight="@dimen/stdpadding"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:paddingLeft="@dimen/stdpadding"
-    android:paddingRight="@dimen/stdpadding" >
-
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="vertical" >
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/faq_howto_title" />
-
-        <TextView
-            android:id="@+id/faq_howto"
-            style="@style/faqitem"
-            tools:text="@string/faq_howto"
-            tools:ignore="SelectableText" />
-
-        <TextView
-                style="@style/faqhead"
-                android:text="@string/faq_vpndialog43_title" />
-
-        <TextView
-                tools:text="@string/faq_vpndialog43"
-                android:id="@+id/faq_vpndialog43"
-                style="@style/faqitem" />
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/faq_system_dialogs_title" />
-
-        <TextView
-            style="@style/faqitem"
-            android:text="@string/faq_system_dialogs" />
-
-        <TextView
-            style="@style/faqitem"
-            tools:text="@string/faq_system_dialog_xposed"
-            android:id="@+id/faq_system_dialog_xposed"/>
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/faq_duplicate_notification_title" />
-
-        <TextView
-            style="@style/faqitem"
-            android:text="@string/faq_duplicate_notification" />
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/battery_consumption_title" />
-
-        <TextView
-            android:id="@+id/baterry_consumption"
-            tools:text="@string/baterry_consumption"
-            style="@style/faqitem"
-            tools:ignore="SelectableText" />
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/tap_mode" />
-
-        <TextView
-            style="@style/faqitem"
-            android:text="@string/faq_tap_mode" />
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/vpn_tethering_title" />
-
-        <TextView
-            android:id="@+id/faq_tethering"
-            style="@style/faqitem"
-            tools:text="@string/faq_tethering"
-            tools:ignore="SelectableText" />
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/faq_security_title" />
-
-        <TextView
-            style="@style/faqitem"
-            android:text="@string/faq_security" />
-
-        <TextView
-            style="@style/faqhead"
-            android:id="@+id/broken_images_faq_title"
-            android:text="@string/broken_images" />
-
-        <TextView
-            android:id="@+id/broken_images_faq"
-            style="@style/faqitem"
-            tools:ignore="SelectableText" />
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/faq_shortcut" />
-
-        <TextView
-            style="@style/faqitem"
-            android:text="@string/faq_howto_shortcut" />
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/tap_mode" />
-
-        <TextView
-            style="@style/faqitem"
-            android:text="@string/tap_faq2" />
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/copying_log_entries" />
-
-        <TextView
-            style="@style/faqitem"
-            android:text="@string/faq_copying" />
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/tap_mode" />
-
-        <TextView
-            style="@style/faqitem"
-            android:text="@string/tap_faq3" />
-
-        <TextView
-            style="@style/faqhead"
-            android:text="@string/faq_routing_title" />
-
-        <TextView
-            style="@style/faqitem"
-            android:text="@string/faq_routing" >
-        </TextView>
-    </LinearLayout>
-
-</ScrollView>
\ No newline at end of file
+    android:verticalSpacing="@dimen/stdpadding"
+    android:horizontalSpacing="@dimen/stdpadding"
+    />
\ No newline at end of file
diff --git a/main/src/main/res/layout/faqcard.xml b/main/src/main/res/layout/faqcard.xml
new file mode 100644
index 00000000..da72a33a
--- /dev/null
+++ b/main/src/main/res/layout/faqcard.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) 2012-2014 Arne Schwabe
+  ~ Distributed under the GNU GPL v2. For full terms see the file doc/LICENSE.txt
+  -->
+
+<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:card_view="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    card_view:cardCornerRadius="10dp"
+    android:layout_height="wrap_content">
+    <LinearLayout
+        android:orientation="vertical"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+    <TextView
+        style="@style/faqhead"
+        android:paddingLeft="10dp"
+        android:paddingRight="10dp"
+        android:paddingTop="10dp"
+        android:paddingBottom="5dp"
+        android:id="@+id/faq_head"
+        tools:text="@string/faq_howto_title" />
+
+    <TextView
+        android:paddingLeft="10dp"
+        android:paddingRight="10dp"
+        android:paddingTop="5dp"
+        android:paddingBottom="10dp"
+        android:id="@+id/faq_body"
+        style="@style/faqitem"
+        tools:text="@string/faq_howto"
+        tools:ignore="SelectableText" />
+
+    </LinearLayout>
+</android.support.v7.widget.CardView>
diff --git a/main/src/main/res/values/styles.xml b/main/src/main/res/values/styles.xml
index 7b26a4a7..f67a51d1 100644
--- a/main/src/main/res/values/styles.xml
+++ b/main/src/main/res/values/styles.xml
@@ -23,7 +23,7 @@
         <item name="android:paddingTop">10sp</item>
         <item name="android:layout_width">match_parent</item>
         <item name="android:layout_height">wrap_content</item>
-        <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
+        <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
         <!-- <item name="android:singleLine">true</item> -->
     </style>