This example, demonstrates how Fragments are created and loaded by an Activity class. Android Studio 3.1.1 is the IDE with Java 1.8.0 and an emulator is created with API 23. All this is running on Centos 7.
Step 1: Create an Empty project with vertical orientation
Open Android Studio and create a new project.Application name: My Fragment
Click Next
Click Checked for Phone and Tablet
Minimum SDK: choose API 23:Android 6.0 (Marshmallow)
Click Next
Choose "Basic Activity"
Click Next
Activity Name: MainActivity
Layout Name: activity_main
Title: MainActivity
Click checked Use a Fragment
Click "Finish"
This will provide a template to quickly create the rest of Fragments to be used with this Activity.
A total of 23 files are created in the app/src/main folder. By the time all steps are completed, there should be 29 files created in app/src/main folder.
=== Listing of 25 files at start of the project===
app/src/main/res/drawable/ic_launcher_background.xml
app/src/main/res/values/colors.xml
app/src/main/res/values/strings.xml
app/src/main/res/values/dimens.xml
app/src/main/res/values/styles.xml
app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
app/src/main/res/drawable-v24/ic_launcher_foreground.xml
app/src/main/res/mipmap-hdpi/ic_launcher_round.png
app/src/main/res/mipmap-hdpi/ic_launcher.png
app/src/main/res/mipmap-mdpi/ic_launcher_round.png
app/src/main/res/mipmap-mdpi/ic_launcher.png
app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
app/src/main/res/mipmap-xhdpi/ic_launcher.png
app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
app/src/main/res/mipmap-xxhdpi/ic_launcher.png
app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
app/src/main/res/layout/content_main.xml
app/src/main/res/layout/activity_main.xml
app/src/main/res/menu/menu_main.xml
app/src/main/java/com/example/nicholas/myfragment/MainActivity.java
app/src/main/AndroidManifest.xml
===
 |
| Project Structure of application - Newly create project |
A default project contains the following layouts
activity_main.xml
- CoordinatorLayout
- AppBarLayout
- Toolbar
- an include layout tag
- FloatingActionButton
- ConstraintLayout
- TextView.
In the CoordinatorLayout tag, insert following line before tools:context
tools:orientation="vertical"
Step 2: Add the buttons
Edit the file values/strings.xml and add within the <resources> tag<string name="digital">Digital</string>
<string name="analog">Analog</string>
<string name="textclock">Text Clock</string>
Edit content_main.xml and remove the whole TextView tag. Replace with 2 buttons where you can just drag and drop the buttons from the widget list. Add a FrameLayout where we will position our Fragment layouts. Edit the button code as follows
<Button
android:id="@+id/button_analog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/analog"
/>
<Button
android:id="@+id/button_digital"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="@string/digital"
app:layout_constraintTop_toBottomOf="@+id/button_analog"
/>
<Button
android:id="@+id/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="@string/textclock"
app:layout_constraintTop_toBottomOf="@+id/button_digital"
/>
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="280dp"
android:layout_height="495dp"
android:layout_marginStart="8dp"
app:layout_constraintStart_toEndOf="@+id/button_analog"
>
</FrameLayout>
Let build and run the project.
Click the Run App button (green play button) or press Shift+F10. I am using an API 23 emulator for my test applications. Create the Android emulator if it is not done yet.
Step 3: Create Analog Fragment
Click File ->New ->Fragment ->Fragment (Blank). Fill following valuesFragment Name: AnalogFragment
Fragment Layout Name: fragment_analog
Leave all other options checked.
Click Finish
In AnalogFragment.java, replace import android.support.v4.app.Fragment with
import android.app.Fragment;
I plan to provide support only to Android API 23 and above.
Lets explore the Design editor.
Edit layout/fragment_analog.xml and click the tab Design. Notice that the default is FrameLayout.
On the left is the Palette, in the middle is the screen design + blueprint, on the right is the Attributes list. In the Design area, click the menu to choose API 23. Right click any where on the design and choose Convert FrameLayout to ConstraintLayout. Click "Ok".
Delete the default TextView in the design.
From the Palette, notice there is no AnalogClock which means it will have to be manually added. Click the Text tab and insert the following
<AnalogClock
android:id="@+id/analogClock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
Step 4: Connect MainActivity with Analog Fragment
I have broken down the steps further in this step. Edit MainActivity class.1. Add following member variables
Button analogButton;
2. Edit protected void onCreate(Bundle savedInstanceState), add after the line setSupportActionBar(toolbar)
analogButton = (Button) findViewById(R.id.button_analog);
analogButton.setOnClickListener(this);
There should be a wriggly red line at the text "this", click once then press Alt+Enter. Choose "Make MainActivityFragment implement android,view.View.OnClickListener". Choose "onClick(v:View):void" and press "OK".
3. Add onClick(View v) method
FragmentManager manager = getFragmentManager();
FragmentTransaction transaction = manager.beginTransaction();
if(v==analogButton){
f = new AnalogFragment();
}
transaction.replace(R.id.fragment_container, f);
transaction.commit();
4. Edit the class declaration with the AnalogFragment
public class MainActivity extends AppCompatActivity implements View.OnClickListener,
AnalogFragment.OnFragmentInteractionListener {
Implement AnalogFragment's OnFragmentInteractionListener, add the method near the end of the class.
public void onFragmentInteraction(Uri uri) {
//
}
Step 5: Create Digital Fragment
Repeat steps 3 and 4 above but change the Analog to Digital. Below is the code to display a digital clock<DigitalClock
android:id="@+id/analogClock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#9a0"
android:padding="24dp"
android:textColor="#eff"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
Step 6: Create TextClock Fragment
Repeat steps 3 and 4 above but change the Analog to TextClock. Below is the code to display a digital clock<TextClock
android:id="@+id/analogClock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#9a0"
android:padding="24dp"
android:textColor="#eff"
android:textSize="25sp"
android:textStyle="bold"
android:format12Hour="HH:MM:ss EEEE"
android:format24Hour="EE H:mm:ss"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
Here is the complete source code for MainActvity.java
1: package com.example.nicholas.myfragment;
2: import android.app.Fragment;
3: import android.app.FragmentManager;
4: import android.app.FragmentTransaction;
5: import android.net.Uri;
6: import android.os.Bundle;
7: import android.support.design.widget.FloatingActionButton;
8: import android.support.design.widget.Snackbar;
9: import android.support.v7.app.AppCompatActivity;
10: import android.support.v7.widget.Toolbar;
11: import android.view.View;
12: import android.view.Menu;
13: import android.view.MenuItem;
14: import android.widget.Button;
15: public class MainActivity extends AppCompatActivity implements View.OnClickListener,
16: AnalogFragment.OnFragmentInteractionListener, DigitalFragment.OnFragmentInteractionListener,
17: TextClockFragment.OnFragmentInteractionListener {
18: Button analogButton, digitalButton, textClockButton;
19: Fragment f;
20: @Override
21: protected void onCreate(Bundle savedInstanceState) {
22: super.onCreate(savedInstanceState);
23: setContentView(R.layout.activity_main);
24: Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
25: setSupportActionBar(toolbar);
26: analogButton = (Button) findViewById(R.id.button_analog);
27: analogButton.setOnClickListener(this);
28: digitalButton = (Button) findViewById(R.id.button_digital);
29: digitalButton.setOnClickListener(this);
30: textClockButton = (Button) findViewById(R.id.button_textclock);
31: textClockButton.setOnClickListener(this);
32: FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
33: fab.setOnClickListener(new View.OnClickListener() {
34: @Override
35: public void onClick(View view) {
36: Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
37: .setAction("Action", null).show();
38: }
39: });
40: }
41: @Override
42: public boolean onCreateOptionsMenu(Menu menu) {
43: // Inflate the menu; this adds items to the action bar if it is present.
44: getMenuInflater().inflate(R.menu.menu_main, menu);
45: return true;
46: }
47: @Override
48: public boolean onOptionsItemSelected(MenuItem item) {
49: // Handle action bar item clicks here. The action bar will
50: // automatically handle clicks on the Home/Up button, so long
51: // as you specify a parent activity in AndroidManifest.xml.
52: int id = item.getItemId();
53: //noinspection SimplifiableIfStatement
54: if (id == R.id.action_settings) {
55: return true;
56: }
57: return super.onOptionsItemSelected(item);
58: }
59: @Override
60: public void onClick(View v) {
61: FragmentManager manager = getFragmentManager();
62: FragmentTransaction transaction = manager.beginTransaction();
63: if(v==analogButton){
64: f = new AnalogFragment();
65: } else if (v==digitalButton){
66: f = new DigitalFragment();
67: } else if (v==textClockButton) {
68: f = new TextClockFragment();
69: }
70: transaction.replace(R.id.fragment_container, f);
71: transaction.commit();
72: }
73: @Override
74: public void onFragmentInteraction(Uri uri) {
75: //
76: }
77: }
Done.
