Updated UI to fit new figma design. This also contains the new search…

[sande11]

Pull Request: Enhanced Custom Action Bar with Integrated Search and Redesigned Bookmark Dialog

Overview

This PR implements a comprehensive UI overhaul that matches Figma specifications. Link to design: https://www.figma.com/design/ZYZkodGKNJ3VOJMVlqdCMo/GA-TB-GUIDE-REDESIGN?node-id=2660-5103&m=dev

Before:

After:

Key Features

1. Custom Action Bar System

• Dynamic Title Management: Action bar titles dynamically update based on the current navigation destination
• Smart Back Button: Custom back arrow icon that appears/disappears contextually
• Centered Title Layout: All titles are properly centered with balanced spacing
• Context-Aware Display: Shows appropriate titles for chapters, sub-chapters, charts, and content pages

2. Integrated Search Functionality

• Unified Search Design: Search bar appears as part of the action bar for seamless integration
• Fragment-Specific Search: Search functionality only appears in content viewing screens (BodyFragment)

3. Redesigned Bookmark Dialog

• Enhanced UX: Improved button layouts, proper spacing, and intuitive clear functionality
• Material Design Compliance: Proper touch targets and accessibility features

Files Modified

Core Architecture

• app/src/main/java/org/apphatchery/gatbreferenceguide/ui/ActionBarController.kt - New interface for action bar control
• app/src/main/java/org/apphatchery/gatbreferenceguide/ui/BaseFragment.kt - Enhanced with action bar helper methods
• app/src/main/java/org/apphatchery/gatbreferenceguide/ui/MainActivity.kt - Complete action bar management system

Layout Files

• app/src/main/res/layout/custom_action_bar_title.xml - Redesigned custom action bar layout
• app/src/main/res/layout/search_view.xml - New integrated search view component
• app/src/main/res/layout/fragment_body.xml - Updated to include search integration
• app/src/main/res/layout/dialog_bookmark.xml - Complete Figma-based redesign

Drawable Resources

• app/src/main/res/drawable/search_view_background.xml - Blue rectangular background for search container
• app/src/main/res/drawable/frame_16.xml - Gray background for search input field
• app/src/main/res/drawable/rectangle_2.xml - White dialog background with rounded corners
• app/src/main/res/drawable/cancel_button_bg.xml - Gray cancel button background
• app/src/main/res/drawable/save_button_bg.xml - Blue save button background
• app/src/main/res/drawable/frame_46.xml - Gray text field background for bookmark dialog

Fragment Updates

• app/src/main/java/org/apphatchery/gatbreferenceguide/ui/fragments/BodyFragment.kt - Search integration and title management
• app/src/main/java/org/apphatchery/gatbreferenceguide/ui/fragments/ChapterFragment.kt - Removed search icon
• app/src/main/java/org/apphatchery/gatbreferenceguide/ui/fragments/SubChapterFragment.kt - Updated title handling and removed search icon

Technical Improvements

Action Bar Management

interface ActionBarController {
    fun setActionBarTitle(title: String)
    fun setActionBarConfig(title: String, showBackButton: Boolean)
    fun setActionBarSearchVisible(visible: Boolean)
    fun setupActionBarSearch(onSearchAction: (String) -> Unit, onSearchIconClick: (String) -> Unit)
}

Dynamic Title System

• Chapter Navigation: Shows full chapter names (e.g., "I. Epidemiology")
• Content Pages: Displays chart/table titles
• Bookmark Pages: Shows "My Bookmarks" with custom back arrow
• Navigation Context: Proper title context for all navigation destinations

Search Integration

• Contextual Visibility: Search only appears in content viewing screens
• Performance Optimized: Dynamic view finding prevents memory leaks

Design Specifications Met

Bookmark Dialog Design

• White background with 4dp rounded corners
• "Bookmark name" label positioned at 30dp from left and top
• Gray text field
• Blue clear icon inside text field with proper tinting
• Full-width touching buttons
• Cancel button: Gray background (#ECECEC)
• Save button: Blue background (#5182FF)

User Experience Improvements

Navigation Flow

1. Consistent Title Display: All screens show contextually appropriate titles
2. Intuitive Back Navigation: Smart back button appears only when needed
3. Search Context: Search functionality appears only in relevant content screens
4. Visual Cohesion: Action bar and search appear as unified design element

Bookmark Management

1. Improved Dialog UX: Better visual hierarchy with proper spacing and colors
2. Professional Appearance: Matches design with exact Figma specifications

Testing Considerations

• Navigation Testing: Verify titles appear correctly on all navigation destinations
• Bookmark Operations: Ensure create, update, and delete operations work without crashes
• Layout Testing: Verify proper appearance across different screen sizes and orientations

Breaking Changes

• Custom Action Bar: Replaces default Android action bar with custom implementation
• Search Interface: New search UI replaces previous implementation
• Bookmark Dialog: Complete redesign may affect existing bookmark workflows

[MaxwellKJr]

@sande11 great work! This looks solid. Just a few things that you need to look into:

Align Chapter Cards text to the left

Web View Search Options Not Fitting On Small Devices

• Try reducing the horizontal padding of the parent layout and also the individual elements

Clear Search Field When Last letter has been cleared with the keyboard delete button

Dismiss the Keyboard when popping out of the WebView page

Dark Mode Not Working

screen-20250919-090219.webm

[sande11]

@Wiza-Munthali