Fix Fab margin issue on pre-lollipop

Author: huan-nguyen

app/build.gradle

@@ -10,6 +10,7 @@ android {
         versionCode 1
         versionName "1.0"
         testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
+        vectorDrawables.useSupportLibrary = true
     }
     buildTypes {
         release {

app/src/main/res/layout-land/country_detail.xml

@@ -7,6 +7,7 @@
 
 <net.huannguyen.conductorexample.countrydetail.CountryDetailView
     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"
@@ -30,14 +31,15 @@
 
         <android.support.design.widget.FloatingActionButton
             android:id="@+id/favourite_fab"
-            android:layout_width="56dp"
-            android:layout_height="56dp"
-            android:src="@drawable/ic_favorite"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:srcCompat="@drawable/ic_favorite"
             android:scaleType="center"
             android:layout_gravity="bottom|end"
-            android:layout_marginEnd="28dp"
-            android:layout_marginRight="28dp"
-            android:layout_marginBottom="-28dp"/>
+            android:layout_marginEnd="@dimen/fab_margin_right"
+            android:layout_marginRight="@dimen/fab_margin_right"
+            android:layout_marginBottom="@dimen/fab_margin_vertical"
+            app:fabSize="normal"/>
     </FrameLayout>
 
     <TableLayout
@@ -57,7 +59,7 @@
 
             <TextView
                 android:id="@+id/capital"
-                android:layout_width="0dp"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 style="@style/CountryDataValue"/>
         </TableRow>

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

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <net.huannguyen.conductorexample.countrydetail.CountryDetailView
     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"
@@ -37,7 +38,7 @@
 
                 <TextView
                     android:id="@+id/capital"
-                    android:layout_width="0dp"
+                    android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     style="@style/CountryDataValue"/>
             </TableRow>
@@ -101,13 +102,14 @@
 
         <android.support.design.widget.FloatingActionButton
             android:id="@+id/favourite_fab"
-            android:layout_width="56dp"
-            android:layout_height="56dp"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
             android:layout_gravity="top|end"
             android:scaleType="center"
-            android:src="@drawable/ic_favorite"
-            android:layout_marginTop="-28dp"
-            android:layout_marginEnd="28dp"
-            android:layout_marginRight="28dp"/>
+            app:srcCompat="@drawable/ic_favorite"
+            android:layout_marginTop="@dimen/fab_margin_vertical"
+            android:layout_marginEnd="@dimen/fab_margin_right"
+            android:layout_marginRight="@dimen/fab_margin_right"
+            app:fabSize="normal"/>
     </FrameLayout>
 </net.huannguyen.conductorexample.countrydetail.CountryDetailView>

app/src/main/res/values-v21/dimens.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="fab_margin_vertical">-28dp</dimen>
+    <dimen name="fab_margin_right">28dp</dimen>
+</resources>

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

@@ -1,4 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <dimen name="touch_raise">8dp</dimen>
+    <!-- Define different margins for pre and post-lollipop to overcome the problem that FABs
+         are added an extra margin of 16dp in pre-lollipop -->
+    <dimen name="fab_margin_vertical">-44dp</dimen>
+    <dimen name="fab_margin_right">12dp</dimen>
 </resources>