Can't use Facebook Account Kit: Error inflating class com.facebook.accountkit.ui.ConstrainedLinearLayout

Question

I'm trying to integrate Facebook AccountKit to allow users to sign-up with their e-mail or phone number. But when launching the AccountKitActivity, the app crash because it can't inflate a "ConstrainedLayout".

Error message :

java.lang.RuntimeException: Unable to start activity
android.view.InflateException: Binary XML file line #45: 
Error inflating class com.facebook.accountkit.ui.ConstrainedLinearLayout

And below:

Caused by: java.lang.UnsupportedOperationException: 
   Failed to resolve attribute at index 12: 
   TypedValue{t=0x3/d=0x512 "res/drawable/scrollbar_handle_material.xml" a=1 r=0x10805cd}

I'm using in my gradle:

compile 'com.facebook.android:facebook-android-sdk:4.11.0'
compile 'com.facebook.android:account-kit-sdk:4.11.0'

I'm calling AccountKit.initialize() before trying to launch the AccountKitActivity.

My simple login activity, made of two buttons:

public class LoginActivity extends Activity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        Button buttonSMS = (Button) findViewById(R.id.buttonSignInSms);
        Button buttonEmail = (Button) findViewById(R.id.buttonSignInEmail);

        buttonSMS.setOnClickListener(this);
        buttonEmail.setOnClickListener(this);
    }

    public static int APP_REQUEST_CODE = 42;

    public void onLoginPhone(final View view) {
        final Intent intent = new Intent(this, AccountKitActivity.class);
        AccountKitConfiguration.AccountKitConfigurationBuilder configurationBuilder =
                new AccountKitConfiguration.AccountKitConfigurationBuilder(
                        LoginType.PHONE,
                        AccountKitActivity.ResponseType.CODE); // or .ResponseType.TOKEN
        // ... perform additional configuration ...
        intent.putExtra(
                AccountKitActivity.ACCOUNT_KIT_ACTIVITY_CONFIGURATION,
                configurationBuilder.build());
        startActivityForResult(intent, APP_REQUEST_CODE);
    }

    public void onLoginEmail(final View view) {
        final Intent intent = new Intent(this, AccountKitActivity.class);
        AccountKitConfiguration.AccountKitConfigurationBuilder configurationBuilder =
                new AccountKitConfiguration.AccountKitConfigurationBuilder(
                        LoginType.EMAIL,
                        AccountKitActivity.ResponseType.CODE); // or .ResponseType.TOKEN
        // ... perform additional configuration ...
        intent.putExtra(
                AccountKitActivity.ACCOUNT_KIT_ACTIVITY_CONFIGURATION,
                configurationBuilder.build());
        startActivityForResult(intent, APP_REQUEST_CODE);
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.buttonSignInSms : {
                onLoginPhone(v);
                break;
            }
            case R.id.buttonSignInEmail : {
                onLoginEmail(v);
                break;
            }
        }
    }
}

Anyone as an idea?

Answer 1

I ran in to this exact same problem today integrating Account Kit. Their documentation isn't explicit on this, but you need to add the AppLoginTheme to your themes.xml:

<style name="AppLoginTheme" parent="Theme.AccountKit" />

Another possible solution is to remove the theme override for the AccountKitActivity in the manifest like so:

...
<activity android:name="com.facebook.accountkit.ui.AccountKitActivity" />
...

Answer 2

I had this problem. Zac's solution helped me to solve the problem. Below is my solution and this may be helpful for somebody else.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.screenshot.accountkitclient">
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <meta-data android:name="com.facebook.accountkit.ApplicationName"
            android:value="@string/app_name" />
        <meta-data android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/FACEBOOK_APP_ID" />
        <meta-data android:name="com.facebook.accountkit.ClientToken"
            android:value="@string/ACCOUNT_KIT_CLIENT_TOKEN" />

        <activity android:name="com.facebook.accountkit.ui.AccountKitActivity"
            tools:replace="android:theme"
            android:theme="@style/AppLoginTheme">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/ak_login_protocol_scheme" />
            </intent-filter>
        </activity>

    </application>

</manifest>

Don't forget to add tools:replace="android:theme" in the AccountKitActivity

style.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<style name="AppLoginTheme" parent="Theme.AccountKit">
    <item name="com_accountkit_primary_color">#ef0414</item>
    <item name="com_accountkit_primary_text_color">@android:color/white</item>
    <item name="com_accountkit_secondary_text_color">#f10910</item>
    <item name="com_accountkit_status_bar_color">#e40416</item>

    <item name="com_accountkit_input_accent_color">?attr/com_accountkit_primary_color</item>
    <item name="com_accountkit_input_border_color">?attr/com_accountkit_primary_color</item>
</style>