Develop Reference

TextView height stretches in parent with gravity right. why?

I am making chat activity and having issues with right chat bubble. As you can see in the image below. TextView stretches height wise. According to my thinking it should be stretching width wise first then if space is full it should stretch height wise. Please suggest me if it is possible with xml or not. I have seen java code solution but i want to find a solution in xml first.
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="20" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:gravity="right">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:background="#drawable/ic_bubble_sent"
android:gravity="right">
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_msg_content"
android:layout_marginTop="-9dp"
android:text="00:33"
android:textColor="#color/colorAppGray"
android:textSize="12sp"
android:textStyle="normal" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Replace your two TextView with this,
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:33"
android:textSize="12sp"
android:textStyle="normal"
android:layout_alignBaseline="#+id/txt_msg_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
I removed all unnecessary alignments from first TextView.
UPDATE
The overall layout looks like,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="20" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:gravity="right">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
>
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:33"
android:textSize="12sp"
android:textStyle="normal"
android:layout_alignBaseline="#+id/txt_msg_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Note : I removed your background for testing.

Setting background color of RelativeLayout in Xamarin.Android

I am trying to add a background color to the search form area of a RelativeLayout in my Android app in Xamarin. Basically I have an EditText and a button that should be contained within a colored background at the top of the screen. Using the code below, the background color is applied but my EditText and button disappear while the content below them move up and take their place. Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:pixlui="http://schemas.android.com/apk/com.neopixl.pixlui"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:screenOrientation="portrait"
android:background="#ffffff">
<RelativeLayout
android:id="#+id/TestLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#EAF4F9">
<com.neopixl.pixlui.components.textview.TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Heading"
pixlui:typeface="Lato-Bold.ttf"
android:layout_marginBottom="15dp"/>
<EditText
android:inputType="numberDecimal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:id="#+id/SearchField"
android:layout_marginRight="10dp"/>
<Button
android:text="Search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:layout_toRightOf="#id/SearchField"
android:id="#+id/btnSearch"
android:layout_alignParentRight="true" />
<TextView
android:text="Use my current location"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_below="#id/SearchField"
android:id="#+id/txtCurrentLocation"
android:gravity="center"/>
</RelativeLayout>
<View
android:id="#+id/strut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<com.neopixl.pixlui.components.button.Button
android:id="#+id/btnOne"
android:text="Button One"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_alignRight="#id/strut"
android:layout_alignParentLeft="true"
android:layout_below="#id/txtCurrentLocation"
pixlui:typeface="Lato-Light.ttf"
android:gravity="center" />
<com.neopixl.pixlui.components.button.Button
android:text="Button Two"
android:id="#+id/btnTwo"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_alignLeft="#id/strut"
android:layout_alignParentRight="true"
android:layout_below="#id/txtCurrentLocation"
android:gravity="center"
pixlui:typeface="Lato-Light.ttf" />
</RelativeLayout>
Should I be utilizing a LinearLayout here instead or is there a better way to construct this?

Try something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:pixlui="http://schemas.android.com/apk/com.neopixl.pixlui"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<View
android:background="#EAF4F9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/header"
android:layout_alignBottom="#+id/btnOne" />
<TextView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="15dp"
android:layout_alignParentTop="true"
android:text="Hello" />
<EditText
android:inputType="numberDecimal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/header"
android:layout_alignParentLeft="true"
android:id="#+id/search"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:hint="Search for..." />
<Button
android:text="Search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnSearch"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#+id/search" />
<TextView
android:text="Use my current location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/search"
android:layout_marginTop="10dp"
android:id="#+id/txtCurrentLocation"
android:gravity="center" />
<Button
android:id="#+id/btnOne"
android:text="Button One"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_alignRight="#id/strut"
android:layout_alignParentLeft="true"
android:layout_below="#id/txtCurrentLocation"
android:gravity="center" />
</RelativeLayout>
Just replace the buttons and textviews with the pixlui versions where needed.

why is my relativeLayout doesn't appear below its sibling linearLayout?

I have the following xml
<?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="wrap_content"
android:background="#color/blue_bg">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<com.my.view.text.MyTextView
android:id="#+id/whyResgisterHeaderText"
style="#style/textOnBg"
android:layout_marginTop="25dp"
android:text="WHY REGISTER?"
android:textStyle="bold" />
<com.my.view.text.MyTextView
android:id="#+id/whyResgisterBodyText"
style="#style/textOnBg"
android:text="Help us keep your account safe"
android:textStyle="normal" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:src="#drawable/signup_illu_why" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/gotItButton"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:background="#drawable/btn_selector"
android:padding="0dp" />
<com.my.view.text.MyTextView
android:id="#+id/gotItText"
style="#style/textOnBg"
android:layout_marginTop="25dp"
android:text="Got it"
android:textColor="#00bcfe"
android:textSize="16dp"
android:textStyle="italic" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#70a5b3" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<com.my.view.text.MyTextView
style="#style/textOnBg"
android:layout_toLeftOf="#+id/skipIcon"
android:text="Skip"
android:textStyle="normal" />
<ImageView
android:id="#id/skipIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/signup_skip_icon" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
I want my screen to look like:
but it looks like:
1) why cannot I see the fotter relativeLayout (with the "skip")
2) how can I center the gotItText textView? why isn't it center with current properties?

Because your root layout is a RelativeLayout.
You should declare an ID for the first LinearLayout, and then use layout_below property on the second one. Remember, their positions are relatives so if you don't specify the location of the second Linear, it will be paint over the first one.
If you want to get one linear below the other automatically use a LinearLayout as main root.

Edited you code, replaced the custom EditTexts, and removed the styles, set new heights to the layout and it seems to be working as you want.
<?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="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/whyResgisterHeaderText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="WHY REGISTER?"
android:textStyle="bold" />
<TextView
android:id="#+id/whyResgisterBodyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Help us keep your account safe"
android:textStyle="normal" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/gotItButton"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:padding="0dp" />
<TextView
android:id="#+id/gotItText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="Got it"
android:textColor="#00bcfe"
android:textSize="16dp"
android:textStyle="italic" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#70a5b3" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/skipIcon"
android:text="Skip"
android:textStyle="normal" />
<ImageView
android:id="#id/skipIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

How to center two views within a relative layout?

The task is simple: there are two buttons and a TextView above them. All the widgets shoud be centered within the relative layout. The only one idea I have is create the third widget View and use it as a center axis for the buttons. Any ideas? A redundant layout isn't a good solution.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tv_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/app_name" />
<View
android:id="#+id/view_axis"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_below="#id/tv_progress"
android:layout_centerInParent="true" />
<Button
android:id="#+id/button_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv_progress"
android:layout_toLeftOf="#id/view_axis"
android:text="#string/start" />
<Button
android:id="#+id/button_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv_progress"
android:layout_toRightOf="#id/view_axis"
android:text="#string/stop" />
</RelativeLayout>

If I understand what you want correctly, you can put the Buttons in a LinearLayout and center that
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tv_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/app_name" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/tv_progress">
<Button
android:id="#+id/button_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start" />
<Button
android:id="#+id/button_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/stop" />
</LinearLayout>
I'm not sure if that's what you meant by a "redundant layout" but doing this is fine if it gives you what you want.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Spinner
android:id="#+id/sp_rooms"
android:layout_toLeftOf="#id/space"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Space
android:id="#+id/space"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn_registration"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

This will vertically and horizontally center the whole block consisting of the textview + buttons
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerInParent="true">
<TextView
android:id="#+id/tv_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start" />
<Button
android:id="#+id/button_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/stop" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Layout does not match preview

I have designed an action sheet that appears when a user press a button. It is a separate xml file that I am including in another layout file. In the layout preview, it looks exactly as I want it. However, when it runs on my phone, the layout is messed up.
Here is how it should look:
And here is how it does look:
Does anyone have any idea why this might be happening?
Here is the layout code for the action sheet. The section that isn't displaying right is in the last linear layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/sheet_header" >
<ImageButton
android:id="#+id/left_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:layout_toLeftOf="#+id/center_justified"
android:background="#android:color/transparent"
android:src="#drawable/alignment_left" />
<ImageButton
android:id="#+id/center_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:background="#android:color/transparent"
android:src="#drawable/alignment_center" />
<ImageButton
android:id="#+id/right_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:layout_toRightOf="#+id/center_justified"
android:background="#android:color/transparent"
android:src="#drawable/alignment_right" />
<ImageButton
android:id="#+id/close_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/center_justified"
android:layout_marginRight="10dp"
android:src="#drawable/sheet_done_btn"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/sheet_background"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp" >
<TextView
android:id="#+id/font_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="Font"
android:textColor="#806014"
android:textSize="20sp" />
<TextView
android:id="#+id/size_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="Size"
android:textColor="#806014"
android:textSize="20sp" />
<TextView
android:id="#+id/color_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="Color"
android:textColor="#806014"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
And here is how it is included:
<FrameLayout
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_text_frame">
<include layout="#layout/edit_text"/>
</FrameLayout>
Edit: In addition to a fix for this specific problem does anyone know why the preview doesnt match the way it actually shows up on the phone?
Thanks for the help!

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/sheet_header" >
<ImageButton
android:id="#+id/left_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:layout_toLeftOf="#+id/center_justified"
android:background="#android:color/transparent"
android:src="#drawable/alignment_left" />
<ImageButton
android:id="#+id/center_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:background="#android:color/transparent"
android:src="#drawable/alignment_center" />
<ImageButton
android:id="#+id/right_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:layout_toRightOf="#+id/center_justified"
android:background="#android:color/transparent"
android:src="#drawable/alignment_right" />
<ImageButton
android:id="#+id/close_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/center_justified"
android:layout_marginRight="10dp"
android:src="#drawable/sheet_done_btn"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#drawable/sheet_background"
android:orientation="vertical" >
<TextView
android:id="#+id/font_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Font"
android:textColor="#806014"
android:textSize="20sp" />
<TextView
android:id="#+id/size_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Size"
android:textColor="#806014"
android:textSize="20sp" />
<TextView
android:id="#+id/color_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Color"
android:textColor="#806014"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>

You could place the font, size, color TextViews into a Table Layout.