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:
Brion Vibber 2013-10-11 12:58:53 -07:00
parent 5e1fa56f36
commit e46a1fac88
5 changed files with 251 additions and 134 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>