Android Note App – Professional Looking with Admob ads

Introduction

The Android Note App is a popular note-taking app that allows users to jot down their thoughts, ideas, and reminders. With the increasing demand for note-taking apps, it's essential to create a professional-looking app that stands out from the crowd. In this tutorial, we'll learn how to create a professional-looking Android Note App with AdMob ads, making it a revenue-generating app.

Prerequisites

Before we begin, make sure you have the following:

1. Android Studio installed on your computer
2. Basic knowledge of Java or Kotlin programming language
3. Familiarity with Android app development
4. A Google AdMob account (if you don't have one, create one)

Step 1: Creating the Android Note App

Create a new project in Android Studio by following these steps:

1. Open Android Studio and click on "Start a new Android Studio project"
2. Choose "Empty Activity" as the project template
3. Name your project, for example, "NoteApp"
4. Choose a location to save your project
5. Click "Finish" to create the project

Step 2: Designing the User Interface

Design a user-friendly interface for your note-taking app. Create a new layout file (activity_main.xml) and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:id="@+id/edt_note"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Take a note..."
        android:inputType="textMultiLine"
        android:padding="16dp" />

    <Button
        android:id="@+id/btn_save"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Save" />

    <ListView
        android:id="@+id/lst_notes"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

This layout consists of an EditText for taking notes, a Button to save the note, and a ListView to display the saved notes.

Step 3: Creating the Note Model

Create a new Java class (Note.java) to represent a single note:

public class Note {
    private String text;
    private String date;

    public Note(String text) {
        this.text = text;
        this.date = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date());
    }

    public String getText() {
        return text;
    }

    public String getDate() {
        return date;
    }
}

This class has two properties: text for the note's content and date for the note's creation date.

Step 4: Creating the Note Adapter

Create a new Java class (NoteAdapter.java) to bind the notes to the ListView:

public class NoteAdapter extends BaseAdapter {
    private List<Note> notes;
    private Context context;

    public NoteAdapter(Context context, List<Note> notes) {
        this.context = context;
        this.notes = notes;
    }

    @Override
    public int getCount() {
        return notes.size();
    }

    @Override
    public Object getItem(int position) {
        return notes.get(position);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = convertView;
        if (view == null) {
            view = LayoutInflater.from(context).inflate(R.layout.note_item, parent, false);
        }

        Note note = (Note) getItem(position);
        TextView tvText = view.findViewById(R.id.tv_text);
        tvText.setText(note.getText());

        TextView tvDate = view.findViewById(R.id.tv_date);
        tvDate.setText(note.getDate());

        return view;
    }
}

This class extends BaseAdapter and has three methods: getCount() to return the number of notes, getItem() to return a note at a specific position, and getView() to inflate the ListView with notes.

Step 5: Implementing AdMob Ads

To integrate AdMob ads into your app, follow these steps:

1. Create a new AdMob account and get your AdMob app ID
2. Add the AdMob SDK to your project by adding the following line to your build.gradle file:

   implementation 'com.google.android.gms:play-services-ads:19.6.0'

3. Create a new Java class (AdMob.java) to handle AdMob ads:

   public class AdMob {
   private AdView adView;
   private Context context;
   
   public AdMob(Context context) {
       this.context = context;
       adView = new AdView(context);
       adView.setAdSize(AdSize.BANNER);
       adView.setAdUnitId("YOUR_ADMOB_APP_ID");
   }
   
   public void loadAd() {
       AdRequest adRequest = new AdRequest.Builder().build();
       adView.loadAd(adRequest);
   }
   
   public View getAdView() {
       return adView;
   }
   }

   This class has three methods: loadAd() to load the AdMob ad, getAdView() to return the AdMob ad view, and a constructor to initialize the AdMob ad.

Step 6: Integrating AdMob Ads with the Note App

Integrate the AdMob ads with your note-taking app by adding the following code to your MainActivity.java file:

public class MainActivity extends AppCompatActivity {
    private NoteAdapter noteAdapter;
    private ListView lstNotes;
    private AdMob adMob;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lstNotes = findViewById(R.id.lst_notes);
        noteAdapter = new NoteAdapter(this, new ArrayList<Note>());
        lstNotes.setAdapter(noteAdapter);

        adMob = new AdMob(this);
        adMob.loadAd();

        Button btnSave = findViewById(R.id.btn_save);
        btnSave.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Save the note
                Note note = new Note(edtNote.getText().toString());
                noteAdapter.add(note);
                edtNote.setText("");
            }
        });
    }

    @Override
    public void onResume() {
        super.onResume();
        adMob.getAdView().bringToFront();
    }
}

This code initializes the AdMob ad, loads the ad, and sets the ad view to the front when the app is resumed.

Step 7: Testing the App

Run the app on an emulator or a physical device to test the note-taking functionality and AdMob ads. Make sure to replace the YOUR_ADMOB_APP_ID placeholder with your actual AdMob app ID.

That's it! You now have a professional-looking Android Note App with AdMob ads.