I'm trying to get an ImageView to overlap it's parent and create a speech balloon like, compound view. E.g:
I am not able to have the triangle at the bottom be part of the blue block and overlap any other views/controls that are placed below it.
Does anyone have a way of doing this?
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:id="#+id/appointment_ticket_signed_in_content_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/background_green" >
<ImageView
android:id="#+id/appointment_ticket_signed_in_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_action_accept"
android:contentDescription="#string/hello_world"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginBottom="#dimen/activity_vertical_margin" />
<TextView
android:id="#+id/appointment_ticket_signed_in_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_large"
android:layout_marginRight="#dimen/padding_large"
android:layout_marginBottom="#dimen/padding_large"
android:textColor="#android:color/white"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:id="#+id/appointment_ticket_signed_in_down_arrow"
android:layout_width="25dp"
android:layout_height="25dp"
android:scaleType="centerInside"
android:src="#drawable/triangle"
android:contentDescription="#string/hello_world"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:paddingBottom="-25dp"
android:background="#color/important_text_orange" />
</merge>
I thought the above XML was the way to go but it seems a negative margin or padding bottom is unable to push the view outside its parent.
This XML is placed inside a relativelayout.
Does anyone know the answer to this?
EDIT
My situation:
Is there any way to overlap the next elements padding without having
direct access to it?
here is an xml file that creates something that could work. Try it out and let me know:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10sp" >
<ImageView
android:layout_width="match_parent"
android:layout_height="200sp"
android:layout_below="#+id/complete_bubble"
android:background="#123456" />
<RelativeLayout
android:id="#+id/complete_bubble"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-15sp" >
<RelativeLayout
android:id="#+id/main_block"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:padding="10sp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text"
android:textColor="#FFFFFF" />
</RelativeLayout>
<ImageView
android:layout_width="20sp"
android:layout_height="20sp"
android:layout_below="#+id/main_block"
android:layout_marginLeft="20sp"
android:background="#000000" />
</RelativeLayout>
</RelativeLayout>
This negative margin works.
Method 1: Using the image of the balloon as the background image of a RelativeLayout and then add a TextView to that layout.
Method 2 (Also the more awesome method): Creating a custom view that will not only draw the speech balloon but also have a setText(String) method that will adjust the text that is drawn in the bubble and resize it to fit the text always. Then you open source that and share with the world.
If you want to create a custom view...
public class AwesomeTextBalloon extends View {
// constructors here
#Override
protected void onDraw(Canvas canvas) {
// first draw the balloon
// then draw the text
}
public void setText(String newText) {
// set text variable here
}
}
Then add the View programmatically or in the xml and call setText() to change the value of the balloon text.
Try Using this
<?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" >
<FrameLayout
android:id="#+id/header2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:background="#android:color/transparent" />
<ImageView
android:id="#+id/arrow_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/pop_up" />
<HorizontalScrollView
android:id="#+id/scroll"
android:layout_width="320dip"
android:layout_height="80dip"
android:layout_below="#id/header2"
android:background="#android:color/darker_gray"
android:fadingEdgeLength="0dip"
android:paddingLeft="1dip"
android:scrollbars="none" >
<LinearLayout
android:id="#+id/appointment_ticket_signed_in_content_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_green"
android:orientation="horizontal" >
<ImageView
android:id="#+id/appointment_ticket_signed_in_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:contentDescription="#string/hello_world"
android:src="#drawable/ic_action_accept" />
<TextView
android:id="#+id/appointment_ticket_signed_in_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/padding_large"
android:layout_marginRight="#dimen/padding_large"
android:layout_marginTop="#dimen/padding_large"
android:textColor="#android:color/white"
android:textSize="18sp" />
</LinearLayout>
</HorizontalScrollView>
<FrameLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/scroll"
android:background="#android:color/transparent" />
<ImageView
android:id="#+id/arrow_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/footer"
android:layout_marginTop="-1dip"
android:src="#drawable/pop_dwn" />
</RelativeLayout>
Related
I'm working on an Android application and I have an issue with how to display an image in a view. My issue is that I want to display an image and two textViews just below my imageView without aligning their bottom to the parent's. See the wireframe below.
My problem is that when the imageView is taking all the height of the relativeLayout, my textViews are hidden below the parents view.
I have tried a lot of things but nothing is satisfaying...
I have tried to put my imageview in a linearLayout and put a weight on it but if my imageView is smaller I have a blank between the imageView and the textView.
It's complicated because each image I load can have a different size and thus I can't fix a default size to it.
Also, my layout is in a viewPager and when I want to have the Height of the view when I instantiate it on my adapter it returns 0. So I can't compute the size of the elements in the view.
Have you any idea how can I make my layout ?
Maybe in a coordinatorLayout to have circular dependencies (but I don't know how to make it) ?
Here a wireframe of what I want to do with my view: image
And here the code of my layout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/relative_photo_detail_bottom_infos">
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/placeholder"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/photo_detail_full_size"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:textColor="#color/grey"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative_photo_detail_bottom_infos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/relative_photo_detail_image"
android:padding="10dp">
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>
Try putting your code inside Scroll view
Update your layout structure as below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- TextView 2 -->
<TextView
android:id="#+id/photo_detail_owner_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="16sp"
android:textColor="#android:color/holo_red_dark"
android:text="This is TextView Two"/>
<!-- TextView 1 -->
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/photo_detail_owner_description"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="18sp"
android:textColor="#android:color/black"
android:text="This is TextView One"/>
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/photo_detail_owner"
android:background="#android:color/black">
<!-- Image -->
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/dummy"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<!-- Delete Icon -->
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>
OUTPUT:
Hope this will help~
Something like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView2"
android:textAlignment="center" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView3"
android:textAlignment="center" />
</LinearLayout>
Sounds like a question that was answered before but from my research I couldn't find a solution. My layout is roughly the following:
The main area is a container where I'll add/replace Fragments, and the bottom is where I place a bottom navigation menu. The pink View is a button that I need to place on top of my menu (and that's not working).
Every time I add a Fragment to the main view, my "Menu" text disappears, even though the TextView is added after the container View. Same with the pink Button, which is added after the bottom menu container (see my xml below).
How can I keep both "Menu" TextView and the pink Button always on top of my Fragments?
This is my xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eee"
tools:context="com.wecancer.wecancer.activities.Menu">
<FrameLayout
android:id="#+id/main_container_view"
android:layout_width="match_parent"
android:layout_height="520dp"
android:layout_marginBottom="0dp"
>
</FrameLayout>
<TextView
android:id="#+id/main_center_tv"
android:layout_centerVertical="true"
android:textSize="24sp"
android:layout_centerHorizontal="true"
android:text="#string/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<FrameLayout
android:layout_alignParentBottom="true"
android:id="#+id/main_bottom_menu_container"
android:layout_width="match_parent"
android:background="#color/lightGray"
android:layout_height="40dp"
>
</FrameLayout>
<Button
android:elevation="1dp"
android:id="#+id/menu_plus_img"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:background="#color/colorAccent"
android:layout_width="70dp"
android:layout_marginBottom="0dp"
android:layout_height="70dp"
tools:targetApi="lollipop" />
</RelativeLayout>
Try This`
<FrameLayout
android:layout_alignParentBottom="true"
android:id="#+id/main_bottom_menu_container"
android:layout_width="match_parent"
android:background="#color/colorPrimary"
android:layout_height="40dp"
>
</FrameLayout>
<Button
android:elevation="1dp"
android:id="#+id/menu_plus_img"
android:background="#color/colorAccent"
android:layout_width="70dp"
android:layout_height="70dp"
tools:targetApi="lollipop"
android:layout_marginLeft="71dp"
android:layout_marginStart="71dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/main_center_tv"
android:textSize="24sp"
android:text="#string/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_alignBaseline="#+id/menu_plus_img"
android:layout_alignBottom="#+id/menu_plus_img"
android:layout_toRightOf="#+id/menu_plus_img"
android:layout_toEndOf="#+id/menu_plus_img" />
<FrameLayout
android:id="#+id/main_container_view"
android:layout_width="match_parent"
android:layout_height="520dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/menu_plus_img">
</FrameLayout>
`
You just have to change the order of the views in the layout while using a Framelayout
The complexity of your layout does not require a RelativeLayout so you just have to switch.
I don't really know why methods like bringToFront, bringChildToFront, or adding and removing View's children to change their indices didn't work. So I actually had to create a new layout structure.
Instead of:
RelativeLayout
...FrameLayout
...TextView
...FrameLayout
...Button
I did:
FrameLayout
...RelativeLayout
......FrameLayout
......FrameLayout
......TextView
...RelativeLayout
......Button
Whereas the second RelativeLayout has only a button and a transparent background. My full xml code is below as a reference.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_root_view"
android:layout_height="match_parent">
<RelativeLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eee"
tools:context="com.wecancer.wecancer.activities.Menu">
<FrameLayout
android:layout_alignParentBottom="true"
android:id="#+id/main_bottom_menu_container"
android:layout_width="match_parent"
android:background="#color/lightGray"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/main_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="0dp" />
<TextView
android:id="#+id/main_center_tv"
android:layout_centerVertical="true"
android:textSize="24sp"
android:layout_centerHorizontal="true"
android:text="#string/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:onClick="menuPlusBt"
android:elevation="5dp"
android:id="#+id/menu_plus_img"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:background="#drawable/green_circle"
android:layout_width="70dp"
android:layout_marginBottom="0dp"
android:layout_height="70dp"
tools:targetApi="lollipop" />
</RelativeLayout>
</FrameLayout>
I am new to gridview layout. could you please help me out how can we add divider/separator to grid view, as we have for tables
Please find the below image
Sadly there is no automatic way to do this. You could try this. Set a 1 or 2 pixel padding around each View in the table, and you should have a border between.
Source : Android GridView with Separator
To create such type of layout you have to assign a Frame to your GridView Item. Lets consider this is your Item's layout :-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000" >
<ImageView
android:id="#+id/image_view_product_cell_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/image_content_description" />
<RelativeLayout
android:id="#+id/rel_lay_product_image_frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/image_view_product_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/image_content_description" />
<ImageView
android:id="#+id/image_view_product"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/image_content_description" />
<ProgressBar
android:id="#+id/progress_bar_product"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/custom_progress_bar"
android:indeterminateDuration="800" />
</RelativeLayout>
<TextView
android:id="#+id/text_view_product_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:textIsSelectable="true" />
<TextView
android:id="#+id/text_view_product_brand"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_view_product_title"
android:gravity="center"
android:singleLine="true"
android:textIsSelectable="true" />
in the above layout you can assign your frame to the GridViewItem and provide required margin.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/splash_bg" />
<ImageView
android:id="#+id/photo_area"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:adjustViewBounds="true" />
<TextView
android:id="#+id/share_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/photo_area"
android:layout_marginLeft="20dp"
android:text="#string/share_title"
android:textColor="#android:color/white" />
<EditText
android:id="#+id/share_content"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#+id/share_title"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#drawable/custom_textarea"
android:gravity="top|left"
android:hint="default message" />
<ImageView
android:id="#+id/share_submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/share_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:src="#drawable/photo_taken_btn_submit" />
</RelativeLayout>
</ScrollView>
This is the xml of the layout. The photo_area by default do not have image set but it will download a picture from internet and set on it. The problem is the height of the content view is longer than it should be, so there is a lot of empty space at the end . I try to removed the background in linearlayout, the height reduced a bit but still there are some empty space how to fix it? Thanks
use android:adjustviewbound = "true" in the imageview xml fix the problem.
I'm trying to show a vertical line in an android ListView item. I define it in the XML for the cell but when I preview it in the ListView it doesn't appear.
I understand this is an issue because I see alot of questions on here, but don't see any real answer.
The XML is pretty standard:
Cell:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/appWhite" >
<View android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:layout_alignParentLeft="true" />
<RelativeLayout
android:id="#+id/cell_trip_info_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/vertical_bar" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_trip_name"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:textColor="#2c3e50"
android:paddingLeft="10dp"
android:text="adfadf" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_trip_country"
android:layout_below="#+id/cell_trip_name"
android:textColor="#2c3e50"
android:paddingLeft="10dp"
android:text="adfadf" />
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/whole_container"
android:layout_alignParentRight="true" >
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:id="#+id/cell_trip_date_box"
android:layout_alignTop="#+id/update_buttons"
android:layout_alignBottom="#+id/update_buttons"
android:padding="20dp" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_tripstart_date"
android:layout_centerHorizontal="true"
android:textColor="#fff" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_date_thru"
android:text="#string/thru"
android:layout_below="#+id/cell_tripstart_date"
android:layout_centerHorizontal="true"
android:textColor="#fff" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_tripend_date"
android:layout_below="#+id/cell_date_thru"
android:textColor="#fff"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/update_buttons"
android:visibility="gone"
android:layout_toRightOf="#+id/cell_trip_date_box"
android:background="#e9e9e9"
android:padding="20dp" >
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/cell_button_edit_trip"
android:src="#drawable/slide_edit"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description" />
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/cell_button_delete_trip"
android:src="#drawable/slide_delete"
android:layout_toRightOf="#+id/cell_button_edit_trip"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
I found the cause and the obvious solution/workaround on another post Here
Basically RelativeLayouts for whatever reason won't play nice with the "match_parent" height setting in a ListView Item. One of the answer to the post recommended using a LinearLayout instead. So I just created a new File with the parent view being a LinearLayout. I then created a RelativeLayout child and tossed everything else in there.
It worked fine this time, easily allowing me to create my vertical rule.
In your cell_trip_info_container RelativeLayout you have
android:layout_toRightOf="#+id/vertical_bar"
You dont have a View named vertical_bar
Add that ID to your vertical bar view and you should be good to go
<View
android:id="#+id/vertical_bar"
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:layout_alignParentLeft="true" />
change
RelativeLayout
to
VerticalLayout