Fixes commons-app#3436 and commons-app#2881: Media Detail design Overhaul (commons-app#3505)

* ic_map_dark_24dp: map icon for white background

* ic_info_outline_dark_24dp: info icon for dark background

* MediaDetailFragment: update the spacer as per image aspect ratio

* fragment_media_detail: design overhaul

* fragment_media_detail: remove redundant background color statements

* make requested changes

* add dark mode support

* minor ui tweak

* white map icon in dark mode

* make rquested changes

* make requested changes to layout

* fix misalignment of category list

* subtle amendments

* convert comments to javadocs

* minor amendments

* minor changes

* add styles for media detail

* Media detail fragment refactored

* make suggested changes

* minor name fix

* fix the delete button border

Author: kbhardwaj123

app/src/main/java/fr/free/nrw/commons/media/MediaDetailFragment.java

@@ -104,6 +104,8 @@ public static MediaDetailFragment forMedia(int index, boolean editable, boolean
 
     @BindView(R.id.mediaDetailImageView)
     SimpleDraweeView image;
+    @BindView(R.id.mediaDetailImageViewSpacer)
+    LinearLayout imageSpacer;
     @BindView(R.id.mediaDetailTitle)
     TextView title;
     @BindView(R.id.mediaDetailDesc)
@@ -204,7 +206,7 @@ && getParentFragment() instanceof MediaDetailPagerFragment) {
         return view;
     }
 
-    @OnClick(R.id.mediaDetailImageView)
+    @OnClick(R.id.mediaDetailImageViewSpacer)
     public void launchZoomActivity(View view) {
         Context ctx = view.getContext();
         ctx.startActivity(
@@ -248,13 +250,22 @@ private void displayMediaDetails() {
         compositeDisposable.add(disposable);
     }
 
+    /**
+     * The imageSpacer is Basically a transparent overlay for the SimpleDraweeView
+     * which holds the image to be displayed( moreover this image is out of
+     * the scroll view )
+     * @param imageInfo used to calculate height of the ImageSpacer
+     */
     private void updateAspectRatio(ImageInfo imageInfo) {
         if (imageInfo != null) {
             int screenWidth = scrollView.getWidth();
             int finalHeight = (screenWidth*imageInfo.getHeight()) / imageInfo.getWidth();
             ViewGroup.LayoutParams params = image.getLayoutParams();
+            ViewGroup.LayoutParams spacerParams = imageSpacer.getLayoutParams();
             params.height = finalHeight;
+            spacerParams.height = finalHeight;
             image.setLayoutParams(params);
+            imageSpacer.setLayoutParams(spacerParams);
         }
     }
 

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

@@ -1,10 +1,12 @@
 <?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:layout_height="wrap_content">
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:orientation="vertical"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    >
 
-    <TextView
+    <fr.free.nrw.commons.ui.widget.CompatTextView
         android:id="@+id/mediaDetailCategoryItemText"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
@@ -15,8 +17,8 @@
         android:padding="@dimen/small_gap"
         android:textColor="?attr/mediaDetailsText"
         android:textSize="@dimen/description_text_size"
-        android:drawablePadding="@dimen/tiny_gap"
-        android:drawableStart="?attr/iconInfo24"
+        app:drawablePadding="@dimen/tiny_gap"
+        app:drawableStart="?attr/iconInfo24"
         />
 
 </LinearLayout>