Steps for Creating a Notes Application on Android
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Note: Select Java as the programming language.
Step 2: Working with the activity_main.xml file
In the activity_main.xml file the main page we will only display the Notes with Add , Open and Delete Button.
Below is the complete code for the activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:gravity="center"
android:text="@string/application_heading"
android:textSize="20dp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="537dp"
android:layout_margin="20dp"
app:layout_constraintTop_toBottomOf="@+id/textView3"
tools:layout_editor_absoluteX="0dp" />
<Button
android:id="@+id/add_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Note"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/listView"
app:layout_constraintVertical_bias="0.722" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output UI:
Apart from this we will need a Layout template for every ListItem. So, we will be creating a new Layout File.
File Name: list_item.xml
<!-- res/layout/list_item.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Empty Element" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Open" />
<Button
android:id="@+id/delete_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Delete" />
</LinearLayout>
Output UI:
Now we have created our Main Page. In the next step we will be defining the functionalities of the the Main page buttons.
Step 3: Creating New Layouts for Opening the Details and Adding the Items.
Go to app > java > right-click > New > Activity > Empty Activity and name it as AddNoteActivity.
Note: Similarly Create DetailActivity.
Resource File Created :
- AddNoteActivity.java and activity_add_note.xml
- DetailActivity.java and activity_detail_activity.xml
Below is the Layout used for AddNoteActivity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<EditText
android:id="@+id/editTextNote"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your note here"
android:inputType="text"
android:textSize="20sp" />
<Button
android:id="@+id/buttonAddNote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Note" />
</LinearLayout>
Output UI:
And the another layout for DetailActivity.java
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/detailTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="15dp"
android:textSize="20dp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/Card_View_Data">
<TextView
android:id="@+id/Data_Notes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"/>
</androidx.cardview.widget.CardView>
</LinearLayout>
Output UI:
Step 4: Adding Functionalities to MainActivity
Now we have all the Layout Prepared. So, let us add functionalities to the Buttons:
package org.w3wiki.simple_notes_application_java;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ListView;
import androidx.appcompat.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private static final int REQUEST_CODE_ADD_NOTE = 1;
private MyAdapter adapter;
private List<String> items;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView listView = findViewById(R.id.listView);
Button addNoteButton = findViewById(R.id.add_button);
// Initialize the list of items
items = new ArrayList<>();
// Add a temporary item
items.add("Temp Add Element");
// Create the adapter and set it to the ListView
adapter = new MyAdapter(this, items);
listView.setAdapter(adapter);
// Set click listener for the add note button
addNoteButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, AddNoteActivity.class);
startActivityForResult(intent, REQUEST_CODE_ADD_NOTE);
}
});
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == REQUEST_CODE_ADD_NOTE && resultCode == RESULT_OK) {
String newNote = data.getStringExtra("NEW_NOTE");
if (newNote != null) {
items.add(newNote);
adapter.notifyDataSetChanged();
}
}
}
}
Also, we need a Program to Support the MainAcitivity for adding the functionalities to ListView Items i.e. Add Button and Delete Button.
Create MyAdapter.java Class containing the Functionalities. Create New Java Class MyAdapter.java file in the main src project in the same repo as MainActivity.java file:
package org.w3wiki.simple_notes_application_java;
import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import java.util.List;
public class MyAdapter extends ArrayAdapter<String> {
private final Context context;
private final List<String> values;
public MyAdapter(Context context, List<String> values) {
super(context, R.layout.list_item, values);
this.context = context;
this.values = values;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View rowView = inflater.inflate(R.layout.list_item, parent, false);
TextView textView = rowView.findViewById(R.id.textView);
Button openButton = rowView.findViewById(R.id.button);
Button deleteButton = rowView.findViewById(R.id.delete_button);
textView.setText(values.get(position));
openButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Start DetailActivity and pass the item data
Intent intent = new Intent(context, DetailActivity.class);
intent.putExtra("ITEM", values.get(position));
context.startActivity(intent);
}
});
deleteButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context, "Delete button clicked for item " + values.get(position), Toast.LENGTH_SHORT).show();
// Remove the item from the list
values.remove(position);
// Notify the adapter to refresh the list view
notifyDataSetChanged();
}
});
return rowView;
}
}
Step 5: Adding New Node to the Application
Although we have created a layout for adding New Node but without Adding the Functionalities to it the Layout is of no use. So, let us start working on the ActivityAddNote.java file so that we can add few more Important Nodes to the Application.
package org.w3wiki.simple_notes_application_java;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import androidx.appcompat.app.AppCompatActivity;
public class AddNoteActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_add_note);
EditText editText = findViewById(R.id.editTextNote);
Button buttonAdd = findViewById(R.id.buttonAddNote);
buttonAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String newNote = editText.getText().toString().trim();
if (!newNote.isEmpty()) {
Intent resultIntent = new Intent();
resultIntent.putExtra("NEW_NOTE", newNote);
setResult(RESULT_OK, resultIntent);
finish();
}
}
});
}
}
Now On clicking on the Add Note Button in the Main Page we will be redirected to this Activity where we can add new Note.
Step 6: Opening the Details Page in the Android Application
Although we can read the Node from the Main Page but we are adding the Dedicated page to Open a Single Note in a page, using this activity.
Below is the Program to View the Details of a Node in the Application:
package org.w3wiki.simple_notes_application_java;
import android.os.Bundle;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class DetailActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
TextView detailTextView = findViewById(R.id.detailTextView);
TextView dataNotesTextView = findViewById(R.id.Data_Notes);
// Get the data passed from MainActivity
String item = getIntent().getStringExtra("ITEM");
// Set the data to the TextViews
detailTextView.setText("Notes Content");
dataNotesTextView.setText(item);
}
}
Now we have added all the functionalities to the Application
Step 7: Formatting the String.xml file
Although we have not added any Majot changes in the String.xml file but still it will require some changes to run the application as we are using some resources there.
Below is the code for string.xml file:
<resources>
<string name="app_name">Simple_Notes_Application_Java</string>
<string name="application_heading">Simple Notes Application GFG</string>
</resources>
After Adding this code we will be able to run of the application.
How to Build a Simple Notes App in Android?
Notes app is used for making short text notes, updating when you need them, and trashing when you are done. It can be used for various functions as you can add your to-do list in this app, some important notes for future reference, etc. The app is very useful in some cases like when you want quick access to the notes. Likewise, here let’s create an Android App to learn how to create a simple NotesApp. So in this article let’s build a Notes App in which the user can add any data, remove any data as well as edit any data. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Resources Used in the Application
In this Application, we will be using Activities and Simple Java Code:
- Main Activity: The Main Activity is used for Activities on the Main Page.
- Detail Activity: Detail Activity is used for Details of the Notes Opened using the Open Button.
- Add Note Activity: The Add Note Activity is used for Creating new Entries in the Data.
- My Adapter: It is a Java Program used for Defining the Structure of Every Single List Item.
Layouts Used in this Application:
- activity_main: The layout of the main page is used here.
- list_item: The layout for the list item which is used in the main activity is mentioned here.
- activity_detail: The layout for the window where we will be opening the Notes in Full Page in the CardView
- activity_add_note: The layout for the window where we can add the new item on the main page.