Mohammed Farhan
Mohammed Farhan

Reputation: 1138

Facebook Account Kit UI Customization

While using facebook account kit I found that its listing all the county codes but I just want to target this app only for particular country. And I also know that we can use setDefaultCountryCode(String defaultCountryCode) in AccountKitConfigurationBuilder to give default value.

I have already searched for solutions which would disable the click on country code spinner in default theme provided by facebook but I didn't find any solution.

So while reading facebook account kit docs I found that we can have a list of country codes which can be passed to setSMSWhitelist(String[] smsWhitelist) method of AccountKitConfigurationBuilder, this will show the list of country codes which we want to target.

    String[] smsWhitelist = new String[]{"IN"};
    final Intent intent = new Intent(this, AccountKitActivity.class);
    AccountKitConfiguration.AccountKitConfigurationBuilder configurationBuilder =
            new AccountKitConfiguration.AccountKitConfigurationBuilder(
                    LoginType.PHONE,
                    AccountKitActivity.ResponseType.TOKEN); 
    configurationBuilder.setReadPhoneStateEnabled(true);
    configurationBuilder.setSMSWhitelist(smsWhitelist);
    configurationBuilder.setUIManager(uiManager);
    configurationBuilder.setReceiveSMS(true);

So this solved by requirement but I got some UI design flaw while showing list of particular country codes, something round corner transparent overlay dialog is appearing in background of popup spinner dialog like this

enter image description here

which also seems to appear while showing all country codes (see bottom)

enter image description here

Can this be solved? Or am I missing something while styling the theme

uiManager = new ThemeUIManager(R.style.LoginTheme);

   <style name="LoginTheme" parent="Theme.AccountKit">
    <item name="android:windowNoTitle">true</item>
    <item name="com_accountkit_button_disabled_background_color">#9ebcff</item>
    <item name="com_accountkit_primary_color">#ffffff</item>
    <item name="com_accountkit_primary_text_color">#ffffff</item>
    <item name="com_accountkit_secondary_text_color">#2c2e70</item>
    <item name="com_accountkit_button_background_color">#2c2e70</item>
    <item name="com_accountkit_button_border_color">#2c2e70</item>
    <item name="com_accountkit_title_text_color">#ffffff</item>
    <item name="com_accountkit_background_color">@color/colorPrimaryDark</item>
    <item name="com_accountkit_input_accent_color">#ffffff</item>


    <item name="com_accountkit_input_background_color">#2c2e70</item>
    <item name="com_accountkit_input_text_color">#ffffff</item>
    <item name="com_accountkit_button_text_color">#ffffff</item>
</style>

Upvotes: 1

Views: 647

Answers (0)

Related Questions