Android Development

Layout technique: Center a TextView with a Button left and right

by Martin on Oct.29, 2009, under layout technique

While working on an application which should look similar to an iPhone application, I have to create a bar at the top where I have a back and a forward button (each on one side) and a dynamic text centered in the middle between them.
To get this done, I searched quite a lot and got it finally to work.
The surrounding layout should be the RelativeLayout with two Buttons (in my case I used ImageViews) and a TextView.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:background="#666666"
    android:paddingTop="3dip">
    <ImageView android:id="@+id/buttonLeft"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_alignParentLeft="true"
        android:paddingLeft="3dip"
        android:scaleType="centerInside"
        android:clickable="true"
        android:src="@drawable/buttonLeft"/>
    <TextView android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textColor="#000000"
        android:textSize="20dip"
        android:textStyle="bold"
        android:text="@string/titleText"/>
    <ImageView android:id="@+id/buttonRight"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_alignParentRight="true"
        android:paddingRight="3dip"
        android:scaleType="centerInside"
        android:clickable="true"
        android:src="@drawable/buttonRight"/>
</RelativeLayout>

As you can see, there are some layout params the auto completion didn’t list at all.
The params layout_centerVertical / layout_centerHorizontal do what they are named for and layout_alignParentRight / layout_alignParentLeft are like the CSS float: left / right.

Last tipp: If you have an application with different activitys/layouts but with some repeating layout parts, like the bar at the top, try to use the Tag.

1

<include layout="@layout/topbar" />

Of course you have to change the “topbar” to the name of your xml-layout file (without the .xml).

  • Share/Bookmark
:,

5 Comments for this entry

  • Martin
    October 29th, 2009 on 4:24 pm

    As I now found out, there is also a combined version for layout_centerVertical and layout_centerHorizontal: layout_centerInParent.
    Thats also possible to use.

  • Miguel
    December 30th, 2009 on 8:52 pm

    Great layout technique. Thanks.

    The use of include in layouts will be very handy.

    One question, if i want that in bottom what changes do I have to made? I’m trying to do a layout similar to Gmail, where we have the buttons on the bottom.

    Best regards,
    Miguel

  • Martin
    December 30th, 2009 on 9:00 pm

    If you want to have that on bottom, just include it there. Its independent, so its your layout that defines where the include should be.
    You should try the anddev.org forum and ask for layout helps :)

  • Richa
    March 10th, 2010 on 7:23 am

    Hey Martin..
    i want to handle a press and hold event on a list…
    do you have any idea how shall i do that?????

Leave a Reply