Centering a TextView while keeping it to the left of a button?

Centering a TextView while keeping it to the left of a button? - android

Requirement
I've got a button and a textview, and I want the textview to be centered in the parent view, while the button is on the right side in the parent view.
Approach
So I took a RelativeLayout, make the textview layout_centerHorizontal="true", and the button layout_alignParentRight="true".
Code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/title_header_TV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="TextView" />
<!-- Doesnt work -->
<!-- android:layout_toLeftOf="#+id/right_button" -->
<Button
android:id="#+id/right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button" />
</RelativeLayout>
Problem
So when the text is too long, it gets written on top of the button.
I tried doing layout_toLeftOf="#+id/right_button" on the textview, but now TextView is no longer centered.

Try this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"/>
<TextView
android:id="#+id/title_header_TV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
<Button
android:id="#+id/right_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</TableRow>
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Doesnt work -->
<!-- android:layout_toLeftOf="#+id/right_button" -->
<Button
android:id="#+id/right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button" />
<TextView
android:id="#+id/title_header_TV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/right_button"
android:layout_alignBottom="#+id/right_button"
android:layout_alignParentLeft="true"
android:layout_marginLeft="80dp"
android:text="TextView" />
try this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/title_header_TV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/right_button"
android:gravity="center"
android:text="This is a test message, This is a test message This is a test message " />
<!-- Doesnt work -->
<!-- android:layout_toLeftOf="#+id/right_button" -->
<Button
android:id="#+id/right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button" />
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/title_header_TV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toLeftOf="#+id/right_button"
android:gravity="center"
android:text="TextView " />
<Button
android:id="#+id/right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button" />
</RelativeLayout>
check this out. a very simple solution for you

Please change to
`
<Button
android:id="#+id/right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button" />
<TextView
android:id="#+id/title_header_TV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/right_button"
android:layout_alignTop="#id/right_button"
android:layout_centerHorizontal="true"
android:layout_toLeftOf="#id/right_button"
android:gravity="center"
android:text="TextView" />
`

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Doesnt work -->
<!-- android:layout_toLeftOf="#+id/right_button" -->
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:layout_marginTop="17dp"
android:gravity="center"
android:text="Add your demo text here for small and large"
android:layout_toLeftOf="#+id/button1"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/textView1"
android:layout_marginLeft="19dp"
android:text="Button"
android:layout_alignParentRight="true"/>
</RelativeLayout>

Related

Android Studio aligning elements to other elements under them

Hello I'm using android studio for mobile app development and I need to make 3 LinearLayouts the same size. The problem is that the first element contains different element. I need to stretch first element to have exactly the same size as others. I guess I can somehow get to know that is the size of elements and set the value to the first element. Maybe there is a possibility to align them somehow? That is how it looks. Thanks for help!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
tools:context=".MainView.MainActivity"
android:orientation="vertical"
android:paddingTop="100dp">
<!-- rounds View -->
<TextView
style="#style/option_type_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/rounds" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="#+id/minus_round_button"
style="#style/change_value_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/minus" />
<EditText
android:id="#+id/round_minutes"
style="#style/option_input_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/default_time" />
<Button
android:id="#+id/plus_round_button"
style="#style/change_value_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/plus"/>
</LinearLayout>
<!-- end rounds View-->
<!-- work View -->
<TextView
style="#style/option_type_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/work" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="#+id/minus_work_button"
style="#style/change_value_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/minus" />
<EditText
android:id="#+id/work_minutes"
style="#style/option_input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/default_time" />
<TextView
style="#style/option_input_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=":"/>
<EditText
android:id="#+id/work_seconds"
style="#style/option_input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/default_time" />
<Button
android:id="#+id/plus_work_button"
style="#style/change_value_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/plus"/>
</LinearLayout>
<!-- end Work View-->
<!-- rest View -->
<TextView
style="#style/option_type_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/rest" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="#+id/minus_rest_button"
style="#style/change_value_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/minus" />
<EditText
android:id="#+id/rest_minutes"
style="#style/option_input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/default_time" />
<TextView
style="#style/option_input_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=":"/>
<EditText
android:id="#+id/rest_seconds"
style="#style/option_input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/default_time" />
<Button
android:id="#+id/plus_rest_button"
style="#style/change_value_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/plus"/>
</LinearLayout>
<!-- end Rest View-->
</LinearLayout>

Make your first element as follows:
<TextView
style="#style/option_type_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/rounds" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="#+id/minus_round_button"
style="#style/change_value_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/minus" />
<EditText
android:id="#+id/round_minutes"
style="#style/option_input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/default_time" />
<Button
android:id="#+id/plus_round_button"
style="#style/change_value_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/plus"/>
</LinearLayout>

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.

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>

Two Relative Layouts on the one screen

i want to have 2 Relative Layouts on my screen. One below another. I made this code but it doesn't work. In this case i can see only upper Relative Layout insted of both and this layout take whole space although i set wrap_content.
EDIT!: I put below the second code which fails too.
EDIT 2!: I found problem... That's a bit... sad. Problem lie in my theme. I set background to png file which was too big and when i applied default theme via manifest then this happend. When i removed it all is good.
This version fails too.
New code:
<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" >
<RelativeLayout
android:id="#+id/some_id"
android:layout_above="#+id/some_id2"
android:layout_alignParentTop="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/main_button_localize"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/main_localize" />
</RelativeLayout>
<RelativeLayout
android:id="#id/some_id2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<ToggleButton
android:id="#+id/main_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>
Old code:
<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" >
<RelativeLayout
android:id="#+id/maps_manager_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<!-- Top -->
<Button
android:id="#+id/maps_manager_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_top_middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_top_left"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_top_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_top_middle"
android:contentDescription="#string/empty" />
<!-- Middle -->
<Button
android:id="#+id/maps_manager_middle_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/maps_manager_top_left"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_middle_middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_middle_left"
android:layout_below="#id/maps_manager_top_middle"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_middle_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_middle_middle"
android:layout_below="#id/maps_manager_top_right"
android:contentDescription="#string/empty" />
<!-- Bottom -->
<Button
android:id="#+id/maps_manager_bottom_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/maps_manager_middle_left"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_bottom_middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_bottom_left"
android:layout_below="#id/maps_manager_middle_middle"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_bottom_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_bottom_middle"
android:layout_below="#id/maps_manager_middle_right"
android:contentDescription="#string/empty" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/maps_manager_controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="true"
android:layout_below="#id/maps_manager_menu" >
<ToggleButton
android:id="#+id/maps_manager_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>

Better you take LinearLayout with vertical orientation as Parent for two child RelativeLayouts. If you can put 80:20 height weights for the RelativeLayouts then it would fit to the entire screen.

<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<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" >
<RelativeLayout
android:id="#+id/maps_manager_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<!-- Top -->
<Button
android:id="#+id/maps_manager_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_top_middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_top_left"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_top_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_top_middle"
android:contentDescription="#string/empty" />
<!-- Middle -->
<Button
android:id="#+id/maps_manager_middle_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/maps_manager_top_left"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_middle_middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_middle_left"
android:layout_below="#id/maps_manager_top_middle"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_middle_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_middle_middle"
android:layout_below="#id/maps_manager_top_right"
android:contentDescription="#string/empty" />
<!-- Bottom -->
<Button
android:id="#+id/maps_manager_bottom_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/maps_manager_middle_left"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_bottom_middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_bottom_left"
android:layout_below="#id/maps_manager_middle_middle"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/maps_manager_bottom_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_bottom_middle"
android:layout_below="#id/maps_manager_middle_right"
android:contentDescription="#string/empty" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/maps_manager_controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="true"
android:layout_below="#id/maps_manager_menu" >
<ToggleButton
android:id="#+id/maps_manager_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>

<ScrollView 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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/maps_manager_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<!-- Top -->
<Button
android:id="#+id/maps_manager_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<Button
android:id="#+id/maps_manager_top_middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_top_left"
android:contentDescription="#string/hello_world" />
<Button
android:id="#+id/maps_manager_top_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_top_middle"
android:contentDescription="#string/hello_world" />
<!-- Middle -->
<Button
android:id="#+id/maps_manager_middle_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/maps_manager_top_left"
android:contentDescription="#string/hello_world" />
<Button
android:id="#+id/maps_manager_middle_middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_middle_left"
android:layout_below="#id/maps_manager_top_middle"
android:contentDescription="#string/hello_world" />
<Button
android:id="#+id/maps_manager_middle_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_middle_middle"
android:layout_below="#id/maps_manager_top_right"
android:contentDescription="#string/hello_world" />
<!-- Bottom -->
<Button
android:id="#+id/maps_manager_bottom_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/maps_manager_middle_left"
android:contentDescription="#string/hello_world" />
<Button
android:id="#+id/maps_manager_bottom_middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_bottom_left"
android:layout_below="#id/maps_manager_middle_middle"
android:contentDescription="#string/hello_world" />
<Button
android:id="#+id/maps_manager_bottom_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/maps_manager_bottom_middle"
android:layout_below="#id/maps_manager_middle_right"
android:contentDescription="#string/hello_world" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/maps_manager_controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/maps_manager_menu" >
<ToggleButton
android:id="#+id/maps_manager_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>

Follow the following steps:
Add ID to topmost relative layout say: android:id="#+id/rtvlt_first"
In second RelativeLayout remove alignparenttop property.
Add android:tobottomof="#id/rtvlt_first"...
Try this....
Good Luck!

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.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Centering a TextView while keeping it to the left of a button? - android

Related

Android Studio aligning elements to other elements under them

Setting background color of RelativeLayout in Xamarin.Android

How to center two views within a relative layout?

Two Relative Layouts on the one screen

Layout does not match preview

Categories

Resources