firebase
FirebaseUI Auth picker screen hides buttons
Describe your environment
- Android device: Motorola Moto X (2nd Generation)
- Android OS version: 6.0
- Google Play Services version: 14.3.66
- Firebase/Play Services SDK version: 16.0.4
- FirebaseUI version: 4.2.0
Describe the problem:
When opening the auth picker screen with some SVG logo images, some buttons are hidden because there is a lot of empty space inside the scroll view.
Steps to reproduce:
- Start the auth picker activity like this:
startActivityForResult(authUI.createSignInIntentBuilder()
.setAvailableProviders(listOf(GoogleBuilder().build(),
FacebookBuilder().build(),
EmailBuilder().build()))
.setLogo(R.drawable.ic_play)
.setTheme(R.style.AppTheme_NoActionBar)
.setIsSmartLockEnabled(false, false)
.build(), 1)
This is the SVG image I use as the logo:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="50dp"
android:height="50dp"
android:viewportWidth="50"
android:viewportHeight="50">
<path
android:pathData="M25,25m-24,0a24,24 0,1 1,48 0a24,24 0,1 1,-48 0"
android:strokeAlpha="0.5"
android:strokeWidth="1"
android:fillColor="#00000000"
android:strokeColor="#FFFFFF"
android:fillType="evenOdd"
android:fillAlpha="0.5"/>
<path
android:pathData="M25,25m-21.3333,0a21.3333,21.3333 0,1 1,42.6667 0a21.3333,21.3333 0,1 1,-42.6667 0"
android:strokeAlpha="0.2"
android:strokeWidth="1"
android:fillColor="#FFFFFF"
android:fillType="evenOdd"
android:strokeColor="#00000000"
android:fillAlpha="0.2"/>
<path
android:pathData="M31.0013,24.6061C32.0155,25.2661 32.0155,26.3442 31.0013,27.0042L22.8448,32.3062C21.8306,32.9661 21.0001,32.514 21.0001,31.3051L21.0001,20.3051C21.0001,19.0951 21.8306,18.6441 22.8448,19.3041L31.0013,24.6061Z"
android:strokeWidth="1"
android:fillColor="#FFFFFF"
android:fillType="evenOdd"
android:strokeColor="#00000000"/>
</vector>
Observed Results:
-
This happens in version 4.2 and 4.1 of the FirebaseUI SDK, but it doesn't happen on version 4.0.1
-
The problem doesn't happen when a logo is not set (also, some logos don't trigger this issue).
-
This is what the screen looks like using FirebaseUI SDK 4.2:
Expected Results:
The buttons should be at the top of the scroll view and the margin should be outside the scroll view.
@FrancoSabadini thanks for reporting this, and apologies for not responding earlier. I have added this to the 4.3.0 milestone for investigation.
Are you using ConstraintLayout in your app and if so, what version of the dependency are you using?
Hi @samtstern, thanks for getting back to me about the issue.
I'm using ConstraintLayout version 2.0.0-alpha2.
We use com.android.support.constraint:constraint-layout:1.1.3 in this project, I suspect this issue comes from the difference. Would it be possible for you to try downgrading and checking the issue?
Sorry for the delay @samtstern. I tested it with androidx.constraintlayout:constraintlayout:1.1.3 and the issue is still there (notice that I'm using the AndroidX dependency and not the support one you mentioned, although they should be the same).
https://github.com/robapaul88/FirebaseUI-Android/commit/cd293b53a4f7d6ac54ba9fcb1f7ec0ab43979830
This issues only happens while in portrait, and the fix seems to be adding: android:layout_width="wrap_content" android:layout_height="0dp" to the logo ImageView in fui_auth_method_picker_layout.xml (basically redeclaring same layout_widht and layout_height properties from @style/FirebaseUI.AuthMethodPicker.Logo in the xml).
I imported the XML that @FrancoSabadini provided and used it as the logo. I was not able to reproduce this on top of the version-4.3.0-dev branch:
If anyone can reproduce this on top of 4.3.0 (try the SNAPSHOT build if you can!) that would be really helpful. As it stands, I have to pint this to 4.3.1 since I can't repro.
@FrancoSabadini are you still seeing this issue in 4.3.1? Sorry to keep asking but I am having trouble getting it to happen myself which is why I haven't been able to land a fix.
Hey @samtstern, I can confirm that this issue is now fixed on 4.3.1.
However, now the image above the buttons is extremely small :/, which looks very bad.
If you want to confirm both the buttons issue and the image one you can do it in the following emulator:
Name: Pixel_API_25
CPU/ABI: Google Play Intel Atom (x86)
Target: google_apis_playstore [Google Play] (API level 25)
Skin: pixel_silver
SD Card: 512M
fastboot.chosenSnapshotFile:
runtime.network.speed: full
hw.accelerometer: yes
hw.device.name: pixel
hw.lcd.width: 1080
hw.initialOrientation: Portrait
image.androidVersion.api: 25
tag.id: google_apis_playstore
hw.mainKeys: no
hw.camera.front: emulated
avd.ini.displayname: Pixel API 25
hw.gpu.mode: auto
hw.ramSize: 1536
PlayStore.enabled: true
fastboot.forceColdBoot: no
hw.cpu.ncore: 2
hw.keyboard: yes
hw.sensors.proximity: yes
hw.dPad: no
hw.lcd.height: 1920
vm.heapSize: 228
skin.dynamic: yes
hw.device.manufacturer: Google
hw.gps: yes
hw.audioInput: yes
image.sysdir.1: system-images/android-25/google_apis_playstore/x86/
showDeviceFrame: yes
hw.camera.back: virtualscene
AvdId: Pixel_API_25
hw.lcd.density: 420
hw.arc: false
hw.device.hash2: MD5:55acbc835978f326788ed66a5cd4c9a7
fastboot.forceChosenSnapshotBoot: no
fastboot.forceFastBoot: yes
hw.trackBall: no
hw.battery: yes
hw.sdCard: yes
tag.display: Google Play
runtime.network.latency: none
disk.dataPartition.size: 6442450944
hw.sensors.orientation: yes
avd.ini.encoding: UTF-8
hw.gpu.enabled: yes
@FrancoSabadini thanks for following up, can you add a screenshot of what it looks like now?
@samtstern this is what the screen looks like using FirebaseUI version 4.2.1:
And this is what it looks like with FirebaseUI version 4.3.1:
If you open the images side by side you'll notice the logo is smaller on the second one.
This is the image I used for the logo:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="100dp"
android:viewportWidth="50"
android:viewportHeight="50">
<path
android:pathData="M25,25m-24,0a24,24 0,1 1,48 0a24,24 0,1 1,-48 0"
android:strokeAlpha="0.5"
android:strokeWidth="1"
android:fillColor="#00000000"
android:strokeColor="#000000"
android:fillType="evenOdd"
android:fillAlpha="0.5"/>
<path
android:pathData="M25,25m-21.3333,0a21.3333,21.3333 0,1 1,42.6667 0a21.3333,21.3333 0,1 1,-42.6667 0"
android:strokeAlpha="0.2"
android:strokeWidth="1"
android:fillColor="#000000"
android:fillType="evenOdd"
android:strokeColor="#00000000"
android:fillAlpha="0.2"/>
<path
android:pathData="M31.0013,24.6061C32.0155,25.2661 32.0155,26.3442 31.0013,27.0042L22.8448,32.3062C21.8306,32.9661 21.0001,32.514 21.0001,31.3051L21.0001,20.3051C21.0001,19.0951 21.8306,18.6441 22.8448,19.3041L31.0013,24.6061Z"
android:strokeWidth="1"
android:fillColor="#000000"
android:fillType="evenOdd"
android:strokeColor="#00000000"/>
</vector>
These screenshots are from the emulator I mentioned in my previous comment (the Pixel one).
@FrancoSabadini thanks for those screenshots! I can clearly see that the icon got smaller in 4.3.1
It doesn't look like the buttons are hidden/broken in either case though? And the SVG is only 100dp so I actually wouldn't expect it to be much bigger than it was in 4.2.1. Sorry to go in circles here but what's wrong with the 4.2.1 screenshot?
Hey @samtstern, seems like the buttons issue had somehow been fixed in 4.2.1 already, at least for the emulator (unfortunately I no longer have the Moto X2 device anymore so I can't confirm whether it was fixed for it as well).
Not sure what you mean by "what is wrong with the screenshot in 4.2.1?". I think what is wrong now is that in 4.3.1 the image is smaller than it should be, so if I update to that version the app logo will be too small and not look good. Shouldn't the 2 versions be consistent on the size they are showing the logo? (I guess this is a different ticket though).
@FrancoSabadini that all makes sense, I was just surprised to see 4.2.1 looking OK since you reported this issue in 4.2.0 and I didn't fix it.
I agree that they should be a consistent size and I'll look into it!