UI improvement Phase 1

- Simplified theme/style settings and corrected UI styles
- Move «Add To Library» button from toolbar to be simple  to find/press
it
- Toolbar in chapter list with sort/filtration
- library/catalog layout fixes
This commit is contained in:
Yuri Revich
2015-11-24 20:45:53 +03:00
parent 85dcfd2beb
commit 18130e931f
34 changed files with 585 additions and 400 deletions

View File

@@ -1,18 +1,18 @@
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_height="match_parent"
android:gravity="center">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar"/>
layout="@layout/toolbar" />
<!-- the layout which will contain (host) the drawerLayout -->
<FrameLayout
android:layout_below="@id/toolbar"
android:id="@+id/drawer_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_height="match_parent"
android:layout_below="@id/toolbar">
<!-- the layout which will be the content of the activity (which will be hosted inside the drawer (NOT the list of the drawer)) -->
<FrameLayout

View File

@@ -1,18 +1,16 @@
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="eu.kanade.mangafeed.ui.manga.MangaActivity"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:orientation="vertical">
android:orientation="vertical"
tools:context="eu.kanade.mangafeed.ui.manga.MangaActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
android:theme="@style/AppTheme.ActionBar">
<include
android:id="@+id/toolbar"
@@ -22,8 +20,9 @@
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@android:color/white"
app:tabGravity="fill" />
android:theme="@style/AppTheme.TabLayout"
app:tabGravity="fill"
app:tabIndicatorColor="@color/accent" />
</android.support.design.widget.AppBarLayout>

View File

@@ -15,7 +15,7 @@
android:padding="4dp"
android:layout_gravity="bottom|left"
android:background="@color/page_number_background"
android:textColor="@color/black_87pc"
android:textColor="@color/primary_text"
android:textSize="12sp"
android:id="@+id/page_number"/>

View File

@@ -1,10 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context="eu.kanade.mangafeed.ui.catalogue.CatalogueFragment">
<ProgressBar
@@ -16,18 +16,11 @@
android:visibility="gone" />
<GridView
android:layout_width="match_parent"
android:id="@+id/gridView"
style="@style/AppTheme.GridView"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/gridView"
android:padding="10dp"
android:clipToPadding="false"
android:verticalSpacing="8dp"
android:horizontalSpacing="8dp"
android:columnWidth="96dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:fastScrollEnabled="true"
android:numColumns="2"
tools:listitem="@layout/item_catalogue" />
<ProgressBar

View File

@@ -1,22 +1,13 @@
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/gridView"
android:padding="10dp"
android:clipToPadding="false"
android:verticalSpacing="8dp"
android:horizontalSpacing="8dp"
android:columnWidth="96dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:fastScrollEnabled="true"
style="@style/AppTheme.GridView"
android:choiceMode="multipleChoiceModal"
tools:listitem="@layout/item_library" />
android:numColumns="2"
tools:listitem="@layout/item_catalogue" />
</FrameLayout>

View File

@@ -1,20 +1,47 @@
<?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="match_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_height="match_parent"
android:layout_above="@id/appbar_bottom"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/chapter_list">
android:id="@+id/chapter_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
tools:listitem="@layout/item_chapter">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:theme="@style/AppTheme.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_bottom"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:elevation="4dp"
android:gravity="top|start"
android:theme="@style/ThemeOverlay.AppTheme.Dark"
app:popupTheme="@style/AppTheme.Popup" />
</android.support.design.widget.AppBarLayout>
</RelativeLayout>

View File

@@ -1,10 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context="eu.kanade.mangafeed.ui.catalogue.CatalogueFragment">
<LinearLayout
@@ -96,7 +96,6 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="@id/manga_genres_label"
android:layout_below="@id/manga_artist_label"
android:focusable="false"
android:focusableInTouchMode="false"
@@ -157,21 +156,33 @@
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/manga_genres_label"
android:singleLine="false"
android:focusable="false"
android:focusableInTouchMode="false"
/>
android:singleLine="false" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp">
<Button
android:id="@+id/action_favorite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/add_to_library" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:orientation="vertical">
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/manga_summary_label"

View File

@@ -1,64 +1,71 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/library_item_background"
>
android:layout_height="wrap_content"
android:background="@drawable/card_background"
android:orientation="vertical">
<FrameLayout
<ImageView
android:id="@+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="144dp"
android:id="@+id/catalogue_thumbnail"
tools:src="@mipmap/ic_launcher"
tools:background="@color/md_red_100"/>
<eu.kanade.mangafeed.widget.PTSansTextView
android:id="@+id/unreadText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
app:typeface="ptsansNarrowBold"
android:background="@color/md_red_300"
android:layout_gravity="right"
android:textSize="12sp"
android:visibility="gone"
android:textColor="@color/white"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="1dp"
android:paddingBottom="1dp" />
</FrameLayout>
android:layout_height="220dp"
android:background="@color/white"
tools:background="@color/md_red_100"
tools:src="@mipmap/ic_launcher"
/>
<TextView
android:id="@+id/unreadText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:background="@color/md_red_300"
android:paddingBottom="1dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="1dp"
android:textColor="@color/white"
android:textSize="12sp"
android:visibility="gone" />
<LinearLayout
android:orientation="horizontal"
android:id="@+id/footerLinearLayout"
android:layout_width="match_parent"
android:layout_height="36dp"
android:id="@+id/footerLinearLayout"
>
android:background="@color/white"
android:orientation="vertical"
android:layout_alignBottom="@+id/thumbnail"
android:layout_alignLeft="@+id/unreadText"
android:layout_alignStart="@+id/unreadText">
<eu.kanade.mangafeed.widget.PTSansTextView
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
app:typeface="ptsansNarrowBold"
android:ellipsize="middle"
android:maxLines="2"
android:textColor="@color/black_87pc"
android:textSize="13sp"
android:id="@+id/catalogue_title"
android:paddingRight="8dp"
android:maxLines="1"
android:paddingLeft="8dp"
tools:text="Sample name"/>
android:paddingRight="8dp"
android:textColor="@color/primary_text"
android:textSize="13sp"
tools:text="Sample name"
android:textStyle="bold" />
<TextView
tools:text="Sample name"
android:id="@+id/author"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="middle"
android:maxLines="1"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:textColor="@color/hint_text"
android:textSize="13sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

View File

@@ -1,53 +1,60 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="?attr/selectableItemBackground">
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip"
android:background="@drawable/selector_chapter_light">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/chapter_download_image"
tools:src="@mipmap/ic_launcher"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="20dp"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="@+id/chapter_download_image"
android:layout_toStartOf="@+id/chapter_download_image">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/chapter_title"
tools:text="Chapter 32"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:gravity="center"
android:textStyle="bold"
android:textSize="16sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/chapter_pages"
tools:text="Pages: 45"
android:layout_weight="1"
android:gravity="center"
android:textSize="12sp"/>
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:ellipsize="marquee"
android:singleLine="true"
android:textSize="12sp"
tools:text="Pages: 45" />
</LinearLayout>
<TextView
android:id="@+id/chapter_date"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:ellipsize="marquee"
android:singleLine="true"
android:textSize="12sp"
tools:text="22/02/2016"
android:layout_alignParentRight="true" />
</RelativeLayout>
<TextView
android:id="@+id/chapter_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignWithParentIfMissing="true"
android:gravity="center_vertical"
android:textSize="20sp"
tools:text="Title"
android:layout_toLeftOf="@+id/chapter_download_image"
android:layout_toStartOf="@+id/chapter_download_image" />
<ImageView
android:id="@+id/chapter_download_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/chapter_date"
tools:text="22/02/2016"
android:layout_gravity="bottom"
android:layout_marginBottom="2dp"
android:textSize="12sp"
android:paddingRight="5dp"/>
</LinearLayout>
android:layout_gravity="center_vertical"
android:gravity="center"
android:layout_alignParentRight="true"
tools:src="@drawable/ic_file_download_black_48dp"
/>
</RelativeLayout>

View File

@@ -1,64 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/library_item_background"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="144dp"
android:id="@+id/thumbnailImage"
tools:src="@mipmap/ic_launcher"
tools:background="@color/md_red_100"/>
<eu.kanade.mangafeed.widget.PTSansTextView
android:id="@+id/unreadText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
app:typeface="ptsansNarrowBold"
android:background="@color/md_red_300"
android:layout_gravity="right"
android:textSize="12sp"
android:visibility="gone"
android:textColor="@color/white"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="1dp"
android:paddingBottom="1dp" />
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="36dp"
android:id="@+id/footerLinearLayout"
>
<eu.kanade.mangafeed.widget.PTSansTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
app:typeface="ptsansNarrowBold"
android:ellipsize="middle"
android:maxLines="2"
android:textColor="@color/black_87pc"
android:textSize="13sp"
android:id="@+id/titleText"
android:paddingRight="8dp"
android:paddingLeft="8dp"
tools:text="Sample name"/>
</LinearLayout>
</LinearLayout>

View File

@@ -1,11 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:elevation="4dp" />
android:background="@color/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppTheme.Dark"
app:popupTheme="@style/AppTheme.Popup" />