Can someone please explain what GridLayout’s rowOrderPreserved and columnOrderPreserved mean?
I don't understand the docs. What is the difference between setting the value to true or false. An illustration wil be very helpful.
Consider the following piece of code with GridLayout:
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="true"
android:columnCount="4"
>
<TextView
android:text="Email setup"
android:textSize="32dip"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"
/>
<TextView
android:text="Email address:"
android:layout_gravity="left"
/>
<EditText
android:ems="10"
/>
<TextView
android:text="Password:"
android:layout_column="0"
android:layout_gravity="right"
/>
<EditText
android:ems="8"
/>
<Button
android:text="Next"
android:layout_row="4"
android:layout_column="3"
/>
</GridLayout>
This xml generates a view as follows in which the 'Next'-button is outside of the screen:
This is because the first EditText element defines the width of the second column. When defining the 'Next' button in the fourth column, it has to be right of the second column.
Now, changing the attribute columnOrderPreserved to false gives android the liberty to place the horizontal column boundaries in whatever order best fits the given constraints. (See the documentation) The result is as in this image:
Related
Can someone help me get this text centered please,
I have tried changing the layout width, height and padding but only managed to make it worse,
<com.github.mmin18.widget.FlexLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/login_bg"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo_main"
app:layout_centerX="50%"
app:layout_centerY="30%" />
<EditText
android:textSize="18.0sp"
android:textColorHint="#ff4d4d4d"
android:gravity="center"
android:id="#id/edit_code"
android:focusable="true"
android:visibility="gone"
android:layout_width="341.32812dip"
android:layout_height="46.0dip"
android:hint="#string/active_code"
android:layout_centerHorizontal="true"
android:inputType="text"
app:layout_centerX="50%"
app:layout_top="logo.bottom + parent.height/20" />
<Button
android:textSize="18.0sp"
android:id="#id/btn_reset"
android:background="#drawable/btn_bg"
android:focusable="true"
android:visibility="gone"
android:layout_width="160.0dip"
android:layout_height="36.0dip"
android:text="#string/reset"
android:textAllCaps="false"
app:layout_left="edit_code.left + 2dp"
app:layout_top="edit_code.bottom + 8dp" />
<Button
android:textSize="18.0sp"
android:id="#id/btn_login"
android:background="#drawable/btn_bg"
android:focusable="true"
android:visibility="gone"
android:layout_width="160.0dip"
android:layout_height="36.0dip"
android:text="#string/login"
android:textAllCaps="false"
app:layout_right="edit_code.right"
app:layout_top="edit_code.bottom + 8dp" />
<ProgressBar
android:id="#id/pb"
android:visibility="gone"
android:layout_width="22.0dip"
android:layout_height="22.0dip"
android:indeterminateDrawable="#drawable/login_progress"
android:layout_alignEnd="#id/btn_login"
app:layout_centerY="btn_login.centerY"
app:layout_right="btn_login.right-0.0556*screen.height" />
<TextView
android:textSize="22.0sp"
android:textColor="#color/white"
android:id="#id/change_login"
android:focusable="true"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Please click here to login"
android:paddingStart="3.0dip"
android:paddingEnd="3.0dip"
app:layout_right="btn_login.right"
app:layout_top="btn_login.bottom + 8dp" />
<android.support.v7.widget.AppCompatCheckBox
android:theme="#style/MyCheckBox" android:gravity="center"
android:id="#id/statement_check"
android:layout_width="#dimen/_36dp"
android:layout_height="#dimen/_36dp"
app:layout_height="btn_reset.height"
app:layout_left="btn_reset.left"
app:layout_top="change_login.bottom + 8dp"
app:layout_width="btn_reset.height" />
<TextView
android:textSize="#dimen/text_12"
android:textColor="#color/white"
android:id="#id/statement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/state_all"
app:layout_left="statement_check.right + 8dp"
app:layout_right="btn_login.right"
app:layout_top="statement_check.top" />
</com.github.mmin18.widget.FlexLayout>
I thought removing the padding would help or changing it to fill content would help but the text just disappeared
Maybe you got a better answer if you post the XML code of your application.
Usually, to get the text of an item centered you just need to use the "gravity" property.
In your XML file, search for the component with the text you want to center and add the following to it's properties:
android:gravity="center"
There are two properties of TextViews that might help you.
First is the gravity attribute. This attribute would center your text within the boundary of your TextView. Therefore, no matter how large or how small your actual TextView is, the text would always be in the center of it. Here's an implementation:
android:gravity="center"
There's also the layout_gravity attribute, this attribute positions your TextView relative to the nearest parent view. It is important to note that this attribute does not center the text, rather, it centers the whole TextView. Here's an implementation:
android:layout_gravity="center"
Refer to the documentation to learn more.
I hope this helps. Merry coding!
Here's my layout screenshot:
How can I arrange all these TextView for them to have a good format (heading being Taking responsibility (means being aware)..) alignment etc.
<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"
tools:context=".Menu"
android:background="#android:color/holo_blue_bright"
>
<TextView
android:text="*Follow safety guide for moving around the town and between towns."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView25"
android:gravity="left"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="51dp" />
<TextView
android:text="*Avoid crowds and do not participate actively in demonstrations even when it is related to programme work."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView25"
android:gravity="left"
android:layout_below="#+id/textView25"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="15dp" />
<TextView
android:text="*Avoid crowds and do not participate actively in demonstrations even when it is related to programme work."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView25"
android:gravity="left"
android:layout_marginBottom="23dp"
android:layout_above="#+id/textView25"
android:layout_toRightOf="#+id/textView25"
android:layout_toEndOf="#+id/textView25" />
<TextView
android:text="*keep this briefing pack in an accessible place, and the emergency numbers in your mobile phone memory"
android:layout_width="wrap_content"
android:gravity="bottom"
android:layout_height="wrap_content"
android:id="#+id/textView28"
android:layout_above="#+id/textView25"
android:layout_toRightOf="#+id/textView25"
android:layout_toEndOf="#+id/textView25"
android:layout_marginBottom="46dp" />
<TextView
android:gravity="center"
android:textColor="#000"
android:textSize="15dp"
android:text="Taking resposibility(means being aware)"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView22"
android:layout_marginTop="18dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:text="*Avoid moving around town by yourself and always make others aware of your location."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:id="#+id/textView25"
android:layout_marginTop="76dp"
android:layout_below="#+id/textView22"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:text="*Share any security information that might have implications for Ballloon Ventures to the Country Manager or pc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView24"
android:gravity="left"
android:layout_below="#+id/textView26"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="30dp" />
<TextView
android:text="*If using host home accommondation,check that it is secure.if it is not,tell the Programme Coordinator"
android:layout_width="wrap_content"
android:gravity="bottom"
android:layout_height="wrap_content"
android:id="#+id/textView28"
android:layout_marginTop="14dp"
android:layout_below="#+id/textView24"
android:layout_alignRight="#+id/textView25"
android:layout_alignEnd="#+id/textView25" />
<TextView
android:text="*Report all incidents to your Programmer Cordinator."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView26"
android:gravity="left"
android:layout_below="#+id/textView25"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="55dp" />
</RelativeLayout>
Because if I drag one TextView it affecting all other TextView.
As #GabeSechan said, you need to learn what android:layout_xxx properties in RelativeLayout means.
When you moving a View in RelativeLayout via Layout Editor, you need to consider some of the following properties in your layout:
android:layout_above="#+id/textView25"
android:layout_below="#+id/textView24"
android:layout_toRightOf="#+id/textView25"
android:layout_toEndOf="#+id/textView25"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_above="#+id/textView25" means that you want the View above textView25 view.
android:layout_below="#+id/textView24" means that you want the View below textView25 View.
The following properties means that you want the view to the right side of TextView25 View:
android:layout_toRightOf="#+id/textView25"
android:layout_toEndOf="#+id/textView25"
The following properties means that you want the view to align with the left side of the parent layout:
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
If you want to edit views position in a RelativeLayout, please don't depends with drag and drop via Layout Editor. You better do it manually except you want to have a headache later. Use Layout Editor to view the design result.
Design with a paper or imagination first, then code it after that.
Try to learn it from:
Relative Layout
Constructing View Layouts
The best practice for doing that would be to open a splitview between your code and design views and then editing the code to place the text in the correct location, using attributes such as padding, margin, aligning, below, above, etc. refer to this guide for positioning stuff in relative layout and combine it with other formatting attributes such as margin and padding.
I have a LinearLayout which contains two TextViews. Let the first TextView's text be "short text" and the 2nd TextView's text be "(s)".
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/variable-size"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:ellipsize="middle"
android:lines="1"
android:singleLine="true"
android:text="short text"/>
<TextView
android:id="#+id/fixed-size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="none"
android:lines="1"
android:singleLine="true"
android:text="(s)" />
</LinearLayout>
I want the LinearLayout to appear to the user thus:
[[short text][(s)]____________]
where ____ means empty view.
Now if I put a slightly longer string into the first TextView, I want to see this:
[[slightly longer text][(s)]__]
and if I put a much longer string into the first TextView, I want to see this:
[[really long ...ng text][(s)]]
But I can't seem to find a way to keep the first TextView from crowding out the second TextView altogether, like so:
[[really long lo... long text]]
How do I get the behavior I am looking for?
The base of the answer to your question is this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/variable-size"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="middle"
android:lines="1"
android:singleLine="true"
android:text="short text" />
<TextView
android:id="#+id/fixed-size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="none"
android:lines="1"
android:singleLine="true"
android:text="(s)" />
</LinearLayout>
BUT... bare in mind that I changed the width of your LinearLayout from:
android:layout_width="0dp"
android:layout_weight="1"
to
android:layout_width="wrap_content"
and that's a really important part of the answer.
The code I presented works like this:
[[short text][(s)]]
[[slightly longer text][(s)]]
[[really long ...ng text][(s)]]
It manages the ellipsizing correctly, but cannot introduce the "empty view" (____). If I didn't change the LinearLayout's layout_width, the ellipsizing would work correctly ((s) wouldn't be pushed off the screen), but the text alignment wouldn`t be correct. It would look like this:
[[short text ][(s)]]
[[slightly longer text ][(s)]]
[[really long ...ng text][(s)]]
So if the "empty view" is a need for you, you will need to implement it (for example) with nesting your LinearLayout inside another one (and this time "empty view" is gonna be an actual View). Like so:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/variable-size"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:ellipsize="middle"
android:lines="1"
android:singleLine="true"
android:text="short text" />
<TextView
android:id="#+id/fixed-size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="none"
android:lines="1"
android:singleLine="true"
android:text="(s)" />
</LinearLayout>
<View
android:id="#+id/empty_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
This will give you the following behaviour:
[[[short text][(s)]]____________]
[[[slightly longer text][(s)]]__]
[[[really long ...ng text][(s)]]]
I have this header:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dip">
<Button android:id="#+id/home"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Home"
/>
<Button android:id="#+id/questions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Questions"
/>
<Button android:id="#+id/questions"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Questions"
android:layout_toRightOf="#+id/home" />
<Button android:id="#+id/businesses"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Businesses"
android:layout_toRightOf="#+id/businesses"
/>
<Button android:id="#+id/learn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Learn"
android:layout_toRightOf="#+id/learn"
/>
<Button android:id="#+id/extra_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Help"
android:layout_toRightOf="#+id/learn"
/>
</RelativeLayout>
and for some reason, the buttons display 50% on top of each other all bunched up, each covering half of the other.
Any idea what is wrong with my layout?
Thanks!
You are using a relative layout, you need to manage both horizontal and vertical alignment. For example, all the android:layout_toRightOf are used for horizontal positioning, you need to also add attributes to handle the vertical positioning.
All the possible attributes are found here:
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
UPDATE
Seeing your comments below, it seems you just want to have one horizontal row. In that case, just make sure each is aligned to the previous one(But then why not use a linear layout?)
Check your id's though, and #+id/learn is aligned to the right of itself. Revisit that. And you also have a button right after "Home" that isn't handled at all.
I am trying to implementing a table layout but gap comes in between the left border and first column of the screen.
Secondly, I am not able to give required width to my spinner in first row of screen which always takes full width of screen.
I have tried with different permutations of code with stretch columns and layout_span, but they don't seem to work.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="0dp>![enter image description here][1]
<TableRow>
<TextView
android:layout_column="1"
android:text="Adult 1"
android:layout_marginBottom="5dp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
style="#style/text"/>
<Spinner
android:layout_width="20dp"
android:layout_marginLeft="2dip"
android:layout_column="2"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="5dp"
android:background="#drawable/select_spinner"
android:entries="#array/Passenger_title"/>
<EditText
android:id="#+id/First_Name"
android:layout_column="3"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="10dp"
style="#style/Edit_box_background"
android:layout_marginLeft="5dip"
android:layout_marginBottom="3dp"
android:textColor="#B3B3B3"
android:hint=" First Name "
android:textAppearance="?android:attr/textAppearanceSmallInverse"
android:padding="3dip"/>
<EditText
android:id="#+id/Last_Name"
android:layout_column="4"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="10dp"
style="#style/Edit_box_background"
android:layout_marginLeft="3dip"
android:layout_marginBottom="5dp"
android:textColor="#B3B3B3"
android:hint=" Last Name "
android:textAppearance="?android:attr/textAppearanceSmallInverse"
android:padding="3dip"/>
</TableRow>
firstly looking over your scenario I firstly recommend not to use android:layout_column="1" and layout_span unless required.By Default all items added to a TableRow would be added to right starting from first column.
And after give desired width to your Spinner.
Also one more mistake that you are making android:layout_column="0" you forgot to use it uses first column as index 0 not 1.
Hope My suggestion help you out and link you to right direction.