fix: Improve drawer header #564 #567

tanmayrauth · 2019-12-22T16:12:04Z

Fixes #564

Changes: UI Fix for Navigation drawer: Adjusted proper padding and app name. Removed unwanted Views.

Screenshots for the change:

adityastic · 2019-12-22T17:08:36Z

Great @tanmayrauth, it would be better if you could change the design a bit. We can have a taller header with some nice interface

tanmayrauth · 2019-12-22T18:28:01Z

Do you have any idea ? For now i had this design in my mind since this one is simple and better than what we have now.

adityastic · 2019-12-22T20:50:33Z

Do you have any idea ? For now i had this design in my mind since this one is simple and better than what we have now.

No tanmay, didn't think it through quite yet. Maybe some background like a ripple effect with the badge icon as the center of the ripple?

tanmayrauth · 2019-12-23T03:27:56Z

Do you have any idea ? For now i had this design in my mind since this one is simple and better than what we have now.

No tanmay, didn't think it through quite yet. Maybe some background like a ripple effect with the badge icon as the center of the ripple?

Thanks for suggestion. I will get the background added.

tanmayrauth · 2019-12-25T14:19:53Z

@adityastic I have added background for the header. Please take a look, if it works then we can get it merged :)

adityastic · 2019-12-25T14:28:15Z

@tanmayrauth we don't work with pngs anymore. Let's get a vector, and also the effect is not what we discussed. Please check the changes

tanmayrauth · 2019-12-25T14:41:09Z

I will make modification for the vector.
But for ripple effect, i guess this won't work because the image might get shifted on different device sizes and would appear bad.

adityastic · 2019-12-25T15:05:30Z

@tanmayrauth not if you also include the app icon in the background as well

tanmayrauth · 2019-12-25T15:24:25Z

That will require photoshop skills i guess. Sorry but m not good in it.
Let me search for some better image for background

tanmayrauth · 2019-12-25T16:45:13Z

@adityastic Please take a look

adityastic · 2019-12-25T16:52:08Z

@tanmayrauth let's make something more creative. Those ripples don't match the app scheme

adityastic · 2019-12-25T17:01:46Z

Use this and remove the badge magic icon from the header completely. Use a nice downloadable font to write Badge Magic on the header

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="1920dp"
    android:height="959.9dp"
    android:viewportWidth="1920"
    android:viewportHeight="959.9">
    <path
        android:fillColor="#FF1F1F"
        android:pathData="M0,0h1920v960h-1920z" />
    <path
        android:fillColor="#FF3831"
        android:pathData="M583.2,847c-131.2,-26.2 -268.1,-38.6 -402.4,-23.3c-61.4,6.8 -122,19.9 -180.8,40.1V960h1012.6c-139.1,-39.8 -277,-81.7 -417.1,-110.6C591.4,848.5 587.3,847.8 583.2,847z" />
    <path
        android:fillColor="#FF4A42"
        android:pathData="M1920,0H0v863.8c58.8,-20.2 119.4,-33.4 180.8,-40.2c134.3,-15.2 271.2,-2.9 402.4,23.3c4.1,0.8 8.2,1.7 12.2,2.4c140.2,28.8 278,70.8 417.1,110.6H1920V0z" />
    <path
        android:fillColor="#FF5952"
        android:pathData="M574.1,697.2c3.8,1 7.7,2 11.4,3c235.4,63 466.4,160.2 712.2,211.9c209,43.9 419.4,35 622.3,-12.2V0H0v689.9c62.8,-21.1 127.8,-33.2 193.3,-37.1C322.1,644.9 450.8,665 574.1,697.2z" />
    <path
        android:fillColor="#FF6763"
        android:pathData="M0,0v515.3c66.7,-22.1 136.2,-32.8 205.7,-33.2c123.4,-1 243.8,27.2 359.2,65.4c3.6,1.2 7.1,2.4 10.7,3.6c220.3,74.4 438.8,175.3 674.9,230.5c224,52.4 451.6,41.3 669.5,-15.1V0H0z" />
    <path
        android:fillColor="#FF7373"
        android:pathData="M218.2,311.3c117.8,7.2 230.3,42.2 337.6,86.5c3.4,1.3 6.6,2.8 10,4.1c205.2,85.9 411.2,190.2 637.6,249.2c238.6,62.2 484.1,49 716.8,-17.8V0H0v339.8C70.8,316.3 144.7,306.8 218.2,311.3z" />
    <path
        android:fillColor="#FF6660"
        android:pathData="M1920,0H0v163.6c74.8,-25.1 153.2,-33 230.6,-23C343,155 447.2,197.8 546.6,248c3.1,1.6 6.1,3.1 9.2,4.7c190.1,97.3 383.6,205.1 600.4,267.8c252.6,73.2 517,58.8 763.9,-19.9V0H1920z" />
    <path
        android:fillColor="#FF574E"
        android:pathData="M545.9,103.6c175,108.8 356,219.6 563,286.4c250.3,80.9 517.6,73 765.5,-6.4c15.4,-4.9 30.5,-10.1 45.7,-15.5V0H345.7c67.2,25.6 130.4,60.7 191.6,98.4C540.2,100.1 543,101.9 545.9,103.6z" />
    <path
        android:fillColor="#FF473B"
        android:pathData="M1920,0H597.6c141.7,103 292.2,197.4 464.2,259.4c230.2,83 480,89.6 714,25.3c49,-13.4 97.3,-30.2 144.4,-50V0H1920z" />
    <path
        android:fillColor="#FF3227"
        android:pathData="M1677,185.8c56.6,-12.7 112.3,-30.4 166.3,-52.6c26,-10.7 51.6,-22.6 76.7,-35.4V0H772.1c75.5,50 155.6,93.8 242.5,128.9C1224.5,213.7 1457,235.3 1677,185.8z" />
    <path
        android:fillColor="#FF0F0F"
        android:pathData="M1578.4,86.9C1668.7,71.8 1757,42.4 1838.5,0H970.9C1160.2,85.2 1373.6,121.2 1578.4,86.9z" />
</vector>

adityastic · 2019-12-25T17:02:22Z

Also, make the header size larger, the way it was originally

…-android into header-fix

tanmayrauth · 2019-12-28T08:52:40Z

@adityastic Please take a look now. I have used your provided vector.

adityastic · 2019-12-29T17:14:25Z

app/src/main/res/layout/nav_header_drawer.xml

-    <View
-        android:layout_width="match_parent"
-        android:layout_height="24dp" />
+        android:fontFamily="cursive"


use a downloadable font, Open Sans Semi Bold

adityastic · 2019-12-29T17:14:53Z

app/src/main/res/layout/nav_header_drawer.xml

@@ -3,23 +3,22 @@
    xmlns:app="http://schemas.android.com/apk/res-auto"


Replace the file with

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" android:src="@drawable/ic_header_background" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:fontFamily="@font/open_sans_semibold" android:paddingTop="@dimen/nav_header_padding" android:text="@string/app_name" android:textAlignment="center" android:textAllCaps="false" android:textAppearance="@style/TextAppearance.AppCompat.Large" android:textColor="@color/drawer_header_title" android:textSize="@dimen/drawer_header_text_size" android:textStyle="bold" android:typeface="serif" /> </RelativeLayout>

adityastic · 2019-12-29T17:15:33Z

app/src/main/res/values/colors.xml

@@ -11,5 +11,6 @@

    <color name="md_grey_400">#BDBDBD</color>
    <color name="dividerColor">#e0e0e0</color>
+    <color name="header_name">#000000</color>


Suggested change

<color name="header_name">#000000</color>

<color name="drawer_header_title">#fffff</color>

adityastic · 2019-12-29T17:16:10Z

app/src/main/res/values/dimens.xml

@@ -24,7 +24,8 @@
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="nav_header_vertical_spacing">8dp</dimen>
-    <dimen name="nav_header_height">176dp</dimen>
+    <dimen name="nav_header_height">120dp</dimen>


remove both and add

<dimen name="drawer_header_text_size">30sp</dimen>

adityastic · 2019-12-29T17:17:47Z

@tanmayrauth also rename the title of this pr to, "fix: improve drawer header"

…-android into header-fix

tanmayrauth · 2019-12-30T13:05:33Z

I have made all the above suggested changes. Hope it works this time :)

tanmayrauth · 2019-12-30T13:06:07Z

@adityastic Please take a look

adityastic

Looks good for the moment

Header fix #564

e357b24

fix #564

3ea5bda

fix $546

a0ddb34

tanmayrauth added 4 commits December 28, 2019 13:24

Merge branch 'development' of https://github.com/fossasia/badge-magic…

f474683

…-android into header-fix

fix #564

21c567e

fix #564

6144c40

fix #564

718799d

adityastic requested changes Dec 29, 2019

View reviewed changes

Merge branch 'development' of https://github.com/fossasia/badge-magic…

cd93a64

…-android into header-fix

tanmayrauth changed the title ~~Header fix #564~~ fix: Header UI fix #564 Dec 30, 2019

auto-label bot added the fix label Dec 30, 2019

tanmayrauth changed the title ~~fix: Header UI fix #564~~ fix: Improve drawer header #564 Dec 30, 2019

fix #564

17a3f03

tanmayrauth requested a review from adityastic December 30, 2019 13:11

adityastic approved these changes Dec 30, 2019

View reviewed changes

adityastic merged commit 965939f into fossasia:development Dec 30, 2019

tanmayrauth deleted the header-fix branch December 30, 2019 17:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Improve drawer header #564 #567

fix: Improve drawer header #564 #567

tanmayrauth commented Dec 22, 2019 •

edited

adityastic commented Dec 22, 2019

tanmayrauth commented Dec 22, 2019

adityastic commented Dec 22, 2019

tanmayrauth commented Dec 23, 2019

tanmayrauth commented Dec 25, 2019

adityastic commented Dec 25, 2019

tanmayrauth commented Dec 25, 2019

adityastic commented Dec 25, 2019

tanmayrauth commented Dec 25, 2019 •

edited

tanmayrauth commented Dec 25, 2019

adityastic commented Dec 25, 2019

adityastic commented Dec 25, 2019

adityastic commented Dec 25, 2019

tanmayrauth commented Dec 28, 2019

adityastic Dec 29, 2019

adityastic Dec 29, 2019

adityastic Dec 29, 2019

adityastic Dec 29, 2019

adityastic commented Dec 29, 2019

tanmayrauth commented Dec 30, 2019

tanmayrauth commented Dec 30, 2019

adityastic left a comment

		@@ -3,23 +3,22 @@
		xmlns:app="http://schemas.android.com/apk/res-auto"

	<color name="header_name">#000000</color>
	<color name="drawer_header_title">#fffff</color>

fix: Improve drawer header #564 #567

fix: Improve drawer header #564 #567

Conversation

tanmayrauth commented Dec 22, 2019 • edited

adityastic commented Dec 22, 2019

tanmayrauth commented Dec 22, 2019

adityastic commented Dec 22, 2019

tanmayrauth commented Dec 23, 2019

tanmayrauth commented Dec 25, 2019

adityastic commented Dec 25, 2019

tanmayrauth commented Dec 25, 2019

adityastic commented Dec 25, 2019

tanmayrauth commented Dec 25, 2019 • edited

tanmayrauth commented Dec 25, 2019

adityastic commented Dec 25, 2019

adityastic commented Dec 25, 2019

adityastic commented Dec 25, 2019

tanmayrauth commented Dec 28, 2019

adityastic Dec 29, 2019

Choose a reason for hiding this comment

adityastic Dec 29, 2019

Choose a reason for hiding this comment

adityastic Dec 29, 2019

Choose a reason for hiding this comment

adityastic Dec 29, 2019

Choose a reason for hiding this comment

adityastic commented Dec 29, 2019

tanmayrauth commented Dec 30, 2019

tanmayrauth commented Dec 30, 2019

adityastic left a comment

Choose a reason for hiding this comment

tanmayrauth commented Dec 22, 2019 •

edited

tanmayrauth commented Dec 25, 2019 •

edited