New UI / UX [ TV ONLY - DISCUSSION ] (TV layout, keyboard, d-pad...)


#1

This topic is a topic of discussion dedicated to Android TV support.

For GENERAL info about all interfaces (phone, tablet, tv) please use the old dedicated topic on this forum, here: New UI / UX of F-Droid app

@hans, @pserwylo for info.

I think it’s time to have a dedicated topic for Android TV support, as the development will start.

I finished my app, will post some screenshots of what we can do.


#2

On TV, we have to manage the focus and this is the example I created in my app.
A blue rectangle, will show the focus everywhere on the screen.
Of course we can do it differently.
I also put my menu in the top left “<” handle.
By clicking it, my menu is shown on the entire screen, again with focus.
Overscan zone all around the screen.

The menu of F-Droid with 5 “buttons” is simplest than my menu with more than 10 lol.
The F-Droid menu can be put on the left side and does not need a left pane.
I will start the F-Droid dev (already did a mock) and try to change only some important activities.


So my goal is not to create a duplicate of Aptoide layout (nice layout but not easy to have something immediately). Could be done in phase 2…

As I have the experience of converting the app above, I think we should modify F-Droid the same way (approximatively the same layout than F-Droid 1.2.2).


#3

Your comments are welcome :slight_smile:

D-pad will be supported.
Maybe keyboard too.


#4

The Aptoide TV left menu seems fine by me, but your top nav seems to use the space more efficiently. I haven’t owned any kind of TV in over 20 years, so I’m pretty ignorant of the design patterns in modern TVs. I guess it should follow those.

Seems like we want to start with supporting the D-pad and keyboard in the UI we already have, unless that would be hard to do without major changes.

If this will require major changes to the UI, we should probably make a TV “flavor” and keep the UI files separate from the current ones.


#5

I already did a mock for the 2 first main activities, was OK.
Will give my source when a lot will work, to test on emulator TV.

About other activities, not yet adapted: Preferences, collapsed sections in History, Detail, are a bit difficult, but I’ll check. Problem in F-Droid is there is a lot of activities, custom layouts, difficult to quickly know where we are in the screen. Too much similar lists…

Flavor is a possibility but I’ll try to create only one apk, as my app.
Currently, the android box does not recognize my app as a TV app but I have a solution; will try this evening.

Another issue we will have is that normally all texts should be bigger on a TV, more than 14dp…
In my app I managed it by changing the style and the font size in App Preferences, it’s OK.

If you have time, please find a “better” solution for that.
I don’t have a lot of layouts or cutom objects.
We could use “sp” metrics for texts and “dp” for layout sizes… so all is compatible and adapted automatically with the screen resolutions on different devices. “sp” is a “weight” in other tools.

Prepare on your side, a script to find all TV compatible apps, to show only in the interface of F-Droid TV. Normally there is a Leanback category as launcher. We also have to reduce the search list to only tv apps.

Applications not adapted for the TV will not work because there is no visible focus, so it’s impossible to use because there is no visible effects (except for buttons, list scrolled), edittext.


#6

Would be also interesting to have a F-Droid TV repo :sunglasses:


#7

Well thats a cool idea a think off before but i am a totally noob so i are not able to help unfortunable but if i can help on another way for example translating i would be very happy to contribute to this very cool project.


#8

Of course there are several ways (testers, contribute to topics on Gitlab, this forum like find apps for F-Droid… be imaginative).

Check this url: https://f-droid.org/en/contribute/


#9

Yop all,
We will face another problem on Television: Android set-op box not working like a television device.
I saw this problem in my app, but found a solution :slight_smile:
Now I have 2 user interfaces: classic (phone, tablet) and television.
The user can change it on phones, tablets, televisions.

Some screenshots of TV using the phone, tablet interface:


#10

“Would be also interesting to have a F-Droid TV repo”

Update: there are less app for TV.
Even some google apps like Gmail are not well adapted to TV.
So, we can enlarge the repo to applications working well on TV.
Visible focus is wanted but the apps could work with a mouse…
If the menu is a collapsed tool bar, a mouse is needed.
We need to inform the user about this.


#11

Work in progress, some screens.
Rem: bottom navigation bar not yet adapted, not perfect but gives an idea :smile:
Most difficult screen seems to be the detail view.


#12

@hans, @pserwylo

Some news:

  • Main screens are focusable (main activity, detail, installed apps, settings, categories, search app).
  • Issue with the Bottom Navigation Bar not focusable, so unable to select an item in the bar and navigate between screens. Rem: there is a new Google component: Bottom Navigation View.
    I can redo the Navigation Bar of What’s New with ConstraintLayout on the left side but it takes a lot of times. Please tell me.
  • Issue with the text size too small on TV.
    But users can change the overall Display in Huge text in Android Settings.
  • Don’t find how to open/close the expandable list in the app detail (Links, Versions…). I can draw the focus but where are the click events?
  • Still fighting to find a global style for the focus. DONE :slight_smile:
  • In some situation: issue with the API < 16 but on TV the API needed is 17.
    Will try to bypass this problem. DONE partially, I’m on the way, so we could remove the API issue and stay with API 10 :slight_smile:

#13

@hotlittlewhitedog fdroidclient v1.3 now uses minSdkVersion of fourteen, sounds like you should rebase your work on master. That then gives us newer versions of a lot of the libraries, like the bottom nav thing.

As for the various UI widget issues, I can’t think of anything, but I don’t know the UI stuff very well.


#14

I think I’m on 1.3, Nav bar is not focusable so we have to use another component or make it focusable. I found no doc on it. Other problem: the nav bar where accessible from other activities.


#15

This is just so cool


#16

@hans @Matze-M

Huge step, I think I found for the TV layout :blush:

Still some problems to fix but the menu on the left is focusable and all activities accessible.
Overscan OK.
Search button to put above “Latest”.

Screenshots from a tablet with D-Pad.
Rem: the black bottom line with the 3 buttons of navigation should not appear, it’s a status bar of the emulator.


#17

Can i test it already ? :heart_eyes:


#18

I have to fix some issues… and test all the stuff.
We will see if tomorrow night I can give a version.


#19

Looks awesome. :heart_eyes:
And: OMG, Werewolf?! :open_mouth: Downloading right now…


#20

@hotlittlewhitedog that would be so cool