Using the Form Editing UI within Fragment

PdfActivity includes the form editing UI out of the box. This article shows how to manually integrate the existing form editing UI into your custom activities built around PdfFragment.

ℹ️ Note: This article assumes you are familiar with concept of special modes.

Form Editing Bar

The FormEditingBar is a simple auxiliary view that helps with form filling. It provides buttons for navigating between form elements in tab order, clearing filled elements, and leaving form editing mode.

Manual Integration

For adding the form editing bar to your custom activity, you need to manually add FormEditingBar to a view wrapping the PdfFragment:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context=".examples.activities.ToolbarsInFragmentActivity"
             tools:ignore="UnusedAttribute">

    <FrameLayout
        android:id="@+id/fragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.pspdfkit.ui.forms.FormEditingBar
        android:id="@+id/formEditingBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />

</FrameLayout>

Here’s a simple layout containing a FrameLayout serving as a fragment placeholder, and a FormEditingBar that will be displayed at the bottom of the screen or above the soft keyboard.

To display the form editing bar, you need to bind it to the FormEditingController after entering form editing mode. Special mode controllers are retrieved from mode change listeners registered on the PdfFragment. In your activity, you need to register a listener to a fragment and then bind the form editing controller to the previously created form editing bar:

Copy
MyActivity.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class MyActivity : AppCompatActivity(), OnFormElementEditingModeChangeListener {
    private lateinit var formEditingBar: FormEditingBar
    private lateinit var fragment: PdfFragment

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_form_editing_fragment)

        formEditingBar = findViewById(R.id.formEditingBar)

        // ... Init fragment here ...

        // Register a listener for special mode changes.
        fragment.addOnFormElementEditingModeChangeListener(this)
    }

    override fun onEnterFormElementEditingMode(controller: FormEditingController) {
        // Binding the form editing bar to the form editing controller will animate the bar into view.
        formEditingBar.bindController(controller)
    }

    override fun onChangeFormElementEditingMode(controller: FormEditingController) {
        // Nothing to be done here. The bound form editing bar will pick up the changes.
    }

    override fun onExitFormElementEditingMode(controller: FormEditingController) {
        // Unbind the form editing controller from the UI. This will animate the form editing bar out of view.
        formEditingBar.unbindController()
    }
}
Copy
MyActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
class MyActivity extends AppCompatActivity implements OnFormElementEditingModeChangeListener {
    private FormEditingBar formEditingBar;
    private PdfFragment fragment;

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

        formEditingBar = findViewById(R.id.formEditingBar);

        // ... Init fragment here ...

        // Register a listener for special mode changes.
        fragment.addOnFormElementEditingModeChangeListener(this);
    }

    @Override
    public void onEnterFormElementEditingMode(@NonNull FormEditingController controller) {
        // Binding the form editing bar to the form editing controller will animate it into view.
        formEditingBar.bindController(controller);
    }

    @Override
    public void onChangeFormElementEditingMode(@NonNull FormEditingController controller) {
        // Nothing to be done here. The bound form editing bar will pick up the changes.
    }

    @Override
    public void onExitFormElementEditingMode(@NonNull FormEditingController controller) {
        // Unbind the form editing controller from the UI. This will animate the form editing bar out of view.
        formEditingBar.unbindController();
    }
}

Form Editing Inspector

PdfActivity displays a form editing inspector in a bottom sheet when the choice form fields (ComboBoxFormElement and ListBoxFormElement) are being edited.

If you want to integrate the form editing inspector into your custom activity, follow the Using Property Inspectors within Fragment guide.

ℹ️ Note: For a complete example of how to integrate the form editing inspector and form editing bar, take a look at the FormEditingInFragmentExample in our Catalog app.