Creating a Custom Kitchen App: Removing App Name and Implementing Scrollable RecyclerView

Developing a custom kitchen app offers exciting opportunities to showcase your culinary expertise. In this article, we will guide you through the process of removing the default app name from the top of your app and implementing a scrollable RecyclerView to handle an increasing number of recipes.

Additionally, we'll add a customized app name "Kitchen Wiz" to the top of the RecyclerView.

1. Hiding the Default App Name: By default, Android displays the app name in the app bar. To remove it and create space for a custom app name, follow these steps:

Step 1: Create the styles.xml File

Open the res/values/styles.xml file and add the following styles:

<resources>
    <!-- Base application theme -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here -->
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

Explanation: In this example, we're defining the base application theme named "AppTheme." The parent attribute is set to "Theme.AppCompat.Light.NoActionBar", which removes the default action bar (app name) from the top of the screen.

Update AndroidManifest.xml

Open the AndroidManifest.xml file and find the <activity> element for your MainActivity. Add the following attribute to remove the default title from the action bar:

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

Explanation: We have added android:label="" to set an empty label for the activity, effectively removing the default app name from the action bar. Additionally, we're specifying a custom theme @style/AppTheme.NoActionBar for this activity to hide the action bar.

Step 2: Create the Layout File with scrolling

1. activity_main.xml

Create the layout file activity_main.xml with the following content:

<androidx.core.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:background="@drawable/background_gradient">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- Custom app name "Kitchen Wiz" -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Kitchen Wiz"
            android:textSize="24sp"
            android:textStyle="bold"
            android:gravity="center"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="8dp" />

        <!-- RecyclerView goes here -->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</androidx.core.widget.NestedScrollView>

Explanation: We've replaced the outer <LinearLayout> with <androidx.core.widget.NestedScrollView> to make the RecyclerView scrollable. Inside the NestedScrollView, we've added a new <LinearLayout> to act as a container for the custom app name and the RecyclerView.

The above allow everything on the screen to scroll up. If you want alternative way of scrolling where only recipe scrolls, then:

To achieve the behavior where only the RecyclerView scrolls while keeping the "Kitchen Wiz" title fixed, we'll need to use a CoordinatorLayout and a NestedScrollView.

Here's the updated layout 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" -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Kitchen Wiz"
        android:textSize="24sp"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="8dp"
        android:elevation="2dp"
        android:background="@color/white" />

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="80dp" <!-- Adjust the margin to fit your needs -->
        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>

Explanation:

1. We are using a CoordinatorLayout as the root layout, which allows us to create the desired effect of keeping the "Kitchen Wiz" title fixed while the RecyclerView scrolls.

2. The TextView with the "Kitchen Wiz" title is now placed at the top of the layout.

3. We've added elevation and a background color to the TextView to make it stand out and give it a separate background.

4. The NestedScrollView wraps the LinearLayout that contains the RecyclerView. The NestedScrollView allows us to have a scrolling behavior for the RecyclerView.

5. We've set the android:layout_marginTop attribute for the NestedScrollView to push its content down and prevent overlap with the "Kitchen Wiz" title. Adjust the margin value as per your design needs.

With this layout structure, only the RecyclerView will scroll while the "Kitchen Wiz" title will remain fixed at the top of the screen.

To change to different background, then update this code with different gradients

background_gradient.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FFD8D8D8"
        android:endColor="#FFFFFFFF"
        android:angle="90" />
</shape>

Here are some different gradient combinations you can use for the background_gradient drawable:
Horizontal Gradient (From Left to Right):
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="0"
        android:startColor="#FFA500" <!-- Orange -->
        android:endColor="#FF4500"   <!-- Red -->
        android:type="linear" />
</shape>
Vertical Gradient (From Top to Bottom):
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:startColor="#1E90FF"  <!-- Dodger Blue -->
        android:endColor="#FF69B4"   <!-- Hot Pink -->
        android:type="linear" />
</shape>
Radial Gradient (From Center to Outer Edges):
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:centerX="50%"
        android:centerY="50%"
        android:startColor="#00FF00"  <!-- Green -->
        android:endColor="#FFFF00"    <!-- Yellow -->
        android:gradientRadius="100"
        android:type="radial" />
</shape>
Diagonal Gradient (From Top Left to Bottom Right):
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FF8C00"  <!-- Dark Orange -->
        android:endColor="#7B68EE"    <!-- Medium Slate Blue -->
        android:type="linear"
        android:angle="45" />
</shape>
Sweep Gradient (Circular Sweep):
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#8A2BE2"  <!-- Blue Violet -->
        android:endColor="#00FF00"    <!-- Green -->
        android:centerX="50%"
        android:centerY="50%"
        android:type="sweep"
        android:gradientRadius="100" />
</shape>
You can replace the existing background_gradient drawable with any of the above gradient drawables in your layout file to change the background gradient of your app. Feel free to customize the startColor and endColor attributes to use any colors of your choice.

To Test the scrolling and make sure it alligns with what you want to achieve, then update the recipes as per below

package com.peterc.kitchenwhiz;
import android.os.Bundle;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private RecipeAdapter recipeAdapter;
    private List<Recipe> recipeList;

    @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();
    }

    private void populateRecipeList() {
        // Add dummy recipes to the list with correct image resource IDs
        recipeList.add(new Recipe("Recipe 1", "Description 1", R.drawable.image_url_1));
        recipeList.add(new Recipe("Recipe 2", "Description 2", R.drawable.image_url_2));
        recipeList.add(new Recipe("Recipe 3", "Description 3", R.drawable.image_url_3));
        recipeList.add(new Recipe("Recipe 1", "Description 1", R.drawable.image_url_1));
        recipeList.add(new Recipe("Recipe 2", "Description 2", R.drawable.image_url_2));
        recipeList.add(new Recipe("Recipe 3", "Description 3", R.drawable.image_url_3));
        recipeList.add(new Recipe("Recipe 1", "Description 1", R.drawable.image_url_1));
        recipeList.add(new Recipe("Recipe 2", "Description 2", R.drawable.image_url_2));
        recipeList.add(new Recipe("Recipe 3", "Description 3", R.drawable.image_url_3));

        // Notify the adapter that the data set has changed
        recipeAdapter.notifyDataSetChanged();
    }

}