Design improvements

[COPtimer]

These suggestions are based on @Mygod 's last comment which mostly depended on Android Support Library or third-party design libraries.

In order to make it easier, some improvements were divided into levels with different difficulty.
If you would like to participate in this issue, please comment here. I'll interact with you for further specifications of the design.

Of course shadowsocks has a redesign. Hoping someone could implement that.

---

0. Navigation bar (!important)

Problems: Wrong usage of colouring navigation bar.
The goal of colouring is to make the visual experience more immersive. Beyond all doubt, the whole interface was smothered without exaggeration.

Solution: Reset to the default state. Black is just perfect.

---

1. Navigation drawer

Now:

Problems:

1. Unnecessary image. The guideline doesn't say that it has to be an image there. About 277KB can be saved by removing the hero image.
2. Unnecessary shadow, having too much complicates the interface and lacks focus.

Improved:

---

2. Product icon (Legacy & Play Store only)

Problems: Doesn't follow the guideline completely (Lighting, Shadows, Edge tint and shade).

Solution: I remade a correct one. Here's the download link.

---

3. Status panel

In progress.

---

4. Floating Action Button

Now:

Problems:

1. Floating ACTION Button. Now the fab shows the connection state, not the action of our users can do.
2. The deactivated icon has a too complicated path.

Improved:

---

To be continued.

[Mygod]

I'm not convinced that these are improvements.

1. Having a secondary toolbar in drawer looks weird. Banner in beta branch uses webp instead which only costs ~100kB in apk size.
2. Yours may be correct but there are at least 2 ways yours is inferior:
   a. No adaptive icon support; (see Support for Android O preview #1258 (comment))
   b. No vector drawable/svg support.
3. Status panel is helpful in Global Settings fragment so it's more convenient and consistent to just put one everywhere.

[COPtimer]

@Mygod

1. That is not a toolbar, it's just a coloured block.
2. Those are only applicable to the legacy icon (also in Play Store).
3. Why?

[Mygod]

1. It looks exactly like a Toolbar therefore I will call it a Toolbar;
2. In that case, blame Android studio for not generating good enough legacy icon;
3. You could change settings (including for custom rules) and reapply changes with the status panel.

[COPtimer]

@Mygod

1.There's no action at all... The block is simple enough to express consistency and well-organized structure.
3.That makes sense.

[Mygod]

Oh and about "Wrong usage of colouring navigation bar", source?

[COPtimer]

@Mygod

The guideline doesn't have a specific description of this. But the problem here is very clear and reasonable.
Coloured navigation bar doesn't fit the present structure of shadowsocks. It makes navigation bar more conspicuous, as an opposite consequence of "The goal of colouring is to make the visual experience more immersive."
Related passage: Android's System Bars And Your Interface - Whether And How To Theme

[Mygod]

0 - In this case, we have a persistent bottom bar that justifies this decision (it's technically a translucent navigation bar). And I personally prefer colorful interfaces to boring black navigation bars. Considering Google itself is pretty inconsistent about material design, there are no rights and wrongs on this.

4 - The complex path is for the middle state (busy) between connected and disconnected. See the animation in the latest version.

[Mygod]

Also may I suggest you open separate issues instead of keeping updating this thread?

[Mygod]

I don't see anything needs fixing for now. Please open new issues (separate ones) if you want to keep the conversation going.