RelativeLayout doesn't display all my widgets
I'm trying to use RelativeLayout to display a map tile, surrounded by directional buttons, in a simple dialog.
I've tried a few variations, but inevitably, some of my buttons are missing.
In this version of the example, the up
and left
buttons are missing. If I declare the up
button first and place the tile
button relative to it, then up
shows. Do RelativeLayouts require the topmost widget to be declared first? Guess not, there would be no use for layout_above
then...
I can't post images (low rep), but you can view the result here.
<?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="fill_parent"
>
<ImageView
android:id="@+id/tile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5px"
android:layout_centerInParent="true"
android:src="@drawable/loading"
/>
<Button
android:id="@+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/tile"
android:layout_centerHorizontal="true"
android:drawableLeft="@drawable/up"
/>
<Button
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/tile"
android:layout_centerVertical="true"
android:drawableLeft="@drawable/left"
/>
<Button
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wr开发者_开发知识库ap_content"
android:layout_toRightOf="@id/tile"
android:layout_centerVertical="true"
android:drawableLeft="@drawable/right"
/>
<Button
android:id="@+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tile"
android:layout_centerHorizontal="true"
android:drawableLeft="@drawable/down"
/>
<Button
android:id="@+id/in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tile"
android:layout_alignParentLeft="true"
android:text="@string/test_in"
/>
<Button
android:id="@+id/out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tile"
android:layout_alignParentRight="true"
android:text="@string/test_out"
/>
</RelativeLayout>
The widgets actually do need to be declared before they can be referenced, at least prior to Android 2.2. You can try something like the below, I'm not certain of how you wanted the In/Out buttons placed, but this should give a general idea:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="@+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:drawableLeft="@drawable/up"
/>
<Button
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:drawableLeft="@drawable/left"
/>
<Button
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:drawableLeft="@drawable/right"
/>
<Button
android:id="@+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:drawableLeft="@drawable/down"
/>
<Button
android:id="@+id/in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="@string/test_in"
/>
<Button
android:id="@+id/out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="@string/test_out"
/>
<ImageView
android:id="@+id/tile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5px"
android:layout_above="@id/down"
android:layout_toRightOf="@id/left"
android:layout_toLeftOf="@id/right"
android:layout_below="@id/up"
android:layout_gravity="center"
android:src="@drawable/loading"
/>
</RelativeLayout>
Basically, you want to place the arrows and in/out buttons first, aligned with the parent (the main window). Then, use above/below/RightOf/LeftOf to define the edges of the map tile. I'm not sure offhand whether ImageView uses layout_gravity or just gravity (I always get them confused), but if not one, just try the other. This is from the top of my head - untested - so let me know if something quirky happens.
EDIT: Second suggestion. This is more similar to yours (I wasn't thinking about the map not being fill_parent), but using gravity instead of centerHorizontal, and using just layout_above/below/left/right instead of alignParent**.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="@+id/tile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5px"
android:gravity="center"
android:src="@drawable/loading"
/>
<Button
android:id="@+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/tile"
android:gravity="center_horizontal"
android:drawableLeft="@drawable/up"
/>
<Button
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/tile"
android:gravity="center_vertical"
android:drawableLeft="@drawable/left"
/>
<Button
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/tile"
android:gravity="center_vertical"
android:drawableLeft="@drawable/right"
/>
<LinearLayout
android:id="@+id/bottom"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tile"
android:gravity="center_horizontal"
>
<Button
android:id="@+id/out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/test_out"
android:padding="5dp"
/>
<Button
android:id="@+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/down"
android:padding="5dp"
/>
<Button
android:id="@+id/in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/test_in"
android:padding="5dp"
/>
</RelativeLayout>
精彩评论