1

I have a couple of views that I'm trying to center over each other but at the same position at the top of the view. pw_futuretabata is a progresswheel that I want to be as big as the screen width and aligned to the top of the screen. Inside the progresswheel, I have a smaller version, pw_spinner, that I will initially show. I want to place an image, playButton, inside pw_spinner. I've created a view called horizontalCenterLine to find the center location within this contained view and am trying to place playButton just above the horizontal center.

If I do this with everything being centered in the root view, all is fine, but because I need this group of controls aligned to the top of the screen, I placed them in their own RelativeLayout and positioned the relative layout to align to the top of the parent.

So now my problem is, playButton, as it is, doesn't display where I expect it. Instead, the bottom of the button is aligned to the top of the screen, so only the bottom pixels of the button are visible. I don't understand why. If I change the button to be centered with

android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

it works fine and is centered in pw_spinner, but using 

android:layout_alignBottom="@id/horizontalCenterLine"
android:layout_centerHorizontal="true"

is not giving me what I'm looking for. Any ideas?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ProgressWheel="http://schemas.android.com/apk/res-auto"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

    <RelativeLayout
        android:id="@+id/internalLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" >

        <com.todddavies.components.ProgressWheel
            android:id="@+id/pw_futuretabata"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            ProgressWheel:barColor="#FCEC5A"
            ProgressWheel:barLength="60dp"
            ProgressWheel:barWidth="10dp"
            ProgressWheel:delayMillis="75"
            ProgressWheel:rimColor="#343434"
            ProgressWheel:rimWidth="10dp"
            ProgressWheel:spinSpeed="30dp"
            ProgressWheel:textColor="#FCEC5A"
            ProgressWheel:textSize="60sp"
            android:visibility="invisible" />

        <com.todddavies.components.ProgressWheel
            android:id="@+id/pw_spinner"
            android:layout_width="165dp"
            android:layout_height="165dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            ProgressWheel:barColor="#FCEC5A"
            ProgressWheel:barLength="60dp"
            ProgressWheel:barWidth="5dp"
            ProgressWheel:delayMillis="75"
            ProgressWheel:rimColor="#343434"
            ProgressWheel:rimWidth="5dp"
            ProgressWheel:spinSpeed="30dp"
            ProgressWheel:textColor="#FCEC5A"
            ProgressWheel:textSize="60sp" />

        <View
            android:id="@+id/horizontalCenterLine"
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:background="@android:color/darker_gray"
            android:visibility="invisible" />

       <ImageButton
           android:id="@+id/playButton"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_alignBottom="@id/horizontalCenterLine"
           android:layout_centerHorizontal="true"
           android:background="@android:color/transparent"
           android:contentDescription="@string/playButtonLabel"
           android:src="@drawable/shape_play" />

    </RelativeLayout>

    <ImageView
        android:id="@+id/myIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:contentDescription="@string/app_icon_description"
        android:src="@drawable/pp_logo" />


</RelativeLayout>
ryang
  • 93
  • 1
  • 6
  • if you could provide a picture of what you want and what you have that would be helpful. – heLL0 May 29 '14 at 02:01
  • As far as I understand this, you want triple-nested controls, with the center-most control offset so that its base is aligned with the vertical center. I'm trying to create this using your posted layout file, and it's reproducing this most perplexing behaviour you've described. Very strange. – Adam S May 29 '14 at 02:11
  • Yes, it doesn't need to be triple-nested, but that seems to be the way to group the controls such that I can center them in relation to each other, and have the whole group aligned to the top of the screen. Glad to see you are seeing what I'm seeing...sort of. Now, I need a solution... – ryang May 29 '14 at 02:35
  • It appears that the control with the `playButton` id is aligning itself relative to the `horizontalCenterLine` _before_ the line is vertically centered. If you increase the height of the center line, you can see the location of the button move the corresponding amount. – Adam S May 29 '14 at 02:51
  • Possibly related: https://groups.google.com/forum/#!msg/android-developers/M9THu9V08vo/EouuJZv1dTAJ – Adam S May 29 '14 at 03:07
  • So I don't have a solution for you, but if you give your `internalLayout` a hard coded height (or add `android:layout_above="@+id/myIcon"`) you'll start seeing the expected behaviour, except for the fact that the inner-spinner isn't centered in the outer spinner. The problem appears to be that the `wrap_content` vertical measure on the outermost layout means the vertically centered content isn't laid out when the layout algorithm handles the `layout_alignBaseline` parameter. Also, are you aware that your hardcoded width/height will result in your layout looking different across devices? – Adam S May 29 '14 at 03:24

1 Answers1

0

Edit--

This might be because it is invisible. Try setting the background's alpha to 0.

android:background="#00000000"

also remove the 

  android:visibility="invisible"
heLL0
  • 1,357
  • 3
  • 23
  • 30