android – Styling FacebookActivity to avoid terrible progress bar-ThrowExceptions

Exception or error:

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.

enter image description here

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?

How to solve:

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+

###

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.

###

Only one method works for me:

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

immediately after FacebookSdk.sdkInitialize

###

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.

###

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>

###

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>

Leave a Reply

Your email address will not be published. Required fields are marked *