I have an android layout with some title bar and some input fields, and when I try to input some values, I can do it, but
the title bar vanishes
If I want to edit the field "Another number" I cannot scroll down to use the SeekBar instead.
How can I change the layout to make it
Have the title bar (with the text "InputExample") always fixes
Have the other content of the screen scrollable (so that I can use the SeekBar, for example)?
The layout is here:
<FrameLayout
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"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc"
android:layout_marginBottom = "0dp">
<GridLayout
android:id="#+id/grid"
android:layout_margin="30dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#+id/new_cancel"
android:alignmentMode="alignBounds"
android:columnCount="10"
android:columnOrderPreserved="false"
android:useDefaultMargins="true">
<TextView
android:id="#+id/textTitleEdit"
android:layout_column="0"
android:layout_columnSpan="10"
android:layout_gravity="center_horizontal"
android:layout_row="0"
android:text="My Title"
android:textSize="32dip"/>
<TextView
android:text="You can enter some values"
android:textSize="16dip"
android:layout_columnSpan="8"
android:layout_gravity="left"
android:id="#+id/textSubTitleEdit"
android:layout_row="1"
android:layout_column="0" />
<TextView
android:text="Name"
android:layout_gravity="right"
android:layout_row="2"
android:layout_column="0"
/>
<EditText
android:ems="7"
android:singleLine="true"
android:inputType="textCapWords"
android:id="#+id/new_name"
android:layout_row="2"
android:layout_column="1" />
_____________
<TextView
android:text="Label"
android:layout_gravity="right"
android:layout_row="3"
android:layout_column="0" />
<EditText
android:ems="7"
android:singleLine="true"
android:inputType="textCapWords"
android:id="#+id/new_label"
android:layout_row="3"
android:layout_column="1" />
______
<TextView
android:layout_column="0"
android:text="Put in a number"
android:layout_gravity="right"
/>
<EditText
android:ems="7"
android:singleLine="true"
android:id="#+id/new_price"
android:inputType="numberDecimal"
android:layout_row="4"
android:layout_column="1" />
<TextView
android:layout_column="0"
android:text="Another number"
android:layout_gravity="right"
android:layout_row="5" />
<EditText
android:ems="7"
android:singleLine="true"
android:id="#+id/new_offset"
android:inputType="number"
android:layout_row="5"
android:layout_column="1" />
<SeekBar
android:id="#+id/seek_offset"
style="#android:style/Widget.Holo.SeekBar"
android:layout_width="150dp"
android:layout_column="1"
android:layout_row="6"
android:max="20"/>
<TextView
android:text="Comment"
android:layout_gravity="right"
android:layout_row="7"
android:layout_column="0" />
<EditText
android:ems="7"
android:singleLine="true"
android:inputType="textCapWords"
android:id="#+id/new_comment"
android:layout_row="7"
android:layout_column="1" />
</GridLayout>
<Button
android:id="#+id/new_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#aaaaaa"
android:text="Cancel"
android:layout_margin="5dp"
/>
<Button
android:id="#+id/new_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:background="#dddddd"
android:text="Ok"
android:layout_margin="5dp"
/>
</RelativeLayout>
</FrameLayout>
Was having some problems with your original layout so I've fixed it up and I think this solution should work. Everything in the preview of the layout has it positioned correctly so hopefully when you use this in the emulator it should work.
I personally prefer using LinearLayouts with weights for the majority of my layouts, I know some others prefer RelativeLayouts.
Essentially you should look to contain the part which you wish to scroll with a layout of some kind and then the ScrollView contains this layout so it can be scrolled. This is why I've removed the title and subtitle from the GridLayout.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc"
android:weightSum="6">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2.5"
android:orientation="vertical"
android:gravity="bottom|center_horizontal">
<TextView
android:id="#+id/textTitleEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="My Title"
android:textSize="32dip"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="You can enter some values"
android:textSize="16dip"
android:layout_gravity="center_horizontal"
android:id="#+id/textSubTitleEdit"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<GridLayout
android:id="#+id/grid"
android:layout_margin="30dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alignmentMode="alignBounds"
android:columnCount="10"
android:columnOrderPreserved="false"
android:useDefaultMargins="true">
<TextView
android:text="Name"
android:layout_gravity="right"
android:layout_row="2"
android:layout_column="0"/>
<EditText
android:ems="7"
android:singleLine="true"
android:inputType="textCapWords"
android:id="#+id/new_name"
android:layout_row="2"
android:layout_column="1"/>
<TextView
android:text="Label"
android:layout_gravity="right"
android:layout_row="3"
android:layout_column="0"/>
<EditText
android:ems="7"
android:singleLine="true"
android:inputType="textCapWords"
android:id="#+id/new_label"
android:layout_row="3"
android:layout_column="1" />
<TextView
android:layout_column="0"
android:text="Put in a number"
android:layout_gravity="right"
/>
<EditText
android:ems="7"
android:singleLine="true"
android:id="#+id/new_price"
android:inputType="numberDecimal"
android:layout_row="4"
android:layout_column="1" />
<TextView
android:layout_column="0"
android:text="Another number"
android:layout_gravity="end"
android:layout_row="5" />
<EditText
android:ems="7"
android:singleLine="true"
android:id="#+id/new_offset"
android:inputType="number"
android:layout_row="5"
android:layout_column="1" />
<SeekBar
android:id="#+id/seek_offset"
style="#android:style/Widget.Holo.SeekBar"
android:layout_width="150dp"
android:layout_column="1"
android:layout_row="6"
android:max="20"/>
<TextView
android:text="Comment"
android:layout_gravity="right"
android:layout_row="7"
android:layout_column="0" />
<EditText
android:ems="7"
android:singleLine="true"
android:inputType="textCapWords"
android:id="#+id/new_comment"
android:layout_row="7"
android:layout_column="1" />
</GridLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2.5"
android:gravity="bottom|center_horizontal"
android:weightSum="2">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="start"
android:layout_weight="1">
<Button
android:id="#+id/new_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity=""
android:background="#aaaaaa"
android:text="Cancel"
android:layout_margin="5dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:layout_weight="1">
<Button
android:id="#+id/new_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#dddddd"
android:text="Ok"
android:layout_margin="5dp"/>
</RelativeLayout>
</LinearLayout>
Related
Hello i having some problem design the app I working on
I'm trying to make the TextEdit and The TextView be near each other but they still at the same place
i'm using a grid layout because I want the app be available for all sizes of all the devices
i'm kind of a beginner so I don't understand so much on developing android apps
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="3"
android:rowCount="7">
<TextView
android:id="#+id/WelcomeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
android:layout_gravity="left"
android:text="Welcome To My App"
android:textColor="#android:color/background_dark"
/>
<TextView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
android:layout_gravity="left"
android:text="Please fill the information"
android:textColor="#android:color/holo_blue_dark"
android:textSize="16sp" />
<TextView
android:id="#+id/nameTxt"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="left"
android:layout_column="0"
android:layout_row="2"
android:text="Name:"
android:textColor="#android:color/black"
android:textSize="16sp"/>
<EditText
android:id="#+id/Name"
style="#style/Widget.AppCompat.EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:a
android:layout_toEndOf="#id/nameTxt"
android:layout_row="2"
android:layout_column="1"
android:ems="14"
android:capitalize="sentences"
android:inputType="textPersonName"
android:visibility="visible"/>
<TextView
android:id="#+id/phoneTxt"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="left"
android:layout_column="0"
android:layout_row="3"
android:text="Phone:"
android:textColor="#android:color/black"
android:textSize="16sp"/>
<EditText
android:id="#+id/Phone"
style="#style/Widget.AppCompat.EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="3"
android:ems="14"
android:inputType="phone"
android:visibility="visible"/>
<TextView
android:id="#+id/emailTxt"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="left"
android:layout_column="0"
android:layout_row="4"
android:text="Email:"
android:textColor="#android:color/black"
android:textSize="16sp"/>
<EditText
android:id="#+id/Email"
style="#style/Widget.AppCompat.EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="4"
android:ems="14"
android:inputType="textEmailAddress"
android:visibility="visible"/>
<TextView
android:id="#+id/ageTxt"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="left"
android:layout_column="0"
android:layout_row="5"
android:text="Age:"
android:textColor="#android:color/black"
android:textSize="16sp"/>
<EditText
android:id="#+id/Age"
style="#style/Widget.AppCompat.EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="5"
android:ems="14"
android:inputType="number"
android:hint="Age:"
android:visibility="visible"/>
<Button
android:id="#+id/nextBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="6"
android:text="Next"
android:layout_gravity="center"
android:background="#android:color/holo_blue_dark"
/>
</GridLayout>
how it looks like
the red arrows represent where I want the EditText to be (at the end of each Text View)
You have to bring "info" and "WelcomeText" and "nextBtn" out of "GridLayout", then add LinearLayout:
<LinearLayout
android:layout_width="576dp"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp">
<TextView
android:id="#+id/WelcomeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="left"
android:layout_row="0"
android:text="Welcome To My App"
android:textColor="#android:color/background_dark" />
<TextView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Please fill the information"
android:textColor="#android:color/holo_blue_dark"
android:textSize="16sp" />
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="3"
android:rowCount="7">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="left"
android:layout_row="2"
android:text="Name:"
android:textColor="#android:color/black"
android:textSize="16sp" />
<EditText
android:id="#+id/Name"
style="#style/Widget.AppCompat.EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="2"
android:layout_toEndOf="#id/nameTxt"
android:a
android:capitalize="sentences"
android:ems="14"
android:inputType="textPersonName"
android:visibility="visible" />
<TextView
android:id="#+id/phoneTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="left"
android:layout_row="3"
android:text="Phone:"
android:textColor="#android:color/black"
android:textSize="16sp" />
<EditText
android:id="#+id/Phone"
style="#style/Widget.AppCompat.EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="3"
android:ems="14"
android:inputType="phone"
android:visibility="visible" />
<TextView
android:id="#+id/emailTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="left"
android:layout_row="4"
android:text="Email:"
android:textColor="#android:color/black"
android:textSize="16sp" />
<EditText
android:id="#+id/Email"
style="#style/Widget.AppCompat.EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="4"
android:ems="14"
android:inputType="textEmailAddress"
android:visibility="visible" />
<TextView
android:id="#+id/ageTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="left"
android:layout_row="5"
android:text="Age:"
android:textColor="#android:color/black"
android:textSize="16sp" />
<EditText
android:id="#+id/Age"
style="#style/Widget.AppCompat.EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="5"
android:ems="14"
android:hint="Age:"
android:inputType="number"
android:visibility="visible" />
</GridLayout>
<Button
android:id="#+id/nextBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/holo_blue_dark"
android:text="Next" />
</LinearLayout>
I have the following xml file to define my layout for an activity in android:
<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="false"
android:columnCount="10"
android:background="#cccccc"
>
<TextView
android:text="#string/new_title"
android:textSize="32dip"
android:layout_columnSpan="10"
android:layout_gravity="center_horizontal"
android:id="#+id/textTitleEdit"
android:layout_row="0"
android:layout_column="0" />
<TextView
android:text="#string/new_descr"
android:textSize="16dip"
android:layout_columnSpan="8"
android:layout_gravity="left"
android:id="#+id/textSubTitleEdit"
android:layout_row="1"
android:layout_column="0" />
<TextView
android:text="#string/new_name"
android:layout_gravity="right"
android:layout_row="2"
android:layout_column="0"
/>
<EditText
android:ems="7"
android:singleLine="true"
android:inputType="textCapWords"
android:id="#+id/new_name"
android:layout_row="2"
android:layout_column="1" />
<ImageButton
android:src="#mipmap/ic_backspace_black_24dp"
android:id="#+id/clear_line"
android:layout_row="2"
android:minHeight="15dp"
android:minWidth="15dp"
android:maxHeight="15dp"
android:maxWidth="15dp"
/>
<ImageButton
android:src="#mipmap/ic_search_black_24dp"
android:id="#+id/new_search"
android:layout_row="2"
android:minHeight="15dp"
android:minWidth="15dp"
android:maxHeight="15dp"
android:maxWidth="15dp"
/>
_____________
<TextView
android:text="#string/new_label"
android:layout_gravity="right"
android:layout_row="3"
android:layout_column="0" />
<EditText
android:ems="7"
android:singleLine="true"
android:inputType="textCapWords"
android:id="#+id/new_label"
android:layout_row="3"
android:layout_column="1" />
______
<TextView
android:layout_column="0"
android:text="#string/new_price"
android:layout_gravity="right"
/>
<EditText
android:ems="7"
android:singleLine="true"
android:id="#+id/new_price"
android:inputType="numberDecimal"
android:layout_row="4"
android:layout_column="1" />
<TextView
android:layout_column="0"
android:text="#string/new_offset"
android:layout_gravity="right"
android:layout_row="6" />
<EditText
android:ems="7"
android:singleLine="true"
android:id="#+id/new_offset"
android:inputType="number"
android:layout_row="6"
android:layout_column="1" />
<SeekBar
android:layout_row="7"
android:layout_width="150dp"
android:max="10"
android:id="#+id/seek_offset"
android:layout_column="1"
style="#android:style/Widget.Holo.SeekBar"/>
<Space
android:layout_row="4"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_gravity="fill"
/>
<Button
android:text="Cancel"
android:id="#+id/new_cancel"
android:background="#color/colorPrimaryDark"
android:layout_row="10"
android:layout_column="0"
/>
<Button
android:text="Ok"
android:id="#+id/new_ok"
android:background="#color/colorPrimaryLight"
android:layout_row="10"
android:layout_column="8"
/>
</GridLayout>
This works fine, and I see something like in the following image (although I might have defined nonesense in this xml, or something incorrect, as I am a beginning beginner in Android...)
However, I am reusing this layout in some other activity and replace the text of the textView with the id textSubTitleEdit by a shorter text. As a consequence, the Ok-Button is shifted to the left, and is no longer at its place in the lower right corner.
Is there something wrong with my layout? How can the length of a TextView affect the position of a button?
The problem here is that you are using a GridLayout to place all your views in the layout.
If you want your buttons to stick to the bottom, one on each side of the screen, you may consider adding a RelativeLayout above your GridLayout, and move your button there as follows:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc"
>
<GridLayout
android:id="#+id/grid"
android:layout_margin="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#+id/new_cancel"
android:alignmentMode="alignBounds"
android:columnCount="10"
android:columnOrderPreserved="false"
android:useDefaultMargins="true">
<TextView
android:id="#+id/textTitleEdit"
android:layout_column="0"
android:layout_columnSpan="10"
android:layout_gravity="center_horizontal"
android:layout_row="0"
android:text="#string/new_title"
android:textSize="32dip"/>
....
<SeekBar
android:id="#+id/seek_offset"
style="#android:style/Widget.Holo.SeekBar"
android:layout_width="150dp"
android:layout_column="1"
android:layout_row="7"
android:max="10"/>
<Space
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_gravity="fill"
android:layout_row="4"
/>
</GridLayout>
<Button
android:id="#+id/new_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#color/colorPrimaryDark"
android:text="Cancel"
/>
<Button
android:id="#+id/new_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:background="#color/colorPrimaryLight"
android:text="Ok"
/>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.andrewfinlay.vectorcalculator.MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="0"
android:password="false"
android:phoneNumber="false"
android:textAlignment="center"
android:id="#+id/resultOutput"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:textSize="30dp"
android:clickable="true"
android:textIsSelectable="true"/>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/gridLayout"
android:layout_below="#+id/resultOutput"
android:layout_alignParentEnd="true"
android:layout_marginBottom="50dp"
>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/x1"
android:layout_row="0"
android:layout_column="0"
android:hint="x1"
android:focusable="true"
android:nextFocusDown="#+id/x2"/>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/x2"
android:layout_row="0"
android:layout_column="1"
android:hint="x2"
android:focusable="true"
android:nextFocusDown="#+id/x3"/>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/x3"
android:layout_row="0"
android:layout_column="2"
android:hint="x3"
android:focusable="true"
android:nextFocusDown="#+id/y1"/>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/y1"
android:layout_row="1"
android:layout_column="0"
android:hint="y1"
android:focusable="true"
android:nextFocusDown="#+id/y2"/>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/y2"
android:layout_row="1"
android:layout_column="1"
android:hint="y2"
android:focusable="true"
android:nextFocusDown="#+id/y3"/>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/y3"
android:layout_row="1"
android:layout_column="2"
android:hint="y3"
android:focusable="true"/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Add"
android:id="#+id/addButton"
android:layout_row="2"
android:layout_column="0"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25sp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Sub"
android:id="#+id/subButton"
android:layout_row="2"
android:layout_column="1"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginRight="3dp"/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Unit"
android:id="#+id/unitButton"
android:layout_row="2"
android:layout_column="2"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Cross"
android:id="#+id/crossButton"
android:layout_row="3"
android:layout_column="0"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Dot"
android:id="#+id/dotButton"
android:layout_row="3"
android:layout_column="1"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginRight="3dp"/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Mag"
android:id="#+id/magButton"
android:layout_row="3"
android:layout_column="2"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Reset"
android:id="#+id/resetButton"
android:layout_row="4"
android:layout_column="1"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center|top"
android:layout_marginTop="10dp"
android:layout_marginRight="3dp"/>
</GridLayout>
</RelativeLayout>
At the minute the buttons/edit texts and output are all relative to the screen size because of dpi.
How would I go about adjusting this so it scales to different screen sizes? As this is what happens currently:
This is ideal: Nexus 5
This isn't: Nexus S
Since API 21 you can use android:layout_columnWeight="1" to distribute excess of space for each element column.
You'll want to asign the same column weight in order to fill each column space equally
Check GridLayout android reference http://developer.android.com/reference/android/widget/GridLayout.html
Section Excess Space Distribution
Try this layout instead:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/resultOutput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:clickable="true"
android:password="false"
android:phoneNumber="false"
android:text="0"
android:textAlignment="center"
android:textIsSelectable="true"
android:textSize="30dp" />
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#+id/resultOutput"
android:layout_marginBottom="50dp">
<EditText
android:id="#+id/x1"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
android:ems="10"
android:focusable="true"
android:hint="x1"
android:inputType="number|numberDecimal"
android:nextFocusDown="#+id/x2" />
<EditText
android:id="#+id/x2"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
android:ems="10"
android:focusable="true"
android:hint="x2"
android:inputType="number|numberDecimal"
android:nextFocusDown="#+id/x3" />
<EditText
android:id="#+id/x3"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="0"
android:ems="10"
android:focusable="true"
android:hint="x3"
android:inputType="number|numberDecimal"
android:nextFocusDown="#+id/y1" />
<EditText
android:id="#+id/y1"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
android:ems="10"
android:focusable="true"
android:hint="y1"
android:inputType="number|numberDecimal"
android:nextFocusDown="#+id/y2" />
<EditText
android:id="#+id/y2"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:ems="10"
android:focusable="true"
android:hint="y2"
android:inputType="number|numberDecimal"
android:nextFocusDown="#+id/y3" />
<EditText
android:id="#+id/y3"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="1"
android:ems="10"
android:focusable="true"
android:hint="y3"
android:inputType="number|numberDecimal" />
</GridLayout>
<LinearLayout
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/gridLayout"
android:orientation="horizontal">
<Button
android:id="#+id/addButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_weight="1"
android:layout_margin="8dp"
android:background="#3F51B5"
android:text="Add"
android:textColor="#ffffff"
android:textSize="25sp" />
<Button
android:id="#+id/subButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_margin="8dp"
android:layout_weight="1"
android:background="#3F51B5"
android:text="Sub"
android:textColor="#ffffff"
android:textSize="25sp" />
<Button
android:id="#+id/unitButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_margin="8dp"
android:layout_weight="1"
android:background="#3F51B5"
android:text="Unit"
android:textColor="#ffffff"
android:textSize="25sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/row2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/row1"
android:orientation="horizontal">
<Button
android:id="#+id/crossButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_weight="1"
android:layout_margin="8dp"
android:background="#3F51B5"
android:text="Cross"
android:textColor="#ffffff"
android:textSize="25sp" />
<Button
android:id="#+id/dotButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_margin="8dp"
android:layout_weight="1"
android:background="#3F51B5"
android:text="Dot"
android:textColor="#ffffff"
android:textSize="25sp" />
<Button
android:id="#+id/magButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_margin="8dp"
android:layout_weight="1"
android:background="#3F51B5"
android:text="Mag"
android:textColor="#ffffff"
android:textSize="25sp" />
</LinearLayout>
<Button
android:id="#+id/resetButton"
android:layout_below="#id/row2"
android:layout_width="100dp"
android:layout_height="35dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center|top"
android:layout_marginTop="10dp"
android:background="#3F51B5"
android:text="Reset"
android:textColor="#ffffff"
android:textSize="25sp" />
</RelativeLayout>
you would use hdpi, xhdpi, etc folders (http://developer.android.com/guide/practices/screens_support.html)
cheers
This is usually a very long process:
You must make separate directories for every layout in order to remain consistent to the user:
http://developer.android.com/guide/practices/screens_support.html
You have to make different layouts for each screen size, and android automatically sets the layout based on the name of the directory with the contents of your XML file:
IN ANDROID STUIDO:
Now, select the size:
Do this for every single layout you have:
(Small is considered pretty obsolete now)
Then, just render your layout in each directory. You don't have to make the directories like that, if you want you can just go into project view and create them and copy the xml files, but this way is much more easy.
Let me know if it helped,
Ruchir
I am a beginner android programmer with a fair amount of Java background, mostly on a mainframe. (Yes it runs on a mainframe). I writing an app that tracks some daily activity, and after the default RealativeLayout I am adding a TableLayout via XML. In my onWindowFocusChanged I am also trying to set the width of the TableLayout. When I measure the two, the RelativeLayout is 1024, the screen size, but the TableLayout is 960. The XML and code snippet are below. Any help would be greatly appreciated as I have done many searches and a lot of Doc, and still can't get this to match.
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/WeekTbar"
android:stretchColumns="*"
android:shrinkColumns="*"
android:layout_alignParentLeft="true"
android:id="#+id/table"
android:background="#d4fbff">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0ff2D2Bf"
>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_column="0"
android:background="#2d2bff"
android:textColor="#ffffff"
android:text=" " />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText2"
android:layout_column="1"
android:text="Sun"
android:textColor="#ffffff"
android:background="#2d2bff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText3"
android:layout_column="2"
android:text="Mon"
android:background="#2d2bff"
android:textColor="#ffffff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText4"
android:layout_column="3"
android:text="Tue"
android:textColor="#ffffff"
android:background="#2d2bff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText6"
android:layout_column="4"
android:text="Wed"
android:background="#2d2bff"
android:textColor="#ffffff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText5"
android:layout_column="5"
android:text="Thu"
android:textColor="#ffffff"
android:background="#2d2bff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText8"
android:layout_column="6"
android:text="Fri"
android:background="#2d2bff"
android:textColor="#ffffff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText9"
android:layout_column="7"
android:text="Sat"
android:textColor="#ffffff"
android:background="#2d2bff" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0ff2D2Bf"
android:focusableInTouchMode="true">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText10"
android:layout_column="0"
android:text="Steps"
android:background="#2d2bff"
android:textColor="#ffffff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/SunSteps"
android:layout_column="1"
android:background="#2d2bff"
android:textColor="#ffffff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/MonSteps"
android:layout_column="2"
android:textColor="#ffffff"
android:background="#2d2bff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/TueSteps"
android:layout_column="3"
android:background="#2d2bff"
android:textColor="#ffffff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/WedSteps"
android:layout_column="4"
android:textColor="#ffffff"
android:background="#2d2bff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ThuSteps"
android:layout_column="5"
android:background="#2d2bff"
android:textColor="#ffffff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/FriSteps"
android:layout_column="6"
android:textColor="#ffffff"
android:background="#2d2bff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/SatSteps"
android:layout_column="7"
android:background="#2d2bff" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0ff2D2Bf">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText11"
android:layout_column="0"
android:text=Cals"
android:textColor="#ffffff"
android:background="#2d2bff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/SunCals"
android:layout_column="1"
android:focusableInTouchMode="true"
android:background="#2d2bff"
android:textColor="#ffffff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/MonCals"
android:layout_column="2"
android:textColor="#ffffff"
android:focusableInTouchMode="true"
android:background="#2d2bff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/TueCals"
android:layout_column="3"
android:background="#2d2bff"
android:focusableInTouchMode="true"
android:textColor="#ffffff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/WedCals"
android:layout_column="4"
android:textColor="#ffffff"
android:focusableInTouchMode="true"
android:background="#2d2bff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ThuCals"
android:layout_column="5"
android:background="#2d2bff"
android:focusableInTouchMode="true"
android:textColor="#ffffff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/FriCals"
android:layout_column="6"
android:textColor="#ffffff"
android:focusableInTouchMode="true"
android:background="#2d2bff" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText7"
android:layout_column="7"
android:background="#2d2bff"
android:focusableInTouchMode="true"
android:textColor="#ffffff" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0ff2D2Bf">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText12"
android:layout_column="0"
android:text="Wgt"
android:background="#2d2bff"
android:textColor="#ffffff" />
</TableRow>
</TableLayout>
Java code
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus == true) {
TableLayout table = (TableLayout) findViewById(R.id.table);
RelativeLayout rl = (RelativeLayout)findViewById(R.id.RelativeLayout);
int layoutWidth = rl.getWidth();
int layoutHeight = rl.getHeight();
table.getLayoutParams().width = layoutWidth;
table.setMinimumWidth(layoutWidth);
gw = table.getWidth();
rw = layoutWidth;
int x =1;
}
}
If you only want your table layout width match RelativeLayout width you shouldn't need to support multiple xml element.
Your problem maybe cause when you support android:padding in RelativeLayout or android:layout_margin in TableLayout.
Check the simple code below
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:padding="10dp" // remove it
android:layout_height="match_parent" >
...
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
android:layout_margin="10dp" // remove it
>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
.... >
</TableRow>
....
</TableLayout>
</RelativeLayout>
See more about android layout margin and padding in this
Hope this help
I have the following layout, where the edit texts goes out of the screen with apparently no reason. I've trying to find a similar issue but I couldn't. It should be an easy one but I've tried many things without luck.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:columnCount="2"
android:orientation="horizontal" >
<TextView
android:id="#+id/titleTextView"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="dsgsdgsd"
android:textColor="#color/red"
android:textStyle="bold" />
<View
android:layout_width="fill_parent"
android:layout_height="2dip"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#color/red" />
<TextView
android:id="#+id/textTitle"
android:layout_gravity="left"
android:background="#ffffff"
android:paddingLeft="15dp"
android:text="Title"
android:textColor="#color/grey" />
<EditText
android:id="#+id/editTitle"
android:layout_gravity="right"
android:inputType="text">
</EditText>
<View
android:layout_height="1dip"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:background="#E6E6E6" />
<TextView
android:id="#+id/textCategory"
android:layout_gravity="left"
android:background="#ffffff"
android:gravity="left"
android:paddingLeft="15dp"
android:text="Category"
android:textColor="#color/grey" />
<EditText
android:id="#+id/editCategory"
android:layout_width="225dp"
android:layout_gravity="right"
android:inputType="text" />
<Button
android:id="#+id/btnCreateAccount"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#ffffff"
android:onClick="createExpense"
android:text="Done"
android:textColor="#color/red" />
</GridLayout>
Check your updated code:
You were missing some width, height attributes, and you had used match_parent in earlier element like View, which prevented any later element to get space on screen.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:columnCount="2"
android:orientation="horizontal" >
<TextView
android:id="#+id/titleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="dsgsdgsd"
android:textColor="#color/red"
android:textStyle="bold" />
<View
android:layout_width="wrap_content"
android:layout_height="2dip"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#color/red" />
<TextView
android:id="#+id/textTitle"
android:layout_gravity="left"
android:background="#ffffff"
android:paddingLeft="15dp"
android:text="Title"
android:textColor="#color/grey" />
<EditText
android:id="#+id/editTitle"
android:layout_gravity="right"
android:inputType="text" >
</EditText>
<View
android:layout_width="wrap_content"
android:layout_height="1dip"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:background="#E6E6E6" />
<TextView
android:id="#+id/textCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:background="#ffffff"
android:gravity="left"
android:paddingLeft="15dp"
android:text="Category"
android:textColor="#color/grey" />
<EditText
android:id="#+id/editCategory"
android:layout_width="225dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:inputType="text" />
<Button
android:id="#+id/btnCreateAccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#ffffff"
android:onClick="createExpense"
android:text="Done"
android:textColor="#color/red" />
</GridLayout>
</LinearLayout>
The output without color and background as it gives me error due to missing resource is:
Here you can see both your edittexts in screen.
try this may be this help you
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:columnCount="2"
android:orientation="horizontal" >
<TextView
android:id="#+id/titleTextView"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="dsgsdgsd"
android:textColor="#color/red"
android:textStyle="bold" />
<View
android:layout_width="fill_parent"
android:layout_height="2dip"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#color/red" />
<TableRow android:id="#+id/tableRow1" >
<TextView
android:id="#+id/textTitle"
android:background="#ffffff"
android:paddingLeft="15dp"
android:text="Title"
android:textColor="#color/grey" />
<EditText
android:id="#+id/editTitle"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_weight="1"
android:inputType="text" >
<requestFocus />
</EditText>
</TableRow>
<View
android:layout_height="1dip"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:background="#E6E6E6" />
<TextView
android:id="#+id/textCategory"
android:layout_gravity="left"
android:background="#ffffff"
android:gravity="left"
android:paddingLeft="15dp"
android:text="Category"
android:textColor="#color/grey" />
<EditText
android:id="#+id/editCategory"
android:layout_width="225dp"
android:layout_gravity="right"
android:inputType="text" />
<Button
android:id="#+id/btnCreateAccount"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#ffffff"
android:onClick="createExpense"
android:text="Done"
android:textColor="#color/red" />
</GridLayout>
Change your EditText part to This one:
<EditText
android:id="#+id/editTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="center_horizontal|top"
android:layout_row="4"
android:ems="10"
android:inputType="text" />
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:columnCount="2"
android:orientation="horizontal" >
<TextView
android:id="#+id/titleTextView"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:paddingBottom="10dp"
android:layout_row="0"
android:paddingTop="10dp"
android:text="dsgsdgsd"
android:textColor="#color/red"
android:textStyle="bold" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:layout_marginLeft="20dp"
android:layout_row="1"
android:layout_marginRight="20dp"
android:background="#color/red" />
<TextView
android:id="#+id/textTitle"
android:layout_gravity="left"
android:background="#ffffff"
android:paddingLeft="15dp"
android:layout_row="2"
android:layout_column="0"
android:text="Title"
android:textColor="#color/grey" />
<EditText
android:id="#+id/editTitle"
android:layout_width="225dp"
android:layout_gravity="right"
android:layout_row="2"
android:layout_column="1"
android:inputType="text">
</EditText>
<View
android:layout_height="2dp"
android:layout_columnSpan="2"
android:layout_gravity="left"
android:layout_row="3"
android:background="#E6E6E6" />
<TextView
android:id="#+id/textCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:background="#ffffff"
android:gravity="left"
android:layout_row="4"
android:layout_column="0"
android:paddingLeft="15dp"
android:text="Category"
android:textColor="#color/grey" />
<EditText
android:id="#+id/editCategory"
android:layout_width="225dp"
android:layout_column="1"
android:layout_gravity="right"
android:layout_row="4"
android:inputType="text" />
<Button
android:id="#+id/btnCreateAccount"
android:layout_width="match_parent"
android:layout_gravity="center"
android:background="#ffffff"
android:layout_row="5"
android:layout_columnSpan="2"
android:onClick="createExpense"
android:text="Done"
android:textColor="#color/red" />
</GridLayout>
</LinearLayout>
As a general comment, you can never use wrap_content with EditText, it will always take the content size and not respect any other boundaries, so a user can always blow up a layout simply by typing excessive text. It took me ages to realise this very basic observation of how android prioritises various constraints.
In this context, when a GridLayout decides it cannot fit a column within its parent boundaries, it gives up and comes up with a faulty result, so typically we bound a GridLayout by screen width, the first column that exceeds the width will be forced off screen.
If you want to have large and small entry fields to match data sizes, the easiest way is to define dummy columns with weights that can be used to take up screen space, or spanned for larger fields.