Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

android google signin and facebook login button look completely different

The default Facebook LoginButton object and the Google SignIn button object have completely different appearances and they do not fit in my existing layout together. To my knowledge, these objects are not assets I can modify without changing the library itself (where I would assume these components are also open source)

How do people deal with this? I have seen apps that have sign-in options for both of those that use their own custom buttons, but in my implementation I am using those given objects that automatically call their respective libraries on click.

I can of course dive deeper, but I feel like I am reinventing the not-so-obvious wheel if I did that

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

This object is not so obviously a button, and I haven't yet inspected to see if it really is a button.

I need to use different assets for both the Google+ and Facebook Login button.

What I have

An android example I like (Duolingo app)

edit: after some very simple layout adjustments, this is the result (in landscape mode, just to illuminate the problem)

these buttons are still very different and I need a different asset that will still access the correct methods. I sort of get how to do it with Facebook, thanks to the examples, but Google sign in is pretty cryptic to me right now

like image 565
CQM Avatar asked May 30 '13 15:05

CQM


People also ask

How to design Google login button?

To create a Google Sign-In button with custom settings, add an element to contain the sign-in button to your sign-in page, write a function that calls signin2. render() with your style and scope settings, and include the https://apis.google.com/js/platform.js script with the query string onload=YOUR_RENDER_FUNCTION .

What is the login button?

When inserted properly, a login button appears on the Web page. Clicking the login button opens a login window in which a user enters the username and password.

What is the log back in button on Facebook?

The Login button is a simple way to trigger the Facebook Login process on your website or web app. If someone hasn't logged into your app yet, they'll see this button, and clicking it will open a Login dialog, starting the login flow.


2 Answers

To change the text on the Facebook button use:

fb:login_text="Put your login text here"
fb:logout_text="Put your logout text here"

You will also need to add this to the button:

xmlns:fb="http://schemas.android.com/apk/res-auto"

like so:

<com.facebook.widget.LoginButton
        xmlns:fb="http://schemas.android.com/apk/res-auto"
        android:id="@+id/login_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="0dp"
        fb:login_text="Sign in with Facebook"
        />
like image 124
iamgeef Avatar answered Oct 18 '22 23:10

iamgeef


Try This : Add this method to your activity:

protected void setGooglePlusButtonText(SignInButton signInButton, String buttonText) {
        for (int i = 0; i < signInButton.getChildCount(); i++) {
            View v = signInButton.getChildAt(i);

            if (v instanceof TextView) {
                TextView tv = (TextView) v;
                tv.setTextSize(15);
                tv.setTypeface(null, Typeface.NORMAL);
                tv.setInputType(InputType.TYPE_TEXT_FLAG_CAP_WORDS);
                tv.setText(buttonText);
                return;
            }
        }
    }

Add following line in onCreateMethod (where you have init the id's) :

setGooglePlusButtonText(btnSignIn, getString(R.string.common_signin_button_text_long));
like image 37
Namrata Avatar answered Oct 18 '22 23:10

Namrata