round corner google sign in button - android

Question

I am trying to add 'Sign in with Google' feature on my app. I am using following code to add google sign in button

<com.google.android.gms.common.SignInButton
   android:id="@+id/btn_google_signin"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_marginTop="24dp"
   android:background="?attr/selectableItemBackground"
   android:elevation="2dp"></com.google.android.gms.common.SignInButton>

This is rendering a rectangular button. But i want round corner button. is there any way to customize this button with round corner?

P.S. - I am not looking to customize the normal button. I am specifically looking Google SignInButton. Please reply if you know about that only.

check this post for the answer http://stackoverflow.com/questions/6054562/how-to-make-the-corners-of-a-button-round — Dmitry Smolyaninov, Apr 19 '17 at 11:17
That is for normal button and i know that. quite specific for google sign in button. — Shahnaz Khan, Apr 20 '17 at 06:26

Karmesh Duggar · Answer 1 · 2021-10-29T14:59:29.933

You can use the Material button with SignInButton like this,

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

    <com.google.android.material.button.MaterialButton
        android:id="@+id/sign_in_button1"
        android:layout_width="300dp"
        android:layout_height="60dp"
        app:cornerRadius="10dp"
        android:layout_weight="1"
        android:backgroundTint="@color/white"
        android:text="Login With Google"
        android:textColor="@color/black"
        app:icon="@drawable/googleg_standard_color_18"
        app:iconPadding="10dp"
        app:iconTint="#00100D0D"
        app:iconTintMode="src_atop"
 />

And in Java code you can access it like this:

        SignInButton signInButton = findViewById(R.id.sign_in_button);
        signInButton.setSize(SignInButton.SIZE_STANDARD);
        TextView textView = (TextView) signInButton.getChildAt(0);
        textView.setText("Log in With Google");

        findViewById(R.id.sign_in_button1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               Intent signInIntent = mGoogleSignInClient.getSignInIntent();
               startActivityForResult(signInIntent, RC_SIGN_IN);
            }
        });

score -1 · Answer 2 · answered Apr 19 '17 at 11:16

round_style.xml in drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
 <item android:state_pressed="true" >
     <shape android:shape="rectangle"  >
         <corners android:radius="3dip" />
         <stroke android:width="1dip" android:color="#5e7974" />
         <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
     </shape>
 </item>
<item android:state_focused="true">
     <shape android:shape="rectangle"  >
         <corners android:radius="3dip" />
         <stroke android:width="1dip" android:color="#5e7974" />
         <solid android:color="#58857e"/>       
     </shape>
 </item>  
<item >
    <shape android:shape="rectangle"  >
         <corners android:radius="3dip" />
         <stroke android:width="1dip" android:color="#5e7974" />
         <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
     </shape>
 </item>
</selector>

OR

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#DEB887"/>
        <stroke android:color="#8A2BE2" android:width="2dp" />
        <!--corners allow us to make the rounded corners button-->
        <corners android:radius="15dp" />
    </shape>
</item>
</selector>

Now use

<com.google.android.gms.common.SignInButton
   android:id="@+id/btn_google_signin"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_marginTop="24dp"
   android:background="@drawable/round_style"
   android:elevation="2dp"></com.google.android.gms.common.SignInButton>

with your solution, round background is in the back and button comes on round background — Shahnaz Khan, Apr 20 '17 at 06:45

score -1 · Answer 3 · answered Apr 19 '17 at 11:18

You can use Card View. And put SignInButton into CardView like this:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"                  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="wrap_content"
   android:layout_height="match_parent"       
   android:layout_marginBottom="4dp"                                  
   android:layout_marginRight="4dp"                                   
   android:layout_marginTop="4dp"                                  
   app:cardCornerRadius="4dp"
   app:cardElevation="2dp">

   <com.google.android.gms.common.SignInButton
     android:id="@+id/btn_google_signin"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginTop="24dp"
     android:background="?attr/selectableItemBackground"
     android:elevation="2dp"></com.google.android.gms.common.SignInButton>

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

This adds a background with round corner but not a round corner on Sign In button — E.Akio, Mar 19 '20 at 20:48

round corner google sign in button - android

3 Answers3