mirror of
https://github.com/commons-app/apps-android-commons.git
synced 2025-10-27 04:43:54 +01:00
UI matching in detail view to iOS version
* ListView -> LinearLayout for categories * Add labels for fields * Cool transparent rectangles! * Padding adjustments... * Darken image when scrolling detail panel up * Placeholders for empty desc, license fields Change-Id: I0e4c4348e741af3560d455ee4b793c2743626fbf
This commit is contained in:
parent
5e1fa56f36
commit
e46a1fac88
5 changed files with 251 additions and 134 deletions
|
|
@ -1,12 +1,22 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:minHeight="48dp"
|
||||
android:padding="8dp"
|
||||
android:gravity="center_vertical"
|
||||
android:id="@+id/mediaDetailCategoryItemText"
|
||||
android:textSize="18sp"
|
||||
android:background="#AA000000"
|
||||
/>
|
||||
<LinearLayout
|
||||
xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:orientation="vertical"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content">
|
||||
<TextView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:minHeight="48dp"
|
||||
android:padding="12dp"
|
||||
android:gravity="center_vertical"
|
||||
android:id="@+id/mediaDetailCategoryItemText"
|
||||
android:textSize="14sp"
|
||||
android:textColor="@android:color/white"
|
||||
android:background="#20ffffff"
|
||||
/>
|
||||
<org.wikimedia.commons.media.MediaDetailSpacer
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="8dp"/>
|
||||
</LinearLayout>
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:orientation="vertical"
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="fill_parent">
|
||||
|
||||
<!-- 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. -->
|
||||
<org.wikimedia.commons.media.MediaDetailSpacer
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="1600dp"
|
||||
android:id="@+id/mediaDetailSpacer"/>
|
||||
<LinearLayout
|
||||
android:orientation="vertical"
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="#AA000000"
|
||||
android:padding="8dp">
|
||||
<TextView
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="Title of the media"
|
||||
android:id="@+id/mediaDetailTitle"
|
||||
android:layout_gravity="left|start"
|
||||
android:textColor="@android:color/white"
|
||||
android:textSize="18sp" /> <!-- 18sp == MediumText -->
|
||||
<TextView
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android: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."
|
||||
android:id="@+id/mediaDetailDesc"
|
||||
android:layout_gravity="left|start"/>
|
||||
<TextView
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="License link"
|
||||
android:id="@+id/mediaDetailLicense"
|
||||
android:layout_gravity="left|start"
|
||||
android:textColor="@android:color/white"
|
||||
android:textSize="18sp" /> <!-- 18sp == MediumText -->
|
||||
<TextView
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="@string/detail_panel_cats_label"
|
||||
android:textSize="18sp"
|
||||
android:layout_gravity="left|start"
|
||||
android:paddingTop="24dp" android:textColor="@android:color/white"/>
|
||||
<LinearLayout
|
||||
android:orientation="vertical"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:id="@+id/mediaDetailCategoryList"
|
||||
android:layout_gravity="left|start"/>
|
||||
</LinearLayout>
|
||||
</LinearLayout>
|
||||
|
|
@ -28,14 +28,137 @@
|
|||
android:scaleType="fitCenter"
|
||||
/>
|
||||
|
||||
<ListView
|
||||
<ScrollView
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:id="@+id/mediaDetailListView"
|
||||
android:divider="#00A0A0A0"
|
||||
android:id="@+id/mediaDetailScrollView"
|
||||
android:fillViewport="true"
|
||||
android:background="@android:color/transparent"
|
||||
android:cacheColorHint="@android:color/transparent"
|
||||
/>
|
||||
android:cacheColorHint="@android:color/transparent">
|
||||
|
||||
<LinearLayout android:orientation="vertical"
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="fill_parent">
|
||||
|
||||
<!-- 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. -->
|
||||
<org.wikimedia.commons.media.MediaDetailSpacer
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="16dp"
|
||||
android:id="@+id/mediaDetailSpacer"/>
|
||||
<LinearLayout
|
||||
android:orientation="vertical"
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="#AA000000"
|
||||
android:padding="16dp">
|
||||
<LinearLayout
|
||||
android:orientation="vertical"
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="#20ffffff"
|
||||
android:padding="16dp">
|
||||
<TextView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:textColor="@android:color/white"
|
||||
android:text="Title"
|
||||
android:textSize="16sp"
|
||||
android:textStyle="bold"
|
||||
android:paddingBottom="6dp"/>
|
||||
<TextView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="Title of the media"
|
||||
android:id="@+id/mediaDetailTitle"
|
||||
android:layout_gravity="left|start"
|
||||
android:textColor="@android:color/white"
|
||||
android:background="#20ffffff"
|
||||
android:textSize="14sp"
|
||||
android:padding="12dp"/>
|
||||
</LinearLayout>
|
||||
<org.wikimedia.commons.media.MediaDetailSpacer
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="8dp"/>
|
||||
<LinearLayout
|
||||
android:orientation="vertical"
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="#20ffffff"
|
||||
android:padding="16dp">
|
||||
<TextView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="Description"
|
||||
android:textColor="@android:color/white"
|
||||
android:textSize="16sp"
|
||||
android:textStyle="bold"
|
||||
android:paddingBottom="6dp"/>
|
||||
<TextView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android: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."
|
||||
android:background="#20ffffff"
|
||||
android:id="@+id/mediaDetailDesc"
|
||||
android:textColor="@android:color/white"
|
||||
android:layout_gravity="left|start"
|
||||
android:textSize="14sp"
|
||||
android:padding="12dp"/>
|
||||
</LinearLayout>
|
||||
<org.wikimedia.commons.media.MediaDetailSpacer
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="8dp"/>
|
||||
<LinearLayout
|
||||
android:orientation="vertical"
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="#20ffffff"
|
||||
android:padding="16dp">
|
||||
<TextView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:textColor="@android:color/white"
|
||||
android:text="License"
|
||||
android:textSize="16sp"
|
||||
android:textStyle="bold"
|
||||
android:paddingBottom="6dp"/>
|
||||
<TextView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="License link"
|
||||
android:id="@+id/mediaDetailLicense"
|
||||
android:layout_gravity="left|start"
|
||||
android:background="#20ffffff"
|
||||
android:textColor="@android:color/white"
|
||||
android:textSize="14sp"
|
||||
android:padding="12dp"/>
|
||||
</LinearLayout>
|
||||
<org.wikimedia.commons.media.MediaDetailSpacer
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="8dp"/>
|
||||
<LinearLayout
|
||||
android:orientation="vertical"
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="#20ffffff"
|
||||
android:padding="16dp"
|
||||
android:textStyle="bold">
|
||||
<TextView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="@string/detail_panel_cats_label"
|
||||
android:textSize="16sp"
|
||||
android:layout_gravity="left|start"
|
||||
android:textColor="@android:color/white"
|
||||
android:paddingBottom="6dp"/>
|
||||
<LinearLayout
|
||||
android:orientation="vertical"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:id="@+id/mediaDetailCategoryContainer"/>
|
||||
</LinearLayout>
|
||||
</LinearLayout>
|
||||
</LinearLayout>
|
||||
</ScrollView>
|
||||
|
||||
</FrameLayout>
|
||||
|
|
@ -138,5 +138,7 @@
|
|||
<string name="detail_panel_cats_label">Categories</string>
|
||||
<string name="detail_panel_cats_loading">Loading...</string>
|
||||
<string name="detail_panel_cats_none">None selected</string>
|
||||
<string name="detail_description_empty">No description</string>
|
||||
<string name="detail_license_empty">Unknown license</string>
|
||||
<string name="provider_campaigns">Campaigns</string>
|
||||
</resources>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue