11

I've been using a bit of a hack to stretch a view inside a parent RelativeLayout so that it starts at top-left and ends an bottom-center. While RelativeLayout does let you position something at the center of itself, it doesn't however seem to let you stretch something to that same point.

My solution was simple, position something in that center, and give it 1px dimensions so its the actual center of the parent RelativeLayout. Don't get me wrong, this works and I've had no issues whatsoever with it, but if there's a better practice that this I'd like to know about it.

As for a graphical representation of what I'm talking about, let me add a few images illustrating.

                                                enter image description here

This first image has a text-less TextView positioned at the center of the RelativeLayout and I've given it a width of 0dp. This allows me as you can see in the next image to place anything, relative to that center. My point being that it strikes me as odd that you can't do that without the need of adding the extra view at the center, for I can see properties such as Layout to left of or Layout to right of but no Layout to center of.

                                                 enter image description here

So the scennario may be a bit more in the lines of, "it's not broken yet but I'm afraid it will pop at any minute". Then on the other hand if this is the correct way of doing it and I help someone learning a new thing, that also works for me.

Why do I ask questions that don't get answered!? I'm so setting a bounty here..

The most sensible thing suggested yet (to my judgement) is that I replace my LinearLayout with a View which I would assume takes a little less memory, even if it's marginally less. So I'm thanking @yorkw for it. I'm surprised that nobody's asked this before.

Just to clarify since there seems to be a misunderstanding as to what I'm actually after. I don't want something to take half of the parent width/height. I was asking for a way to use it as a reference point (that's what I said in the title) so I can do stuff like, position an image to the left of the center without adding a linear layout that takes half and the gravity left or whatever.

Update

Since API 14 we have Space available which is a lightweight View subclass that may be more suitable for this kind of hack.

Community
  • 1
  • 1
Juan Cortés
  • 20,634
  • 8
  • 68
  • 91
  • 1
    You approach is the most efficient approach that I can think without adding another nested ViewGroup. Note that instead of using a text-less TextView object as base center, you can use a regular View object ``. Does this make you a bit more comfortable? Also note that add invisible View object in RelativeLayout is a quite common scenario for preciously positioning object inside RelativeLayout. – yorkw May 27 '12 at 22:54
  • Makes me less uncomfortable indeed. Empty view seems more reasonable in fact. – Juan Cortés May 28 '12 at 07:20

6 Answers6

7

I like your present solution, but if you want to avoid the funky invisible thin centering widget, you can accomplish that as follows:

  • Calculate containerWidth as the pixel width of your containing RelativeLayout-derived class (call this MyRelativeLayout)
  • Create an instance of MyRelativeLayout.LayoutParams called leftHalfWidgetLayoutParams
  • Set leftHalfWidgetLayoutParams.width = containerWidth / 2, either using the constructor argument when it is created above, or after the fact. After the fact is necessary if you want to adjust it later (e.g., in an override of onSizeChanged() in MyRelativeLayout).
  • Each time you set or change leftHalfWidgetLayoutParams.width, invoke leftHalfWidget.setLayoutParams(leftHalfWidgetLayoutParams).
  • Call requestLayout() if required to redraw MyRelativeLayout each time the width changes

If the widgets to the right of center are overly large, it might be necessary to set their layout width values explicitly, too, to stop them from encroaching into the left half of the container.

Now I realize that this loses some of the "magic" of having RelativeLayout do everything automatically, and that's where your approach is actually nicer. But RelativeLayout is still going to enforce the relative positions of your widgets as well as it can, given the added constraint of the width that will have been added to the layout parameters of your leftHalfWidget, so you wouldn't be overriding or abandoning its overall contribution in that regard.

I can't think of a way to meet your requirements inside a RelativeLayout without explicitly setting the width value on the layout parameters in the manner described above. It's an alternative approach to yours, but not necessarily a better one.

I would point out that if your left-half widget is always going to take up the left half of the container, then I can't see why a horizontal LinearLayout (instead of a RelativeLayout) at the top level (with a weight of 0.5 for your left-size widget with an equally-weighted right side RelativeLayout for the remaining right half), would not be a good solution. The "relative" stuff would, in that case, only be going on within that right half anyway, so why use RelativeLayout at the top level when LinearLayout could do the job more concisely? But perhaps you want to use RelativeLayout on the left side to deal with vertical relationships, and you therefore might actually have more than one control within that left side.

Carl
  • 15,445
  • 5
  • 55
  • 53
1

To achieve what you are doing, I use a LinearLayout, layout_width=0dip and layout_weight=50. But it is not optimal as it nests another layout inside the linear layout. I'd be curious to see if another better solution is available.

Vincent Mimoun-Prat
  • 28,208
  • 16
  • 81
  • 124
  • That's my point, it seems redundant to have to position something at the center just to be able to stretch something to that same point. It's a point available for positioning but not for referencing. Odd. – Juan Cortés May 25 '12 at 09:59
1

I think it's better to use LinearLayout. With the attribute 'layout_weight', I think LinearLayout can solve lots of problems. Using LinearLayout also needs another empty view inside the LinearLayout, but I think it is better, I love LinearLayout :) Here is my code

<LinearLayout android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:background="@drawable/your_image">
    <Button android:layout_height="fill_parent"
        android:layout_width="0dip"
        android:layout_weight="1.0"/>
    <View android:layout_height="fill_parent"
        android:layout_width="0dip"
        android:layout_weight="1.0"
        android:visibility="invisible"/>
</LinearLayout>

At last, sorry for my poor English.

Xiaochen Wang
  • 83
  • 1
  • 7
1

That seems kind of wonky. I'd hate to be the guy doing follow up work on that layout. Really though, to address the issue, you should just use a LinearLayout and weights.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ff0000"
    android:weightSum="2" >

    <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="#00ff00"
            android:text="@string/hello" />
</LinearLayout>

you could embed the above into a RelativeLayout as is. Given each direct child of a RelativeLayout has a dev-defined role, it's easy for one to see that a LinearLayout child with fill_parent in both directions is another layer of the RelativeLayout.

You could insert arbitrary, empty, views as noted in another comment with a given layout_weight, or, as I did above, assign a weightSum so the rest is implied. I added some color above and here's a pretty picture

pretty picture

dskinner
  • 10,527
  • 3
  • 34
  • 43
  • You fail to see my point. I'm not asking "how to make a view take half the width/height of its parent", I'm asking how to reference the center of a view without adding another one at that point. – Juan Cortés Jun 02 '12 at 09:43
  • No, really, I get your point. What your missing is my point. Given a LinearLayout with a weightSum of 2, used as a child in a RelativeLayout, fill_parent all the way, allows you to reference the dead center of the RelativeLayout. And it's not constrained in ways as Carl's answer would be since you can target any portion of the layout. – dskinner Jun 03 '12 at 14:31
  • Well, I clearly fail to see how nesting more layouts would make this better (nor worse). My approach uses one view that can fill the height/width of the parent giving me the reference point without any limitations. As I said, I'm probably the one not getting it, so don't be offended by my answer, I actually up voted yours. – Juan Cortés Jun 04 '12 at 09:23
1

Currently, there is nothing in-built in Android to help use center of a layout as reference point. However you can accomplish this using only some extensions and hacks as suggested above in other answers. If Android had something already for this, then it would be doing the same amount of calculations and work as in some of these answers. So its one and the same, but would definitely look cleaner if we had it in-built.

Ron
  • 24,175
  • 8
  • 56
  • 97
1

You may use the support library's PercentRelativeLayout.

  1. include it in your project: compile 'com.android.support:percent:23.4.0'

  2. Use the PercentRelativeLayout in place of your RelativeLayout

  3. Make your button's width 50% of its parent: app:layout_widthPercent="50%"

The new layout seems fast and straightforward to use. I think its only real drawback is that it can't be used in home screen widgets.

Tom
  • 6,946
  • 2
  • 47
  • 63