Scribd
Upload
2 views

Practical Problem_Fragment_Android

The document outlines the implementation of a simple Notes app using fragments in Android. It includes a MainActivity that hosts a NoteListFragment for displaying a list of notes and a NoteDetailFragment for showing details of a selected note, with dynamic fragment transactions for navigation. The document provides code snippets for the main activity, fragments, and their layouts, along with testing instructions for the app's functionality.

Uploaded by

Irfan Ul Haq
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Practical Problem_Fragment_Android

The document outlines the implementation of a simple Notes app using fragments in Android. It includes a MainActivity that hosts a NoteListFragment for displaying a list of notes and a NoteDetailFragment for showing details of a selected note, with dynamic fragment transactions for navigation. The document provides code snippets for the main activity, fragments, and their layouts, along with testing instructions for the app's functionality.

Uploaded by

Irfan Ul Haq
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Practical Problem: Fragment-Based UI for a Notes App

Objective: Implement a simple Notes app where:

 Fragment A: Displays a list of notes (ListFragment).


 Fragment B: Displays the details of a selected note (DetailFragment).
 Dynamic Fragment Transactions: Switching between fragments.

Steps for Implementation

1. Project Structure

 MainActivity: Hosts the fragments.


 NoteListFragment: Displays a list of notes.
 NoteDetailFragment: Displays note details.
 Fragment Communication: Pass selected note details from NoteListFragment to
NoteDetailFragment.

2. MainActivity
java
Copy code
package com.example.notesapp;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

public class MainActivity extends AppCompatActivity implements


NoteListFragment.NoteSelectedListener {

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

// Load the NoteListFragment on app start


if (savedInstanceState == null) {
NoteListFragment noteListFragment = new NoteListFragment();
getSupportFragmentManager().beginTransaction()
.add(R.id.fragment_container, noteListFragment)
.commit();
}
}

@Override
public void onNoteSelected(String note) {
// Replace NoteListFragment with NoteDetailFragment and pass selected
note
NoteDetailFragment detailFragment =
NoteDetailFragment.newInstance(note);
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.fragment_container, detailFragment);
transaction.addToBackStack(null); // Add to back stack to handle back
navigation
transaction.commit();
}
}

3. NoteListFragment
java
Copy code
package com.example.notesapp;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import androidx.fragment.app.Fragment;

public class NoteListFragment extends Fragment {

private NoteSelectedListener listener;

public interface NoteSelectedListener {


void onNoteSelected(String note);
}

@Override
public void onAttach(Context context) {
super.onAttach(context);
if (context instanceof NoteSelectedListener) {
listener = (NoteSelectedListener) context;
} else {
throw new ClassCastException(context.toString() + " must implement
NoteSelectedListener");
}
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_note_list, container,
false);
ListView listView = view.findViewById(R.id.note_list);
String[] notes = {"Note 1: Meeting at 3 PM", "Note 2: Buy groceries",
"Note 3: Call John"};
ArrayAdapter<String> adapter = new ArrayAdapter<>(getContext(),
android.R.layout.simple_list_item_1, notes);
listView.setAdapter(adapter);

listView.setOnItemClickListener((AdapterView<?> parent, View view1,


int position, long id) -> {
String selectedNote = notes[position];
listener.onNoteSelected(selectedNote);
});

return view;
}
}

Layout for NoteListFragment (fragment_note_list.xml)

xml
Copy code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ListView
android:id="@+id/note_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

4. NoteDetailFragment
java
Copy code
package com.example.notesapp;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.fragment.app.Fragment;

public class NoteDetailFragment extends Fragment {

private static final String ARG_NOTE = "note";

public static NoteDetailFragment newInstance(String note) {


NoteDetailFragment fragment = new NoteDetailFragment();
Bundle args = new Bundle();
args.putString(ARG_NOTE, note);
fragment.setArguments(args);
return fragment;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_note_detail, container,
false);

TextView noteDetail = view.findViewById(R.id.note_detail);


if (getArguments() != null) {
String note = getArguments().getString(ARG_NOTE);
noteDetail.setText(note);
}

return view;
}
}

Layout for NoteDetailFragment (fragment_note_detail.xml)

xml
Copy code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/note_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:padding="16dp" />
</LinearLayout>

5. Activity Layout (activity_main.xml)


xml
Copy code
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />

Testing the App


1. Run the App: The NoteListFragment will display a list of notes.
2. Select a Note: Selecting a note will replace the list with NoteDetailFragment, showing
the note details.
3. Back Navigation: Pressing the back button will return to the NoteListFragment.

You might also like