Merge pull request #613 from maskaravivek/navigationBeautify

With icons in navigation drawer

app/src/main/java/fr/free/nrw/commons/hamburger/NavigationBaseFragment.java

@@ -12,6 +12,7 @@ import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.ImageView;
+import android.widget.LinearLayout;
 import android.widget.RelativeLayout;
 import android.widget.TextView;
 import android.widget.Toast;
@@ -34,22 +35,22 @@ public class NavigationBaseFragment extends Fragment {
     ImageView pictureOfTheDay;
 
     @BindView(R.id.upload_item)
-    TextView uploadItem;
+    LinearLayout uploadItem;
 
     @BindView(R.id.nearby_item)
-    TextView nearbyItem;
+    LinearLayout nearbyItem;
 
     @BindView(R.id.about_item)
-    TextView aboutItem;
+    LinearLayout aboutItem;
 
     @BindView(R.id.settings_item)
-    TextView settingsItem;
+    LinearLayout settingsItem;
 
     @BindView(R.id.feedback_item)
-    TextView feedbackItem;
+    LinearLayout feedbackItem;
 
     @BindView(R.id.logout_item)
-    TextView logoutItem;
+    LinearLayout logoutItem;
 
     private DrawerLayout drawerLayout;
     private RelativeLayout drawerPane;

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

@@ -0,0 +1,15 @@
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item android:state_pressed="true">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/hamburger_item_pressed_color" />
+        </shape>
+    </item>
+
+    <item android:state_enabled="true">
+        <shape android:shape="rectangle">
+            <solid android:color="@android:color/transparent" />
+        </shape>
+    </item>
+
+</selector>

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

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:orientation="vertical" android:layout_width="match_parent"
+    android:orientation="vertical"
+    android:layout_width="match_parent"
     android:layout_height="match_parent">
 
     <ScrollView
@@ -27,65 +28,149 @@
                 android:layout_height="0.5dp"
                 android:background="@android:color/black"/>
 
-            <TextView
+            <LinearLayout
                 android:id="@+id/upload_item"
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_margin="12dp"
-                android:textSize="20dp"
-                android:textStyle="bold"
-                android:textColor="@android:color/black"
-                android:text="@string/navigation_item_upload"/>
+                android:layout_height="52dp"
+                android:background="@drawable/hamburger_item_bg"
+                android:gravity="center_vertical"
+                android:orientation="horizontal">
 
-            <TextView
+                <ImageView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="20dp"
+                    android:src="@drawable/ic_file_upload_black_24dp" />
+
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="12dp"
+                    android:text="@string/navigation_item_upload"
+                    android:letterSpacing="0.02"
+                    android:textColor="@color/main_background_dark"
+                    android:textSize="@dimen/hamburger_menu_item" />
+                </LinearLayout>
+
+            <LinearLayout
                 android:id="@+id/nearby_item"
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_margin="12dp"
-                android:textSize="20dp"
-                android:textStyle="bold"
-                android:textColor="@android:color/black"
-                android:text="@string/navigation_item_nearby"/>
+                android:layout_height="52dp"
+                android:background="@drawable/hamburger_item_bg"
+                android:gravity="center_vertical"
+                android:orientation="horizontal">
 
-            <TextView
+                <ImageView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="20dp"
+                    android:src="@drawable/ic_location_on_black_24dp" />
+
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="12dp"
+                    android:text="@string/navigation_item_nearby"
+                    android:letterSpacing="0.02"
+                    android:textColor="@color/main_background_dark"
+                    android:textSize="@dimen/hamburger_menu_item" />
+            </LinearLayout>
+
+            <LinearLayout
                 android:id="@+id/about_item"
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_margin="12dp"
-                android:textSize="20dp"
-                android:textStyle="bold"
-                android:textColor="@android:color/black"
-                android:text="@string/navigation_item_about"/>
+                android:layout_height="52dp"
+                android:background="@drawable/hamburger_item_bg"
+                android:gravity="center_vertical"
+                android:orientation="horizontal">
 
-            <TextView
+                <ImageView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="20dp"
+                    android:src="@drawable/ic_info_outline_black_24dp" />
+
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="12dp"
+                    android:text="@string/navigation_item_about"
+                    android:letterSpacing="0.02"
+                    android:textColor="@color/main_background_dark"
+                    android:textSize="@dimen/hamburger_menu_item" />
+            </LinearLayout>
+
+            <LinearLayout
                 android:id="@+id/settings_item"
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_margin="12dp"
-                android:textSize="20dp"
-                android:textStyle="bold"
-                android:textColor="@android:color/black"
-                android:text="@string/navigation_item_settings"/>
+                android:layout_height="52dp"
+                android:background="@drawable/hamburger_item_bg"
+                android:gravity="center_vertical"
+                android:orientation="horizontal">
 
-            <TextView
+                <ImageView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="20dp"
+                    android:src="@drawable/ic_settings_black_24dp" />
+
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="12dp"
+                    android:text="@string/navigation_item_settings"
+                    android:letterSpacing="0.02"
+                    android:textColor="@color/main_background_dark"
+                    android:textSize="@dimen/hamburger_menu_item" />
+            </LinearLayout>
+
+            <LinearLayout
                 android:id="@+id/feedback_item"
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_margin="12dp"
-                android:textSize="20dp"
-                android:textStyle="bold"
-                android:textColor="@android:color/black"
-                android:text="@string/navigation_item_feedback"/>
+                android:layout_height="52dp"
+                android:background="@drawable/hamburger_item_bg"
+                android:gravity="center_vertical"
+                android:orientation="horizontal">
 
-            <TextView
+                <ImageView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="20dp"
+                    android:src="@drawable/ic_feedback_black_24dp" />
+
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="12dp"
+                    android:text="@string/navigation_item_feedback"
+                    android:letterSpacing="0.02"
+                    android:textColor="@color/main_background_dark"
+                    android:textSize="@dimen/hamburger_menu_item" />
+            </LinearLayout>
+
+            <LinearLayout
                 android:id="@+id/logout_item"
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_margin="12dp"
-                android:textSize="20dp"
-                android:textStyle="bold"
-                android:textColor="@android:color/black"
-                android:text="@string/navigation_item_logout"/>
+                android:layout_height="52dp"
+                android:background="@drawable/hamburger_item_bg"
+                android:gravity="center_vertical"
+                android:orientation="horizontal">
+
+                <ImageView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="20dp"
+                    android:src="@drawable/ic_exit_to_app_black_24dp" />
+
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="12dp"
+                    android:text="@string/navigation_item_logout"
+                    android:letterSpacing="0.02"
+                    android:textColor="@color/main_background_dark"
+                    android:textSize="@dimen/hamburger_menu_item" />
+            </LinearLayout>
         </LinearLayout>
     </ScrollView>
 </LinearLayout>

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

@@ -22,4 +22,5 @@
     <color name="upload_overlay_background_dark">#77000000</color>
     <color name="upload_overlay_background_light">#44000000</color>
 
+    <color name="hamburger_item_pressed_color">#f5f5f5</color>
 </resources>

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

@@ -3,4 +3,5 @@
     <dimen name="tiny_margin">4dp</dimen>
     <dimen name="small_margin">8dp</dimen>
     <dimen name="bottom_peak_height">240dp</dimen>
+    <dimen name="hamburger_menu_item">18sp</dimen>
 </resources>