Merge pull request #349 from mapzen/chuck/login-flow-ui

Make login UI less broken for really small screens and really big screens

res/layout/login_activity.xml

@@ -1,6 +1,6 @@
 <?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:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
@@ -11,27 +11,28 @@
         android:id="@+id/logo"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_gravity="center"
-        android:layout_marginTop="180dp"
+        android:layout_centerInParent="true"
+        android:paddingBottom="48dp"
         android:contentDescription="@string/logo_description"
         android:src="@drawable/ic_open_logo" />
 
-    <android.support.v4.view.ViewPager
-        android:id="@+id/view_pager"
-        android:layout_width="match_parent"
-        android:layout_height="200dp"
-        android:layout_marginTop="60dp" />
-
     <com.viewpagerindicator.CirclePageIndicator
         android:id="@+id/view_pager_indicator"
         android:layout_width="match_parent"
         android:layout_height="@dimen/vpi_height"
         android:layout_marginBottom="@dimen/vpi_margin_bottom"
+        android:layout_alignParentBottom="true"
         android:padding="@dimen/vpi_padding"
         app:fillColor="@color/vpi_fill_color"
         app:pageColor="@color/vpi_page_color"
         app:strokeColor="@color/vpi_stroke_color"
         app:radius="@dimen/vpi_radius"
         app:strokeWidth="@dimen/vpi_stroke_width" />
 
-</LinearLayout>
+    <android.support.v4.view.ViewPager
+        android:id="@+id/view_pager"
+        android:layout_width="match_parent"
+        android:layout_height="160dp"
+        android:layout_above="@+id/view_pager_indicator" />
+
+</RelativeLayout>

res/layout/login_page_1.xml

@@ -10,7 +10,7 @@
 
     <TextView
         android:id="@+id/title"
-        android:layout_width="wrap_content"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/login_page_one_body"
         style="@style/LoginBody" />

res/layout/login_page_2.xml

@@ -10,7 +10,7 @@
 
     <TextView
         android:id="@+id/title"
-        android:layout_width="wrap_content"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/login_page_two_body"
         style="@style/LoginBody" />

res/layout/login_page_3.xml

@@ -10,7 +10,7 @@
 
     <TextView
         android:id="@+id/title"
-        android:layout_width="wrap_content"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/login_page_three_body"
         style="@style/LoginBody" />

res/values-sw600dp/dimens.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="login_body_font_size">36sp</dimen>
+    <dimen name="login_padding_horizontal">48dp</dimen>
+</resources>

res/values/dimens.xml

@@ -45,6 +45,7 @@
     <dimen name="small_2">18sp</dimen>
     <dimen name="small">15sp</dimen>
     <dimen name="tiny">9sp</dimen>
+    <dimen name="login_body_font_size">24sp</dimen>
 
     <!-- ViewPagerIndicator -->
     <dimen name="vpi_height">26dp</dimen>

res/values/styles.xml

@@ -61,7 +61,7 @@
     <style name="LoginBody" parent="@android:style/Widget.TextView">
         <item name="android:fontFamily">sans-serif-condensed-light</item>
         <item name="android:textColor">@color/red</item>
-        <item name="android:textSize">@dimen/medium_2</item>
+        <item name="android:textSize">@dimen/login_body_font_size</item>
         <item name="android:gravity">center</item>
     </style>