CODEWITHSUNDEEP
androidandroid-layoutandroid-relativelayout
p0lAris
p0lAris

Reputation: 4820

Aligning elements in a RelativeLayout such that one is center_horizontal

Here's the layout:

enter image description here

As you may notice from the layout above, the outer layout is a RelativeLayout in which all the elements are centered horizontally. This layout contains another layout which is also a RelativeLayout grouping a few elements. I wanted this group to be centered vertically.

Now the question is about the two elements shown in the inner RL2. They are basically a button and a progress bar (circular). I want the button to be centered horizontally and the progress bar to be just next to it; i.e. progressBar.Left = button.Right + 10 (just a reference).

I have spent the last couple of hours trying to figure out something but I have nothing. (Also, very new to layout design on Android).

Please let me know if I can be more helpful.

EDIT: What I have tried —

  1. Horizontal linear layout -> can't center the button in a linear layout and adjust supplementary margins for progress bar.
  2. Relative Layout -> Unable to make anything happen here.

Upvotes: 0

Views: 489

Answers (3)

Moh Mah
Moh Mah

Reputation: 2055

I tried to replicate the layout you wanted and came up with this:

it works for me

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:padding="10dp"
            >

        <View
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#FF5722"
                />

        <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                >

            <View
                    android:id="@+id/view1"
                    android:layout_width="150dp"
                    android:layout_height="50dp"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="50dp"
                    android:background="#0288D1"
                    />

            <View
                    android:id="@+id/centered"
                    android:layout_width="150dp"
                    android:layout_height="50dp"
                    android:layout_below="@id/view1"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="50dp"
                    android:background="#0288D1"
                    />

            <View
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_alignTop="@id/centered"
                    android:layout_marginLeft="10dp"
                    android:layout_toRightOf="@id/centered"
                    android:background="#B58105"
                    />

        </RelativeLayout>
    </RelativeLayout>

looks like this

Upvotes: 3

Sebastian Roth
Sebastian Roth

Reputation: 11537

Here is my approach for such requirement: Layout sample

The red squares are invisible <Space> elements which should have the same width/height as your progress bar. This also means you need to wrap each row in a horizontal LinearLayout and wrap all of that in a vertical one.

In terms of efficiency, this might be not ideal. I consider it acceptable for one page or two.

Updated for @p0lAris comment:

To center the elements in the middle, you could use a layout_weight attribute (= 100), and use fixed width for the <Space> and <ProgressBar> elements.

This would mean the button is as wide as possible.

If a further padding on start/end is required, the padding attribute could be added to the parent layout which contains all the button rows.

Upvotes: 0

Marka A
Marka A

Reputation: 258

Wrap the button and progress bar in a Horizontal LinearLayout. Relativelayout becomes unwieldy as per my experience if you start nesting them.

Upvotes: 0

Related Questions