.png)
.png)
.png)
Recipe App Layout Changes: Adding Filter, Reset Button, and Search Box
In the world of mobile app development, creating an engaging and user-friendly layout is crucial to providing a delightful experience for app users. Today, we'll explore the recent changes made to the layout of the Kitchen Wiz app.
We've introduced exciting features, such as a filter, reset button, and search box, to enhance the app's functionality and appeal. We'll also dive into the concept of gradients and how they contribute to the app's aesthetics.
1. Customizing the App Name To begin, we've customized the app name displayed on the screen. Instead of the generic app name, "Kitchen Wiz" now stands bold and stylish at the top of the layout. This change immediately captures the user's attention and sets the tone for the rest of the app.
2. The Filter Button The filter button is a handy addition that allows users to refine their search results. Tapping this button will open a menu with various filtering options, making it easier for users to find the recipes they desire. Think of it as a virtual chef who arranges recipes based on your preferences!
3. The Search Box The search box is a fantastic tool that enables users to find specific recipes quickly. Just like a magical recipe book with an intelligent index, the search box lets users type in keywords, and the app presents matching recipes in an instant. No more flipping through pages – the desired recipe is just a search away!
4. The Reset Button We've also included a reset button to make the user experience even smoother. When users have applied filters or performed a search, they can hit the reset button to return to the default view with all recipes displayed. It's like having an "undo" button for your culinary adventure!
5. Gradients: A Splash of Colors Now, let's talk about gradients! Gradients are like the icing on the cake when it comes to app design. They add a beautiful blend of colors that evoke emotions and make the app visually appealing. For Kitchen Wiz, we've used two different gradient backgrounds to distinguish between different sections of the layout.
6. The Background Gradient The main background of the app features a delightful gradient that transitions from a vibrant pink (#FF4081) to a soothing blue (#3F51B5) at an angle of 45 degrees. This gradient captures the essence of a cheerful kitchen atmosphere, where creativity and culinary magic come together!
7. The Filter and Search Box Gradient The section holding the filter button, search box, and reset button also boasts its own gradient background. This gradient ranges from a warm golden shade (#FFA000) to a mellow yellow (#FFC107), creating an inviting space for users to interact with these essential app features.
Putting it All Together In summary, the changes made to the Kitchen Wiz app layout have taken it to a whole new level. With the introduction of the filter, search box, and reset button, users have an improved and efficient recipe browsing experience. The addition of gradients enhances the app's aesthetics, providing a vibrant and welcoming ambiance. These elements combined ensure that users enjoy every moment spent in the virtual kitchen of Kitchen Wiz!
So, whether you're a budding chef or a seasoned foodie, Kitchen Wiz with its innovative layout changes is ready to spice up your culinary journey. Get ready to unlock the full potential of the app, discover mouthwatering recipes, and create delightful culinary masterpieces with a tap of your finger! Happy cooking and bon appétit! 🍳🥗🍰
Complete mainactivity layout xml code:
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background_gradient">
<!-- Custom app name "Kitchen Wiz" and LinearLayout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp"
android:gravity="center_vertical"
android:background="@drawable/gradient_drawable">
<!-- Custom app name "Kitchen Wiz" -->
<TextView
android:id="@+id/appNameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Kitchen Wiz"
android:textSize="24sp"
android:textStyle="bold"
android:gravity="center"
android:elevation="2dp" />
<!-- LinearLayout to hold the button, search box, and reset button -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="16dp"
android:gravity="center_vertical"
android:background="@drawable/gradient_drawable_filter_search_reset">
<!-- Filter button -->
<Button
android:id="@+id/filterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Filter"
android:layout_weight="1" />
<!-- Search box -->
<EditText
android:id="@+id/searchEditText"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="8dp"
android:hint="Search"
android:inputType="text" />
<!-- Reset button -->
<Button
android:id="@+id/resetButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Reset"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="136dp"
android:fillViewport="true"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- RecyclerView goes here -->
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
gradient_drawable xml code: <!-- res/drawable/gradient_drawable.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FF4081"
android:endColor="#3F51B5"
android:angle="45"/>
</shape>
gradient_drawable_filter_search_reset xml code
<!-- res/drawable/gradient_drawable_filter_search_reset.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FFA000"
android:endColor="#FFC107"
android:angle="45"/>
</shape>
Understanding the Code: Updating the List of Recipes in an Android App
In the world of Android app development, managing data and updating user interfaces is a crucial aspect of creating seamless and interactive user experiences. Today, we'll delve into a specific code snippet that plays a significant role in updating the list of recipes displayed in the app.
The Code Snippet
// Method to update the list of recipes
public void setRecipes(List<Recipe> recipes) {
this.recipeList = recipes;
notifyDataSetChanged();
}
Explaining the Code
1. Method Description
The code snippet presents a method named setRecipes within a class, presumably belonging to a custom RecyclerView Adapter. This method is responsible for updating the list of recipes displayed in the app's user interface.
2. Input Parameter
The setRecipes method takes one parameter, which is a List<Recipe> named recipes. This parameter is essential as it allows the method to receive the updated list of recipes that needs to be displayed.
3. Assigning the Updated List
Inside the method, the line this.recipeList = recipes; plays a crucial role. It assigns the input recipes list to a class-level variable recipeList. The class-level variable acts as a data source for the RecyclerView Adapter, holding the recipes that should be shown in the list.
4. Notifying the Adapter
The last line of the method, notifyDataSetChanged();, is a powerful call that signals the RecyclerView Adapter to refresh its data and update the UI accordingly. In essence, it tells the adapter that the dataset has changed, and it needs to redraw the RecyclerView with the new list of recipes.
Understanding the Purpose
The setRecipes method is vital for maintaining the dynamic nature of the app's user interface. When the user performs actions such as searching for recipes, applying filters, or even receiving updated data from a remote server, the list of recipes needs to be updated accordingly. By using this method, we ensure that the RecyclerView Adapter reflects the latest dataset, keeping the app's content up-to-date and responsive to user interactions.
How it Fits in the App
Let's visualize how this code snippet fits into the overall structure of an Android app. Imagine a recipe app that presents a list of various recipes to the user. When the app launches, the initial list of recipes is displayed. However, the user may wish to filter the recipes based on categories, search for specific recipes by name, or receive updated recipes from the app's server.
In all these scenarios, the setRecipes method comes into play. When the user applies a filter or performs a search, the app fetches the relevant recipes from the data source and passes them to the setRecipes method. This, in turn, updates the class-level recipeList variable with the new data and triggers the notifyDataSetChanged() call. As a result, the RecyclerView Adapter redraws the list, presenting the user with the latest filtered or searched recipes.
Additionally, if the app supports real-time updates, such as receiving new recipes from a server, the setRecipes method can be used to refresh the displayed list without the user needing to perform any manual action.
In Conclusion
In conclusion, the setRecipes method serves as a critical bridge between the data source and the user interface. By updating the class-level variable and notifying the RecyclerView Adapter, this method ensures that the list of recipes displayed in the app remains accurate, dynamic, and responsive to user interactions. With this powerful mechanism in place, the app can effortlessly keep up with user preferences, delivering a delightful and seamless recipe browsing experience.
So next time you're exploring a recipe app and notice the list of recipes smoothly updating with each search, filter, or new content arrival, remember the magic behind the scenes – the setRecipes method, ensuring the app always serves you the most delicious recipes!
Full java code for recipeadapter class:
package com.peterc.kitchenwhiz;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.bumptech.glide.Glide;
import java.util.List;
public class RecipeAdapter extends RecyclerView.Adapter<RecipeAdapter.RecipeViewHolder> {
private List<Recipe> recipeList;
public RecipeAdapter(List<Recipe> recipeList) {
this.recipeList = recipeList;
}
@NonNull
@Override
public RecipeViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recipe_item_layout, parent, false);
return new RecipeViewHolder(view);
}
// Method to update the list of recipes
public void setRecipes(List<Recipe> recipes) {
this.recipeList = recipes;
notifyDataSetChanged();
}
@Override
public void onBindViewHolder(@NonNull RecipeViewHolder holder, int position) {
Recipe recipe = recipeList.get(position);
holder.titleTextView.setText(recipe.getTitle());
holder.categoriesTextView.setText(TextUtils.join(", ", recipe.getCategories())); // Display categories
Glide.with(holder.itemView.getContext())
.load(recipe.getImageResource())
.into(holder.imageView);
}
@Override
public int getItemCount() {
return recipeList.size();
}
static class RecipeViewHolder extends RecyclerView.ViewHolder {
TextView titleTextView;
TextView categoriesTextView;
ImageView imageView;
RecipeViewHolder(@NonNull View itemView) {
super(itemView);
titleTextView = itemView.findViewById(R.id.titleTextView);
categoriesTextView = itemView.findViewById(R.id.categoriesTextView);
imageView = itemView.findViewById(R.id.imageView);
}
}
}
Explaining the Code: Enhancing Recipe App Interactivity
The provided code snippet is a fundamental part of an Android recipe app, responsible for implementing interactive features such as filtering and searching recipes. It also showcases the process of resetting the displayed recipes to their default state. Let's break down the code step by step:
1. Finding and Setting Click Listener for Filter Button
Button filterButton = findViewById(R.id.filterButton);
filterButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showCategoryPopup(v);
}
});
Here, the app finds the "Filter" button (identified by the filterButton variable) by its unique ID (R.id.filterButton) from the app's layout XML file. The setOnClickListener method sets a click listener for the filter button. When the user taps on this button, the showCategoryPopup(v) method is called, triggering the display of a popup menu for filtering recipes by category.
2. Finding the Search Box and Adding Text Change Listener
EditText searchEditText = findViewById(R.id.searchEditText);
searchEditText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
// Do nothing
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
// Call the method to filter recipes based on the entered text
filterRecipesByName(charSequence.toString());
}
@Override
public void afterTextChanged(Editable editable) {
// Do nothing
}
});
Next, the code locates the search box (referred to by the searchEditText variable) using its unique ID (R.id.searchEditText). A TextWatcher is added to the search box, allowing the app to monitor changes in the text entered by the user.
beforeTextChanged: This method is called before the text in the search box is changed. For this functionality, it does nothing.onTextChanged: When the user types or deletes text in the search box, this method is called. It triggers thefilterRecipesByNamemethod, passing the current entered text as a parameter. The app will use this text to filter the displayed recipes by title.afterTextChanged: This method is called after the text has been changed. For this functionality, it also does nothing.
3. Finding the Reset Button and Adding Click Listener
Button resetButton = findViewById(R.id.resetButton);
resetButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Reset the RecyclerView to the default loaded data
// ...Code for resetting the RecyclerView...
categoriesList = new ArrayList<>();
populateRecipeList();
}
});
Finally, the code locates the "Reset" button (identified by the resetButton variable) using its unique ID (R.id.resetButton). Similar to the filter button, a click listener is set for this button. When the user clicks on the reset button, the onClick method is triggered. Inside this method, the app resets the RecyclerView (a UI component for displaying a list of recipes) to its default state, displaying all the loaded recipes.
Additional Helper Methods
The code includes two additional helper methods: getCategoryList and filterRecipesByName.
getCategoryList: This method returns a list of recipe categories. It is used when the app needs to display a popup menu for filtering recipes by category.filterRecipesByName: This method filters the displayed recipes based on the text entered in the search box. It updates the RecyclerView to show only those recipes whose titles match the entered text.
Conclusion In summary, this code segment plays a crucial role in enhancing the interactivity of the recipe app. By incorporating a filter button, search box, and reset button, users can easily search for specific recipes, filter them by category, and reset the displayed recipes to their original state. With these interactive features, the recipe app becomes more user-friendly, providing a seamless and enjoyable experience for all cooking enthusiasts.
Complete mainactivity.java
package com.peterc.kitchenwhiz;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.PopupMenu;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private RecipeAdapter recipeAdapter;
private List<Recipe> recipeList;
private List<String> categoriesList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recyclerView);
recipeList = new ArrayList<>();
recipeAdapter = new RecipeAdapter(recipeList);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(recipeAdapter);
// Populate recipe list with dummy data (replace with your own data retrieval logic)
populateRecipeList();
Button filterButton = findViewById(R.id.filterButton);
filterButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showCategoryPopup(v);
}
});
EditText searchEditText = findViewById(R.id.searchEditText);
searchEditText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
// Do nothing
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
// Call the method to filter recipes based on the entered text
filterRecipesByName(charSequence.toString());
}
@Override
public void afterTextChanged(Editable editable) {
// Do nothing
}
});
Button resetButton = findViewById(R.id.resetButton);
resetButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Reset the RecyclerView to the default loaded data
recyclerView = findViewById(R.id.recyclerView);
recipeList = new ArrayList<>();
recipeAdapter = new RecipeAdapter(recipeList);
LinearLayoutManager layoutManager = new LinearLayoutManager(MainActivity.this);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(recipeAdapter);
categoriesList = new ArrayList<>();
populateRecipeList();
}
});
}
private List<String> getCategoryList() {
return categoriesList;
}
private void filterRecipesByName(String query) {
List<Recipe> filteredRecipes = new ArrayList<>();
for (Recipe recipe : recipeList) {
if (recipe.getTitle().toLowerCase().contains(query.toLowerCase())) {
filteredRecipes.add(recipe);
}
}
// Update the adapter with the filtered list of recipes
recipeAdapter.setRecipes(filteredRecipes);
}
private void showCategoryPopup(View anchorView) {
PopupMenu popupMenu = new PopupMenu(this, anchorView);
List<String> categories = getCategoryList(); // Replace this with your method to get the list of categories
for (String category : categories) {
popupMenu.getMenu().add(category);
}
popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
String selectedCategory = item.getTitle().toString();
// Apply filter based on selectedCategory (e.g., filter recipes by category)
filterRecipesByCategory(selectedCategory);
return true;
}
});
popupMenu.show();
}
private void filterRecipesByCategory(String category) {
List<Recipe> filteredRecipes = new ArrayList<>();
for (Recipe recipe : recipeList) {
if (recipe.getCategories().contains(category)) {
filteredRecipes.add(recipe);
}
}
// Update the adapter with the filtered list of recipes
recipeAdapter.setRecipes(filteredRecipes);
// Refresh the RecyclerView
recipeAdapter.notifyDataSetChanged();
}
private void populateRecipeList() {
// Add dummy recipes to the list with correct image resource IDs
List<String> recipe1Categories = Arrays.asList("Breakfast", "Healthy");
recipeList.add(new Recipe("Scrambled Eggs", recipe1Categories, R.drawable.image_url_1));
categoriesList.addAll(recipe1Categories);
List<String> recipe2Categories = Arrays.asList("Lunch", "Quick & Easy");
recipeList.add(new Recipe("Chicken Sandwich", recipe2Categories,R.drawable.image_url_2));
categoriesList.addAll(recipe2Categories);
List<String> recipe3Categories = Arrays.asList("Dinner", "Vegetarian");
recipeList.add(new Recipe("Mushroom Risotto", recipe3Categories, R.drawable.image_url_3));
categoriesList.addAll(recipe3Categories);
recipeList.add(new Recipe("Scrambled Eggs", recipe1Categories, R.drawable.image_url_1));
recipeList.add(new Recipe("Chicken Sandwich", recipe2Categories,R.drawable.image_url_2));
recipeList.add(new Recipe("Mushroom Risotto", recipe3Categories, R.drawable.image_url_3));
// Notify the adapter that the data set has changed
recipeAdapter.notifyDataSetChanged();
}
}
.png)
.png)
0 Comments