new account wizard: improve UI/UX
This patch improves the UI/UX of the new account wizard. It hides the
SIP form by default and proposes the main possibilities. The buttons
are removed: cardviews are entirely clickable.
Change-Id: I0ce511109c5443dae3e6a47cfa610f1cfa2a0c2e
Tuleap: #602
diff --git a/ring-android/app/src/main/java/cx/ring/fragments/AccountCreationFragment.java b/ring-android/app/src/main/java/cx/ring/fragments/AccountCreationFragment.java
index d937b71..8dfe409 100644
--- a/ring-android/app/src/main/java/cx/ring/fragments/AccountCreationFragment.java
+++ b/ring-android/app/src/main/java/cx/ring/fragments/AccountCreationFragment.java
@@ -49,7 +49,11 @@
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
+import android.view.WindowManager;
+import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
+import android.widget.LinearLayout;
+import android.widget.ScrollView;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;
import android.widget.Toast;
@@ -57,7 +61,6 @@
import java.util.HashMap;
import cx.ring.R;
-import cx.ring.client.HomeActivity;
import cx.ring.model.account.AccountDetailBasic;
import cx.ring.service.LocalService;
@@ -75,6 +78,7 @@
private String mAccountType;
// UI references.
+ private LinearLayout mSipFormLinearLayout;
private EditText mAliasView;
private EditText mHostnameView;
private EditText mUsernameView;
@@ -92,7 +96,7 @@
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
- View inflatedView = inflater.inflate(R.layout.frag_account_creation, parent, false);
+ final View inflatedView = inflater.inflate(R.layout.frag_account_creation, parent, false);
mAliasView = (EditText) inflatedView.findViewById(R.id.alias);
mHostnameView = (EditText) inflatedView.findViewById(R.id.hostname);
@@ -111,7 +115,7 @@
return true;
}
});
- inflatedView.findViewById(R.id.create_ring_account).setOnClickListener(new View.OnClickListener() {
+ inflatedView.findViewById(R.id.ring_card_view).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mAccountType = AccountDetailBasic.ACCOUNT_TYPE_RING;
@@ -129,13 +133,35 @@
attemptCreation();
}
});
- inflatedView.findViewById(R.id.select_file_button).setOnClickListener(new View.OnClickListener() {
+ inflatedView.findViewById(R.id.import_card_view).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startImport();
}
});
+ mSipFormLinearLayout = (LinearLayout) inflatedView.findViewById(R.id.sipFormLinearLayout);
+ mSipFormLinearLayout.setVisibility(View.GONE);
+ inflatedView.findViewById(R.id.sipHeaderLinearLayout).setOnClickListener(new View.OnClickListener() {
+ @Override
+ public void onClick(View v) {
+ if (null != mSipFormLinearLayout) {
+ if (mSipFormLinearLayout.getVisibility() != View.VISIBLE) {
+ mSipFormLinearLayout.setVisibility(View.VISIBLE);
+ //~ Let the time to perform setVisibility before scrolling.
+ final ScrollView loginForm = (ScrollView) inflatedView.findViewById(R.id.login_form);
+ loginForm.postDelayed(new Runnable() {
+ @Override
+ public void run() {
+ loginForm.fullScroll(ScrollView.FOCUS_DOWN);
+ mAliasView.requestFocus();
+ }
+ }, 100);
+ }
+ }
+ }
+ });
+
return inflatedView;
}
diff --git a/ring-android/app/src/main/res/layout/frag_account_creation.xml b/ring-android/app/src/main/res/layout/frag_account_creation.xml
index 9e74f05..a9faa6a 100644
--- a/ring-android/app/src/main/res/layout/frag_account_creation.xml
+++ b/ring-android/app/src/main/res/layout/frag_account_creation.xml
@@ -1,7 +1,8 @@
<?xml version="1.0" encoding="utf-8"?><!--
Copyright (C) 2004-2016 Savoir-faire Linux Inc.
-Author: Adrien Béraud <adrien.beraud@savoirfairelinux.com>
+Authors: Adrien Béraud <adrien.beraud@savoirfairelinux.com>
+ Romain Bertozzi <romain.bertozzi@savoirfairelinux.com>
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
@@ -33,10 +34,12 @@
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/ring_card_view"
- android:layout_width="280dp"
+ android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
+ android:clickable="true"
+ android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="2dp">
<RelativeLayout
@@ -58,7 +61,7 @@
<TextView
android:id="@+id/ring_acc_title_txt"
- android:layout_width="fill_parent"
+ android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
@@ -75,182 +78,43 @@
<TextView
android:id="@+id/textView"
- android:layout_width="fill_parent"
+ android:layout_width="match_parent"
android:layout_height="wrap_content"
- android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
+ android:layout_alignParentStart="true"
android:layout_below="@+id/ring_acc_title_txt"
- android:padding="16dp"
+ android:paddingBottom="24dp"
+ android:paddingLeft="16dp"
+ android:paddingRight="16dp"
+ android:paddingTop="16dp"
android:singleLine="false"
android:text="@string/help_ring"
android:textColor="@color/text_color_primary"
android:textSize="14sp" />
- <Button
- android:id="@+id/create_ring_account"
- style="@style/Widget.AppCompat.Button.Borderless.Colored"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentEnd="false"
- android:layout_alignParentStart="false"
- android:layout_alignParentRight="false"
- android:layout_alignParentLeft="false"
- android:layout_below="@+id/textView"
- android:layout_margin="8dp"
- android:padding="8dp"
- android:text="@string/create_ring_account"
- android:gravity="center" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
- android:id="@+id/card_view"
- android:layout_width="280dp"
+ android:id="@+id/import_card_view"
+ android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
- android:layout_margin="8dp"
+ android:layout_marginBottom="8dp"
+ android:clickable="true"
+ android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="2dp">
<RelativeLayout
- android:id="@+id/sip_fields"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:nestedScrollingEnabled="false"
- android:orientation="vertical">
-
- <TextView
- android:id="@+id/textView3"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_alignParentStart="false"
- android:layout_alignParentTop="true"
- android:layout_toLeftOf="@+id/imageView5"
- android:layout_toStartOf="@+id/imageView5"
- android:paddingLeft="16dp"
- android:paddingRight="16dp"
- android:paddingTop="24dp"
- android:singleLine="false"
- android:text="@string/help_sip_title"
- android:textColor="@color/text_color_primary"
- android:textSize="24sp" />
-
- <TextView
- android:id="@+id/textView4"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_alignParentRight="true"
- android:layout_alignParentEnd="true"
- android:layout_alignParentStart="true"
- android:layout_below="@+id/textView3"
- android:singleLine="false"
- android:text="@string/help_sip"
- android:textColor="@color/text_color_primary"
- android:textSize="14sp"
- android:padding="16dp" />
-
- <EditText
- android:id="@+id/alias"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_alignParentStart="true"
- android:layout_alignParentLeft="true"
- android:layout_below="@+id/textView4"
- android:layout_marginBottom="8dp"
- android:layout_marginLeft="12dp"
- android:layout_marginRight="12dp"
- android:hint="@string/prompt_alias"
- android:singleLine="true" />
-
- <EditText
- android:id="@+id/hostname"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_alignParentStart="true"
- android:layout_alignParentLeft="true"
- android:layout_below="@+id/alias"
- android:layout_marginBottom="8dp"
- android:layout_marginLeft="12dp"
- android:layout_marginRight="12dp"
- android:hint="@string/prompt_hostname"
- android:singleLine="true"
- android:typeface="monospace" />
-
- <EditText
- android:id="@+id/username"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_alignParentStart="true"
- android:layout_below="@+id/hostname"
- android:layout_marginBottom="8dp"
- android:layout_marginLeft="12dp"
- android:layout_marginRight="12dp"
- android:hint="@string/prompt_username"
- android:singleLine="true"
- android:typeface="monospace" />
-
- <EditText
- android:id="@+id/password"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_alignParentStart="true"
- android:layout_below="@+id/username"
- android:layout_marginBottom="8dp"
- android:layout_marginLeft="12dp"
- android:layout_marginRight="12dp"
- android:hint="@string/prompt_password"
- android:imeActionLabel="@string/action_create_short"
- android:inputType="textPassword"
- android:singleLine="true"
- android:typeface="monospace" />
-
- <Button
- android:id="@+id/create_sip_button"
- style="@style/Widget.AppCompat.Button.Borderless.Colored"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_alignParentStart="true"
- android:layout_alignParentTop="false"
- android:layout_below="@+id/password"
- android:layout_margin="8dp"
- android:padding="8dp"
- android:text="@string/create_sip_account"
- android:gravity="center" />
-
- <ImageView
- android:id="@+id/imageView5"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentEnd="true"
- android:layout_alignParentRight="true"
- android:layout_alignParentTop="true"
- android:layout_margin="16dp"
- android:contentDescription="@string/help_sip_title"
- android:src="@drawable/ic_dialer_sip_black_48dp" />
- </RelativeLayout>
-
- </android.support.v7.widget.CardView>
-
- <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
- android:id="@+id/card_import"
- android:layout_width="280dp"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:layout_margin="8dp"
- card_view:cardCornerRadius="2dp">
- <RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="false"
android:orientation="vertical">
<TextView
- android:layout_width="fill_parent"
+ android:id="@+id/import_acc_title_txt"
+ android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
@@ -261,30 +125,171 @@
android:singleLine="false"
android:text="@string/account_import_title"
android:textColor="@color/text_color_primary"
- android:textSize="24sp"
- android:id="@+id/import_acc_title_txt" />
+ android:textSize="24sp" />
<ImageView
+ android:id="@+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_margin="16dp"
- android:src="@drawable/ic_archive_black_48dp"
android:contentDescription="@string/account_import_title"
- android:id="@+id/imageView4" />
+ android:src="@drawable/ic_archive_black_48dp" />
- <Button
- android:id="@+id/select_file_button"
- style="@style/Widget.AppCompat.Button.Borderless.Colored"
- android:layout_width="wrap_content"
+ <TextView
+ android:id="@+id/importAccountExplanation"
+ android:layout_width="match_parent"
android:layout_height="wrap_content"
+ android:layout_alignParentLeft="true"
+ android:layout_alignParentStart="true"
android:layout_below="@+id/import_acc_title_txt"
- android:layout_margin="8dp"
- android:padding="8dp"
- android:text="@string/account_import"
- android:gravity="center" />
+ android:paddingBottom="24dp"
+ android:paddingLeft="16dp"
+ android:paddingRight="16dp"
+ android:paddingTop="16dp"
+ android:singleLine="false"
+ android:text="@string/account_import_explanation"
+ android:textColor="@color/text_color_primary"
+ android:textSize="14sp" />
+
+ </RelativeLayout>
+
+ </android.support.v7.widget.CardView>
+
+ <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
+ android:id="@+id/card_view"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:layout_gravity="center"
+ android:layout_marginBottom="8dp"
+ android:clickable="true"
+ android:foreground="?android:attr/selectableItemBackground"
+ card_view:cardCornerRadius="2dp">
+
+ <RelativeLayout
+ android:id="@+id/sip_fields"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent"
+ android:nestedScrollingEnabled="false"
+ android:orientation="vertical">
+
+ <LinearLayout
+ android:id="@+id/sipHeaderLinearLayout"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent"
+ android:orientation="vertical">
+
+ <LinearLayout
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:orientation="horizontal">
+
+ <TextView
+ android:id="@+id/textView3"
+ android:layout_width="0dp"
+ android:layout_height="wrap_content"
+ android:layout_weight="1"
+ android:paddingLeft="16dp"
+ android:paddingRight="16dp"
+ android:paddingTop="24dp"
+ android:singleLine="false"
+ android:text="@string/help_sip_title"
+ android:textColor="@color/text_color_primary"
+ android:textSize="24sp" />
+
+ <ImageView
+ android:id="@+id/imageView5"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:layout_marginEnd="16dp"
+ android:layout_marginRight="16dp"
+ android:layout_marginTop="16dp"
+ android:layout_weight="0"
+ android:contentDescription="@string/help_sip_title"
+ android:src="@drawable/ic_dialer_sip_black_48dp" />
+ </LinearLayout>
+
+ <TextView
+ android:id="@+id/textView4"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:paddingBottom="24dp"
+ android:paddingLeft="16dp"
+ android:paddingRight="16dp"
+ android:paddingTop="8dp"
+ android:singleLine="false"
+ android:text="@string/help_sip"
+ android:textColor="@color/text_color_primary"
+ android:textSize="14sp" />
+ </LinearLayout>
+
+ <LinearLayout
+ android:id="@+id/sipFormLinearLayout"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:layout_below="@+id/sipHeaderLinearLayout"
+ android:layout_marginBottom="8dp"
+ android:orientation="vertical"
+ android:visibility="visible">
+
+ <EditText
+ android:id="@+id/alias"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:layout_marginBottom="8dp"
+ android:layout_marginLeft="12dp"
+ android:layout_marginRight="12dp"
+ android:hint="@string/prompt_alias"
+ android:singleLine="true" />
+
+ <EditText
+ android:id="@+id/hostname"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:layout_marginBottom="8dp"
+ android:layout_marginLeft="12dp"
+ android:layout_marginRight="12dp"
+ android:hint="@string/prompt_hostname"
+ android:singleLine="true"
+ android:typeface="monospace" />
+
+ <EditText
+ android:id="@+id/username"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:layout_marginBottom="8dp"
+ android:layout_marginLeft="12dp"
+ android:layout_marginRight="12dp"
+ android:hint="@string/prompt_username"
+ android:singleLine="true"
+ android:typeface="monospace" />
+
+ <EditText
+ android:id="@+id/password"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:layout_marginBottom="8dp"
+ android:layout_marginLeft="12dp"
+ android:layout_marginRight="12dp"
+ android:hint="@string/prompt_password"
+ android:imeActionLabel="@string/action_create_short"
+ android:inputType="textPassword"
+ android:singleLine="true"
+ android:typeface="monospace" />
+
+ <Button
+ android:id="@+id/create_sip_button"
+ style="@style/Widget.AppCompat.Button.Borderless.Colored"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:layout_gravity="end"
+ android:layout_margin="8dp"
+ android:gravity="center"
+ android:padding="8dp"
+ android:text="@string/create_sip_account" />
+ </LinearLayout>
</RelativeLayout>
diff --git a/ring-android/app/src/main/res/values/strings_account.xml b/ring-android/app/src/main/res/values/strings_account.xml
index 46f0af3..9c340d6 100644
--- a/ring-android/app/src/main/res/values/strings_account.xml
+++ b/ring-android/app/src/main/res/values/strings_account.xml
@@ -36,11 +36,11 @@
<item>SIP</item>
<item>IAX</item>
</string-array>
- <string name="help_ring_title">Ring identity</string>
- <string name="help_ring">A Ring identity allows you to reach people securely in peer to peer through a fully distributed network.</string>
+ <string name="help_ring_title">Create a Ring account</string>
+ <string name="help_ring">A Ring account allows you to reach people securely in peer to peer through a fully distributed network.</string>
<string name="create_ring_account">Create</string>
- <string name="help_sip_title">SIP account</string>
+ <string name="help_sip_title">Add your SIP account</string>
<string name="help_sip">Configure an existing SIP account.</string>
<string name="create_sip_account">Add</string>
<string name="configure_sip_account">Configure</string>
@@ -148,15 +148,16 @@
<!-- Import/export -->
<string name="account_export">Export</string>
<string name="account_import">Import</string>
- <string name="account_import_account">Import account</string>
- <string name="account_export_title">Export account</string>
+ <string name="account_import_account">Import an account</string>
+ <string name="account_export_title">Export an account</string>
<string name="account_import_title">Import accounts</string>
+ <string name="account_import_explanation">You can import previously exported accounts.</string>
<string name="account_export_message">Save account settings and credentials, password encrypted.</string>
<string name="account_export_new_password">New password</string>
<string name="account_export_confirm_password">Confirm password</string>
<string name="account_import_message">Enter password to decrypt the file.</string>
<string name="account_import_decryption_password">Decryption password</string>
- <string name="import_dialog_title">Importing account</string>
+ <string name="import_dialog_title">Importing</string>
<string name="import_export_wait">Please wait…</string>
<string name="export_dialog_title">Exporting account</string>
<string name="account_export_result">"Account exported to %1$s"</string>
@@ -165,6 +166,6 @@
<string name="error_password_char_count">6 characters minimum</string>
<string name="error_passwords_not_equals">Passwords do not match</string>
<string name="import_failed_dialog_title">Import failed</string>
- <string name="import_failed_dialog_msg">An error occured</string>
+ <string name="import_failed_dialog_msg">An error occurred</string>
</resources>