filippodb
/
SchildiChat-android
mirror of https://github.com/SchildiChat/SchildiChat-android.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding gradient backgrounds to the carousel pages 

- also coverts the carousel pages to constraint layout and makes use of gutters to provide percentage based sizing
This commit is contained in:
Adam Brown 2021-12-15 15:17:48 +00:00
parent a2f780bef4
commit 6929c947b0
9 changed files with 111 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
library/ui-styles/src/main/res/values-sw600dp/dimens.xml
View File

@ -2,4 +2,8 @@
<resources> <resources>
<!-- Navigation Drawer --> <!-- Navigation Drawer -->
<dimen name="navigation_drawer_max_width">400dp</dimen> <dimen name="navigation_drawer_max_width">400dp</dimen>
<!-- Onboarding -->
<item name="ftue_auth_gutter_start_percent" format="float" type="dimen">0.25</item>
<item name="ftue_auth_gutter_end_percent" format="float" type="dimen">0.75</item>
</resources> </resources>

3
library/ui-styles/src/main/res/values/dimens.xml
View File

@ -49,5 +49,6 @@
<dimen name="composer_attachment_margin">1dp</dimen> <dimen name="composer_attachment_margin">1dp</dimen>
<!-- Onboarding --> <!-- Onboarding -->
<dimen name="ftue_auth_gutter">16dp</dimen> <item name="ftue_auth_gutter_start_percent" format="float" type="dimen">0.05</item>
<item name="ftue_auth_gutter_end_percent" format="float" type="dimen">0.95</item>
</resources> </resources>

28
vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthSplashCarouselFragment.kt
View File

@ -16,6 +16,7 @@
package im.vector.app.features.onboarding.ftueauth package im.vector.app.features.onboarding.ftueauth
import android.annotation.SuppressLint
import android.os.Bundle import android.os.Bundle
import android.view.LayoutInflater import android.view.LayoutInflater
import android.view.View import android.view.View
@ -70,22 +71,26 @@ class FtueAuthSplashCarouselFragment : AbstractFtueAuthFragment<FragmentFtueSpla
SplashCarouselState.Item( SplashCarouselState.Item(
stringProvider.getString(R.string.ftue_auth_carousel_1_title), stringProvider.getString(R.string.ftue_auth_carousel_1_title),
stringProvider.getString(R.string.ftue_auth_carousel_1_body), stringProvider.getString(R.string.ftue_auth_carousel_1_body),
R.drawable.onboarding_carousel_conversations R.drawable.onboarding_carousel_conversations,
R.drawable.bg_carousel_page_1
), ),
SplashCarouselState.Item( SplashCarouselState.Item(
stringProvider.getString(R.string.ftue_auth_carousel_2_title), stringProvider.getString(R.string.ftue_auth_carousel_2_title),
stringProvider.getString(R.string.ftue_auth_carousel_2_body), stringProvider.getString(R.string.ftue_auth_carousel_2_body),
R.drawable.onboarding_carousel_ems R.drawable.onboarding_carousel_ems,
R.drawable.bg_carousel_page_2
), ),
SplashCarouselState.Item( SplashCarouselState.Item(
stringProvider.getString(R.string.ftue_auth_carousel_3_title), stringProvider.getString(R.string.ftue_auth_carousel_3_title),
stringProvider.getString(R.string.ftue_auth_carousel_3_body), stringProvider.getString(R.string.ftue_auth_carousel_3_body),
R.drawable.onboarding_carousel_connect R.drawable.onboarding_carousel_connect,
R.drawable.bg_carousel_page_3
), ),
SplashCarouselState.Item( SplashCarouselState.Item(
stringProvider.getString(R.string.ftue_auth_carousel_4_title), stringProvider.getString(R.string.ftue_auth_carousel_4_title),
stringProvider.getString(R.string.ftue_auth_carousel_4_body), stringProvider.getString(R.string.ftue_auth_carousel_4_body),
R.drawable.onboarding_carousel_universal R.drawable.onboarding_carousel_universal,
R.drawable.bg_carousel_page_4
) )
) )
)) ))
@ -97,12 +102,11 @@ class FtueAuthSplashCarouselFragment : AbstractFtueAuthFragment<FragmentFtueSpla
} }
if (BuildConfig.DEBUG || vectorPreferences.developerMode()) { if (BuildConfig.DEBUG || vectorPreferences.developerMode()) {
// views.loginSplashVersion.isVisible = true views.loginSplashVersion.isVisible = true
// @SuppressLint("SetTextI18n") @SuppressLint("SetTextI18n")
// views.loginSplashVersion.text = "Version : ${BuildConfig.VERSION_NAME}\n" + views.loginSplashVersion.text = "Version : ${BuildConfig.VERSION_NAME}#${BuildConfig.BUILD_NUMBER}\n" +
// "Branch: ${BuildConfig.GIT_BRANCH_NAME}\n" + "Branch: ${BuildConfig.GIT_BRANCH_NAME}"
// "Build: ${BuildConfig.BUILD_NUMBER}" views.loginSplashVersion.debouncedClicks { navigator.openDebug(requireContext()) }
// views.loginSplashVersion.debouncedClicks { navigator.openDebug(requireContext()) }
} }
} }
@ -145,7 +149,8 @@ data class SplashCarouselState(
data class Item( data class Item(
val title: String, val title: String,
val body: String, val body: String,
@DrawableRes val image: Int @DrawableRes val image: Int,
@DrawableRes val pageBackground: Int
) )
} }
@ -167,6 +172,7 @@ abstract class SplashCarouselItem : VectorEpoxyModel<SplashCarouselItem.Holder>(
lateinit var item: SplashCarouselState.Item lateinit var item: SplashCarouselState.Item
override fun bind(holder: Holder) { override fun bind(holder: Holder) {
holder.view.setBackgroundResource(item.pageBackground)
holder.image.setImageResource(item.image) holder.image.setImageResource(item.image)
holder.title.text = item.title holder.title.text = item.title
holder.body.text = item.body holder.body.text = item.body

6
vector/src/main/res/drawable/bg_carousel_page_1.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:endColor="#3372C7DA"
android:startColor="#33BBE7CF" />
</shape>

6
vector/src/main/res/drawable/bg_carousel_page_2.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:endColor="#33B972DA"
android:startColor="#3372C7DA" />
</shape>

6
vector/src/main/res/drawable/bg_carousel_page_3.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:endColor="#330DBD8B"
android:startColor="#33B972DA" />
</shape>

6
vector/src/main/res/drawable/bg_carousel_page_4.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:endColor="#33BBE7CF"
android:startColor="#330DBD8B" />
</shape>

25
vector/src/main/res/layout/fragment_ftue_splash_carousel.xml
View File

@ -4,18 +4,19 @@
xmlns:tools="http://schemas.android.com/tools" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:background="?android:colorBackground" android:background="@null">
android:paddingTop="@dimen/layout_vertical_margin"
android:paddingBottom="@dimen/layout_vertical_margin">
<androidx.viewpager2.widget.ViewPager2 <androidx.viewpager2.widget.ViewPager2
android:id="@+id/splashCarousel" android:id="@+id/splashCarousel"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="0dp" android:layout_height="match_parent" />
app:layout_constraintBottom_toTopOf="@id/loginSplashSubmit"
app:layout_constraintHeight_percent="0.65" <androidx.constraintlayout.widget.Guideline
app:layout_constraintTop_toTopOf="parent" android:id="@+id/splashCarouselFloatingSection"
app:layout_constraintVertical_bias="0" /> android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.65" />
<com.google.android.material.tabs.TabLayout <com.google.android.material.tabs.TabLayout
android:id="@+id/carouselIndicator" android:id="@+id/carouselIndicator"
@ -23,7 +24,7 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:background="@null" android:background="@null"
app:layout_constraintBottom_toTopOf="@id/loginSplashButtonsSpace" app:layout_constraintBottom_toTopOf="@id/loginSplashButtonsSpace"
app:layout_constraintTop_toBottomOf="@id/splashCarousel" app:layout_constraintTop_toBottomOf="@id/splashCarouselFloatingSection"
app:layout_constraintVertical_chainStyle="spread" app:layout_constraintVertical_chainStyle="spread"
app:tabBackground="@drawable/indicator_onboarding_carousel_selector" app:tabBackground="@drawable/indicator_onboarding_carousel_selector"
app:tabGravity="center" app:tabGravity="center"
@ -36,14 +37,14 @@
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="match_parent" android:layout_height="match_parent"
android:orientation="vertical" android:orientation="vertical"
app:layout_constraintGuide_begin="@dimen/ftue_auth_gutter" /> app:layout_constraintGuide_percent="@dimen/ftue_auth_gutter_start_percent" />
<androidx.constraintlayout.widget.Guideline <androidx.constraintlayout.widget.Guideline
android:id="@+id/splashCarouselGutterEnd" android:id="@+id/splashCarouselGutterEnd"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="match_parent" android:layout_height="match_parent"
android:orientation="vertical" android:orientation="vertical"
app:layout_constraintGuide_end="@dimen/ftue_auth_gutter" /> app:layout_constraintGuide_percent="@dimen/ftue_auth_gutter_end_percent" />
<Space <Space
android:id="@+id/loginSplashButtonsSpace" android:id="@+id/loginSplashButtonsSpace"
@ -93,7 +94,7 @@
<TextView <TextView
android:id="@+id/loginSplashVersion" android:id="@+id/loginSplashVersion"
style="@style/Widget.Vector.TextView.Caption" style="@style/Widget.Vector.TextView.Micro"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:drawablePadding="12dp" android:drawablePadding="12dp"

64
vector/src/main/res/layout/item_splash_carousel.xml
View File

@ -1,22 +1,41 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent">
android:orientation="vertical"
android:paddingStart="@dimen/ftue_auth_gutter" <androidx.constraintlayout.widget.Guideline
android:paddingEnd="@dimen/ftue_auth_gutter"> android:id="@+id/splashCarouselGutterStart"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="@dimen/ftue_auth_gutter_start_percent" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/splashCarouselGutterEnd"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="@dimen/ftue_auth_gutter_end_percent" />
<Space <Space
android:id="@+id/carousel_item_top_space"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="0dp" android:layout_height="0dp"
android:layout_weight="0.1" /> app:layout_constraintBottom_toTopOf="@id/carousel_item_image_container"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout <FrameLayout
android:layout_width="match_parent" android:id="@+id/carousel_item_image_container"
android:layout_width="0dp"
android:layout_height="0dp" android:layout_height="0dp"
android:layout_weight="1" android:layout_gravity="center"
android:layout_gravity="center"> app:layout_constraintBottom_toTopOf="@id/carousel_item_image_bottom_space"
app:layout_constraintEnd_toEndOf="@id/splashCarouselGutterEnd"
app:layout_constraintStart_toStartOf="@id/splashCarouselGutterStart"
app:layout_constraintTop_toBottomOf="@id/carousel_item_top_space">
<ImageView <ImageView
android:id="@+id/carousel_item_image" android:id="@+id/carousel_item_image"
@ -29,27 +48,46 @@
</FrameLayout> </FrameLayout>
<Space <Space
android:id="@+id/carousel_item_image_bottom_space"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="0dp" android:layout_height="0dp"
android:layout_weight="0.05" /> android:layout_weight="0.05"
app:layout_constraintBottom_toTopOf="@id/carousel_item_title"
app:layout_constraintHeight_percent="0.05"
app:layout_constraintTop_toBottomOf="@id/carousel_item_image_container" />
<TextView <TextView
android:id="@+id/carousel_item_title" android:id="@+id/carousel_item_title"
style="@style/Widget.Vector.TextView.Title" style="@style/Widget.Vector.TextView.Title"
android:layout_width="match_parent" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center" android:gravity="center"
android:textColor="?vctr_content_primary" android:textColor="?vctr_content_primary"
app:layout_constraintBottom_toTopOf="@id/carousel_item_body"
app:layout_constraintEnd_toEndOf="@id/splashCarouselGutterEnd"
app:layout_constraintStart_toStartOf="@id/splashCarouselGutterStart"
app:layout_constraintTop_toBottomOf="@id/carousel_item_image_bottom_space"
tools:text="Login version" /> tools:text="Login version" />
<TextView <TextView
android:id="@+id/carousel_item_body" android:id="@+id/carousel_item_body"
style="@style/Widget.Vector.TextView.Subtitle" style="@style/Widget.Vector.TextView.Subtitle"
android:layout_width="match_parent" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="8dp" android:layout_marginTop="8dp"
android:gravity="center" android:gravity="center"
android:textColor="?vctr_content_secondary" android:textColor="?vctr_content_secondary"
app:layout_constraintBottom_toTopOf="@id/splashCarouselFloatingSection"
app:layout_constraintEnd_toEndOf="@id/splashCarouselGutterEnd"
app:layout_constraintStart_toStartOf="@id/splashCarouselGutterStart"
app:layout_constraintTop_toBottomOf="@id/carousel_item_title"
tools:text="Login version" /> tools:text="Login version" />
</LinearLayout> <androidx.constraintlayout.widget.Guideline
android:id="@+id/splashCarouselFloatingSection"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.65" />
</androidx.constraintlayout.widget.ConstraintLayout>