[Android] Implement new onboarding permission screen in landscape mode
Nicolas Pomepuy
git at videolan.org
Fri Jun 17 11:48:27 UTC 2022
vlc-android | branch: master | Nicolas Pomepuy <nicolas at videolabs.io> | Fri Jun 17 08:54:58 2022 +0200| [e3c26b8c9690887116cc33ead34123f36719d5ff] | committer: Duncan McNamara
Implement new onboarding permission screen in landscape mode
> https://code.videolan.org/videolan/vlc-android/commit/e3c26b8c9690887116cc33ead34123f36719d5ff
---
.../res/drawable/permission_selection_rounded.xml | 8 ++
.../resources/src/main/res/values/colors.xml | 2 +
.../res/layout-land/onboarding_permission.xml | 128 +++++++++++++--------
3 files changed, 91 insertions(+), 47 deletions(-)
diff --git a/application/resources/src/main/res/drawable/permission_selection_rounded.xml b/application/resources/src/main/res/drawable/permission_selection_rounded.xml
new file mode 100644
index 000000000..2047699d9
--- /dev/null
+++ b/application/resources/src/main/res/drawable/permission_selection_rounded.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+ android:shape="rectangle">
+ <stroke android:width="1dp" android:color="@color/onboarding_grey_transparent_20"/>
+ <solid android:color="@color/onboarding_grey_transparent_75"></solid>
+ <corners android:radius="8dp"></corners>
+
+</shape>
\ No newline at end of file
diff --git a/application/resources/src/main/res/values/colors.xml b/application/resources/src/main/res/values/colors.xml
index fa37bd4ed..53d6d9731 100644
--- a/application/resources/src/main/res/values/colors.xml
+++ b/application/resources/src/main/res/values/colors.xml
@@ -116,6 +116,8 @@
<!--<color name="tv_bg">#1c313a</color>-->
<!--<color name="tv_card_content">#396375</color>-->
<color name="onboarding_grey">#011422</color>
+ <color name="onboarding_grey_transparent_20">#33011422</color>
+ <color name="onboarding_grey_transparent_75">#BF011422</color>
<color name="material_blue">#2196f3</color>
<color name="material_pink">#e91e63</color>
</resources>
\ No newline at end of file
diff --git a/application/vlc-android/res/layout-land/onboarding_permission.xml b/application/vlc-android/res/layout-land/onboarding_permission.xml
index 88a808a05..0bdfb36bf 100644
--- a/application/vlc-android/res/layout-land/onboarding_permission.xml
+++ b/application/vlc-android/res/layout-land/onboarding_permission.xml
@@ -31,78 +31,112 @@
android:orientation="vertical"
tools:background="@color/onboarding_grey">
- <ImageView
- android:id="@+id/imageView"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginStart="8dp"
- android:layout_marginBottom="24dp"
- app:layout_constraintBottom_toTopOf="@+id/textView7"
- app:layout_constraintEnd_toStartOf="@+id/guideline"
- app:layout_constraintHorizontal_bias="0.5"
- app:layout_constraintStart_toStartOf="parent"
- app:layout_constraintTop_toTopOf="parent"
- app:layout_constraintVertical_chainStyle="packed"
- app:srcCompat="@drawable/ic_icon" />
-
<TextView
- android:id="@+id/textView7"
+ android:id="@+id/permission_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
- android:layout_marginStart="16dp"
- android:layout_marginEnd="16dp"
- android:layout_marginBottom="8dp"
+ android:layout_marginTop="24dp"
android:text="@string/permission"
android:textAlignment="center"
android:textAppearance="@style/VLC.Onboarding.Title"
- app:layout_constraintBottom_toTopOf="@+id/textView"
- app:layout_constraintEnd_toStartOf="@+id/guideline"
- app:layout_constraintHorizontal_bias="0.5"
+ app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
- app:layout_constraintTop_toBottomOf="@+id/imageView" />
+ app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
- android:layout_marginStart="24dp"
- android:layout_marginEnd="24dp"
+ android:layout_marginTop="8dp"
android:text="@string/permission_media"
android:textAlignment="center"
android:textAppearance="@style/VLC.Onboarding.Text"
- app:layout_constraintBottom_toBottomOf="parent"
- app:layout_constraintEnd_toStartOf="@+id/guideline"
+ app:layout_constraintEnd_toEndOf="parent"
+ app:layout_constraintStart_toStartOf="parent"
+ app:layout_constraintTop_toBottomOf="@+id/permission_title" />
+
+ <FrameLayout
+ android:id="@+id/permNone"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:layout_marginStart="16dp"
+ android:padding="16dp"
+ android:scaleX="0.8"
+ android:scaleY="0.8"
+ app:layout_constraintBottom_toBottomOf="@+id/permMedia"
+ app:layout_constraintEnd_toStartOf="@+id/permMedia"
app:layout_constraintHorizontal_bias="0.5"
+ app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
- app:layout_constraintTop_toBottomOf="@+id/textView7" />
+ app:layout_constraintTop_toTopOf="@+id/permMedia">
+
+ <ImageView
+ android:id="@+id/permNoneImage"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:contentDescription="@string/permission_onboarding_no_perm"
+ app:srcCompat="@drawable/ic_perm_none" />
+ </FrameLayout>
- <androidx.constraintlayout.widget.Guideline
- android:id="@+id/guideline"
+ <FrameLayout
+ android:id="@+id/permMedia"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
- android:orientation="vertical"
- app:layout_constraintGuide_percent="0.66" />
+ android:layout_marginTop="32dp"
+ android:layout_marginBottom="24dp"
+ android:padding="16dp"
+ android:scaleX="0.8"
+ android:scaleY="0.8"
+ app:layout_constraintBottom_toTopOf="@+id/textView5"
+ app:layout_constraintEnd_toStartOf="@+id/permAll"
+ app:layout_constraintHorizontal_bias="0.5"
+ app:layout_constraintStart_toEndOf="@+id/permNone"
+ app:layout_constraintTop_toBottomOf="@+id/textView">
- <View
- android:id="@+id/view4"
- android:layout_width="1dp"
- android:layout_height="0dp"
- android:background="@color/white_transparent_10"
- app:layout_constraintBottom_toBottomOf="parent"
- app:layout_constraintEnd_toEndOf="@+id/guideline"
- app:layout_constraintStart_toEndOf="@+id/guideline"
- app:layout_constraintTop_toTopOf="parent" />
+ <ImageView
+ android:id="@+id/permMediaImage"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:contentDescription="@string/permission_onboarding_perm_media"
+ app:srcCompat="@drawable/ic_perm_media" />
+ </FrameLayout>
- <Button
- android:id="@+id/grantPermissionButton"
+ <FrameLayout
+ android:id="@+id/permAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
- android:text="@string/permission_ask_again"
+ android:background="@drawable/theme_selection_rounded"
+ android:padding="16dp"
+ app:layout_constraintBottom_toBottomOf="@+id/permMedia"
+ app:layout_constraintEnd_toEndOf="parent"
+ app:layout_constraintStart_toEndOf="@+id/permMedia"
+ app:layout_constraintTop_toTopOf="@+id/permMedia">
+
+ <ImageView
+ android:id="@+id/permAllImage"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:contentDescription="@string/permission_onboarding_perm_all"
+ app:srcCompat="@drawable/ic_perm_all" />
+ </FrameLayout>
+
+ <TextView
+ android:id="@+id/permDescription"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:layout_marginStart="24dp"
+ android:layout_marginEnd="24dp"
+ android:layout_marginBottom="8dp"
+ android:importantForAccessibility="no"
+ android:background="@drawable/permission_selection_rounded"
+ android:padding="8dp"
+ android:text="@string/permission_onboarding_perm_all"
+ android:textAlignment="center"
+ android:textAppearance="@style/VLC.Onboarding.Text"
+ android:textColor="@color/orange500"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintHorizontal_bias="0.5"
- app:layout_constraintStart_toStartOf="@+id/guideline"
- app:layout_constraintTop_toTopOf="parent"
- app:layout_constraintVertical_chainStyle="packed" />
+ app:layout_constraintStart_toStartOf="parent" />
+
</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
More information about the Android
mailing list