Skip to content

Commit

Permalink
Login screen: Add alternate layouts and tablet support
Browse files Browse the repository at this point in the history 
Added scrolling to layout if needed for smaller screens (smartphone vertical)
Added layout-land (smartphone landscape), layout-xlarge (tablet vertical), layout-xlarge-land (tablet horizontal)
  • Loading branch information
@zeevox
zeevox committed Dec 17, 2017
1 parent d528354 commit 8224bc3
Show file tree
Hide file tree
Showing 4 changed files with 462 additions and 72 deletions.
129 changes: 129 additions & 0 deletions kute-android-app/app/src/main/res/layout-land/testreg.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<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:background="@drawable/login_bg"
tools:context=".Activity.RegisterActivity">

<android.support.design.widget.AppBarLayout
android:id="@+id/appbarlayout_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:background="@android:color/transparent"
app:elevation="0dp">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:contentInsetStartWithNavigation="0dp"
app:elevation="0dp"
app:title="Register or log in"
app:titleTextColor="@android:color/white" />
</android.support.design.widget.AppBarLayout>


<android.support.v7.widget.CardView
android:layout_width="400dp"
android:layout_height="250dp"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_margin="@dimen/activity_horizontal_margin"
app:cardBackgroundColor="#B3FFFFFF"
app:cardCornerRadius="4dp">

<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/activity_horizontal_margin">

<TextView
android:id="@+id/appname_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="@string/app_name"
android:textAllCaps="true"
android:textSize="72sp"
android:textStyle="normal|bold" />

<TextView
android:id="@+id/login_info"
style="@style/TextAppearance.AppCompat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/appname_login"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text="@string/login_info"
android:textAlignment="center" />

<View
android:id="@+id/login_separator"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@+id/login_info"
android:layout_margin="@dimen/activity_horizontal_margin"
android:background="@android:color/darker_gray" />

<TextView
android:id="@+id/login_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textAlignment="center"
android:visibility="gone" />

<com.google.android.gms.common.SignInButton
android:id="@+id/login_with_google"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_separator"
android:text="login_with_google" />

<com.facebook.login.widget.LoginButton
android:id="@+id/connectWithFbButton"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_below="@+id/login_with_google"
android:layout_gravity="center_horizontal"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text=" connect_with_facebook"
android:visibility="gone" />

<Button
android:id="@+id/connectWithFbButtonNew"
style="@style/FacebookButtonLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_with_google"
android:layout_marginTop="@dimen/content_area_margin"
android:height="48dp"
android:clickable="true"
android:drawableLeft="@drawable/ic_login_facebook_white_24"
android:drawableStart="@drawable/ic_login_facebook_white_24"
android:focusable="true"
android:text="@string/login_fb_login_button"
android:textAllCaps="false"
android:visibility="visible" />

<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/connectWithFbButtonNew" />

</RelativeLayout>

</ScrollView>
</android.support.v7.widget.CardView>
</RelativeLayout>
128 changes: 128 additions & 0 deletions kute-android-app/app/src/main/res/layout-xlarge-land/testreg.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<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:background="@drawable/login_bg"
tools:context=".Activity.RegisterActivity">

<android.support.design.widget.AppBarLayout
android:id="@+id/appbarlayout_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:background="@android:color/transparent"
app:elevation="0dp">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:contentInsetStartWithNavigation="0dp"
app:elevation="0dp"
app:title="Register or log in"
app:titleTextColor="@android:color/white" />
</android.support.design.widget.AppBarLayout>


<android.support.v7.widget.CardView
android:layout_width="450dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_margin="@dimen/activity_horizontal_margin"
app:cardBackgroundColor="#B3FFFFFF"
app:cardCornerRadius="4dp">

<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/activity_vertical_margin">

<TextView
android:id="@+id/appname_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="@string/app_name"
android:textAllCaps="true"
android:textSize="72sp"
android:textStyle="normal|bold" />

<TextView
android:id="@+id/login_info"
style="@style/TextAppearance.AppCompat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/appname_login"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text="@string/login_info"
android:textAlignment="center" />

<View
android:id="@+id/login_separator"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@+id/login_info"
android:layout_margin="@dimen/activity_vertical_margin"
android:background="@android:color/darker_gray" />

<TextView
android:id="@+id/login_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textAlignment="center"
android:visibility="gone" />

<com.google.android.gms.common.SignInButton
android:id="@+id/login_with_google"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_separator"
android:text="login_with_google" />

<com.facebook.login.widget.LoginButton
android:id="@+id/connectWithFbButton"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_below="@+id/login_with_google"
android:layout_gravity="center_horizontal"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text=" connect_with_facebook"
android:visibility="gone" />

<Button
android:id="@+id/connectWithFbButtonNew"
style="@style/FacebookButtonLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_with_google"
android:layout_marginTop="@dimen/content_area_margin"
android:height="48dp"
android:clickable="true"
android:drawableLeft="@drawable/ic_login_facebook_white_24"
android:drawableStart="@drawable/ic_login_facebook_white_24"
android:focusable="true"
android:text="@string/login_fb_login_button"
android:textAllCaps="false"
android:visibility="visible" />

<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/connectWithFbButtonNew" />

</RelativeLayout>
</ScrollView>
</android.support.v7.widget.CardView>
</RelativeLayout>
128 changes: 128 additions & 0 deletions kute-android-app/app/src/main/res/layout-xlarge/testreg.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<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:background="@drawable/login_bg"
tools:context=".Activity.RegisterActivity">

<android.support.design.widget.AppBarLayout
android:id="@+id/appbarlayout_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:background="@android:color/transparent"
app:elevation="0dp">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:contentInsetStartWithNavigation="0dp"
app:elevation="0dp"
app:title="Register or log in"
app:titleTextColor="@android:color/white" />
</android.support.design.widget.AppBarLayout>


<android.support.v7.widget.CardView
android:layout_width="450dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_margin="@dimen/activity_horizontal_margin"
app:cardBackgroundColor="#B3FFFFFF"
app:cardCornerRadius="4dp">

<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/activity_horizontal_margin">

<TextView
android:id="@+id/appname_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="@string/app_name"
android:textAllCaps="true"
android:textSize="72sp"
android:textStyle="normal|bold" />

<TextView
android:id="@+id/login_info"
style="@style/TextAppearance.AppCompat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/appname_login"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text="@string/login_info"
android:textAlignment="center" />

<View
android:id="@+id/login_separator"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@+id/login_info"
android:layout_margin="@dimen/activity_horizontal_margin"
android:background="@android:color/darker_gray" />

<TextView
android:id="@+id/login_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textAlignment="center"
android:visibility="gone" />

<com.google.android.gms.common.SignInButton
android:id="@+id/login_with_google"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_separator"
android:text="login_with_google" />

<com.facebook.login.widget.LoginButton
android:id="@+id/connectWithFbButton"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_below="@+id/login_with_google"
android:layout_gravity="center_horizontal"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text=" connect_with_facebook"
android:visibility="gone" />

<Button
android:id="@+id/connectWithFbButtonNew"
style="@style/FacebookButtonLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_with_google"
android:layout_marginTop="@dimen/content_area_margin"
android:height="48dp"
android:clickable="true"
android:drawableLeft="@drawable/ic_login_facebook_white_24"
android:drawableStart="@drawable/ic_login_facebook_white_24"
android:focusable="true"
android:text="@string/login_fb_login_button"
android:textAllCaps="false"
android:visibility="visible" />

<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/connectWithFbButtonNew" />

</RelativeLayout>
</ScrollView>
</android.support.v7.widget.CardView>
</RelativeLayout>
Loading

0 comments on commit 8224bc3

Please sign in to comment.