UI overhaul to 'slim' down the ui

[newhinton]

I have experimented with etar for some time, and i think it's ui could be improved in subtle ways.

There are many places where text is in bold. This can quickly overwhelm the ui. Generally we can change elements to be less intrusive without loosing its meaning.

Eg:

Monthview:

Screenshot

 (left: current; right: proposal)

Here the day-indicator could be "moved to the back", which highlights the content (the events) even more.

Agenda:

Screenshot

Im sorry about the huge images 

The Agenda also doesnt need bold text to indicate that it is in the future. If an event is not now or in the future, it can have a grey color, which conveys this meaning better since it is directly clear that those items are not important, and therefore "not visible". Bold could be used for an event that is current.

Those two were examples, this is applicable in nearly every view, to some extend.

Also i think rounded color chips &bars would look nice, although im still figuring out what looks best

[jspricke]

Sounds interesting, can you open pull requests so we can try it out?

[newhinton]

Currently i have quite a lot in my working copy, should i seperate them and make mulpile requests? (rounded chips, remove bold, etc)

[jspricke]

depends on how big they are, you can create one PR with everything and we can help you separating them later.

[newhinton]

Agendaday:

732

I think the colorchip can be improved, but i am not sure how right now.

[newhinton]

Monthview:

733

The chips are good, but i need to fix alldayevent rectangles, the text overlaps and looks ugly when they are rounded. Maybe they can stay rectangular.

[Gitsaibot]

It is nice to see that there are people who are willing to improve the ui interface. There are some things you should know when working on the ui:

1. Some colours are not themed and "used" directly in all 3 themes(black, grey, white). So be careful changing colours.
2. Your changes should work on tablets.
3. Do not forget that we support API 19. So we have users with small screens and poor resolution. Recently I created a patch that brings the font size in week view to the same size as in month view. And after that there were people who complained that the font is now too small. Therefore I think if we have the space, we should use it ;)

[newhinton]

I have experimented with card layouts, i think this seperates the elements way better than the simple spacers used in the past. Also the 'Add reminder'-button is way more identifiable

736

edit:

I have experimented quite a lot, the latest version does not have the topbar anymore, and uses a floating action button as save. The cancel button is gone completely. That increases the usable space for the event, even on api19

[newhinton]

I dont know why the card is not the full width on api19, on the latest it has full size

[newhinton]

I also experimented with a new icon, this is the old one converted to svg with inkscape, on a background that is similar to etars "calendar".

[newhinton]

737

I'd like to move 'about' and 'Settings' to the bottom, but that is not that easy

[newhinton]

@Gitsaibot Could you help me with a feature i would like to implement?

I want to be able to select multiple days in monthview, which then get opened together in a weekview. So far i can calculate the start&end, but i have the problem that scrolling the monthview up&down breaks this by triggering 'MotionEvent.ACTION_CANCEL'

How is scrolling handled in the monthview, so that i can set a flag that allows the MonthByWeekAdapter to handle vertical movement?

Also i want to know if what i am doing is in your mind, or if i need to make changes/need to dump stuff.

[newhinton]

740 day/weekview

[Gitsaibot]

I want to be able to select multiple days in monthview, which then get opened together in a weekview

What is the benefit of this ?

How is scrolling handled in the monthview, so that i can set a flag that allows the MonthByWeekAdapter to handle vertical movement?

I'm afraid I don't know that. The code is complicated ;). Personally I think it would be better if the scrolling in the month view was the same as in the week view.

Also i want to know if what i am doing is in your mind, or if i need to make changes/need to dump stuff.

Do you mean this particular change or your others?

[newhinton]

What is the benefit of this ?

It allows to open a detailed view of a given range of days. Sometimes it can be useful to be able to see eg. a weekend or a specific range that is not determined by the weekview. I found it quite useful in the calendarapp that i used before, and tried to replicate it in etar.

I'm afraid I don't know that. The code is complicated ;). Personally I think it would be better if the scrolling in the month view was the same as in the week view.

Oh, i did not want to change how it works :D it just needs to be supressed shortly while a selection is beeing made, because currently if the user moves its finger not perfectly, the selection is canceled. Otherwise i dont want to change it.

Do you mean this particular change or your others?

All changes. I changed quite a lot visually, and some functionality, but i dont now if this is where etar wants to go and if i should continue or make changes. It would be sad to do all the work and not getting anywhere :D

[Gitsaibot]

Basically I agree with all your changes if they do not contain external dependencies. Is your new Etar icon adaptive? It would be interesting if we could use the background for an adaptive icon version.

[newhinton]

Basically I agree with all your changes if they do not contain external dependencies. Is your new Etar icon adaptive? It would be interesting if we could use the background for an adaptive icon version.

That's great! I think it is, do you mean that the homescreen icon uses the same color as set with the theme? i am not sure if that is possible.

Generally i have to cleanup everything, but there are still a few behavioural changes i want to make. Those are:

• [x] When switching to a different app (eg. to view details of an event) the new-event-view is closed and the user is taken back to the last view.

• [ ] It should be configurable what happens when a day in month/weekview is tapped. It should be possible to always go back to either dayview or agendaview (or lastused)

• [x] The backbutton always closes the app when in any view. I think it is better that the backbutton goes back to the default view, and only then close the app fully.

• [ ] The Weekview can be scrolled, but the Timebar to the left should stay fixed to the left, and it should be possible to scroll by a single day (#756 )

and maybe

• [ ] I need to finish implementing multiselect in monthview so that it is possible to select ranges, but this will be a tricky one.

I will upload an apk with all the merges when im done with 1-4 .

[newhinton]

Some screenshots of the current state:

Screenshot

    

This is a debug build with the current changes Etar-Calendar-debug.zip

[ByteHamster]

Basically I agree with all your changes if they do not contain external dependencies. Is your new Etar icon adaptive? It would be interesting if we could use the background for an adaptive icon version.

That's great! I think it is, do you mean that the homescreen icon uses the same color as set with the theme?

Adaptive icons are icons with foreground and background that can be cut to fit any shape (some vendors use round icons, some square).

In case of your icon, it might look good to have the green bar only on the background layer and the borders of the calendar in foreground. This way, launchers can animate some interesting effects :)

I really like your icon proposal. It can be made adaptive and still really similar to the old icon, so it is still recognizable.

[newhinton]

I have a pretty well working example of the multiselect for monthview: #797 There is still a bit to do, but it generally works

[newhinton]

@jspricke @Gitsaibot Any news on what you think of my general changes? I created a branch with all the changes i made. Not everything is finished, and some things need to be rebased&changed according to the current master, but you get a feel for what i am trying to achieve. I can also provide an apk if required.

[BlueDrink9]

I just want to chime in as another user and say your screenshots look great! I'm excited and hopeful that these changes can make it into Etar

[newhinton]

@BlueDrink9 Currently there does not seem to be a lot of progress in overhauling the ui, but if you like i can push my branch where i have merged most of my changes so that you can use them

[BlueDrink9]

I'd love to try them if you can provide an apk (I don't have the build tools set up at the moment)

[newhinton]

@BlueDrink9 I have created a version that contains all the changes i have done. Albeit the new navigation drawer is missing and some stuff still needs to be done. I'd like to hear your feedback! newhinton-Etar-Calendar-debug.zip

[BlueDrink9]

First thing I noticed is that the "pure black night mode" option isn't applying to the main calendar view in your version

[BlueDrink9]

Also, the enter event name at the top when creating a new event is pure white, so the text is hidden

[BlueDrink9]

Is there no way to cancel an event? Pressing back saves the new event same as pressing the save button. I quite like the new save button UI otherwise

[BlueDrink9]

The new event sections look good, but without the bold event name, there is no way to distinguish in the text between the event and the location (in day/week view)

[newhinton]

Is there no way to cancel an event? Pressing back saves the new event same as pressing the save button. I quite like the new save button UI otherwise

yes, this is currently expected, it should dismiss the changes when going back. Noted!

The new event sections look good, but without the bold event name, there is no way to distinguish in the text between the event and the location (in day/week view)

True, i probably should make the location italic. Boldness should not be part of my design-changes, it is just to big for a good looking ui.

First thing I noticed is that the "pure black night mode" option isn't applying to the main calendar view in your version

It looks like the current master also does not support true darkmode in the calendarview, so this is expected at the moment

[BlueDrink9]

That's odd… the fdroid version supports black. Are you sure?

[newhinton]

@Gitsaibot @jspricke Most of my changes are quite far progressed, and in regularly test them. Will they be merged eventually? It get's quite hard to keep them up to date, so i would like to consolidate all the chagnes so that i can work on different features for etar.

Also, etar will have to rethink it's ui at some point, because espeically with Android 12 there are some eements that will be forced to use corners which will divide the ui and look outdated. I think etar deserves a modern look that fits into the android look and feel

[ltguillaume]

I hope this will eventually be pulled, Etar is in dire need of some UI improvements imho.

@jspricke

[SamuXzX]

It's unfortunate Etar has such an old UI, given that it's the only FOSS calendar app I find usable. Any news?

[TecCheck]

Yeah, would be cool to have updates on this topic