Android, style normal button like default Facebook button

Question

I'm doing a XML to log in into an app and, after two TextView for email and password, I want to place two buttons side-by-side to log in: one to use data in TextViews and another to use Facebook log in.

This is how it looks:

But if you look closely, Facebook's button is higher than the other one. Also font size and font family either match.

This is my code so far, with the two Buttons inside a horizontal LinearLayout:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center_horizontal">

    <Button android:id="@+id/email_sign_in_button" 
        style="android:textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/action_sign_in"
        android:textStyle="bold" />

    <com.facebook.login.widget.LoginButton
        android:id="@+id/login_button_fb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/com_facebook_loginview_log_in_button_long"
        android:paddingTop="10dp"
        android:paddingBottom="10dp" />

</LinearLayout>

EDIT:

I added Parse platform to this app, and it has a custom method to log in with a facebook's user.

ParseFacebookUtils.logInWithReadPermissionsInBackground(this, permissions, new LogInCallback() {
    @Override
    public void done(ParseUser user, ParseException err) {
        if (user == null) {
            Log.d("MyApp", "Uh oh. The user cancelled the Facebook login.");
        } else if (user.isNew()) {
            Log.d("MyApp", "User signed up and logged in through Facebook!");
        } else {
            Log.d("MyApp", "User logged in through Facebook!");
        }
    }
});

This method should be called when an user press Facebook Button, and I can't set it on click listener on com.facebook.login.widget.LoginButton .

The solution was make my own custom button but it doesn't looks like com.facebook.login.widget.LoginButton .

So my problem now is how to style my own button to looks like the Facebook one but with custom width, height, font family...

Answer 1

You can try using your own button for that purpose, not the one provided by Facebook. In onClick() method of that button you can start, for example, a new activity which connects to Facebook in its onCreate() method. Someting like that: public class FBActivity extends Activity {

LoginManager loginManager;
CallbackManager callbackManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_fb);

    ArrayList<String> permissionsFB = new ArrayList<>();
    permissionsFB.add("permissions that you need");

    loginManager = LoginManager.getInstance();
    loginManager.logInWithPublishPermissions(this, permissionsFB);

    FacebookSdk.sdkInitialize(getApplicationContext());
    callbackManager = CallbackManager.Factory.create();

    loginManager.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
        @Override
        public void onSuccess(LoginResult loginResult) {            

        }

        @Override
        public void onCancel() {

        }

        @Override
        public void onError(FacebookException e) {

        }
    });

}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    callbackManager.onActivityResult(requestCode, resultCode, data);
}

}

EDIT : You can make custom button inherit the FacebookButton style like that:

    <Button
            android:id="@+id/myFacebookButton"
            android:layout_width="150dp"
            android:layout_height="40dp"
            android:text="@string/connect"
            android:drawableLeft="@drawable/com_facebook_button_icon"
            style="@style/com_facebook_button"/>