Drew
Drew

Reputation: 3334

Android: Correctly position buttons inside layout

I have a following layout :

enter image description here

<LinearLayout //container, should adjust height based on CONTENT view height
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="false"
        android:clickable="false"
        android:padding="20dp">
     <RelativeLayout //this is the CONTENT view height
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="5">....</RelativeLayout>
...
    <RelativeLayout //this is the button layout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2">

          <Button android:layout_width="40sp" android:layout_height="40sp"/>
          <Button android:layout_width="40sp" android:layout_height="40sp"/>
    </RelativeLayout>

</LinearLayout>

I want the height of the container (LinearLayout) to be adjusted to contain all the views in the RelativeLayout (shown on the left, let's call it CONTAINER).

Then, there are two buttons in the RelativeLayout (shown on the right). I need to align them on top and bottom borders of RelativeLayot, correspondingly. What's really important, is that the height of the buttons' container should be the same (should correspond) to the height of the CONTAINER.

The problem is, if I try to use android:layout_alignParentBottom="true" and android:layout_alignParentTop="true" attributes for the buttons, they will stretch the container height, and it will take the whole screen height.

So, what magic should I use to do the trick? :)

Upvotes: 0

Views: 194

Answers (3)

Drew
Drew

Reputation: 3334

Ok, based on a hint provided by Damien R. above I successfully accomplished the task by doing following:

  • Use RelativeLayout as a root with paramters layout_width="wrap_content", layout_height="wrap_content"
  • Use LinearLayout as a "wrapper" around container RelativeLayouts. This is because I need to lay out these containers using layout_weight attribute.
  • RelativeLayout layout_height should be fill_parent. No need to use android:layout_alignBottom="@id/..." and android:layout_alignBottom="@id/..." in the RelativeLayout attributes. This will only work if RelativeLayout is a child View of another RelativeLayout, and that's not the case, because I need to use LinearLayout's weight

The code is:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:baselineAligned="false"
    android:clickable="false"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ticketbackground"
        android:id="@+id/ticket_layout"
        >

        <RelativeLayout
            android:id="@+id/contentRL"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="5"
            android:layout_alignParentLeft="true">
        </RelativeLayout>

<!--second column-->
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="3">
              ...
        </RelativeLayout>
<!--third column with buttons-->
        <RelativeLayout
            android:id="@+id/sdfsdf"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="2">

            <Button...
                android:layout_alignParentTop="true" />
            <Button...
                android:layout_alignParentBottom="true" />
        </RelativeLayout>
    </LinearLayout>
</RelativeLayout>

Upvotes: 0

Damien R.
Damien R.

Reputation: 3373

Try to align your right relative layout top and bottom to the left one. Try something like this:

<RelativeLayout //container, should adjust height based on CONTENT view height
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="false"
        android:clickable="false"
        android:padding="20dp">
     <RelativeLayout //this is the CONTENT view height
            android:id="@+id/contentRL"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="5"
            android:layout_alignParentLeft="true">....</RelativeLayout>
...
    <RelativeLayout //this is the button layout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:layout_alignTop="@id/contentRL"
            android:layout_alignBottom="@id/contentRL"
            android:layout_alignParentRight="true">

          <Button android:layout_width="40sp" 
            android:layout_height="40sp"
            android:layout_alignParentTop="true"/>
          <Button android:layout_width="40sp"
            android:layout_height="40sp"
            android:layout_alignParentBottom="true"/>
</RelativeLayout>

Upvotes: 1

Gajendra Rawat
Gajendra Rawat

Reputation: 3663

Use this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:baselineAligned="false"
        android:clickable="false"
        android:padding="20dp">
     <RelativeLayout 
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="5"></RelativeLayout>

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

          <Button android:layout_width="wrap_content" 
              android:layout_height="wrap_content"
              android:layout_alignParentTop="true"/>
          <Button android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentBottom="true"/>
    </RelativeLayout>

</LinearLayout>

Upvotes: 0

Related Questions