Firebase Authentication - 7 - Change display name

Index

Welcome to the seventh part of the Firebase Authentication series! In the previous part I showed you how to update a users profile picture in Android Studio with Firebase Authentication. In this part, I will show you how to change a users display name. A popup dialog will be shown when the users want to change their display name where they will be able to type the new requested name. Go ahead and create a new xml file in res/layout and name it dialog_change_displayname.xml.

dialog_change_displayname.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textCapWords"
        android:hint="New Display Name..."
        android:layout_margin="20dp"/>
</LinearLayout>

This file will only consist of an EditText with the hint New Display Name. It will be inflated in ChangeDisplayNameDialog.java, create that class and put it in the DialogFragments folder.

ChangeDisplayNameDialog.java

package com.frogitecture.authenticatedgoose.DialogFragments;

import android.app.Dialog;
import android.content.Context;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;

import com.frogitecture.authenticatedgoose.R;

import androidx.appcompat.app.AlertDialog;
import androidx.fragment.app.DialogFragment;

public class ChangeDisplayNameDialog extends DialogFragment {

    public interface ChangeDisplayNameListener {
        void onChangeDisplayName(String displayName);
    }

    public ChangeDisplayNameListener listener;

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

        LayoutInflater inflater = requireActivity().getLayoutInflater();

        View view = inflater.inflate(R.layout.dialog_change_displayname, null);
        final EditText editText = view.findViewById(R.id.edittext);

        builder.setView(view)
                .setTitle("Change Display Name")
                .setPositiveButton("Change", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int id) {
                        String newDisplayName = editText.getText().toString();
                        listener.onChangeDisplayName(newDisplayName);
                    }
                })
                .setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int id) {

                    }
                });
        return builder.create();
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);

        try {
            listener = (ChangeDisplayNameListener) context;
        } catch (ClassCastException e) {
            throw new ClassCastException(getActivity().toString() + " must implement the listener you silly goose");
        }
    }
}

We got an interface, ChangeDisplayNameListener, with the method onChangeDisplayName(String displayName). This method is called when the Change button is clicked, and the argument will come from the EditText we created in the xml file.

I'm not going to show you the whole MainActivity.java as I have done in the other parts since it's getting rather big, and we are not adding a lot of code. Let's just focus on the changes now. You can go back to the previous part if you need to see the whole class.

We want to show the dialog we just created when a user clicks on the Change display name option in the toolbar, so we create a new object and of it and call it's show method:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {

        ...

        case R.id.change_display_name:
            ChangeDisplayNameDialog changeDisplayNameDialog = new ChangeDisplayNameDialog();
            changeDisplayNameDialog.show(getSupportFragmentManager(),"Change Display Name");
            break;

        ...
    }
}

To get a reaction from the change button we need to implement the interface we created in the ChangeDisplayNameDialog class.

public class MainActivity extends AppCompatActivity implements
        ChangeDisplayNameDialog.ChangeDisplayNameListener {

    ...

}

This will require us to add the actual method, and it will look like this:

@Override
public void onChangeDisplayName(final String displayName) {
    loadingDialog.setMessage("Changing display name...");
    loadingDialog.show(getSupportFragmentManager(),"Changing Display Name...");

    UserProfileChangeRequest profileChangeRequest = new UserProfileChangeRequest.Builder()
            .setDisplayName(displayName)
            .build();

    firebaseUser.updateProfile(profileChangeRequest)
            .addOnCompleteListener(new OnCompleteListener<Void>() {
                @Override
                public void onComplete(@NonNull Task<Void> task) {
                    if (task.isSuccessful()) {
                        displayNameTxt.setText(displayName);
                    }
                    loadingDialog.dismiss();
                }
            });
}

The loading dialog is first shown when the change button is clicked, and then create a UserProfileChangeRequest object. This time we tell it that we want to change the display name to the string displayName that is passed as an argument from the dialog before, and we call firebaseUser.updateProfile with this object as an argument.If successful, we update the display name TextView in the main activity.

In the next part I will show you how to make it possible for a user to change the email.

Firebase Authentication - 7 - Change display name

Index

Articles with similar tags