Skip to content

Commit

Permalink
ADS: AppTP - Onboarding (#2648)
Browse files Browse the repository at this point in the history 
Task/Issue URL: https://app.asana.com/0/72649045549333/1203568096239636

### Description
Update Onboarding screens and related:
- Onboarding carrousel
- FAQ page
- 
Design Review in task
  • Loading branch information
@malmstein
malmstein committed Dec 22, 2022
1 parent d863927 commit 2669b8e
Show file tree
Hide file tree
Showing 13 changed files with 117 additions and 121 deletions.
7 changes: 7 additions & 0 deletions ...pl/src/main/java/com/duckduckgo/mobile/android/vpn/ui/onboarding/VpnOnboardingActivity.kt
View file
Expand Up @@ -31,6 +31,7 @@ import com.duckduckgo.anvil.annotations.InjectWith
import com.duckduckgo.app.global.DuckDuckGoActivity
import com.duckduckgo.appbuildconfig.api.AppBuildConfig
import com.duckduckgo.di.scopes.ActivityScope
import com.duckduckgo.mobile.android.ui.view.getColorFromAttr
import com.duckduckgo.mobile.android.ui.viewbinding.viewBinding
import com.duckduckgo.mobile.android.vpn.AppTpVpnFeature
import com.duckduckgo.mobile.android.vpn.R
Expand Down Expand Up @@ -87,6 +88,12 @@ class VpnOnboardingActivity : DuckDuckGoActivity(), AppTPVpnConflictDialog.Liste
binding.onboardingClose.setOnClickListener {
close()
}

overrideStatusBarColor()
}

private fun overrideStatusBarColor() {
window.statusBarColor = getColorFromAttr(com.duckduckgo.mobile.android.R.attr.appTPHeaderBackground)
}

private fun observeViewModel() {
Expand Down
10 changes: 5 additions & 5 deletions app-tracking-protection/vpn-impl/src/main/res/layout-w600dp/activity_vpn_onboarding_page.xml
View file
Expand Up @@ -66,9 +66,9 @@
android:paddingStart="150dp"
android:paddingEnd="150dp">

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/onboarding_page_title"
android:textAppearance="@style/TextAppearance.DuckDuckGo.Headline2"
app:typography="h2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/atp_OnboardingLastPageOneTitle"
Expand All @@ -77,10 +77,10 @@
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/onboarding_page_header"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/onboarding_page_text"
android:textAppearance="@style/TextAppearance.DuckDuckGo.Body2"
android:textColor="?secondaryTextColor"
app:typography="body2"
app:textType="secondary"
android:textAlignment="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand Down
147 changes: 65 additions & 82 deletions app-tracking-protection/vpn-impl/src/main/res/layout/activity_device_shield_faq.xml
View file
Expand Up @@ -17,15 +17,15 @@
-->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.onboarding.DeviceShieldFAQActivity">
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".ui.onboarding.DeviceShieldFAQActivity">

<include
android:id="@+id/include_toolbar"
layout="@layout/include_default_toolbar" />
layout="@layout/include_default_toolbar"/>

<ScrollView
android:layout_width="match_parent"
Expand All @@ -37,123 +37,106 @@
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
android:orientation="vertical"
android:paddingStart="@dimen/keyline_6"
android:paddingEnd="@dimen/keyline_6"
android:paddingTop="@dimen/keyline_6">

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQHeaderStyle"
android:layout_marginTop="32dp"
android:text="@string/atp_FAQFirstHeader"
android:paddingStart="35dp"
android:paddingEnd="35dp" />
app:typography="h2"
android:text="@string/atp_FAQFirstHeader"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQTextStyle"
android:layout_marginTop="24dp"
android:text="@string/atp_FAQFirstText"
android:paddingStart="35dp"
android:paddingEnd="35dp"/>
app:typography="body2"
app:textType="secondary"
android:layout_marginTop="@dimen/keyline_4"
android:text="@string/atp_FAQFirstText"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQHeaderStyle"
android:layout_marginTop="32dp"
android:text="@string/atp_FAQSecondHeader"
android:paddingStart="35dp"
android:paddingEnd="35dp" />
app:typography="h2"
android:layout_marginTop="@dimen/keyline_6"
android:text="@string/atp_FAQSecondHeader"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQTextStyle"
android:layout_marginTop="24dp"
android:text="@string/atp_FAQSecondText"
android:paddingStart="35dp"
android:paddingEnd="35dp"/>
app:typography="body1"
app:textType="secondary"
android:layout_marginTop="@dimen/keyline_4"
android:text="@string/atp_FAQSecondText"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQHeaderStyle"
android:layout_marginTop="32dp"
android:text="@string/atp_FAQThirdHeader"
android:paddingStart="35dp"
android:paddingEnd="35dp" />
app:typography="h2"
android:layout_marginTop="@dimen/keyline_6"
android:text="@string/atp_FAQThirdHeader"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQTextStyle"
android:layout_marginTop="24dp"
android:text="@string/atp_FAQThirdText"
android:paddingStart="35dp"
android:paddingEnd="35dp"/>
app:typography="body1"
app:textType="secondary"
android:layout_marginTop="@dimen/keyline_4"
android:text="@string/atp_FAQThirdText"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQHeaderStyle"
android:layout_marginTop="32dp"
android:text="@string/atp_FAQFourthHeader"
android:paddingStart="35dp"
android:paddingEnd="35dp" />
app:typography="h2"
android:layout_marginTop="@dimen/keyline_6"
android:text="@string/atp_FAQFourthHeader"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQTextStyle"
android:layout_marginTop="24dp"
android:text="@string/atp_FAQFourthText"
android:paddingStart="35dp"
android:paddingEnd="35dp"/>
app:typography="body1"
app:textType="secondary"
android:layout_marginTop="@dimen/keyline_4"
android:text="@string/atp_FAQFourthText"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQHeaderStyle"
android:layout_marginTop="32dp"
android:text="@string/atp_FAQFifthHeader"
android:paddingStart="35dp"
android:paddingEnd="35dp" />
app:typography="h2"
android:layout_marginTop="@dimen/keyline_6"
android:text="@string/atp_FAQFifthHeader"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQTextStyle"
android:layout_marginTop="24dp"
android:text="@string/atp_FAQFifthText"
android:paddingStart="35dp"
android:paddingEnd="35dp"/>
app:typography="body1"
app:textType="secondary"
android:layout_marginTop="@dimen/keyline_4"
android:text="@string/atp_FAQFifthText"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQHeaderStyle"
android:layout_marginTop="32dp"
android:text="@string/atp_FAQSixthHeader"
android:paddingStart="35dp"
android:paddingEnd="35dp" />
app:typography="h2"
android:layout_marginTop="@dimen/keyline_6"
android:text="@string/atp_FAQSixthHeader"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/DeviceShieldOnboardingFAQTextStyle"
android:layout_marginTop="24dp"
android:text="@string/atp_FAQSixthText"
android:paddingStart="35dp"
android:paddingEnd="35dp"/>

app:typography="body1"
app:textType="secondary"
android:layout_marginTop="@dimen/keyline_4"
android:text="@string/atp_FAQSixthText"/>

<ImageView
android:layout_marginTop="60dp"
android:layout_marginBottom="60dp"
android:layout_gravity="center"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_width="@dimen/keyline_6"
android:layout_height="@dimen/keyline_6"
android:src="@drawable/ic_red_dax"/>

</LinearLayout>
Expand Down
12 changes: 8 additions & 4 deletions app-tracking-protection/vpn-impl/src/main/res/layout/activity_vpn_onboarding.xml
View file
Expand Up @@ -16,12 +16,14 @@
~ limitations under the License.
-->

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
<androidx.constraintlayout.widget.ConstraintLayout
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"
tools:context="com.duckduckgo.mobile.android.vpn.ui.onboarding.VpnOnboardingActivity">
tools:context="com.duckduckgo.mobile.android.vpn.ui.onboarding.VpnOnboardingActivity"
android:background="?attr/daxColorSurface">

<androidx.viewpager2.widget.ViewPager2
android:id="@+id/onboarding_pager"
Expand All @@ -31,7 +33,7 @@
app:layout_constraintBottom_toTopOf="@+id/onboarding_next_cta"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
app:layout_constraintTop_toTopOf="parent"/>

<ImageButton
android:id="@+id/onboarding_close"
Expand All @@ -43,10 +45,12 @@
app:layout_constraintTop_toTopOf="parent"
tools:ignore="SpeakableTextPresentCheck"/>

<com.duckduckgo.mobile.android.ui.view.button.ButtonPrimaryRounded

<com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
android:id="@+id/onboarding_next_cta"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:buttonSize="large"
android:layout_marginStart="@dimen/keyline_5"
android:layout_marginEnd="@dimen/keyline_5"
android:layout_marginBottom="@dimen/keyline_4"
Expand Down
29 changes: 15 additions & 14 deletions app-tracking-protection/vpn-impl/src/main/res/layout/activity_vpn_onboarding_page.xml
View file
Expand Up @@ -17,7 +17,8 @@
-->


<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
<ScrollView
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"
Expand Down Expand Up @@ -47,7 +48,7 @@
android:importantForAccessibility="no"
android:scaleType="centerCrop"
app:lottie_imageAssetsFolder="images"
app:lottie_loop="true" />
app:lottie_loop="true"/>

<ImageView
android:id="@+id/onboarding_page_image"
Expand All @@ -58,38 +59,38 @@
android:contentDescription="@string/atp_OnboardingLogoDescription"
android:importantForAccessibility="no"
android:scaleType="centerCrop"
app:srcCompat="@drawable/device_shield_onboarding_page_three_header" />
app:srcCompat="@drawable/device_shield_onboarding_page_three_header"/>

</FrameLayout>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/onboarding_page_title"
android:textAppearance="@style/TextAppearance.DuckDuckGo.Headline2"
app:typography="h1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:layout_marginTop="32dp"
android:paddingStart="50dp"
android:paddingEnd="50dp"
android:text="@string/atp_OnboardingLastPageOneTitle"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/onboarding_page_header" />
app:layout_constraintTop_toBottomOf="@+id/onboarding_page_header"/>

<TextView
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/onboarding_page_text"
android:textAppearance="@style/TextAppearance.DuckDuckGo.Body2"
android:textColor="?secondaryTextColor"
app:typography="body2"
app:textType="secondary"
android:textAlignment="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:paddingStart="40dp"
android:paddingEnd="40dp"
android:layout_marginTop="@dimen/keyline_4"
android:paddingStart="@dimen/keyline_5"
android:paddingEnd="@dimen/keyline_5"
android:text="@string/atp_OnboardingLatsPageOneSubtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/onboarding_page_title" />
app:layout_constraintTop_toBottomOf="@+id/onboarding_page_title"/>

</LinearLayout>
</ScrollView>
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/res/layout/content_broken_sites.xml
View file
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?><!--
~ Copyright (c) 2020 DuckDuckGo
~ Copyright (c) 2022 DuckDuckGo
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/res/layout/content_onboarding_vpn_intro.xml
View file
Expand Up @@ -31,7 +31,7 @@

<ImageView
android:id="@+id/onboarding_page_image"
android:layout_marginTop="@dimen/keyline_6"
android:layout_marginTop="@dimen/keyline_7"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/atp_OnboardingLogoDescription"
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/res/layout/content_onboarding_vpn_permission.xml
View file
Expand Up @@ -31,7 +31,7 @@

<ImageView
android:id="@+id/onboarding_page_image"
android:layout_marginTop="@dimen/keyline_6"
android:layout_marginTop="@dimen/keyline_7"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/atp_OnboardingLogoDescription"
Expand Down

0 comments on commit 2669b8e

Please sign in to comment.