How to change Fragment toolbar color based on whitelabel account

Product: Android Native SDK

Product Version: 9.2.3

Please give a brief summary of your issue:
How to change Fragment toolbar color based on whitelabel account

Please describe your issue and provide steps to reproduce it:
We have users that have whitelabeled accounts. Their primary color is based on their choice. We also have non-whitelabeled accounts so the style in xml is defaulted to non-whitelabeled colors.

Screen Shot 2022-07-06 at 2.26.14 PM

You can see the whitelabeled color up top (orange) and the defauly non whitelabeled color (blue in the toolbar).

Is there a way where we can dynamically change the PdfViewCtrlTabHostFragment2's Toolbar color based on injecting a whitelabeled color?

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hi Seth,

You can achieve this by setting the theme used in the ViewerBuilder. To do this you will need a second theme with all the changes you need. You can see an example here on customizing a theme here.

Please see sample code below:

boolean isWhiteLabeled = true;
ViewerBuilder2 builder = ViewerBuilder2.withUri(uri).usingCustomToolbar(new int[]{R.menu.my_custom_options_toolbar})
                .usingNavIcon(R.drawable.ic_star_white_24dp)
                .usingConfig(viewerConfig);
if(isWhiteLabeled){
   builder.usingTheme(R.style.MyCustomAppTheme);
} else {
   builder.usingTheme(R.style.MyCustomAppTheme2);
}

mPdfViewCtrlTabHostFragment = builder.build(this);

Please let us know if this solution works for you.

Best,
Eamon

Is there a way to dynamically apply a background color to just the toolbar? We don’t have xml style files per whitelabel. We are given the hex value from the server on app open and we apply the whitelabeled color like so:

binding.toolbar.setBackgroundColor(whiteLabelColor.shadeColor(0))

Is there a way I can grab the toolbar from the PdfViewCtrlTabHostFragment2 and apply a new background? I tried doing this but I couldn’t figure out the id.

pdfViewCtrlTabHostFragment.currentPdfViewCtrlFragment?.view?.findViewById<Toolbar>(R.id.toolbar).setBackgroundColor(whiteLabelColor.shadeColor(0))

Any thoughts would be great :slight_smile: Thank you!

Hi,

Unfortunately we do not have an explicit API for this, however, you can access the toolbar by calling getToolbar() using your PdfViewCtrlTabHostFragment.
Please see sample code below:

mPdfViewCtrlTabHostFragment.getToolbar();

Best,
Eamon

1 Like

When I call getToolbar() it returns as null. I’ll include all my code from Fragment creation to replacing the FrameLayout:

val toolManagerBuilder = ToolManagerBuilder.from()
                .setShowUndoRedo(false)

 val config = ViewerConfig.Builder()
                .saveCopyExportPath(context?.cacheDir?.absolutePath)
                .toolManagerBuilder(toolManagerBuilder)
                .toolbarTitle(newFileViewerViewModel.fileDetails.value?.data?.name ?: "")
                .fullscreenModeEnabled(false)
                .showToolbarSwitcher(false)
                .showAnnotationsList(false)
                .showAnnotationToolbarOption(false)
                .showAnnotationReplyReviewState(false)
                .showSearchView(true)
                .longPressQuickMenuEnabled(false)
                .useSupportActionBar(false)
                .showBookmarksView(false)
                .showEditPagesOption(false)
                .showOutlineList(false)
                .multiTabEnabled(false)
                .showAnnotationToolbarOption(false)
                .build()

val fragmentBuilder = ViewerBuilder2.withUri(Uri.parse(link))
                .usingCustomToolbar(
                    intArrayOf(
                        if (isTask) R.menu.task_file_menu
                        else R.menu.file_viewer_menu
                    )
                )
                .usingConfig(config)

// Explicitly declare file extension in not blank.
 // Will support files without extension in the name.
if (fileExtension.isNotBlank()) {
       fragmentBuilder.usingFileExtension(
               if (fileExtension.contains("."))
                        fileExtension.drop(1)
               else fileExtension
       )
}

pdfViewCtrlTabHostFragment = fragmentBuilder.build(it)
pdfViewCtrlTabHostFragment?.addHostListener(this)
pdfViewCtrlTabHostFragment?.let { fragment ->
     childFragmentManager.beginTransaction()
              .replace(binding.pdfViewCtrl.id, fragment)
              .commit()
}

if (BuildConfig.FLAVOR.isCFA()) {
     val color = activity?.getPrimaryColor() ?: return
     val gd = GradientDrawable()
     gd.gradientType = GradientDrawable.LINEAR_GRADIENT
     gd.gradientRadius = 200f * (resources.displayMetrics?.density ?: 1f)
     gd.colors = intArrayOf(color.shadeColor(10), color.shadeColor())

     pdfViewCtrlTabHostFragment?.getToolbar()?.background = gd
}

Could the Toolbar not be created yet? Is there a callback I can listen to when creation is complete?

I changed the Toolbar background by putting this code block

if (BuildConfig.FLAVOR.isCFA()) {
     val color = activity?.getPrimaryColor() ?: return
     val gd = GradientDrawable()
     gd.gradientType = GradientDrawable.LINEAR_GRADIENT
     gd.gradientRadius = 200f * (resources.displayMetrics?.density ?: 1f)
     gd.colors = intArrayOf(color.shadeColor(10), color.shadeColor())

     pdfViewCtrlTabHostFragment?.getToolbar()?.background = gd
}

inside the PdfViewCtrlTabHostFragment2.TabHostListener's override fun onToolbarCreateOptionsMenu(menu: Menu?, inflater: MenuInflater?). Is this a good spot to do that? I couldn’t figure out another way to observe if the toolbar was instantiated to the mToolbar variable.

I’m also still having trouble changing the toolbar’s title’s color. I’ve tried using the public void setTitleTextColor(@ColorInt int color):

pdfViewCtrlTabHostFragment?.toolbar?.setTitleTextColor(R.color.bumble)

And I’ve tried using the public void setTitleTextColor(@NonNull ColorStateList color):

pdfViewCtrlTabHostFragment?.toolbar?.setTitleTextColor(
                ColorStateList(
                    arrayOf(intArrayOf(android.R.attr.state_active), intArrayOf()),
                    intArrayOf(color.shadeColor(), color.shadeColor())
                )
            )

I resolved the Title Text Color issue. I was missing the titleTextColor in my style.

<style name="ToolbarStyle" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
     <item name="android:titleTextAppearance">@style/ToolbarTitleAppearance</item>
     <item name="android:colorControlNormal">@color/bumble</item>
     <item name="android:textColorSecondary">@color/bumble</item>
     <item name="titleTextColor">@color/bumble</item>
</style>

This resolved it! :smile:

All the issues are resolved :raised_hands:

I would like to know if there’s a better spot to apply the background color. Is observing the Toolbar in the override fun onToolbarCreateOptionsMenu(menu: Menu?, inflater: MenuInflater?) of the PdfViewCtrlTabHostFragment2.TabHostListener the best option?? :slightly_smiling_face:

Hi Seth,

You can create your own Fragment that extends our PdfViewCtrlTabHostFragment2 and change the toolbar colour in the initViews() function.

Please see sample Java code below:

public class MyCustomTabHostFragment extends PdfViewCtrlTabHostFragment2 {
    @Override
    protected void initViews() {
        super.initViews();
        getToolbar().setBackgroundColor(Color.GREEN);
    }
}


mPdfViewCtrlTabHostFragment = ViewerBuilder2.withUri(uri)
                // ...
                .build(this, MyCustomTabHostFragment.class);

Best,
Eamon

1 Like

This is great! Thanks Eamon. I saw documentation saying to extend the PdfViewCtrlTabHostFragment2 class but I was unsure how to initialize the views. This explains it :raised_hands:

Hi Seth,

We’re glad you were able to resolve your issue. If you have any further questions we look forward to hear from you again.

Thanks,
Andrew.