App Bar disapears in "Share Dialog"

[Sputnick85]

Actual behaviour

The App Bar in this dialogue disapers and apperas while making changes in the Window.

• Selecting a File to share
  

• Choosing the Link Symbole
  

• the App Bar is not realy present(red box)

• the back arrow is pesent but in this specific case hard to see(yellow circle)

• choosing the "ShareLink" option
  

• in the background the App Bar is present again(red circle)

• Choosing "CopyLink"
  

• the App Bar disapers again, back arrow is still present(red circle)

• deactivating the share permission again
  

• the AppBar is present again(red circle)
  

Expected behaviour

The App Bar should be presant all the time.

Steps to reproduce

1. Select a file to share via Link
2. now the AppBar is gone
3. the App Bar will apear again if you toggle the "share checkbox"
4. if you turn the Display off and on again the AppBar will disapear again

Environment data

Android version:
8.0.0
Device model:
Samsung Galaxy S8
Stock or customized system:
Stock
Nextcloud app version:
3.2.1
Nextcloud server version:
13.0.5

[AndyScherzinger]

There is indeed an UX here which is rather about the bar icons not being very easy to seee depending on the image.

The App Bar should be presant all the time.

The app bar is transparent for images which is on purpose so the issue is rather about not being able to easily spot the controls within the bar. We'll have to think about how this can be improved.

Any ideas/comments @tobiasKaminsky @nextcloud/designers ?

[tobiasKaminsky]

The latest image shows the app bar although it is an image, so this should be easy to fix, I hope.
Regarding the other one, I guess we need to use something like this https://developer.android.com/training/material/palette-colors:

• limit the bitmap to the area where the "<-" back arrow is located
• get e.g. dominantSwatch (https://developer.android.com/reference/android/support/v7/graphics/Palette.html#getDominantSwatch())
• toggle white/black/even another color depending on color above

[AndyScherzinger]

Using palettes is one thing I also thought about while this will generate the values based on the whole image so it'll be quite okay but will still leave us with edge cases (which I think we need to live with). It works quite fine if:

limit the bitmap to the area where the "<-" back arrow is located

but that might be really tricky to do.

[tobiasKaminsky]

It does not need to be pixel perfect, I think.

Here we should get a rough size, and knowing that it start from top-left corner, we can extract an area.

android/src/main/java/com/owncloud/android/ui/activity/ToolbarActivity.java

Lines 89 to 91 in 4f7fcf2

	if (toolbar.getNavigationIcon() != null) {
	ThemeUtils.tintDrawable(toolbar.getNavigationIcon(), fontColor);
	}

(in example above, it would be enough to know that this area is a dark green (tree) and therefore tint the arrow white)

[AndyScherzinger]

(in example above, it would be enough to know that this area is a dark green (tree) and therefore tint the arrow white)

Sounds good to me 👍

[jancborchardt]

Oh cool, so making the arrow black or white depending on the image background would be possible?

Another possibility is also to do it similar to Netflix, what seems to be:

• Having the icons in white always, and a very slight dark shadow maybe
• A short fade of slightly transparent dark on the top to transparency further down
  
  Basically any photo viewer app also does this. And that also usually works with every kind of image.

What’s important for when the bar is visible (and intented to be visible) is that all the icons and text have the same color. Either all black or all white. There’s some screenshots where everything is black but the back arrow is white.

[stale]

This request did not receive an update in the last 4 weeks. Please take a look again and update the issue with new details, otherwise the issue will be automatically closed in 2 weeks. Thank you!

[jancborchardt]

Issue is still current, as is my feedback above. :) Several options (which are mutually exclusive):

• The white back arrow gets a slight drop shadow
• The screen gets a short fade from dark to transparent on the top, as shown in the Netflix screenshot above
• The back arrow gets a circle around it for better visibility (least good looking option)

[tobiasKaminsky]

• The white back arrow gets a slight drop shadow

If I provide you with the svg image for this arrow, could you add this?

[jancborchardt]

@tobiasKaminsky sure. :) Meanwhile on the server we do this via CSS – it’s not possible to do it programmatically on Android?

[tobiasKaminsky]

If I provide you with the svg image for this arrow, could you add this?

@jancborchardt can you do this for us? ❤️

[AndyScherzinger]

@jancborchardt @tobiasKaminsky I created a PR adding a gradient, please review, if fine by you (gradient darkness can be discussed of course) than we don't need a drop-shadowed-back-arrow :)

For screenshots see #5634