Rework drawer header, following Figma: more compact to let more space for spaces

This commit is contained in:
Benoit Marty 2021-06-15 12:14:30 +02:00
parent d892a8fe00
commit f411d9954e
5 changed files with 39 additions and 57 deletions

View File

@ -12,30 +12,16 @@
android:id="@+id/homeDrawerHeader" android:id="@+id/homeDrawerHeader"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:background="?vctr_home_drawer_header_background"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"> app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/homeDrawerHeaderDebugView"
style="@style/VectorDebug"
android:layout_width="@dimen/layout_touch_size"
android:layout_height="@dimen/layout_touch_size"
android:importantForAccessibility="no"
android:scaleType="center"
android:src="@drawable/ic_settings_x"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="?colorPrimary"
tools:ignore="MissingPrefix" />
<ImageView <ImageView
android:id="@+id/homeDrawerHeaderAvatarView" android:id="@+id/homeDrawerHeaderAvatarView"
android:layout_width="50dp" android:layout_width="40dp"
android:layout_height="50dp" android:layout_height="40dp"
android:layout_marginStart="@dimen/layout_horizontal_margin" android:layout_marginStart="@dimen/layout_horizontal_margin"
android:layout_marginTop="24dp" android:layout_marginTop="@dimen/layout_vertical_margin"
android:contentDescription="@string/avatar" android:contentDescription="@string/avatar"
android:transitionName="profile" android:transitionName="profile"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
@ -44,66 +30,58 @@
<TextView <TextView
android:id="@+id/homeDrawerUsernameView" android:id="@+id/homeDrawerUsernameView"
style="@style/VectorTextView.Subtitle" style="@style/VectorTextView.Body"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="16dp" android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" android:layout_marginEnd="8dp"
android:maxLines="1" android:maxLines="1"
android:singleLine="true" android:singleLine="true"
android:textColor="?vctr_content_primary" android:textColor="?vctr_content_primary"
app:layout_constraintBottom_toTopOf="@+id/homeDrawerUserIdView"
app:layout_constraintEnd_toStartOf="@+id/homeDrawerQRCodeButton" app:layout_constraintEnd_toStartOf="@+id/homeDrawerQRCodeButton"
app:layout_constraintStart_toStartOf="@+id/homeDrawerHeaderAvatarView" app:layout_constraintStart_toEndOf="@+id/homeDrawerHeaderAvatarView"
app:layout_constraintTop_toBottomOf="@+id/homeDrawerHeaderAvatarView" app:layout_constraintTop_toTopOf="@+id/homeDrawerHeaderAvatarView"
app:layout_constraintVertical_chainStyle="packed"
tools:text="@sample/users.json/data/displayName" /> tools:text="@sample/users.json/data/displayName" />
<TextView <TextView
android:id="@+id/homeDrawerUserIdView" android:id="@+id/homeDrawerUserIdView"
style="@style/VectorTextView.Body" style="@style/VectorTextView.Caption"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginEnd="8dp" android:layout_marginEnd="8dp"
android:maxLines="1" android:maxLines="1"
android:singleLine="true" android:singleLine="true"
android:textColor="?vctr_content_secondary" android:textColor="?vctr_content_secondary"
app:layout_constraintBottom_toTopOf="@+id/homeDrawerInviteFriendButton" app:layout_constraintBottom_toBottomOf="@+id/homeDrawerHeaderAvatarView"
app:layout_constraintEnd_toStartOf="@+id/homeDrawerQRCodeButton" app:layout_constraintEnd_toStartOf="@+id/homeDrawerQRCodeButton"
app:layout_constraintStart_toStartOf="@+id/homeDrawerHeaderAvatarView" app:layout_constraintStart_toStartOf="@+id/homeDrawerUsernameView"
app:layout_constraintTop_toBottomOf="@+id/homeDrawerUsernameView" app:layout_constraintTop_toBottomOf="@+id/homeDrawerUsernameView"
tools:text="@sample/users.json/data/id" /> tools:text="@sample/users.json/data/id" />
<Button <ImageView
android:id="@+id/homeDrawerQRCodeButton" android:id="@+id/homeDrawerQRCodeButton"
style="@style/Widget.MaterialComponents.Button.Icon" android:layout_width="@dimen/layout_touch_size"
android:layout_width="34dp" android:layout_height="@dimen/layout_touch_size"
android:layout_height="34dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="@dimen/layout_horizontal_margin" android:layout_marginEnd="@dimen/layout_horizontal_margin"
android:backgroundTint="?colorSurface" android:contentDescription="@string/qr_code"
android:elevation="0dp"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
android:padding="0dp"
android:rotationY="@integer/rtl_mirror_flip" android:rotationY="@integer/rtl_mirror_flip"
app:cornerRadius="17dp" android:scaleType="center"
app:icon="@drawable/ic_qr_code_add" android:src="@drawable/ic_qr_code_add"
app:iconGravity="textStart" app:layout_constraintBottom_toBottomOf="@id/homeDrawerHeaderAvatarView"
app:iconPadding="0dp"
app:iconSize="20dp"
app:iconTint="?colorPrimary"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/homeDrawerUsernameView" /> app:layout_constraintTop_toTopOf="@id/homeDrawerHeaderAvatarView"
app:tint="?vctr_content_tertiary"
tools:ignore="MissingPrefix" />
<Button <Button
android:id="@+id/homeDrawerInviteFriendButton" android:id="@+id/homeDrawerInviteFriendButton"
style="@style/VectorButtonStyleText" style="@style/VectorButtonStyleText"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="36dp" android:layout_height="36dp"
android:layout_marginStart="@dimen/layout_horizontal_margin"
android:layout_marginTop="8dp" android:layout_marginTop="8dp"
android:layout_marginEnd="@dimen/layout_horizontal_margin"
android:layout_marginBottom="8dp" android:layout_marginBottom="8dp"
android:gravity="center" android:gravity="center"
android:insetTop="0dp" android:insetTop="0dp"
@ -114,10 +92,22 @@
app:iconGravity="textStart" app:iconGravity="textStart"
app:iconSize="20dp" app:iconSize="20dp"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="@+id/homeDrawerHeaderAvatarView"
app:layout_constraintTop_toBottomOf="@+id/homeDrawerHeaderAvatarView"
tools:ignore="MissingPrefix" />
<ImageView
android:id="@+id/homeDrawerHeaderDebugView"
style="@style/VectorDebug"
android:layout_width="@dimen/layout_touch_size"
android:layout_height="@dimen/layout_touch_size"
android:importantForAccessibility="no"
android:scaleType="center"
android:src="@drawable/ic_settings_x"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0" app:tint="?colorPrimary"
app:layout_constraintStart_toStartOf="parent" tools:ignore="MissingPrefix" />
app:layout_constraintTop_toBottomOf="@+id/homeDrawerUserIdView" />
</androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout>
@ -135,7 +125,7 @@
android:id="@+id/homeDrawerBottomSeparator" android:id="@+id/homeDrawerBottomSeparator"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="1dp" android:layout_height="1dp"
android:background="?vctr_list_separator_on_surface" android:background="?vctr_list_separator"
app:layout_constraintBottom_toTopOf="@+id/homeDrawerHeaderSettingsView" /> app:layout_constraintBottom_toTopOf="@+id/homeDrawerHeaderSettingsView" />
<TextView <TextView

View File

@ -32,11 +32,6 @@
<color name="black_alpha">#55000000</color> <color name="black_alpha">#55000000</color>
<color name="black_54">#8A000000</color> <color name="black_54">#8A000000</color>
<attr name="vctr_home_drawer_header_background" format="color" />
<color name="vctr_home_drawer_header_background_light">#FFF5F7FA</color>
<color name="vctr_home_drawer_header_background_dark">#FF22282F</color>
<color name="vctr_home_drawer_header_background_black">#FF000000</color>
<!-- For Android status bar and navigation bar --> <!-- For Android status bar and navigation bar -->
<color name="android_status_bar_background_light">@color/element_system_light</color> <color name="android_status_bar_background_light">@color/element_system_light</color>
<color name="android_navigation_bar_background_light">@color/element_system_light</color> <color name="android_navigation_bar_background_light">@color/element_system_light</color>

View File

@ -7,7 +7,6 @@
<!-- Only setting the items we need to override to get the background to be pure black, otherwise inheriting --> <!-- Only setting the items we need to override to get the background to be pure black, otherwise inheriting -->
<!-- other colors --> <!-- other colors -->
<item name="vctr_home_drawer_header_background">@color/vctr_home_drawer_header_background_black</item>
<item name="vctr_unread_room_badge">@color/vctr_unread_room_badge_black</item> <item name="vctr_unread_room_badge">@color/vctr_unread_room_badge_black</item>
<item name="vctr_fab_label_bg">@color/vctr_fab_label_bg_black</item> <item name="vctr_fab_label_bg">@color/vctr_fab_label_bg_black</item>
<item name="vctr_fab_label_stroke">@color/vctr_fab_label_stroke_black</item> <item name="vctr_fab_label_stroke">@color/vctr_fab_label_stroke_black</item>

View File

@ -16,7 +16,6 @@
<item name="vctr_system">@color/element_system_dark</item> <item name="vctr_system">@color/element_system_dark</item>
<!-- other colors --> <!-- other colors -->
<item name="vctr_home_drawer_header_background">@color/vctr_home_drawer_header_background_dark</item>
<item name="vctr_unread_room_badge">@color/vctr_unread_room_badge_dark</item> <item name="vctr_unread_room_badge">@color/vctr_unread_room_badge_dark</item>
<item name="vctr_fab_label_bg">@color/vctr_fab_label_bg_dark</item> <item name="vctr_fab_label_bg">@color/vctr_fab_label_bg_dark</item>
<item name="vctr_fab_label_stroke">@color/vctr_fab_label_stroke_dark</item> <item name="vctr_fab_label_stroke">@color/vctr_fab_label_stroke_dark</item>

View File

@ -16,7 +16,6 @@
<item name="vctr_system">@color/element_system_light</item> <item name="vctr_system">@color/element_system_light</item>
<!-- other colors --> <!-- other colors -->
<item name="vctr_home_drawer_header_background">@color/vctr_home_drawer_header_background_light</item>
<item name="vctr_unread_room_badge">@color/vctr_unread_room_badge_light</item> <item name="vctr_unread_room_badge">@color/vctr_unread_room_badge_light</item>
<item name="vctr_fab_label_bg">@color/vctr_fab_label_bg_light</item> <item name="vctr_fab_label_bg">@color/vctr_fab_label_bg_light</item>
<item name="vctr_fab_label_stroke">@color/vctr_fab_label_stroke_light</item> <item name="vctr_fab_label_stroke">@color/vctr_fab_label_stroke_light</item>