Question

I have a big ‘Log in’ button on my app. When the user taps this button, I want to replace the text with ‘Logging in…’, align it to the left instead of center and put a spinning circle on the right (but still inside the button). I’d like to use essentially the same button (but with different initial and loading text) in other places in my app.

What’s the neatest way to do this? For the actual spinning graphic, I was planning to use the @drawable/spinner_white_16 that comes with Android.

Thanks.

Answer 1

You can create your own button using a RelativeLayout containing a TextView and an ImageView.

<RelativeLayout android:id="@+id/login"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    onClick="[yourLoginMethod]" >

    <TextView android:id="@+id/login_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Log In" />

    <ImageView android:id="@+id/login_loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/login_text"
        android:visibility="gone" />

</RelativeLayout>

And then in whatever your login method is called, change the contents of the TextView, make it align parent right, and set the ImageView visibility to visible.

loginText.setText("Logging In...");
LayoutParams params = loginText.getLayoutParams();
params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
loginText.setLayoutParams(params);
loginLoading.setVisibility(View.VISIBLE);

And then I would also have some code that reverses those changes if the login fails.