Create a Fragment App with Android Studio 3.1

This is a follow up from my previous Android Fragments in an Activity.

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

content_main.xml

• ConstraintLayout 
• TextView.

Edit the layout/activity_main.xml
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 values
Fragment 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) {
        //
}

Compile and run.

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.