Fix #2881 (Change Media Details UI) (#2954)

* Media Details UI changed - XML file

* Onclicks added, design updated

* Removed bookmark item from media detail menu

* Update in XML

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

@@ -2,20 +2,24 @@ package fr.free.nrw.commons.media;
 
 import android.annotation.SuppressLint;
 import android.app.AlertDialog;
+import android.app.DownloadManager;
 import android.content.Intent;
 import android.database.DataSetObserver;
 import android.net.Uri;
 import android.os.Bundle;
+import android.os.Environment;
 import android.text.Editable;
 import android.text.TextWatcher;
 import android.util.TypedValue;
 import android.view.LayoutInflater;
+import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewTreeObserver;
 import android.widget.ArrayAdapter;
 import android.widget.Button;
 import android.widget.EditText;
+import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.ScrollView;
 import android.widget.Spinner;
@@ -44,6 +48,9 @@ import fr.free.nrw.commons.Media;
 import fr.free.nrw.commons.MediaDataExtractor;
 import fr.free.nrw.commons.R;
 import fr.free.nrw.commons.Utils;
+import fr.free.nrw.commons.bookmarks.Bookmark;
+import fr.free.nrw.commons.bookmarks.pictures.BookmarkPicturesContentProvider;
+import fr.free.nrw.commons.bookmarks.pictures.BookmarkPicturesDao;
 import fr.free.nrw.commons.category.CategoryDetailsActivity;
 import fr.free.nrw.commons.contributions.ContributionsFragment;
 import fr.free.nrw.commons.delete.DeleteHelper;
@@ -51,6 +58,9 @@ import fr.free.nrw.commons.delete.ReasonBuilder;
 import fr.free.nrw.commons.di.CommonsDaggerSupportFragment;
 import fr.free.nrw.commons.ui.widget.CompatTextView;
 import fr.free.nrw.commons.ui.widget.HtmlTextView;
+import fr.free.nrw.commons.utils.NetworkUtils;
+import fr.free.nrw.commons.utils.PermissionUtils;
+import fr.free.nrw.commons.utils.ViewUtil;
 import fr.free.nrw.commons.utils.ViewUtilWrapper;
 import io.reactivex.Single;
 import io.reactivex.android.schedulers.AndroidSchedulers;
@@ -61,6 +71,8 @@ import org.wikipedia.util.DateUtil;
 import org.wikipedia.util.StringUtil;
 import timber.log.Timber;
 
+import static android.Manifest.permission.WRITE_EXTERNAL_STORAGE;
+import static android.content.Context.DOWNLOAD_SERVICE;
 import static android.view.View.GONE;
 import static android.view.View.VISIBLE;
 
@@ -97,8 +109,12 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
     DeleteHelper deleteHelper;
     @Inject
     ViewUtilWrapper viewUtil;
+    @Inject
+    BookmarkPicturesDao bookmarkDao;
+
 
     private int initialListTop = 0;
+    private Bookmark bookmark;
 
     @BindView(R.id.mediaDetailImage)
     SimpleDraweeView image;
@@ -130,6 +146,8 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
     Button delete;
     @BindView(R.id.mediaDetailScrollView)
     ScrollView scrollView;
+    @BindView(R.id.iv_bookmark_icon)
+    ImageView ivBookmarkIcon;
 
     private ArrayList<String> categoryNames;
     private boolean categoriesLoaded = false;
@@ -276,6 +294,15 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
                 .observeOn(AndroidSchedulers.mainThread())
                 .subscribe(this::setTextFields);
         compositeDisposable.add(disposable);
+
+        // Initialize bookmark object
+        bookmark = new Bookmark(
+                media.getFilename(),
+                media.getCreator(),
+                BookmarkPicturesContentProvider.uriForName(media.getFilename())
+        );
+        updateBookmarkState();
+
     }
 
     /**
@@ -445,6 +472,82 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
 
     }
 
+    @OnClick(R.id.ll_bookmark)
+    public void onBookMarkClick(){
+        bookmarkDao.updateBookmark(bookmark);
+        updateBookmarkState();
+    }
+
+    private void updateBookmarkState() {
+        boolean isBookmarked = bookmarkDao.findBookmark(bookmark);
+        int icon = isBookmarked ? R.drawable.ic_star_filled_primary_dark_24dp : R.drawable.ic_star_border_primary_dark_24dp;
+        ivBookmarkIcon.setImageResource(icon);
+    }
+
+    @OnClick(R.id.ll_share)
+    public void onShareClick(){
+        Intent shareIntent = new Intent(Intent.ACTION_SEND);
+        shareIntent.setType("text/plain");
+        shareIntent.putExtra(Intent.EXTRA_TEXT, media.getDisplayTitle() + " \n" + media.getPageTitle().getCanonicalUri());
+        startActivity(Intent.createChooser(shareIntent, "Share image via..."));
+    }
+
+    @OnClick(R.id.ll_download)
+    public void onDownloadClick(){
+        if (!NetworkUtils.isInternetConnectionEstablished(getActivity())) {
+            ViewUtil.showShortSnackbar(getView(), R.string.no_internet);
+            return;
+        }
+        downloadMedia(media);
+    }
+
+    /**
+     * Start the media file downloading to the local SD card/storage.
+     * The file can then be opened in Gallery or other apps.
+     *
+     * @param m Media file to download
+     */
+    private void downloadMedia(Media m) {
+        String imageUrl = m.getImageUrl(), fileName = m.getFilename();
+
+        if (imageUrl == null
+                || fileName == null
+                || getContext() ==  null
+                || getActivity() == null) {
+            Timber.d("Skipping download media as either imageUrl %s or filename %s activity is null", imageUrl, fileName);
+            return;
+        }
+
+        // Strip 'File:' from beginning of filename, we really shouldn't store it
+        fileName = fileName.replaceFirst("^File:", "");
+
+        Uri imageUri = Uri.parse(imageUrl);
+
+        DownloadManager.Request req = new DownloadManager.Request(imageUri);
+        //These are not the image title and description fields, they are download descs for notifications
+        req.setDescription(getString(R.string.app_name));
+        req.setTitle(m.getDisplayTitle());
+        req.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS, fileName);
+
+        // Modern Android updates the gallery automatically. Yay!
+        req.allowScanningByMediaScanner();
+        req.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
+        PermissionUtils.checkPermissionsAndPerformAction(getActivity(), WRITE_EXTERNAL_STORAGE,
+                () -> enqueueRequest(req), () -> Toast.makeText(getContext(),
+                        R.string.download_failed_we_cannot_download_the_file_without_storage_permission,
+                        Toast.LENGTH_SHORT).show(), R.string.storage_permission,
+                R.string.write_storage_permission_rationale);
+
+    }
+
+    private void enqueueRequest(DownloadManager.Request req) {
+        DownloadManager systemService =
+                (DownloadManager) getActivity().getSystemService(DOWNLOAD_SERVICE);
+        if (systemService != null) {
+            systemService.enqueue(req);
+        }
+    }
+
     @OnClick(R.id.seeMore)
     public void onSeeMoreClicked(){
         if (nominatedForDeletion.getVisibility() == VISIBLE && getActivity() != null) {

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

@@ -41,13 +41,8 @@ import fr.free.nrw.commons.explore.categories.ExploreActivity;
 import fr.free.nrw.commons.kvstore.JsonKvStore;
 import fr.free.nrw.commons.mwapi.MediaWikiApi;
 import fr.free.nrw.commons.utils.ImageUtils;
-import fr.free.nrw.commons.utils.NetworkUtils;
-import fr.free.nrw.commons.utils.PermissionUtils;
-import fr.free.nrw.commons.utils.ViewUtil;
 import timber.log.Timber;
 
-import static android.Manifest.permission.WRITE_EXTERNAL_STORAGE;
-import static android.content.Context.DOWNLOAD_SERVICE;
 import static fr.free.nrw.commons.Utils.handleWebUrl;
 
 public class MediaDetailPagerFragment extends CommonsDaggerSupportFragment implements ViewPager.OnPageChangeListener {
@@ -55,13 +50,11 @@ public class MediaDetailPagerFragment extends CommonsDaggerSupportFragment imple
     @Inject MediaWikiApi mwApi;
     @Inject SessionManager sessionManager;
     @Inject @Named("default_preferences") JsonKvStore store;
-    @Inject BookmarkPicturesDao bookmarkDao;
 
     @BindView(R.id.mediaDetailsPager) ViewPager pager;
     private Boolean editable;
     private boolean isFeaturedImage;
     MediaDetailAdapter adapter;
-    private Bookmark bookmark;
     private MediaDetailProvider provider;
 
     public MediaDetailPagerFragment() {
@@ -157,28 +150,10 @@ public class MediaDetailPagerFragment extends CommonsDaggerSupportFragment imple
 
         Media m = provider.getMediaAtPosition(pager.getCurrentItem());
         switch (item.getItemId()) {
-            case R.id.menu_bookmark_current_image:
-                bookmarkDao.updateBookmark(bookmark);
-                updateBookmarkState(item);
-                return true;
-            case R.id.menu_share_current_image:
-                Intent shareIntent = new Intent(Intent.ACTION_SEND);
-                shareIntent.setType("text/plain");
-                shareIntent.putExtra(Intent.EXTRA_TEXT, m.getDisplayTitle() + " \n" + m.getPageTitle().getCanonicalUri());
-                startActivity(Intent.createChooser(shareIntent, "Share image via..."));
-                return true;
             case R.id.menu_browser_current_image:
                 // View in browser
                 handleWebUrl(requireContext(), Uri.parse(m.getPageTitle().getMobileUri()));
                 return true;
-            case R.id.menu_download_current_image:
-                // Download
-                if (!NetworkUtils.isInternetConnectionEstablished(getActivity())) {
-                    ViewUtil.showShortSnackbar(getView(), R.string.no_internet);
-                    return false;
-                }
-                downloadMedia(m);
-                return true;
             case R.id.menu_set_as_wallpaper:
                 // Set wallpaper
                 setWallpaper(m);
@@ -201,52 +176,6 @@ public class MediaDetailPagerFragment extends CommonsDaggerSupportFragment imple
         ImageUtils.setWallpaperFromImageUrl(getActivity(), Uri.parse(media.getImageUrl()));
     }
 
-    /**
-     * Start the media file downloading to the local SD card/storage.
-     * The file can then be opened in Gallery or other apps.
-     *
-     * @param m Media file to download
-     */
-    private void downloadMedia(Media m) {
-        String imageUrl = m.getImageUrl(), fileName = m.getFilename();
-
-        if (imageUrl == null
-                || fileName == null
-                || getContext() ==  null
-                || getActivity() == null) {
-            Timber.d("Skipping download media as either imageUrl %s or filename %s activity is null", imageUrl, fileName);
-            return;
-        }
-
-        // Strip 'File:' from beginning of filename, we really shouldn't store it
-        fileName = fileName.replaceFirst("^File:", "");
-
-        Uri imageUri = Uri.parse(imageUrl);
-
-        DownloadManager.Request req = new DownloadManager.Request(imageUri);
-        //These are not the image title and description fields, they are download descs for notifications
-        req.setDescription(getString(R.string.app_name));
-        req.setTitle(m.getDisplayTitle());
-        req.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS, fileName);
-
-        // Modern Android updates the gallery automatically. Yay!
-        req.allowScanningByMediaScanner();
-        req.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
-        PermissionUtils.checkPermissionsAndPerformAction(getActivity(), WRITE_EXTERNAL_STORAGE,
-            () -> enqueueRequest(req), () -> Toast.makeText(getContext(),
-                R.string.download_failed_we_cannot_download_the_file_without_storage_permission,
-                Toast.LENGTH_SHORT).show(), R.string.storage_permission,
-            R.string.write_storage_permission_rationale);
-
-    }
-
-    private void enqueueRequest(DownloadManager.Request req) {
-        DownloadManager systemService =
-            (DownloadManager) getActivity().getSystemService(DOWNLOAD_SERVICE);
-        if (systemService != null) {
-            systemService.enqueue(req);
-        }
-    }
 
     @Override
     public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
@@ -263,33 +192,16 @@ public class MediaDetailPagerFragment extends CommonsDaggerSupportFragment imple
                 if (m != null) {
                     // Enable default set of actions, then re-enable different set of actions only if it is a failed contrib
                     menu.findItem(R.id.menu_browser_current_image).setEnabled(true).setVisible(true);
-                    menu.findItem(R.id.menu_share_current_image).setEnabled(true).setVisible(true);
-                    menu.findItem(R.id.menu_download_current_image).setEnabled(true).setVisible(true);
-                    menu.findItem(R.id.menu_bookmark_current_image).setEnabled(true).setVisible(true);
-
-                    // Initialize bookmark object
-                    bookmark = new Bookmark(
-                            m.getFilename(),
-                            m.getCreator(),
-                            BookmarkPicturesContentProvider.uriForName(m.getFilename())
-                    );
-                    updateBookmarkState(menu.findItem(R.id.menu_bookmark_current_image));
 
                     if (m instanceof Contribution ) {
                         Contribution c = (Contribution) m;
                         switch (c.getState()) {
                             case Contribution.STATE_FAILED:
                                 menu.findItem(R.id.menu_browser_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_share_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_download_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_bookmark_current_image).setEnabled(false).setVisible(false);
                                 break;
                             case Contribution.STATE_IN_PROGRESS:
                             case Contribution.STATE_QUEUED:
                                 menu.findItem(R.id.menu_browser_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_share_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_download_current_image).setEnabled(false).setVisible(false);
-                                menu.findItem(R.id.menu_bookmark_current_image).setEnabled(false).setVisible(false);
                                 break;
                             case Contribution.STATE_COMPLETED:
                                 // Default set of menu items works fine. Treat same as regular media object
@@ -301,12 +213,6 @@ public class MediaDetailPagerFragment extends CommonsDaggerSupportFragment imple
         }
     }
 
-    private void updateBookmarkState(MenuItem item) {
-        boolean isBookmarked = bookmarkDao.findBookmark(bookmark);
-        int icon = isBookmarked ? R.drawable.ic_round_star_filled_24px : R.drawable.ic_round_star_border_24px;
-        item.setIcon(icon);
-    }
-
     public void showImage(int i) {
         Handler handler =  new Handler();
         handler.postDelayed(() -> pager.setCurrentItem(i), 5);

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

@@ -9,12 +9,9 @@
         <shape
             android:shape="rectangle">
             <solid
-                android:color="@color/deleteButton"/>
+                android:color="@color/deleteRed"/>
             <corners
-                android:radius="3dp" />
+                android:radius="2dp" />
-            <stroke
-                android:width="5px"
-                android:color="@color/deleteRed" />
         </shape>
     </item>
 
@@ -25,7 +22,7 @@
             <solid
                 android:color="@color/deleteButtonDark"/>
             <corners
-                android:radius="3dp" />
+                android:radius="2dp" />
         </shape>
     </item>
 

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

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector
+    android:layout_height="match_parent"
+    android:layout_width="match_parent"
+    xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item
+        android:state_enabled="true" >
+        <shape
+            android:shape="rectangle">
+            <solid
+                android:color="@color/button_blue"/>
+            <corners
+                android:radius="2dp" />
+        </shape>
+    </item>
+
+</selector>

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

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp">
+    <path android:fillColor="#00376d" android:pathData="M19,9h-4V3H9v6H5l7,7 7,-7zM5,18v2h14v-2H5z"/>
+</vector>

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

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp">
+    <path android:fillColor="#00376d" android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,-0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,-0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,-2.92 -2.92,-2.92z"/>
+</vector>

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

@@ -13,12 +13,9 @@
         android:background="?attr/subBackground"
         android:foreground="?attr/selectableItemBackground"
         android:gravity="center_vertical"
-        android:minHeight="@dimen/overflow_button_dimen"
+        android:textColor="@color/linkColor"
-        android:padding="@dimen/quarter_standard_height"
+        android:paddingBottom="@dimen/small_gap"
-        android:textColor="@android:color/white"
         android:textSize="@dimen/description_text_size"
-        app:drawablePadding="@dimen/small_gap"
-        app:drawableStart="@drawable/ic_info_outline_24dp"
         />
 
 </LinearLayout>

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

@@ -8,6 +8,12 @@
     android:background="?attr/mainBackground"
     >
 
+    <fr.free.nrw.commons.media.MediaDetailSpacer
+        android:id="@+id/mediaDetailSpacer"
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/standard_gap" />
+
+
     <ImageView
         android:id="@+id/mediaDetailImageFailed"
         android:layout_height="wrap_content"
@@ -18,13 +24,6 @@
         android:contentDescription="@string/mediaimage_failed"
         />
 
-    <com.facebook.drawee.view.SimpleDraweeView
-        android:id="@+id/mediaDetailImage"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        app:actualImageScaleType="centerCrop"
-        />
-
     <ScrollView
         android:id="@+id/mediaDetailScrollView"
         android:layout_width="match_parent"
@@ -35,330 +34,419 @@
 
         <LinearLayout
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
+            android:background="@color/white"
+            android:layout_height="match_parent"
             android:orientation="vertical">
 
-            <!-- Placeholder. Height gets set at runtime based on container size; the initial value is a hack to keep
+
-                 the detail info offscreen until it's placed properly. May be a better way to do this. -->
+            <com.facebook.drawee.view.SimpleDraweeView
-            <fr.free.nrw.commons.media.MediaDetailSpacer
+                android:id="@+id/mediaDetailImage"
-                android:id="@+id/mediaDetailSpacer"
                 android:layout_width="match_parent"
-                android:layout_height="@dimen/standard_gap" />
+                android:layout_height="wrap_content"
+                android:adjustViewBounds="true"
+                android:scaleType="fitXY"
+                />
+
+            <LinearLayout
+                android:padding="@dimen/standard_gap"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@color/primaryDarkColor"
+                >
+
+                <TextView
+                    android:id="@+id/mediaDetailTitle"
+                    android:layout_width="match_parent"
+                    android:textColor="@color/white"
+                    android:layout_height="wrap_content"
+                    android:text="@string/media_detail_title"
+                    />
+            </LinearLayout>
+            <LinearLayout
+                android:id="@+id/ll_bookmark"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@color/white"
+                android:orientation="horizontal"
+                android:weightSum="3"
+                >
+
+                <LinearLayout
+                    android:layout_weight="1"
+                    android:layout_width="0dp"
+                    android:orientation="vertical"
+                    android:layout_gravity="center"
+                    android:gravity="center"
+                    android:padding="@dimen/standard_gap"
+                    android:layout_height="wrap_content">
+
+                    <ImageView
+                        android:id="@+id/iv_bookmark_icon"
+                        android:layout_width="24dp"
+                        android:layout_height="24dp"
+                        android:background="@drawable/ic_star_border_primary_dark_24dp"/>
+
+                    <TextView
+                        android:gravity="center"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="BOOKMARK"
+                        android:textColor="@color/primaryDarkColor"
+                        />
+
+                </LinearLayout>
+                <LinearLayout
+                    android:id="@+id/ll_download"
+                    android:layout_weight="1"
+                    android:layout_width="0dp"
+                    android:orientation="vertical"
+                    android:layout_gravity="center"
+                    android:gravity="center"
+                    android:layout_height="wrap_content">
+
+                    <ImageView
+                        android:layout_width="24dp"
+                        android:layout_height="24dp"
+                        android:background="@drawable/ic_file_download_primary_dark_24dp"/>
+
+                    <TextView
+                        android:gravity="center"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="DOWNLOAD"
+                        android:textColor="@color/primaryDarkColor"
+                        />
+
+                </LinearLayout>
+                <LinearLayout
+                    android:id="@+id/ll_share"
+                    android:layout_weight="1"
+                    android:layout_width="0dp"
+                    android:orientation="vertical"
+                    android:layout_gravity="center"
+                    android:gravity="center"
+                    android:layout_height="wrap_content">
+
+                    <ImageView
+                        android:layout_width="24dp"
+                        android:layout_height="24dp"
+                        android:background="@drawable/ic_share_primary_dark_24dp"/>
+
+                    <TextView
+                        android:gravity="center"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="SHARE"
+                        android:textColor="@color/primaryDarkColor"
+                        />
+
+                </LinearLayout>
+
+            </LinearLayout>
+
+            <View
+                android:background="@color/divider_grey"
+                android:layout_width="match_parent"
+                android:layout_height="2dp"/>
 
             <LinearLayout
+                android:layout_width="match_parent"
+                android:weightSum="10"
+                android:paddingLeft="@dimen/standard_gap"
+                android:paddingRight="@dimen/standard_gap"
+                android:paddingTop="@dimen/small_gap"
+                android:paddingBottom="@dimen/small_gap"
+                android:orientation="horizontal"
+                android:layout_height="wrap_content">
+
+                <TextView
+                    android:layout_width="0dp"
+                    android:layout_weight="10"
+                    android:textStyle="bold"
+                    android:textColor="@color/black"
+                    android:layout_height="wrap_content"
+                    android:text="@string/media_detail_description"
+                    />
+
+                <ImageView
+                    android:src="@drawable/ic_mode_edit_primary_dark_24dp"
+                    android:layout_width="@dimen/half_standard_height"
+                    android:layout_height="@dimen/half_standard_height" />
+
+
+            </LinearLayout>
+
+            <fr.free.nrw.commons.ui.widget.HtmlTextView
+                android:paddingLeft="@dimen/standard_gap"
+                android:paddingRight="@dimen/standard_gap"
+                android:paddingBottom="@dimen/standard_gap"
+                android:id="@+id/mediaDetailDesc"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:background="?attr/fragmentCategorisationBackground"
+                android:layout_gravity="start"
-                android:orientation="vertical"
+                android:lineSpacingMultiplier="1.2"
-                android:padding="@dimen/standard_gap">
+                android:background="?attr/subBackground"
+                android:textColor="@color/black"
+                android:textSize="@dimen/description_text_size"
+                tools:text="Description of the media goes here. This can potentially be fairly long, and will need to wrap across multiple lines. We hope it looks nice though." />
 
-                <LinearLayout
+            <View
-                    android:layout_width="match_parent"
+                android:background="@color/divider_grey"
+                android:layout_width="match_parent"
+                android:layout_height="2dp"/>
+
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:weightSum="10"
+                android:paddingLeft="@dimen/standard_gap"
+                android:paddingRight="@dimen/standard_gap"
+                android:paddingTop="@dimen/small_gap"
+                android:paddingBottom="@dimen/small_gap"
+                android:orientation="horizontal"
+                android:layout_height="wrap_content">
+
+                <TextView
+                    android:layout_width="0dp"
+                    android:layout_weight="10"
                     android:layout_height="wrap_content"
-                    android:background="?attr/subBackground"
+                    android:textStyle="bold"
-                    android:orientation="vertical"
+                    android:textColor="@color/black"
-                    android:padding="@dimen/standard_gap">
+                    android:text="Categories"
+                    />
 
-                    <TextView
+                <ImageView
-                        android:layout_width="match_parent"
+                    android:src="@drawable/ic_mode_edit_primary_dark_24dp"
-                        android:layout_height="wrap_content"
+                    android:layout_width="@dimen/half_standard_height"
-                        android:paddingBottom="@dimen/tiny_gap"
+                    android:layout_height="@dimen/half_standard_height" />
-                        android:text="@string/media_detail_title"
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/normal_text"
-                        android:textStyle="bold" />
 
-                    <TextView
+            </LinearLayout>
-                        android:id="@+id/mediaDetailTitle"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_gravity="start"
-                        android:background="?attr/subBackground"
-                        android:padding="@dimen/small_gap"
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/description_text_size"
-                        tools:text="Title of the media" />
-                </LinearLayout>
 
-                <fr.free.nrw.commons.media.MediaDetailSpacer
+            <LinearLayout
-                    android:layout_width="match_parent"
+                android:lineSpacingMultiplier="1.2"
-                    android:layout_height="@dimen/small_gap" />
+                android:paddingLeft="@dimen/standard_gap"
+                android:paddingRight="@dimen/standard_gap"
+                android:paddingBottom="@dimen/standard_gap"
+                android:id="@+id/mediaDetailCategoryContainer"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical" />
 
-                <LinearLayout
+            <View
-                    android:layout_width="match_parent"
+                android:background="@color/divider_grey"
+                android:layout_width="match_parent"
+                android:layout_height="2dp"/>
+
+            <LinearLayout
+                android:id="@+id/authorLinearLayout"
+                android:layout_width="match_parent"
+                android:weightSum="10"
+                android:paddingLeft="@dimen/standard_gap"
+                android:paddingRight="@dimen/standard_gap"
+                android:paddingTop="@dimen/small_gap"
+                android:paddingBottom="@dimen/small_gap"
+                android:orientation="horizontal"
+                android:layout_height="wrap_content">
+
+                <TextView
+                    android:layout_width="0dp"
+                    android:layout_weight="3"
                     android:layout_height="wrap_content"
-                    android:id="@+id/authorLinearLayout"
+                    android:text="@string/media_detail_author"
-                    android:background="?attr/subBackground"
+                    android:textColor="@color/black"
-                    android:orientation="vertical"
+                    android:textStyle="bold"
-                    android:padding="@dimen/standard_gap">
+                    />
 
-                    <TextView
+                <TextView
-                        android:layout_width="match_parent"
+                    android:id="@+id/mediaDetailAuthor"
-                        android:layout_height="wrap_content"
+                    android:layout_width="0dp"
-                        android:paddingBottom="@dimen/tiny_gap"
+                    android:layout_weight="7"
-                        android:text="@string/media_detail_author"
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/normal_text"
-                        android:textStyle="bold" />
-
-                    <TextView
-                        android:id="@+id/mediaDetailAuthor"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_gravity="start"
-                        android:background="?attr/subBackground"
-                        android:padding="@dimen/small_gap"
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/description_text_size"
-                        tools:text="Media author user name goes here." />
-                </LinearLayout>
-
-                <fr.free.nrw.commons.media.MediaDetailSpacer
-                    android:layout_width="match_parent"
-                    android:layout_height="@dimen/small_gap" />
-
-                <LinearLayout
-                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:background="?attr/subBackground"
+                    android:textColor="@color/black"
-                    android:orientation="vertical"
+                    />
-                    android:padding="@dimen/standard_gap">
 
-                    <TextView
+            </LinearLayout>
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:paddingBottom="@dimen/tiny_gap"
-                        android:text="@string/media_detail_description"
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/normal_text"
-                        android:textStyle="bold" />
 
-                    <fr.free.nrw.commons.ui.widget.HtmlTextView
+            <LinearLayout
-                        android:id="@+id/mediaDetailDesc"
+                android:layout_width="match_parent"
-                        android:layout_width="match_parent"
+                android:weightSum="10"
-                        android:layout_height="wrap_content"
+                android:paddingLeft="@dimen/standard_gap"
-                        android:layout_gravity="start"
+                android:paddingRight="@dimen/standard_gap"
-                        android:background="?attr/subBackground"
+                android:paddingTop="@dimen/small_gap"
-                        android:padding="@dimen/small_gap"
+                android:paddingBottom="@dimen/small_gap"
-                        android:textColor="@android:color/white"
+                android:orientation="horizontal"
-                        android:textSize="@dimen/description_text_size"
+                android:layout_height="wrap_content">
-                        tools:text="Description of the media goes here. This can potentially be fairly long, and will need to wrap across multiple lines. We hope it looks nice though." />
-                </LinearLayout>
 
-                <fr.free.nrw.commons.media.MediaDetailSpacer
+                <TextView
-                    android:layout_width="match_parent"
+                    android:layout_width="0dp"
-                    android:layout_height="@dimen/small_gap" />
+                    android:layout_weight="3"
-
+                    android:textColor="@color/black"
-                <LinearLayout
-                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:background="?attr/subBackground"
+                    android:textStyle="bold"
-                    android:orientation="vertical"
+                    android:text="@string/media_detail_license"
-                    android:padding="@dimen/standard_gap">
+                    />
 
-                    <TextView
+                <fr.free.nrw.commons.ui.widget.CompatTextView
-                        android:layout_width="match_parent"
+                    android:id="@+id/mediaDetailLicense"
-                        android:layout_height="wrap_content"
+                    android:layout_width="0dp"
-                        android:paddingBottom="@dimen/tiny_gap"
+                    android:layout_weight="7"
-                        android:text="@string/media_detail_license"
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/normal_text"
-                        android:textStyle="bold" />
-
-                    <fr.free.nrw.commons.ui.widget.CompatTextView
-                        android:id="@+id/mediaDetailLicense"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_gravity="start"
-                        android:background="?attr/subBackground"
-                        android:foreground="?attr/selectableItemBackground"
-                        android:gravity="center_vertical"
-                        android:padding="@dimen/small_gap"
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/description_text_size"
-                        app:drawablePadding="@dimen/tiny_gap"
-                        app:drawableStart="@drawable/ic_info_outline_24dp"
-                        tools:text="License link" />
-                </LinearLayout>
-
-                <fr.free.nrw.commons.media.MediaDetailSpacer
-                    android:layout_width="match_parent"
-                    android:layout_height="@dimen/small_gap" />
-
-                <LinearLayout
-                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:background="?attr/subBackground"
+                    android:layout_gravity="start"
-                    android:orientation="vertical"
+                    android:gravity="center_vertical"
-                    android:padding="@dimen/standard_gap">
+                    android:textColor="@android:color/black"
+                    android:textSize="@dimen/description_text_size"
+                    tools:text="License link" />
 
-                    <TextView
+            </LinearLayout>
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:paddingBottom="@dimen/tiny_gap"
-                        android:text="@string/media_detail_coordinates"
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/normal_text"
-                        android:textStyle="bold" />
 
-                    <fr.free.nrw.commons.ui.widget.CompatTextView
+            <LinearLayout
-                        android:id="@+id/mediaDetailCoordinates"
+                android:layout_width="match_parent"
-                        android:layout_width="match_parent"
+                android:weightSum="10"
-                        android:layout_height="wrap_content"
+                android:paddingLeft="@dimen/standard_gap"
-                        android:layout_gravity="start"
+                android:paddingRight="@dimen/standard_gap"
-                        android:background="?attr/subBackground"
+                android:paddingTop="@dimen/small_gap"
-                        android:foreground="?attr/selectableItemBackground"
+                android:paddingBottom="@dimen/small_gap"
-                        android:gravity="center_vertical"
+                android:orientation="horizontal"
-                        android:padding="@dimen/small_gap"
+                android:layout_height="wrap_content">
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/description_text_size"
-                        app:drawablePadding="@dimen/tiny_gap"
-                        app:drawableStart="@drawable/ic_map_white_24dp"
-                        tools:text="Coordinates link" />
-                </LinearLayout>
 
-                <fr.free.nrw.commons.media.MediaDetailSpacer
+                <TextView
-                    android:layout_width="match_parent"
+                    android:layout_width="0dp"
-                    android:layout_height="@dimen/small_gap" />
+                    android:layout_weight="3"
-
-                <LinearLayout
-                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:background="?attr/subBackground"
+                    android:textStyle="bold"
-                    android:orientation="vertical"
+                    android:textColor="@color/black"
-                    android:padding="@dimen/standard_gap"
+                    android:text="@string/media_detail_coordinates"
-                    android:textStyle="bold">
+                    />
 
-                    <TextView
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_gravity="start"
-                        android:paddingBottom="@dimen/tiny_gap"
-                        android:text="@string/detail_panel_cats_label"
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/normal_text"
-                        android:textStyle="bold" />
 
-                    <LinearLayout
+                <fr.free.nrw.commons.ui.widget.CompatTextView
-                        android:id="@+id/mediaDetailCategoryContainer"
+                    android:id="@+id/mediaDetailCoordinates"
-                        android:layout_width="match_parent"
+                    android:layout_width="0dp"
-                        android:layout_height="wrap_content"
+                    android:layout_weight="7"
-                        android:orientation="vertical" />
-                </LinearLayout>
-
-                <fr.free.nrw.commons.media.MediaDetailSpacer
-                    android:layout_width="match_parent"
-                    android:layout_height="@dimen/small_gap" />
-
-                <LinearLayout
-                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:background="?attr/subBackground"
+                    android:layout_gravity="start"
-                    android:orientation="vertical"
+                    android:gravity="center_vertical"
-                    android:padding="@dimen/standard_gap">
+                    android:textColor="@color/black"
+                    tools:text="Coordinates link" />
 
-                    <TextView
+            </LinearLayout>
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:paddingBottom="@dimen/tiny_gap"
-                        android:text="@string/media_detail_uploaded_date"
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/normal_text"
-                        android:textStyle="bold" />
 
-                    <TextView
+            <LinearLayout
-                        android:id="@+id/mediaDetailuploadeddate"
+                android:layout_width="match_parent"
-                        android:layout_width="match_parent"
+                android:weightSum="10"
-                        android:layout_height="wrap_content"
+                android:paddingLeft="@dimen/standard_gap"
-                        android:layout_gravity="start"
+                android:paddingRight="@dimen/standard_gap"
-                        android:background="?attr/subBackground"
+                android:paddingTop="@dimen/small_gap"
-                        android:padding="@dimen/small_gap"
+                android:paddingBottom="@dimen/small_gap"
-                        android:textColor="@android:color/white"
+                android:orientation="horizontal"
-                        android:textSize="@dimen/description_text_size"
+                android:layout_height="wrap_content">
-                        tools:text="Uploaded date" />
-                </LinearLayout>
 
-                <fr.free.nrw.commons.media.MediaDetailSpacer
+                <TextView
-                    android:layout_width="match_parent"
+                    android:layout_width="0dp"
-                    android:layout_height="@dimen/small_gap" />
+                    android:layout_weight="3"
-
-                <LinearLayout
-                    android:id="@+id/nominatedDeletionBanner"
-                    android:background="@color/deleteRed"
-                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:orientation="vertical"
+                    android:text="@string/media_detail_uploaded_date"
-                    android:padding="@dimen/standard_gap"
+                    android:textStyle="bold"
-                    android:visibility="gone">
+                    android:textColor="@color/black"
-                    <TextView
+                    />
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:gravity="center"
-                        android:text="@string/nominated_for_deletion"
-                        android:textColor="@color/primaryTextColor"
-                        android:textSize="@dimen/normal_text"
-                        android:textStyle="bold"/>
-                    <TextView
-                        android:id="@+id/seeMore"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:gravity="center"
-                        android:paddingTop="@dimen/standard_gap"
-                        android:textColor="@color/primaryTextColor"
-                        android:textSize="@dimen/normal_text"
-                        android:textStyle="bold"/>
-                </LinearLayout>
 
-                <fr.free.nrw.commons.media.MediaDetailSpacer
+                <TextView
-                    android:layout_width="match_parent"
+                    android:id="@+id/mediaDetailuploadeddate"
-                    android:layout_height="@dimen/small_gap" />
+                    android:layout_width="0dp"
-
+                    android:layout_weight="7"
-                <LinearLayout
-                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:background="?attr/subBackground"
+                    android:textColor="@color/black"
-                    android:orientation="vertical"
+                    />
-                    android:padding="@dimen/standard_gap">
 
-                    <TextView
+            </LinearLayout>
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:paddingBottom="@dimen/tiny_gap"
-                        android:text="@string/media_detail_discussion"
-                        android:textColor="@android:color/white"
-                        android:textSize="@dimen/normal_text"
-                        android:textStyle="bold" />
 
-                    <TextView
+
-                        android:id="@+id/mediaDetailDisc"
+            <LinearLayout
-                        android:layout_width="match_parent"
+                android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
+                android:weightSum="10"
-                        android:layout_gravity="start"
+                android:paddingLeft="@dimen/standard_gap"
-                        android:background="?attr/subBackground"
+                android:paddingRight="@dimen/standard_gap"
-                        android:padding="@dimen/small_gap"
+                android:paddingTop="@dimen/small_gap"
-                        android:textColor="@android:color/white"
+                android:paddingBottom="@dimen/small_gap"
-                        android:textSize="@dimen/description_text_size" />
+                android:orientation="horizontal"
-                </LinearLayout>
+                android:layout_height="wrap_content">
+
+                <TextView
+                    android:layout_width="0dp"
+                    android:layout_weight="3"
+                    android:layout_height="wrap_content"
+                    android:text="@string/media_detail_discussion"
+                    android:textStyle="bold"
+                    android:textColor="@color/black"
+                    />
+
+                <TextView
+                    android:id="@+id/mediaDetailDisc"
+                    android:layout_width="0dp"
+                    android:layout_weight="7"
+                    android:layout_height="wrap_content"
+                    android:textColor="@color/black"
+                    />
+
+            </LinearLayout>
+
+            <LinearLayout
+                android:paddingTop="@dimen/standard_gap"
+                android:layout_width="match_parent"
+                android:weightSum="2"
+                android:layout_height="wrap_content">
 
                 <Button
+                    android:layout_weight="1"
                     android:id="@+id/copyWikicode"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_margin="@dimen/standard_gap"
-                    android:background="@color/button_blue"
+                    android:background="@drawable/copy_to_wikitext_button"
-                    android:text="@string/copy_wikicode"
+                    android:text="COPY \n WIKITEXT"
                     android:textColor="@color/primaryTextColor" />
 
                 <Button
+                    android:layout_weight="1"
                     android:id="@+id/nominateDeletion"
-                    android:background="@drawable/bg_delete_button"
-                    android:textColor="@color/primaryTextColor"
-                    android:layout_margin="@dimen/standard_gap"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:text="@string/nominate_deletion"/>
+                    android:layout_margin="@dimen/standard_gap"
+                    android:background="@drawable/bg_delete_button"
+                    android:text="@string/nominate_deletion"
+                    android:textColor="@color/primaryTextColor" />
+
             </LinearLayout>
+
+            <LinearLayout
+                android:id="@+id/nominatedDeletionBanner"
+                android:background="@color/white"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                android:padding="@dimen/standard_gap"
+                android:visibility="gone">
+                <TextView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:gravity="center"
+                    android:textColor="@color/deleteRed"
+                    android:text="@string/nominated_for_deletion"
+                    android:textSize="@dimen/normal_text"
+                    />
+                <TextView
+                    android:id="@+id/seeMore"
+                    android:textColor="@color/deleteRed"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:gravity="center"
+                    android:paddingTop="@dimen/standard_gap"
+                    android:textSize="@dimen/normal_text"
+                    />
+            </LinearLayout>
+
         </LinearLayout>
+
     </ScrollView>
 
 </FrameLayout>

app/src/main/res/menu/fragment_image_detail.xml

@@ -2,21 +2,6 @@
 
 <menu xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">
-    <item
-        android:id="@+id/menu_bookmark_current_image"
-        android:icon="@drawable/ic_round_star_border_24px"
-        android:title="@string/menu_bookmark"
-        app:showAsAction="always" />
-    <item
-        android:id="@+id/menu_share_current_image"
-        android:icon="@drawable/ic_share_black_24dp"
-        android:title="@string/menu_share"
-        app:showAsAction="always" />
-    <item
-        android:id="@+id/menu_download_current_image"
-        android:icon="@drawable/ic_download_white_24dp"
-        android:title="@string/menu_download"
-        app:showAsAction="always" />
     <item
         android:id="@+id/menu_browser_current_image"
         android:title="@string/menu_open_in_browser"

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

@@ -23,8 +23,9 @@
     <color name="secondaryLightColor">#ffbc46</color>
     <color name="primaryTextColor">#ffffff</color>
     <color name="secondaryTextColor">#000000</color>
+    <color name="linkColor">#0c609c</color>
 
-    <color name="deleteRed">#90960a0a</color>
+    <color name="deleteRed">#d33</color>
     <color name="deleteButton">#44000000</color>
     <color name="deleteButtonDark">#88000000</color>
     <color name="deleteButtonLight">#44ffffff</color>