How to make default Google and Facebook login buttons look even and pretty? Please see details

Question

I have given option to login with google and facebook in my app.

But the default buttons looks uneven and ugly like this:

Here's xml code:

<android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentPadding="10dp"
            app:cardElevation="2dp"
            app:cardBackgroundColor="@android:color/white">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <com.google.android.gms.common.SignInButton
                    android:id="@+id/google_login_button"
                    android:layout_width="@dimen/sign_in_btn_width"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal" />

                <com.facebook.login.widget.LoginButton
                    android:id="@+id/facebook_login_button"
                    android:layout_width="@dimen/sign_in_btn_width"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/margin_between_google_facebook_signup_btn"
                    android:layout_gravity="center_horizontal" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

How can I make them look even and pretty?

Please let me know.

Sorry if question seems to be badly formatted. I'm just a beginner here.

@tyczj yeah, i could but I wanna use the default buttons. Any way to make this look even? — Hammad Nasir, Apr 07 '16 at 13:35
You cant change default buttons. Except google plus buttons. But google offers 2 different button design. You can make your own buttons like i answered below. — Alican Temel, Apr 08 '16 at 06:29

score 2 · Answer 1 · answered Apr 07 '16 at 15:03

Here is the custom login button(Facebook)

           <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="50dp"
                app:cardBackgroundColor="#3b5998">

                <RelativeLayout
                    android:id="@+id/login_button"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_margin="5dp"
                    android:background="#3b5998">

                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentLeft="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="10dp"
                        android:src="@drawable/ic_facebook" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:text="Login With Facebook"
                        android:textColor="#ffffff"
                        android:textSize="17sp"
                        android:textStyle="bold" />
                </RelativeLayout>
            </android.support.v7.widget.CardView>

And you have to listen the click event

 login_button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            selectedLoginButton = FACEBOOK;
            LoginManager.getInstance().logOut();
            LoginManager.getInstance().logInWithReadPermissions(SigninFragment.this, Arrays.asList("email,public_profile"));
            LoginManager.getInstance().registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
                @Override
                public void onSuccess(final LoginResult loginResult) {
                    handleFacebookLogin(loginResult);
                }

                @Override
                public void onError(FacebookException exception) {
                    handleFacebookError(exception);
                }

                @Override
                public void onCancel() {
                    handleFacebookCancel();
                }
            });
        }
    });

for google plus;

btn_sign_in.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent signInIntent = Auth.GoogleSignInApi.getSignInIntent(mGoogleApiClient);
            startActivityForResult(signInIntent, RC_SIGN_IN);
        }
    });

score 1 · Accepted Answer · answered Apr 07 '16 at 17:03

Okay, I figured out the solution.

Here's edited xml code:

<LinearLayout
                android:layout_width="@dimen/sign_in_btn_width"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_gravity="center">

                <com.google.android.gms.common.SignInButton
                    android:id="@+id/google_login_button"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal" />

                <com.facebook.login.widget.LoginButton
                    android:id="@+id/facebook_login_button"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/sign_in_btn_height"
                    android:layout_marginTop="@dimen/margin_between_google_facebook_signup_btn"
                    android:layout_gravity="center_horizontal"
                    android:paddingTop="11dp"
                    android:paddingBottom="11dp"
                    android:paddingLeft="12dp"
                    android:layout_marginLeft="3dp"
                    android:layout_marginRight="3dp"
                    xmlns:facebook="http://schemas.android.com/apk/res-auto"
                    facebook:com_facebook_login_text="           Sign in"/>

            </LinearLayout>

        </android.support.v7.widget.CardView>

Here's java code for facebook login button:

float fbIconScale = 1.10F;
        Drawable drawable = getBaseContext().getResources().getDrawable(
                com.facebook.R.drawable.com_facebook_button_icon);
        drawable.setBounds(0, 0, (int)(drawable.getIntrinsicWidth()*fbIconScale),
                (int)(drawable.getIntrinsicHeight()*fbIconScale));

        /* *************************************
         *              FACEBOOK               *
         ***************************************/
        /* Load the Facebook login button and set up the tracker to monitor access token changes */
        mFacebookCallbackManager = CallbackManager.Factory.create();
        mFacebookLoginButton = (LoginButton) findViewById(R.id.facebook_login_button);
        mFacebookLoginButton.setCompoundDrawables(drawable, null, null, null);

Here is the result:

Peace!

what were the dimens you defined? – Anudeep Samaiya Jul 25 '16 at 18:25 — Anudeep Samaiya, Jul 25 '16 at 18:25

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

Google has a guide for customizing the Google's sign in Button

Also this answer could be usefull for customizing your login buttons

edited May 23 '17 at 10:28

Community

1
1

answered Apr 07 '16 at 14:27

Jeffalee

1,080
1
7
15

How to make default Google and Facebook login buttons look even and pretty? Please see details

3 Answers3

Linked