Question

This is difficult to explain, please bear with me.

I have a top menu bar in a design which has been given to me (it’s a port).

The menu bar has two buttons, one on the left of the menu, one on the right, and a text title between the two buttons.

The text view is single line so that if the text is longer than the view, it shortens with an ellipsis at the end. The text should be centred within the display width between the buttons. The text is a title for the current content and it’s OK that it might be shortened. In practice, on most devices, only the odd letter or two gets chopped off.

If both buttons are visible, then it’s very straightforward however, depending on where I am in the app, the right button might not be visible. When it’s not visible, I use View.GONE. The problem is that the text now fills the remaining space, which is desired, but centres in that remaining space, not within the display width so that a short piece of text is offset to the right by the width of the first button.

Using View.INVISIBLE rather than View.GONE is not the answer as the text then centres correctly but doesn’t use the available space to minimise the shortening of the text.

Here’s the effect I’m trying to achieve:

Both buttons visible:

---------------------------------------------------------------
| Left button |  Title text centred in display | Right button |
---------------------------------------------------------------

Right button hidden

---------------------------------------------------------------
| Left button |  Title text centred in display                |
---------------------------------------------------------------

Right button hidden with long text showing elipsis. This is what I’m looking for.

---------------------------------------------------------------
| Left button |  A really long piece of title text centred ...|
---------------------------------------------------------------

Here’s what I’m getting when i hide the right button, note that the text is not centred.

---------------------------------------------------------------
| Left button |        Title text centred in this space       |
---------------------------------------------------------------

Here’s the layout I’m using currently.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/activitytitlegradient"    
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:orientation="horizontal"    
    android:gravity="center_vertical">

   <ImageView android:id="@+id/mainMenuLeftButton" 
                android:background="#00ffffff"
                android:layout_gravity="center_vertical"        
            android:src="@drawable/rr_boat_bow"
            android:scaleType="fitStart"        
            android:layout_weight="1"   
            android:layout_height="34dip"
            android:layout_width="wrap_content"/>

   <TextView  android:id="@+id/mainMenuTitle"
                    android:layout_weight="10"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"        
            android:paddingLeft="2dp"
            android:background="#00ffffff"          
            android:text="Reference"
            android:singleLine="true"
            android:textSize="19sp"
            android:textStyle="bold" 
            android:textColor="#ffffff"     
            android:gravity="center_horizontal|center_vertical" />


    <Button android:id="@+id/mainMenuRightButton" 
            android:background="@drawable/buttonborder"
            android:text="Edit"     
            android:textSize="13sp"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:layout_margin="3dip"
            android:padding="3dip"
            android:layout_weight="1"                   
            android:layout_height="35dip"
            android:layout_width="wrap_content"
            android:visibility="gone"/>


</LinearLayout>

The first button is implemented as an ImageView to enable some other (non relevant) effects I’m doing elsewhere. The text is hard coded only to help with laying out. My code changes the text as needed.

I can do this with a custom view but I am sure there must be a way to do this with the standard framework.

Thank you for any clues…

Answer 1

I’ve been dreaming about this problem – really! I’ve woken in the middle of the night thinking about how to fix this thing. The code I posted below is fugly and it offends my eye every time I look at it. The thought of writing a custom widget just to centre some text feels like taking a shotgun to a pimple on my nose. So, I got stuck in again and I’m embarrased at how easy the solution turned out to be.

The trick is to use a relative layout, align the second button on the right and anchor the text centring to the parent. The key tag is:

android:layout_centerInParent="true"

Here are the relevant snippets from the layout XML (I’ve removed the non-relevant tags to save space):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainMenuLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/mainMenuLeftButton"
        android:layout_width="wrap_content"
        android:layout_height="34dip"
        android:scaleType="fitStart"
        android:src="@drawable/rr_boat_bow" />

    <Button
        android:id="@+id/mainMenuRightButton"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="Edit"
        android:visibility="gone" />

<TextView
        android:id="@+id/mainMenuTitle"
        android:layout_toRightOf="@+id/mainMenuLeftButton"
        android:layout_toLeftOf="@+id/mainMenuRightButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:layout_centerInParent="true"
        android:singleLine="true"/>

</RelativeLayout>

I’ll sleep well tonight. No fugly code, no custom class. UI in XML only – sweet!

Hope it helps..