Splash Screen Stretched

[anshbajpai]

Describe the bug Splash screen is displayed when a user opens the app, on small screen devices the splash screen is working as expected, but on large screen devices, the splash screen is getting stretched and doesn't work as expected.

To Reproduce Steps to reproduce the behavior:

1. Go to the Oppia app
2. Click on the icon
3. If your device screen is more than 6 inch
4. See splash screen getting stretched

Expected behavior The splash screen should be displayed in the same aspect ratio as needed.

Screenshots Expected Behaviour

Actual Behaviour

Device

• OnePlus 7 Pro
• Android 10.0

The logo should be fixed as per device width:

• Mobile (Portrait, Landscape)
• Tablet (Portrait, Landscape)

[anshbajpai]

Hi , i want to work on this issue

[chrk2205]

@anshbajpai did you signed the CLA?? https://github.com/oppia/oppia-android/wiki

[anshbajpai]

Yeah, I have signed the CLA now.

[anandwana001]

@anshbajpai Suggesting to fill the Contributor survey as well to get an onboarding mentor assigned to get started with the contribution. https://github.com/oppia/oppia-android/wiki#onboarding-instructions

[anshbajpai]

@anandwana001 I have completed the survey now

[anandwana001]

unassigning as no further update.

[ArpitShukIa]

I would like to work on this. Assign to me plz.

[vivaansahai]

Hi, I would like to work on this issue. Please assign me.

[adhiamboperes]

Hi, I would like to work on this issue. Please assign me.

Hi @vivaansahai, I have assigned this issue to you.

[YesShubham01]

Can anyone describe me ... where can i find code for this splash screen?

[adhiamboperes]

Can anyone describe me ... where can i find code for this splash screen?

Hey @YesShubham01, are you attempting to work on this issue? It is currently assigned to @vivaansahai. You can look for a different issue to work on.

[vivaansahai]

@YesShubham01 you can get yourself assigned on this issue.

[masclot]

I looked into this. I could reproduce the issue on a Pixel 4XL emulator running Api 28, but not with Api 33. It seems there are two splash screens: splash_activity.xml and splash_page.xml.

splash_page.xml is a vector drawable and installed as a window background of SplashActivity.kt IMO it always stretches, but the stretch is only obvious in screens with 'non-standard' aspect ratios. It is the classic way of building splash screens. It does not show in Api 33.

splash_activity.xml is a View and does not stretch. It shows on top of/ instead of splash_page.xml once the activity View is created. This View does not stretch. AFAICT its purpose is just to show a label with the flavor of the apk.

Since splash_page stretches and splash_activity does not, depending on screen aspect ratio, one can see the transition from one to the other as the Oppia text moves/resizes. This can be very fast in the emulators I tried.

Unfortunately I don't know how to prevent stretching using a vector drawable in a background. Using a bitmap would fix it I think, but we would need a bitmap for every resolution and splash_activity.xml would need to be changed as well.

However, instead of that I would suggest moving to android's splash screen Api: https://developer.android.com/develop/ui/views/launch/splash-screen and find another way of showing the apk flavor.

[BenHenning]

I think you've fully identified the set of issues @masclot. I also couldn't think of a way to do this that didn't involve using bitmaps which is why earlier approaches ended up not working (see https://github.com/oppia/oppia-android/pull/2894#issuecomment-806331393). My current assumption is that we'll need to use bitmap drawables, but I wanted to do this via a build-time generation of the images from the vector drawable to avoid needing to add a bunch of binary files to the main repository (the different build flavors could easily be added to this approach, too, by having separate vector drawables to reference).

I wasn't aware of the splash screen API--that's a really nice idea. While it does exist in compat form (https://developer.android.com/reference/kotlin/androidx/core/splashscreen/SplashScreen) it doesn't have backward compatibility for the animations, which is unfortunate. I think what we could do is:

• Migrate to the AndroidX compat splash screen
• Add new vector drawables for each type of splash screen (based on build flavor)
• Add animated versions of those drawables
• Set up the new splash screen with both drawables (where the animated ones are locked to API 31+)
• Remove the old splash assets & logic

This will presumably require some work from our design team, but it's probably the most future-proof approach and will still let us have a nice looking splash without any jumping or, hopefully, distortion.

[supreme96]

@BenHenning Can we make smaller sub tasks for the above described approach? I think I can take ownership of one of them as a starter issue?

[BenHenning]

@BenHenning Can we make smaller sub tasks for the above described approach? I think I can take ownership of one of them as a starter issue?

@supreme96 I think that's a nice suggestion. I think the MVP for this, however, would be everything except the animated drawable (since migrating the splash screen is more or less an "all or nothing" exercise).

[adityabarodiya]

I want to work on this issue, please assign this issue to me.

[HarshJainofficial]

Please assign this to me i definitely very curious to work on this project.

[SidharthMudgil]

@BenHenning Hi, I have found 1 fix for this, tell me will it be ok? if Yes, please assign me this

Output

K20

https://user-images.githubusercontent.com/68889544/219314965-8ee33191-ceee-4ed5-8359-72569bb5169d.mp4

Realme 1

https://user-images.githubusercontent.com/68889544/219322176-c5608bd4-3567-4ab0-b192-65667ba9bbd1.mp4

[BenHenning]

@SidharthMudgil the videos seem to have the same splash screen behavior as the current app (at least in terms of the jumping between the static & dynamic splash pages). Do you have a "before" video to show the stretched behavior without your fix?

[SidharthMudgil]

@BenHenning

https://user-images.githubusercontent.com/68889544/219591272-87d26055-d104-4d29-bcb9-7bdfec3eeff1.mp4

[BenHenning]

@SidharthMudgil thanks! That does look like it's behaving correctly. I can't be certain that the solution is correct without looking at the code (since it depends on what it's doing), but I think you can go ahead and make a PR for this.

[SidharthMudgil]

@BenHenning Sorry, I just checked my solution is similar to https://github.com/oppia/oppia-android/pull/2655 so I think it is not the correct solution.

[manan1979]

can i work on this issue?

[seanlip]

@manan1979 Please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue. Thanks!

[adhiamboperes]

It doesn't seem like @backpackerdeveloper is still working on this issue. Note to other devs: We agreed that the approach taken in https://github.com/oppia/oppia-android/pull/5147 is fine, and there are comments on the PR that need to be addressed for the solution to be complete.

Note: You need to have Bazel set up and running in order to resolve this.

[Cyclotron17]

Hi Team,

I hope you're doing well. I've encountered an issue related to converting dp to sdp in our Android project. After some research, I found a solution that involves using the "sdp" library to make our layout dimensions more adaptable across different screen sizes and resolutions.

To implement this solution, I propose the following changes:

Added "sdp" Library: In the app-level build.gradle file, add the "sdp" library dependency:

in app-level build.gradle add the following dependency implementation 'com.intuit.sdp:sdp-android:1.0.6'

Updated the Layout XML: Modify the layout_width and layout_height attributes in the layout XML file to use sdp:

in the splash_activity.xml file change the width and height as following <ImageView android:id="@+id/splash_oppia_logo" android:layout_width="@dimen/width_228sdp" android:layout_height="@dimen/height_88sdp" android:importantForAccessibility="no" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/logo_top_margin" app:srcCompat="@drawable/full_oppia_logo" /> Define sdp Dimensions: In the "dimens.xml" file in the "res/values" directory to include the sdp dimensions:

228sdp 88sdp

These changes should resolve the issue by making our layout dimensions scalable. Please review and let me know if you have any feedback or concerns.

Thanks, Can you please assign me this issue?

[adhiamboperes]

Hi Team,

I hope you're doing well. I've encountered an issue related to converting dp to sdp in our Android project. After some research, I found a solution that involves using the "sdp" library to make our layout dimensions more adaptable across different screen sizes and resolutions.

To implement this solution, I propose the following changes:

Added "sdp" Library: In the app-level build.gradle file, add the "sdp" library dependency:

in app-level build.gradle add the following dependency implementation 'com.intuit.sdp:sdp-android:1.0.6'

Updated the Layout XML: Modify the layout_width and layout_height attributes in the layout XML file to use sdp:

in the splash_activity.xml file change the width and height as following Define sdp Dimensions: In the "dimens.xml" file in the "res/values" directory to include the sdp dimensions:

<!-- Example dimension for width -->
<dimen name="width_228sdp">228sdp</dimen>

<!-- Example dimension for height -->
<dimen name="height_88sdp">88sdp</dimen>

These changes should resolve the issue by making our layout dimensions scalable. Please review and let me know if you have any feedback or concerns. Thanks, Can you please assign me this issue?

@Cyclotron17, the approach is sound. But as per my previous comment, you also need to add the dependency to bazel, and I have linked a way to do it.

[Cyclotron17]

Hi Team, I hope you're doing well. I've encountered an issue related to converting dp to sdp in our Android project. After some research, I found a solution that involves using the "sdp" library to make our layout dimensions more adaptable across different screen sizes and resolutions. To implement this solution, I propose the following changes: Added "sdp" Library: In the app-level build.gradle file, add the "sdp" library dependency: in app-level build.gradle add the following dependency implementation 'com.intuit.sdp:sdp-android:1.0.6' Updated the Layout XML: Modify the layout_width and layout_height attributes in the layout XML file to use sdp: in the splash_activity.xml file change the width and height as following Define sdp Dimensions: In the "dimens.xml" file in the "res/values" directory to include the sdp dimensions:

<!-- Example dimension for width -->
<dimen name="width_228sdp">228sdp</dimen>

<!-- Example dimension for height -->
<dimen name="height_88sdp">88sdp</dimen>

These changes should resolve the issue by making our layout dimensions scalable. Please review and let me know if you have any feedback or concerns. Thanks, Can you please assign me this issue?

@Cyclotron17, the approach is sound. But as per my previous comment, you also need to add the dependency to bazel, and I have linked a way to do it.

Sure thing, will be adding that as well