Styling FacebookActivity to avoid terrible progress bar

Question

I just implemented logging in through Facebook using their SDK in conjunction with ParseFacebookUtilsV4.

In my manifest I had to declare a FacebookActivity that gets launched when I try to sign in, and that works great.

<activity android:name="com.facebook.FacebookActivity"
    android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:theme="@android:style/Theme.Translucent.NoTitleBar"
    android:label="@string/app_name" />

This snippet comes from official docs so I didn't choose anything. What I found really weird is its styling. On my emulator (API 22) it has a ProgressBar that seems to be coming from the '90s! Is there a way to style it? I have tried changing the android:theme attribute, but with no success.

I thought of extending com.facebook.FacebookActivity, but after digging through source code I found out it inflates a com.facebook.LoginFragment, which is then responsible of the progress bar actually. Any ideas?

Plumbiferous

Just a suggestion, you can have your own progressbar or progressdialog which start with when you make call to fb api and ends with onActivityResult and that should overlap to your facebook view. – Moneyer

@Moneyer After that progressbar there's a facebook dialog asking the user for password and permissions, I can't have a progressdialog on top of it. – Plumbiferous

Have you tried to apply a dialog theme from AppCompact to FacebookActivity – Segment

@Ahmad yes, I said that in the comments to one of the answers. – Plumbiferous

I have the same concern as you have outlined. Great question! – Kunlun

Answer 1

You can now set theme in your AndroidManifest.xml

commit src link

Usage:

AndroidManifest.xml

    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    <meta-data android:name="com.facebook.sdk.ApplicationName" android:value="@string/app_name"/>
    <meta-data android:name="com.facebook.sdk.WebDialogTheme" android:value="@style/Theme.AppCompat.Light.NoActionBar"/>

This is valid for facebook-android-sdk v4.8.0+

Obadias

This doesn’t work really, progress bar is still old-styled. – Plumbiferous

@mvai Verify webdialogtheme param and facebook sdk version you are using. Actually this works for me. – Obadias

Answer 2

First of all it's not progress bar, it's progress dialog. I don't know how make custom progress dialog with style.

So here is a solution changing default style(Theme_Translucent_NoTitleBar) with holo style(Theme.Holo.Light). For that we need to make changes in Facebook SDk.

1) Put below code in style.xml

<style name="NewDialogTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:background">@android:color/transparent</item>
</style>

2) And second thing that we need to change here in WebDialog.java inside com.facebook.widget package.

public static final int DEFAULT_THEME = R.style.NewDialogTheme;

Hope this helps you.

Moneyer

Answer 3

Only one method works for me:

FacebookSdk.setWebDialogTheme(android.R.style.Theme_Holo_Light_NoActionBar);

immediately after FacebookSdk.sdkInitialize

Compliment

Answer 4

The android:theme you have set to your activity in your manifest is based on the original themes that were used in Android before Honeycomb. That's why your ProgressBar looks so old. You could try another theme like:

@android:style/Theme.Material.NoActionBar.TranslucentDecor

This is based on the new Material Design but of course this only works on Lollipop devices. Look into the AppCompat-Library for more Material Design styles that are compatible with older devices.

Ethelred

I didn't set it, I just copy pasted the official-docs suggestion. I have tried changing it, but it seems to have no effect on the progress bar. Can't try with your style because I'm working for API<21 with appcomat . – Plumbiferous

Does not work. It's like it is styled by the LoginFragment managed by the FacebookActivity, as said in my question. – Plumbiferous

Answer 5

You can style whatever you want like this:

 <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:textViewStyle">@style/MyStyles.TextView</item>
    <item name="android:buttonStyle">@style/MyStyles.Button</item>
    <item name="android:progressBarStyle">@style/MyStyle.ProgressStyle</item>
    <item name="android:indeterminateProgressStyle">@style/MyStyle.ProgressStyle</item>
    <item name="android:actionBarStyle">@style/MyStyle.Toolbar</item>
</style>

Then

    <style name="MyStyle.ProgressStyle" parent="android:Widget.Holo.Light.ProgressBar">
        <item name="...">...</item>
    </style>

Indeterminacy

I'm totally ok with AppCompat default progress bar, the problem is that FacebookActivity is internally using another style. – Plumbiferous

I don't think you can style other people's apps without rooting your device... Unless the app maker provides an API for it. – Indeterminacy

Answer 6

When an Activity creates the View for a Dialog, it goes to the Activity's theme and looks up the theme specified by the android:alertDialogTheme attribute. What you need to do is set that attribute to AppCompat's dialog theme (which for <v21 defaults to Theme.Holo):

In the theme that you apply to the Facebook Activity:

<style name="MyFacebookTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:alertDialogTheme">@style/Theme.AppCompat.Light.Dialog</item>
    ...
</style>

Swob