009 All Views

Creating Recycler View for Art Fragment

Introduction to New Fragments

• The lecture begins with the intention to develop additional fragments in the application, moving beyond the completed art fragment.

• Emphasis is placed on creating a layout for displaying art objects, which includes images and details such as names and years.

Designing the Recycler Row Layout

• A new layout named "art_row" will be created to accommodate multiple recycler rows for displaying art information.

• The choice of using a LinearLayout instead of a ConstraintLayout is made for simplicity and efficiency, with horizontal orientation to place images next to text details.

ImageView Configuration

• An ImageView will be added with specific dimensions (100dp width) to display the artwork image, initially set with an icy launcher background as a placeholder.

• The scale type is set to "center crop" to ensure that larger images fit well within the designated space. Additional options may be explored later.

TextViews Setup

• A vertical LinearLayout will contain three TextViews: one for the painting name, one for the artist's name, and one for the year of creation. Each TextView will have appropriate padding and margins defined.

• The first TextView displays the painting name with increased text size (28sp) and left margin (14dp). This enhances visibility and aesthetics.

Finalizing Text Views

• Subsequent TextViews are configured similarly; one shows the artist's name (20sp text size), while another displays just the year of creation, ensuring clarity in presentation. Adjustments are made for text sizes and margins accordingly.

• The overall design aims at providing essential information about each artwork in a user-friendly manner through RecyclerView components before transitioning to create another fragment dedicated to inputting art details like names and images.

Transitioning to Art Details Fragment

Creating Input Fragment

Creating a User Interface for Art Selection

Designing the Layout

• The speaker begins by discussing the layout design, mentioning that they will place an image view with a background and adjust its size.

• An "art image view" is introduced to display selected artwork from an API, emphasizing its importance in the user interface.

• A plain text field is created for users to input the name of the painting, which will serve as a placeholder with a hint saying "enter name."

• The speaker refactors another text field to capture the artist's name, changing hints accordingly to guide user input.

• A save button is added to finalize selections; constraints are applied randomly without detailed adjustments at this stage.

Fragment Development

• The second fragment is completed, and attention shifts to creating a third fragment focused on searching and displaying results in a RecyclerView.

• The speaker considers adding click methods but decides it can be handled later during coding with an addOnClickListener for the save button.

Implementing Search Functionality

• A new resource file named "fragment_image_api" is created for implementing search functionality using an edit text for user input.

• Below the search bar, a RecyclerView will be added to display search results effectively.

Adjusting Layout Properties

• The edit text properties are adjusted: width set to match parent and height set to wrap content. A hint prompts users with "search image."

• A progress bar is included but initially set to be invisible so it does not occupy space until needed during searches.

Finalizing UI Components

• Another RecyclerView is created with dimensions matching its parent container and margins specified at 10dp for spacing.

• Issues arise regarding visibility within layouts; adjustments are made by ensuring proper orientation settings in linear layout mode.

Completing Recycler View Design

• The design now includes all necessary components: edit text, RecyclerView, and progress bar.

• Discussion turns towards creating individual rows within the RecyclerView that will hold images based on user searches.

UI Design and Navigation in Fragment Art Details

Center Crop Image View Configuration

• The speaker discusses the choice of a center crop for the image view, emphasizing its simplicity. They mention setting zero constraints for left and top margins.

• Alternative layout options are presented, including frame layout, linear layout, and relative layout, highlighting flexibility due to having only one image view.

User Interaction Flow

• The UI for the fragment art details is completed, allowing users to navigate effectively.

• Clicking on the image view directs users to a new screen or detail page.