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 [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainActivity extends AppCompatActivity implements
[Link] {
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
// Load the NoteListFragment on app start
if (savedInstanceState == null) {
NoteListFragment noteListFragment = new NoteListFragment();
getSupportFragmentManager().beginTransaction()
.add([Link].fragment_container, noteListFragment)
.commit();
}
}
@Override
public void onNoteSelected(String note) {
// Replace NoteListFragment with NoteDetailFragment and pass selected
note
NoteDetailFragment detailFragment =
[Link](note);
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = [Link]();
[Link]([Link].fragment_container, detailFragment);
[Link](null); // Add to back stack to handle back
navigation
[Link]();
}
}
3. NoteListFragment
java
Copy code
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class NoteListFragment extends Fragment {
private NoteSelectedListener listener;
public interface NoteSelectedListener {
void onNoteSelected(String note);
}
@Override
public void onAttach(Context context) {
[Link](context);
if (context instanceof NoteSelectedListener) {
listener = (NoteSelectedListener) context;
} else {
throw new ClassCastException([Link]() + " must implement
NoteSelectedListener");
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = [Link]([Link].fragment_note_list, container,
false);
ListView listView = [Link]([Link].note_list);
String[] notes = {"Note 1: Meeting at 3 PM", "Note 2: Buy groceries",
"Note 3: Call John"};
ArrayAdapter<String> adapter = new ArrayAdapter<>(getContext(),
[Link].simple_list_item_1, notes);
[Link](adapter);
[Link]((AdapterView<?> parent, View view1,
int position, long id) -> {
String selectedNote = notes[position];
[Link](selectedNote);
});
return view;
}
}
Layout for NoteListFragment (fragment_note_list.xml)
xml
Copy code
<LinearLayout
xmlns:android="[Link]
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 [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
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();
[Link](ARG_NOTE, note);
[Link](args);
return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = [Link]([Link].fragment_note_detail, container,
false);
TextView noteDetail = [Link]([Link].note_detail);
if (getArguments() != null) {
String note = getArguments().getString(ARG_NOTE);
[Link](note);
}
return view;
}
}
Layout for NoteDetailFragment (fragment_note_detail.xml)
xml
Copy code
<LinearLayout
xmlns:android="[Link]
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="[Link]
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.
