FirebaseUI Auth picker screen hides buttons

[francos]

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:

1. 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.

[samtstern]

@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?

[francos]

Hi @samtstern, thanks for getting back to me about the issue.

I'm using ConstraintLayout version 2.0.0-alpha2.

[samtstern]

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?

[francos]

Sure, I'm not working atm but will try it out tomorrow and let you know.

[francos]

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).

[robapaul88]

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).

[samtstern]

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.

[samtstern]

@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.

[francos]

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

[samtstern]

@FrancoSabadini thanks for following up, can you add a screenshot of what it looks like now?

[francos]

@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).

[samtstern]

@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?

[francos]

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).

[samtstern]

@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!