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

[Note: Also reported in #3193 -- see additional videos in that issue.]

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.

[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 #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

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?

[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

[TanishMoral11]

Hey @anandwana001, Can You Please Assign This Issue To Me.

[adhiamboperes]

@TanishMoral11, assigned.

[TanishMoral11]

Hey @adhiamboperes ,

I want to share the approach I'm planning to take for this issue, and I would appreciate your feedback on whether it is correct:

splash_image.xml:
I will create a new layer-list drawable, which includes:

A background color (@color/oppiaPrimaryLight)
The splash image (@drawable/splash_page) centered.

splash_page.xml:
I plan to modify the path data for the splash image, and I will remove the old clip-path.

styles.xml:
I will update the SplashScreenTheme to reference the new splash_image drawable, and set adjustViewBounds to true to handle different screen sizes.

Can you please confirm if this approach is correct, or suggest any changes I should make?

Thank you!

[adhiamboperes]

@TanishMoral11, I think splash_page is a vector that is generated a green bg + @drawable/full_oppia_logo. It maybe thage you need to completely replace the splash_page with the new drawable you describe. Could you please try it out and let us know.

[TanishMoral11]

@adhiamboperes PTAL #5555