Skip to content

GitLab

T
tangled
Commit f42b19bd authored by Boris Sazonov's avatar Boris Sazonov Committed by Commit Bot
Browse files
Options

[Unity][Android] Add header image to streamlined sign-in screen 

This CL adds the preliminary version of an animated header image for the
new sign-in screen. The header image is added as an animated vector in
signin_header_animation.xml. For older versions of Android API this
animated vector is supported via support library.

Bug: 814728
Change-Id: I394cffbd3dc9c9426a14272dad33a6e6c8e2cd72
Reviewed-on: https://chromium-review.googlesource.com/992933
Commit-Queue: Boris Sazonov <bsazonov@chromium.org>
Reviewed-by: default avatarTed Choc <tedchoc@chromium.org>
Cr-Commit-Position: refs/heads/master@{#548395}
parent 59716d01
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 1 deletion
chrome/android/java/res/drawable/signin_header_animation.xml 0 → 100644
View file @ f42b19bd
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2018 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
xmlns:tools="http://schemas.android.com/tools"
tools:targetApi="21">
<aapt:attr name="android:drawable">
<vector
android:width="300dp"
android:height="100dp"
android:viewportWidth="360"
android:viewportHeight="120">
<!-- Background fill -->
<path
android:fillColor="#f8f9fa"
android:pathData="L360,0 L360,120 L0,120 L0,0"/>
<!-- Cloud 1 -->
<path
android:fillColor="#f8f9fa"
android:pathData="M47.23,48.56 C39.58,48.50 38.77,57.44 38.77,57.44 C38.77,57.44 55.72,57.38 55.72,57.38 C55.72,57.38 55.15,48.62 47.23,48.56"
android:strokeWidth="1"
android:strokeColor="#ccced2"
android:strokeLineJoin="round"/>
<group
android:name="cloud3_animation_group"
android:translateX="100">
<!-- Cloud 3 -->
<path
android:fillColor="#f8f9fa"
android:pathData="M154.11,79.57 C145.67,79.67 141.69,84.87 141.69,84.87 C141.69,84.87 130.86,82.71 130.86,93.79 C142.94,93.79 168.86,93.79 168.86,93.79 C168.86,93.79 167.33,79.41 154.11,79.57"
android:strokeWidth="1"
android:strokeColor="#d7d9dd"
android:strokeLineJoin="round"/>
</group>
<!-- Cloud 4 -->
<path
android:fillColor="#e8e9eb"
android:pathData="M208.42,60.04 C200.50,60.04 199.68,68.90 199.68,68.90 C199.68,68.90 217.03,68.90 217.03,68.90 C217.03,68.90 216.23,60.04 208.42,60.04"/>
<!-- Laptop screen -->
<path
android:fillColor="#f8f9fa"
android:pathData="M82.25,35.50 C80.27,35.50 79.50,37.25 79.50,38.96 C79.50,41.46 79.50,99.50 79.50,99.50 C79.50,99.50 169.50,99.50 169.50,99.50 C169.50,99.50 169.50,40.18 169.50,38.96 C169.50,36.85 168.01,35.50 165.63,35.50 C160.13,35.50 84.75,35.50 82.25,35.50"
android:strokeWidth="1"
android:strokeColor="#d8dadc"
android:strokeLineJoin="round"/>
<!-- Laptop keyboard -->
<path
android:fillColor="#f8f9fa"
android:pathData="M66.25,104.50 C66.25,104.50 182.25,104.50 182.25,104.50"
android:strokeWidth="1"
android:strokeColor="#d8dadc"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<!-- White and blue curves on the left side -->
<path
android:pathData="M90.97,81.94 C90.97,81.94 80.00,92.52 65.22,92.52 C51.47,92.52 39.88,80.28 39.88,80.28"
android:strokeWidth="5"
android:strokeColor="#4285f4"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:pathData="M-11.34,78.44 C-11.34,78.44 -0.38,67.85 14.41,67.85 C28.16,67.85 39.75,80.09 39.75,80.09"
android:strokeWidth="5.5"
android:strokeColor="#e8e9eb"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<!-- Cloud 2 -->
<path
android:fillColor="#ffffff"
android:pathData="M85.33,58.39 C77.75,58.39 74.58,62.75 74.58,62.75 C74.58,62.75 63.08,60.08 63.08,71.17 C75.17,71.17 97.75,71.17 97.75,71.17 C97.75,71.17 97.25,58.39 85.33,58.39"
android:strokeWidth="1"
android:strokeColor="#ccced2"
android:strokeLineJoin="round"/>
<!-- Mobile phone external edge -->
<path
android:fillColor="#f8f9fa"
android:pathData="M248.00,104.38 C248.00,104.38 239.78,104.38 235.53,104.38 C231.28,104.38 229.03,101.44 229.03,96.94 C229.03,93.19 229.00,38.00 229.00,38.00 L228.99,33.15 C228.99,33.15 228.96,26.88 228.96,23.76 C228.96,20.63 231.38,18.55 234.50,18.55 C237.63,18.55 258.09,18.56 258.09,18.56 L269.99,18.57 C271.24,18.57 275.19,20.79 275.19,23.73 C275.19,27.20 275.23,44.86 275.23,44.86 L275.13,89.81 C275.13,89.81 275.19,96.56 275.19,98.00 C275.19,99.44 272.69,104.06 268.88,104.06 L248.00,104.38"
android:strokeWidth="1"
android:strokeColor="#d8dadc"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<!-- Mobile phone internal edge -->
<path
android:pathData="M232.71,38.09 C232.71,38.09 232.75,93.14 232.75,95.63 C232.75,98.11 234.32,99.53 236.93,99.53 C239.02,99.53 266.77,99.53 266.84,99.53 C269.10,99.53 270.57,97.53 270.57,95.66 C270.57,93.79 270.58,83.90 270.58,83.90 L270.35,47.41 C270.35,47.41 270.35,27.29 270.35,25.74 C270.35,23.95 268.61,22.64 267.01,22.64 C265.56,22.64 261.64,22.64 261.64,22.64 L254.46,22.36 C254.46,22.36 253.28,22.36 252.0,22.35 C247.43,22.33 237.49,22.27 236.28,22.27 C234.41,22.27 232.74,24.0 232.74,25.73 C232.74,27.72 232.74,31.55 232.74,31.55 L232.71,38.09"
android:strokeWidth="0.4"
android:strokeColor="#e8e9eb"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<!-- TODO(https://crbug.com/814728): Add other parts of this image. -->
</vector>
</aapt:attr>
<target android:name="cloud3_animation_group">
<aapt:attr name="android:animation">
<set android:interpolator="@android:anim/linear_interpolator">
<objectAnimator
android:duration="13500"
android:propertyName="translateX"
android:repeatCount="infinite"
android:repeatMode="restart"
android:valueFrom="100"
android:valueTo="0"
android:valueType="floatType"/>
</set>
</aapt:attr>
</target>
</animated-vector>
chrome/android/java/res/layout/signin_view.xml
View file @ f42b19bd
......@@ -28,7 +28,8 @@
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:contentDescription="@null"
android:scaleType="fitCenter"/>
android:scaleType="fitCenter"
chrome:srcCompat="@drawable/signin_header_animation"/>
<TextView
android:id="@+id/signin_title"
android:layout_width="wrap_content"
......
chrome/android/java/src/org/chromium/chrome/browser/signin/SigninFragmentBase.java
View file @ f42b19bd
......@@ -269,6 +269,8 @@ public abstract class SigninFragmentBase
AccountManagerFacade.get().addObserver(mAccountsChangedObserver);
mProfileDataCache.addObserver(mProfileDataCacheObserver);
triggerUpdateAccounts();
mView.startAnimations();
}
@Override
......@@ -277,6 +279,8 @@ public abstract class SigninFragmentBase
mResumed = false;
mProfileDataCache.removeObserver(mProfileDataCacheObserver);
AccountManagerFacade.get().removeObserver(mAccountsChangedObserver);
mView.stopAnimations();
}
private void selectAccount(String accountName, boolean isDefaultAccount) {
......
chrome/android/java/src/org/chromium/chrome/browser/signin/SigninView.java
View file @ f42b19bd
......@@ -5,6 +5,8 @@
package org.chromium.chrome.browser.signin;
import android.content.Context;
import android.graphics.drawable.Animatable;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
......@@ -19,6 +21,7 @@ import org.chromium.ui.widget.ButtonCompat;
/** View that wraps signin screen and caches references to UI elements. */
public class SigninView extends LinearLayout {
private SigninScrollView mScrollView;
private ImageView mHeaderImage;
private TextView mTitle;
private View mAccountPicker;
private ImageView mAccountImage;
......@@ -42,6 +45,7 @@ public class SigninView extends LinearLayout {
super.onFinishInflate();
mScrollView = (SigninScrollView) findViewById(R.id.signin_scroll_view);
mHeaderImage = (ImageView) findViewById(R.id.signin_header_image);
mTitle = (TextView) findViewById(R.id.signin_title);
mAccountPicker = findViewById(R.id.signin_account_picker);
mAccountImage = (ImageView) findViewById(R.id.account_image);
......@@ -63,6 +67,10 @@ public class SigninView extends LinearLayout {
return mScrollView;
}
public ImageView getHeaderImage() {
return mHeaderImage;
}
public TextView getTitleView() {
return mTitle;
}
......@@ -114,4 +122,18 @@ public class SigninView extends LinearLayout {
public View getAcceptButtonEndPadding() {
return mAcceptButtonEndPadding;
}
void startAnimations() {
Drawable headerImage = getHeaderImage().getDrawable();
if (headerImage instanceof Animatable) {
((Animatable) headerImage).start();
}
}
void stopAnimations() {
Drawable headerImage = getHeaderImage().getDrawable();
if (headerImage instanceof Animatable) {
((Animatable) headerImage).stop();
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment