Aligning views in android support Toolbar xml

Question

Using the android support Toolbar, I am trying to achieve this layout.

Essentially, I'm showing a progress bar , aligned to the right of the toolbar, which goes away after loading has finished , replaced with two "A"s.

1- I can Hide the progress bar and show the two "A"s when loading completes as needed

2- I need to get the two "A"s or the progress bar to nicely sit aligned right while at the same time keeping the app name in the center

I have tried various layout containers, but wanted to avoid hardcoding pixel margins if avoidable, and I wanted to prevent unnecessary container nesting.

This is my toolbar xml. The left arrowisn't part of the layout, it comes from here :

getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);

XML ( this isn't the exact xml which I used to take the screenshot , and is missing the layoutgravity but it wasn't working anyway)

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ToolBarTheme"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:gravity="center_vertical"
    android:background="@color/toolbar_color">


    <LinearLayout
        android:id="@+id/toolbar_fontsizewrapper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal">

        <TextView
            android:id="@+id/toolbar_titletextview"
            style="@style/ToolBarText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="My APP NAME" />

        <TextView
            android:id="@+id/toolbar_decreasefont"
            style="@style/ToolBarText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:text="A"
            android:textSize="18dp"
            android:visibility="gone" />

        <TextView
            android:id="@+id/toolbar_increasefont"
            style="@style/ToolBarText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A"
            android:textSize="24dp"
            android:visibility="gone" />

        <ProgressBar
            android:id="@+id/webclientprogressbar"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:visibility="visible" />
    </LinearLayout>


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

Any help appreciated. thanks

Answer 1

Instead of LinearLayout, try using RelativeLayout.

1. Use RelativeLayout as a direct child of Toolbar.

2. Use attribute android:layout_centerInParent="true" to your toolbar_titletextview to keep it in center position of Toolbar.

3. Use another RelativeLayout as a container of ProgressBar and align this RelativeLayout to the right of Toolbar.

4. Align two TextViews to the left of progress_container with initially visible state GONE.

If you want to hide ProgressBar and show two TextViews, then just set visibility GONE to ProgressBar webclientprogressbar. The TextViews 'AA' will automatically replace the position of Progressbar.

Here is the working code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ToolBarTheme"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:gravity="center_vertical"
    android:background="@color/colorPrimary">

    <RelativeLayout
        android:id="@+id/toolbar_fontsizewrapper"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/toolbar_titletextview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="18sp"
            android:text="My APP NAME"
            android:layout_centerInParent="true"/>

        <RelativeLayout
            android:id="@+id/progress_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="16dp">

            <ProgressBar
                android:id="@+id/webclientprogressbar"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:visibility="visible" />

        </RelativeLayout>

        <TextView
            android:id="@+id/toolbar_increasefont"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@id/progress_container"
            android:text="A"
            android:textSize="24sp"
            android:textColor="@android:color/white"
            android:visibility="gone" />

        <TextView
            android:id="@+id/toolbar_decreasefont"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@id/toolbar_increasefont"
            android:layout_alignBottom="@id/toolbar_increasefont"
            android:layout_marginRight="10dp"
            android:paddingBottom="1.5dp"
            android:text="A"
            android:textSize="18sp"
            android:textColor="@android:color/white"
            android:visibility="gone" />
    </RelativeLayout>
</android.support.v7.widget.Toolbar>

OUTPUT:

webclientprogressbar = VISIBLE, 
toolbar_decreasefont = GONE and toolbar_increasefont = GONE

webclientprogressbar = GONE, 
toolbar_decreasefont = VISIBLE and toolbar_increasefont = VISIBLE

Hope this will help~