Improve collapsing app bar and header

pranavpandey · Apr 11, 2018 · d15b5ec · d15b5ec
1 parent 5f7a74b
commit d15b5ec
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 23 deletions.
diff --git a/.../java/com/pranavpandey/android/dynamic/support/permission/DynamicPermissionsActivity.java b/.../java/com/pranavpandey/android/dynamic/support/permission/DynamicPermissionsActivity.java
@@ -54,7 +54,7 @@ public void onClick(View v) {
 
         setAppBarBackDrop(R.drawable.ads_ic_security);
 
-        addHeader(R.layout.ads_layout_header_toolbar, true);
+        addHeader(R.layout.ads_layout_header_appbar, true);
         ((ImageView) findViewById(R.id.ads_header_toolbar_icon))
                 .setImageDrawable(getApplicationInfo().loadIcon(getPackageManager()));
         ((TextView) findViewById(R.id.ads_header_toolbar_title))

diff --git a/dynamic-support/src/main/res/layout/ads_activity_collapsing.xml b/dynamic-support/src/main/res/layout/ads_activity_collapsing.xml
@@ -40,10 +40,11 @@
                 android:id="@+id/ads_collapsing_toolbar_layout"
                 android:layout_width="match_parent"
                 android:layout_height="@dimen/ads_collapsing_toolbar_height"
-                app:expandedTitleMarginEnd="64dp"
                 android:clipChildren="false"
-                app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
-                android:fitsSystemWindows="true">
+                android:fitsSystemWindows="true"
+                app:expandedTitleMarginStart="@dimen/ads_toolbar_margin_start_collapsing"
+                app:expandedTitleMarginEnd="@dimen/ads_toolbar_inset_start_collapsing"
+                app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
 
                 <FrameLayout
                     android:id="@+id/ads_backdrop_frame"
@@ -53,7 +54,7 @@
                     android:fitsSystemWindows="true" />
 
                 <include
-                    layout="@layout/ads_toolbar_pin"
+                    layout="@layout/ads_toolbar_collapsing"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content" />
 

diff --git a/dynamic-support/src/main/res/layout/ads_header_drawer.xml b/dynamic-support/src/main/res/layout/ads_header_drawer.xml
@@ -36,8 +36,8 @@
 
         <com.pranavpandey.android.dynamic.support.widget.DynamicImageView
             android:id="@+id/ads_header_drawer_icon"
-            android:layout_width="@dimen/ads_icon_nav_header"
-            android:layout_height="@dimen/ads_icon_nav_header"
+            android:layout_width="@dimen/ads_icon_header_drawer"
+            android:layout_height="@dimen/ads_icon_header_drawer"
             android:layout_gravity="start"
             app:ads_colorType="tint_primary"
             app:ads_backgroundAware="false" />

diff --git a/.../res/layout/ads_layout_header_toolbar.xml → ...n/res/layout/ads_layout_header_appbar.xml b/.../res/layout/ads_layout_header_toolbar.xml → ...n/res/layout/ads_layout_header_appbar.xml
@@ -28,11 +28,11 @@
 
     <ImageView
         android:id="@+id/ads_header_toolbar_icon"
-        android:layout_width="@dimen/ads_icon_normal"
-        android:layout_height="@dimen/ads_icon_normal"
-        android:layout_gravity="center_vertical"
-        android:layout_marginRight="@dimen/ads_icon_avatar_header_margin_end"
-        android:layout_marginEnd="@dimen/ads_icon_avatar_header_margin_end" />
+        android:layout_width="@dimen/ads_icon_header_appbar"
+        android:layout_height="@dimen/ads_icon_header_appbar"
+        android:layout_marginRight="@dimen/ads_margin_normal"
+        android:layout_marginEnd="@dimen/ads_margin_normal"
+        android:layout_gravity="center_vertical" />
 
     <LinearLayout
         android:layout_width="match_parent"
@@ -44,15 +44,15 @@
             android:id="@+id/ads_header_toolbar_title"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:textAppearance="@style/TextAppearance.AppCompat.Title"
+            android:textAppearance="@style/TextAppearance.DynamicApp.Title.Bold"
             app:ads_colorType="tint_primary"
             app:ads_backgroundAware="false" />
 
         <com.pranavpandey.android.dynamic.support.widget.DynamicTextView
             android:id="@+id/ads_header_toolbar_subtitle"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
+            android:textAppearance="@style/TextAppearance.DynamicApp.Subtitle"
             app:ads_colorType="tint_primary"
             app:ads_backgroundAware="false" />
 

diff --git a/dynamic-support/src/main/res/layout/ads_toolbar_collapsing.xml b/dynamic-support/src/main/res/layout/ads_toolbar_collapsing.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+	Copyright 2018 Pranav Pandey
+
+	Licensed under the Apache License, Version 2.0 (the "License");
+	you may not use this file except in compliance with the License.
+	You may obtain a copy of the License at
+
+	   http://www.apache.org/licenses/LICENSE-2.0
+
+	Unless required by applicable law or agreed to in writing, software
+	distributed under the License is distributed on an "AS IS" BASIS,
+	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+	See the License for the specific language governing permissions and
+	limitations under the License.
+-->
+
+<merge
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <com.pranavpandey.android.dynamic.support.widget.DynamicToolbar
+        android:id="@+id/ads_toolbar"
+        android:layout_width="match_parent"
+        android:layout_height="?attr/actionBarSize"
+        app:layout_collapseMode="pin"
+        app:contentInsetStartWithNavigation="@dimen/ads_toolbar_inset_start_collapsing"
+        app:ads_colorType="none"
+        app:ads_backgroundAware="false">
+
+        <include layout="@layout/ads_toolbar_search_view" />
+
+        <TextView
+            android:id="@+id/ads_text_app_title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:visibility="gone"
+            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
+
+    </com.pranavpandey.android.dynamic.support.widget.DynamicToolbar>
+
+</merge>
diff --git a/dynamic-support/src/main/res/values/dimens.xml b/dynamic-support/src/main/res/values/dimens.xml
@@ -65,6 +65,9 @@
 
     <!-- Toolbar -->
     <dimen name="ads_toolbar_inset_start">72dp</dimen>
+    <dimen name="ads_toolbar_inset_start_collapsing">68dp</dimen>
+    <dimen name="ads_toolbar_margin_start_collapsing">20dp</dimen>
+    <dimen name="ads_toolbar_margin_end_collapsing">@dimen/ads_toolbar_inset_start_collapsing</dimen>
     <dimen name="ads_tab_height">44dp</dimen>
     <dimen name="ads_tab_min_width">48dp</dimen>
     <dimen name="ads_tab_inset_start">@dimen/ads_toolbar_inset_start</dimen>
@@ -99,32 +102,33 @@
     <dimen name="ads_icon_toolbar_header_info">32dp</dimen>
     <dimen name="ads_icon_splash">160dp</dimen>
     <dimen name="ads_icon_tutorial">200dp</dimen>
-    <dimen name="ads_icon_nav_header">64dp</dimen>
-    <dimen name="ads_btn_min_height">56dp</dimen>
-    <dimen name="ads_size_notification">64dp</dimen>
-    <dimen name="ads_circular_progress_size">60dp</dimen>
     <dimen name="ads_icon_header">20dp</dimen>
+    <dimen name="ads_icon_header_drawer">64dp</dimen>
+    <dimen name="ads_icon_header_appbar">32dp</dimen>
+    <dimen name="ads_icon_header_card_margin_end">@dimen/ads_margin_large</dimen>
     <dimen name="ads_icon_preference">@dimen/ads_icon_small</dimen>
     <dimen name="ads_icon_preference_big">@dimen/ads_icon_medium</dimen>
     <dimen name="ads_icon_avatar_card">@dimen/ads_icon_normal</dimen>
     <dimen name="ads_icon_avatar_card_divider">76dp</dimen>
     <dimen name="ads_icon_avatar_card_small">@dimen/ads_icon_small</dimen>
     <dimen name="ads_icon_avatar_card_divider_small">64dp</dimen>
     <dimen name="ads_icon_avatar_card_medium">@dimen/ads_icon_medium</dimen>
-    <dimen name="ads_icon_header_card_margin_end">@dimen/ads_margin_large</dimen>
     <dimen name="ads_icon_preference_card_margin_end">@dimen/ads_margin_normal</dimen>
     <dimen name="ads_icon_avatar_card_margin_end">@dimen/ads_margin_normal</dimen>
     <dimen name="ads_icon_avatar_card_margin_end_medium">@dimen/ads_margin_normal</dimen>
     <dimen name="ads_icon_avatar_card_divider_medium">72dp</dimen>
     <dimen name="ads_icon_avatar_header_margin_end">28dp</dimen>
 
     <!-- Button -->
+    <dimen name="ads_button_padding">@dimen/ads_margin_small</dimen>
+    <dimen name="ads_button_min_height">56dp</dimen>
     <dimen name="ads_button_preference_card_margin_start">@dimen/ads_icon_normal</dimen>
 
     <!-- List -->
     <dimen name="ads_list_avatar_height_small">28dp</dimen>
     <dimen name="ads_list_avatar_width_small">28dp</dimen>
     <dimen name="ads_list_subtitle_margin_top">2dp</dimen>
+    <dimen name="ads_circular_progress_size">60dp</dimen>
 
     <!-- Dialog -->
     <dimen name="ads_dialog_margin_start_end">24dp</dimen>
@@ -143,9 +147,6 @@
     <!-- Popup -->
     <dimen name="ads_popup_selector_icon_size">24dp</dimen>
 
-    <!-- Button -->
-    <dimen name="ads_padding_button">@dimen/ads_margin_small</dimen>
-
     <!-- Picker -->
     <dimen name="ads_picker_colors_size">@dimen/ads_icon_medium</dimen>
     <dimen name="ads_picker_shades_size">42dp</dimen>
@@ -167,6 +168,7 @@
     <dimen name="ads_widget_icon_size_customise">26dp</dimen>
 
     <!-- Notification -->
+    <dimen name="ads_notification_size">64dp</dimen>
     <dimen name="ads_notification_margin_vertical">12dp</dimen>
     <dimen name="ads_notification_margin_horizontal">@dimen/ads_notification_margin_vertical</dimen>
     <dimen name="ads_notification_icon">16dp</dimen>

diff --git a/...java/com/pranavpandey/android/dynamic/support/sample/activity/CollapsingAppBarActivity.kt b/...java/com/pranavpandey/android/dynamic/support/sample/activity/CollapsingAppBarActivity.kt
@@ -78,7 +78,7 @@ class CollapsingAppBarActivity : DynamicActivity() {
         setAppBarBackDrop(R.drawable.ads_ic_extension)
 
         // Add an optional header with an icon, title and subtitle.
-        addHeader(R.layout.ads_layout_header_toolbar, true)
+        addHeader(R.layout.ads_layout_header_appbar, true)
         (findViewById<View>(R.id.ads_header_toolbar_icon) as ImageView)
                 .setImageDrawable(applicationInfo.loadIcon(packageManager))
         (findViewById<View>(R.id.ads_header_toolbar_title) as TextView)