Center a group of views horizontally

Question

I want to have some views disposed like in the following image:

Disposition of elements

and God knows I have tried several ways to achieve it, none of them really working.

In this last attempt, the layout looks as it should be, but I just found out that the padding becomes part of the clickable part of the view and, therefore, the Stop button canibalizes the Start button, and this one does not work.

The xml of this attempt is the following.

audio_player.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/activity_horizontal_margin" >

<ImageView
    android:id="@+id/pauseButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:onClick="pauseAudio"
    android:paddingRight="70dp"
    android:src="@drawable/pause_selector"
    android:text="PAUSE"
    android:visibility="invisible" />

<ImageView
    android:id="@+id/playButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:onClick="playSelection"
    android:paddingRight="70dp"
    android:src="@drawable/play_selector"
    android:text="PLAY" />

<ImageView
    android:id="@+id/moreVolumeButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/stopButton"
    android:layout_toRightOf="@+id/stopButton"
    android:onClick="adjustVolume"
    android:paddingLeft="15dp"
    android:src="@drawable/volume_plus_selector"
    android:text="+" />

<ImageView
    android:id="@+id/lessVolumeButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/playButton"
    android:layout_toLeftOf="@+id/playButton"
    android:onClick="adjustVolume"
    android:paddingRight="15dp"
    android:src="@drawable/volume_minus_selector"
    android:text="-" />

<ImageView
    android:id="@+id/stopButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:onClick="stopAudio"
    android:paddingLeft="70dp"
    android:src="@drawable/stop_selector"
    android:text="STOP" />

<SeekBar
    android:id="@+id/seekBarPlayer"
    android:layout_width="180dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/stopButton"
    android:layout_centerHorizontal="true"
    android:paddingTop="5dp"
    android:src="@drawable/process_bar" />

<TextView
    android:id="@+id/audioTotalTime"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/seekBarPlayer"
    android:layout_toRightOf="@+id/seekBarPlayer"
    android:paddingBottom="6dp"
    android:paddingLeft="7dp"
    android:text="@string/initial_time"
    android:textAppearance="?android:attr/textAppearanceSmall" />

<TextView
    android:id="@+id/audioRunningTime"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/seekBarPlayer"
    android:layout_toLeftOf="@+id/seekBarPlayer"
    android:paddingBottom="6dp"
    android:paddingRight="7dp"
    android:text="@string/initial_time"
    android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>

I am sure there needs to be a better way of doing it, I thought of grouping the upper elements into a RelativeLayout and apply to it the android:layout_centerHorizontal="true" but it did not work. :(

Heeeelp!

EDIT:

That layout is inside another layout. I post the most interesting part of it:

<com.slidinglayer.SlidingLayer
    xmlns:slidingLayer="http://schemas.android.com/apk/res/------------"
    android:id="@+id/slidingLayer2"
    android:layout_width="@dimen/layer_width"
    android:layout_height="match_parent"
    slidingLayer:closeOnTapEnabled="false"
    slidingLayer:offsetWidth="@dimen/offset_width" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/backround" >

        <android.inputmethodservice.KeyboardView
            android:id="@+id/keyboardview2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="#00000000"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:keyBackground="@drawable/keyboard_button_selector"
            android:paddingBottom="@dimen/activity_horizontal_margin"
            android:visibility="gone" />

        <include
            android:id="@+id/audio_player"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            layout="@layout/audio_player" />
    </RelativeLayout>
</com.slidinglayer.SlidingLayer>

Or you could use a LinearLayout (`android:orientation="horizontal"`) to center the upper elements and another one to center the lower elements and set below the first one. both of them using `android:layout_centerHorizontal="true"` — Phantômaxx, May 22 '14 at 16:08
Yes, you should usually try to break down your layout into smaller logical layouts as above suggests, instead of trying to just describe all individual Views as relative to each other. Much easier to get what you want. — ashishduh, May 22 '14 at 16:15

score 1 · Accepted Answer · answered May 23 '14 at 08:01

This is what I ended up up with:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/activity_horizontal_margin"
    >
    <LinearLayout
        android:id="@+id/llUpperHalf"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        >
        <ImageView
            android:id="@+id/lessVolumeButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="adjustVolume"
            android:paddingRight="15dp"
            android:src="@drawable/ic_launcher"
        />
        <ImageView
            android:id="@+id/playButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="playSelection"
            android:src="@drawable/ic_launcher"
        />
        <ImageView
            android:id="@+id/pauseButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="pauseAudio"
            android:src="@drawable/ic_launcher"
            android:visibility="gone"
        />
        <ImageView
            android:id="@+id/moreVolumeButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="adjustVolume"
            android:paddingLeft="15dp"
            android:src="@drawable/ic_launcher"
        />
        <ImageView
            android:id="@+id/stopButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="stopAudio"
            android:src="@drawable/ic_launcher"
        />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/llUpperHalf"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        >
        <TextView
            android:id="@+id/audioRunningTime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/seekBarPlayer"
            android:layout_toLeftOf="@+id/seekBarPlayer"
            android:gravity="center_vertical"
            android:paddingRight="8dp"
            android:paddingTop="8dp"
            android:text="00:00"
            android:textAppearance="?android:attr/textAppearanceSmall"
        />
        <SeekBar
            android:id="@+id/seekBarPlayer"
            android:layout_width="180dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/stopButton"
            android:paddingTop="5dp"
        />
        <TextView
            android:id="@+id/audioTotalTime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:paddingLeft="8dp"
            android:paddingTop="8dp"
            android:text="00:00"
            android:textAppearance="?android:attr/textAppearanceSmall"
        />
    </LinearLayout>
</RelativeLayout>

Which produces the following result (I havent got your resources. so I used what I had):

enter image description here

Please note that:

fill_parent is deprecated since API level 8. Use match_parent, instead.
ImageViews ignore the android:text property

I used your solution and worked well... until I clicked the stop or play button. If I click the stop, then that button and the "more volume" go to the most right side (the "more volume" even reduces its size). Then, when I click the Play button, this one moves next to the stop button. :/ I probably should have said that this layout is used inside another one. Im updating my question. — AlvaroSantisteban, May 23 '14 at 08:25
Well, I think it's just a problem of VISIBILITY. You should have one button with a visibility of **GONE** while the other is **VISIBLE**, then swap them - The VISIBLE one goes GONE and vice versa. You are probably using **INVISIBLE**, instead of **GONE**. Do you know the difference? INVISIBLE **takes space**, while GONE **doesn't** (so, it's there "without being there") — Phantômaxx, May 23 '14 at 08:28
That sounds right... I didnt have that problem with the RelativeLayout but now the buttons are inside a Linear... I am gonna try it :) — AlvaroSantisteban, May 23 '14 at 08:31
I updated the comment to tell the difference between GONE and INVISIBLE - By the way, this is the reason why it appears "right" before you click. The "hidden" imageView is originally set to `android:visibility="gone"` — Phantômaxx, May 23 '14 at 08:33
Thanks, it was that. I did know that difference but my code was prepared for a RelativeLayout (the one I had in the beginning) and that didnt make a difference. That changed when adopting your layout. Thank you very much for everything, also the little comments that you added to your response. I seem unable to remember which one is the deprecated one, "fill_parent" or "match_parent" :P — AlvaroSantisteban, May 23 '14 at 08:37
It will come with experience... As a rule to remember: I preferred "fill" for its shortness (1 char less than "match"). And, obviously, THAT one was deprecated. Because I liked it. ;) — Phantômaxx, May 23 '14 at 08:39

score 0 · Answer 2 · answered May 22 '14 at 16:30

Try this it will work:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/activity_horizontal_margin" >

<LinearLayout
    android:id="@+id/main_ll"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" 
        android:gravity="right">

        <ImageView
            android:id="@+id/lessVolumeButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="adjustVolume"
            android:text="-" />
    </LinearLayout>

    <ImageView
        android:id="@+id/pauseButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="pauseAudio"
        android:text="PAUSE"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/playButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="playSelection"
        android:text="PLAY" />

    <ImageView
        android:id="@+id/stopButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="stopAudio"
        android:text="STOP" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" 
        android:gravity="left">

        <ImageView
            android:id="@+id/moreVolumeButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="adjustVolume"
            android:paddingLeft="15dp"
            android:text="+" />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/main_ll"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/audioTotalTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="6dp"
        android:paddingLeft="7dp"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <SeekBar
        android:id="@+id/seekBarPlayer"
        android:layout_width="180dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:paddingTop="5dp" />

    <TextView
        android:id="@+id/audioRunningTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="6dp"
        android:paddingRight="7dp"
        android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>

</RelativeLayout>

Center a group of views horizontally

2 Answers2