Is there a way to have a fullscreen row with elements on Android?
I tried to do it with table, GridView and linear, but I'm struggling with it since quite a time now and couldn't find a post that helped me.
I just made a small picture of what I'd like to do:
http://i.imgur.com/W0oTyaC.png
In short point:
Label and Button should just be as big as their content and fit to the biggest label in the column
The button should stick on the right side
The label should stick on the left side
The textbox should just fill the leftover space between label/button, but in the case of bigger content, it shouldn't "kick out" the button on the right...
My last try was the GridView, which looks a kind of acceptable, but not really.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add nutrition part"
android:id="#+id/textView"
android:layout_column="0"
android:layout_row="0"
android:layout_columnSpan="1"
android:layout_rowSpan="1" />
<TextView
android:text="Selected part"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView15"
android:layout_column="0"
android:layout_row="1"
android:layout_columnSpan="1"
android:layout_rowSpan="1" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text"
android:text=""
android:enabled="false"
android:id="#+id/dialogMakeMealPartNutrition"
android:layout_column="1"
android:layout_row="1"
android:layout_columnSpan="1"
android:layout_rowSpan="1"
android:layout_gravity="fill_horizontal" />
<Button
android:text="Find nutrition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/buttonMakeMealPartFindNutrition"
android:layout_column="2"
android:layout_row="1"
android:layout_columnSpan="1"
android:layout_rowSpan="1" />
<TextView
android:text="Gram"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView17"
android:layout_column="0"
android:layout_row="2"
android:layout_columnSpan="1"
android:layout_rowSpan="1" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:id="#+id/dialogMakeMealPartGram"
android:layout_column="1"
android:layout_row="2"
android:layout_columnSpan="1"
android:layout_rowSpan="1"
android:layout_gravity="fill_horizontal" />
<Button
android:text="Abort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dialogMakeMealPartButtonAbort"
android:layout_column="0"
android:layout_row="3"
android:layout_columnSpan="1"
android:layout_rowSpan="1" />
<Button
android:text="Add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dialogMakeMealPartButtonAdd"
android:layout_column="1"
android:layout_row="3"
android:layout_columnSpan="1"
android:layout_rowSpan="1" />
</GridLayout>
</ScrollView>
</RelativeLayout>
EDIT:
The ConstraintLayout did a quite good job for my purpose - thanks for good hint Luca:
Code looks like this now:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#FFFFFF">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Add nutrition part"
android:id="#+id/headline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:text="Selected part"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView15"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/buttonMakeMealPartFindNutrition" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="text"
android:text=""
android:enabled="false"
android:id="#+id/dialogMakeMealPartNutrition"
app:layout_constraintStart_toEndOf="#+id/textView15"
app:layout_constraintEnd_toStartOf="#+id/buttonMakeMealPartFindNutrition"
app:layout_constraintTop_toTopOf="#+id/buttonMakeMealPartFindNutrition" />
<Button
android:text="Find nutrition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/buttonMakeMealPartFindNutrition"
app:layout_constraintTop_toBottomOf="#+id/headline"
app:layout_constraintStart_toEndOf="#+id/dialogMakeMealPartNutrition"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:text="Gram"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView17"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dialogMakeMealPartNutrition" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:id="#+id/dialogMakeMealPartGram"
app:layout_constraintStart_toStartOf="#+id/dialogMakeMealPartNutrition"
app:layout_constraintEnd_toEndOf="#+id/dialogMakeMealPartNutrition"
app:layout_constraintTop_toBottomOf="#+id/dialogMakeMealPartNutrition" />
<Button
android:text="Abort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dialogMakeMealPartButtonAbort"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dialogMakeMealPartGram" />
<Button
android:text="Add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dialogMakeMealPartButtonAdd"
app:layout_constraintStart_toEndOf="#+id/dialogMakeMealPartButtonAbort"
app:layout_constraintTop_toBottomOf="#+id/dialogMakeMealPartGram" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</RelativeLayout>
You can use a ConstraintLayout to achieve this, here you can find an explanation of it.
Your layout file should look like this:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Add nutrition part"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Selected part"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"/>
<EditText
android:id="#+id/dialogMakeMealPartNutrition"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:enabled="false"
android:inputType="text"
app:layout_constraintStart_toEndOf="#+id/textView15"
app:layout_constraintEnd_toStartOf="#+id/buttonMakeMealPartFindNutrition"
app:layout_constraintTop_toBottomOf="#+id/textView"
android:text=""/>
<Button
android:id="#+id/buttonMakeMealPartFindNutrition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintStart_toEndOf="#+id/dialogMakeMealPartNutrition"
app:layout_constraintEnd_toEndOf="parent"
android:text="Find nutrition"/>
...
</android.support.constraint.ConstraintLayout>
Related
Hi I want a layout like bellow
Main amount 120 usd
Extra charge 2 usd
----------------------------
Sub Total 122 usd
Discount 5 usd
----------------------------
Total amount 117 usd
I am totally not familiar with constraint layout I tried to use LinearLayout gravity/layout/alignment gravity right for right part but its not working ,all aligned from left.I will be glad if someone give a example code for this layout plz.
Update: my current code
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:text="Main Amount"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="10 "
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="USD"
android:layout_height="match_parent" />
</LinearLayout>
For this kind of view use LinearLayout with weightSum property to the parent LinearLayout and use layout_weight for the Children LinearLayout
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2">
<TextView
android:layout_width="wrap_content"
android:text="Main Amount"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="10 "
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="USD"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
LinearLayout is going to be difficult without a lot of hard coding of layout_width on the children. Have you tried TableLayout?
https://developer.android.com/reference/android/widget/TableLayout
TableLayout can be a pain sometimes to get perfect, but it will give you the layout you are looking for.
You can try something like this:
I used LinearLayout as the parent and add RelativeLayout to it to create align the TextViews the way you want to.
You can dupe the Relative layout the create the rest.
not sure if it's the best way... but it works
<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:orientation="vertical"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Main" />
<TextView
android:id="#+id/amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/main"
android:text="amount" />
<TextView
android:id="#+id/extra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Extra"
android:layout_below="#+id/amount"
/>
<TextView
android:id="#+id/charge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/extra"
android:layout_alignBottom="#+id/extra"
android:text="charge" />
<TextView
android:id="#+id/usd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/main"
android:layout_alignParentRight="true"
android:text="usd"
android:layout_marginRight="30dp"
/>
<TextView
android:id="#+id/num1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/main"
android:layout_toLeftOf="#+id/usd"
android:text="120"
android:layout_marginRight="10dp"
/>
<TextView
android:id="#+id/usd2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/extra"
android:layout_alignParentRight="true"
android:text="usd"
android:layout_marginRight="30dp"
/>
<TextView
android:id="#+id/num2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/extra"
android:layout_toLeftOf="#+id/usd2"
android:text="120"
android:layout_marginRight="10dp"
/>
</RelativeLayout>
I believe that for this layout you better use ConstraintLayout.
It will take you only a few minutes to build this layout, you can add Guidelines to make your life easier.
In addition, your layout will be responsive to all screen sizes so consider using ConstraintLyaout
Here is an example of you wanted layout usingConstraintLyaout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button6"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="4dp"
android:text="Button"
android:background="#color/bronze"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button5" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="4dp"
android:text="Button"
android:background="#color/bronze"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/button" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button7"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button7" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button2" />
<TextView
android:id="#+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button3" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button4"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button4" />
</android.support.constraint.ConstraintLayout>
It will look like this:
I am having problems with a GridLayout. In the layout below, phone_image and voip_image overlap and I don't want them to. phone_image is in column 0 and voip_image is in column 2.
SSCCE on Github
https://github.com/emnrd-ito/LayoutDemo
<HorizontalScrollView
android:id="#+id/container_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<GridLayout xmlns:mapbox="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/individual_gridlayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:alignmentMode="alignBounds"
android:columnCount="4"
android:columnOrderPreserved="false"
android:rowCount="7">
<ImageView
android:id="#+id/division_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_margin="10dp"
android:layout_row="0"
android:layout_rowSpan="3"
android:background="#null"
android:layout_gravity="center_horizontal"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/employee_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="0"
android:text="Nobody Lastname"
tools:text="name" />
<TextView
android:id="#+id/division"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="1"
android:text="My Division"
tools:text="division" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="2"
android:text="My Title"
tools:text="position" />
<TextView
android:id="#+id/address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="3"
android:text="123 Sesame St."
tools:text="address" />
<TextView
android:id="#+id/city_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="4"
android:text="mycity, mystate"
tools:text="city,state" />
<TextView
android:id="#+id/phone_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="5"
android:text="(555) 555-5555"
tools:text="phone" />
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnSpan="3"
android:layout_margin="10dp"
android:layout_row="6"
android:text="someone#somewhere.com"
tools:text="email" />
<ImageButton
android:id="#+id/directions_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="4"
android:background="#null"
android:src="#drawable/ic_directions_enabled" />
<ImageButton
android:id="#+id/phone_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_phone_enabled" />
<ImageButton
android:id="#+id/voip_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_voip_enabled" />
<ImageButton
android:id="#+id/email_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="6"
android:background="#null"
android:src="#drawable/ic_email_enabled" />
</GridLayout>
</HorizontalScrollView>
Edit:
I tried using Space like so:
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_column="1"
android:layout_row="5"/>
It seems to insert about 1/2 column, whereas using the blank image inserts a whole column. There may be parameters to play within the Space component though.
You can try to give android:maxWidth property to both voipImage and phoneImage ImageButtons, like this:
<ImageButton
android:id="#+id/phone_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="5"
android:maxWidth="96dp"
android:background="#null"
android:src="#drawable/ic_phone_enabled" />
<ImageButton
android:id="#+id/voip_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="5"
android:maxWidth="96dp"
android:background="#null"
android:src="#drawable/ic_voip_enabled" />
Update
The above changes are not necessary. I think that to solve your problem you can simply change the layout_column property of voip_image like this:
android:layout_column="1"
Hope this can help
One solution is to create a blank image and put it in the drawable folder.
Then use it to take up space in the layout like so:
<ImageButton
android:id="#+id/phone_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_phone_enabled" />
<ImageButton
android:id="#+id/blank_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_blank" />
<ImageButton
android:id="#+id/voip_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_voip_enabled" />
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>
<?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 new at developing Android app.I have 4 EditText corresponding 4 TextView.but I have a problem with EditTexts,they dont fit properly.How can I handle this problem.Following is my xml layout file.Please help me,what is wrong.Thank you in advance.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.example.mobilecoursemanagementsystem.AddCourseActivity"
android:orientation="vertical">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rowCount="5"
android:columnCount="3">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Course Title"
android:layout_column="0"
android:layout_row="0"
android:id="#+id/txtTitle"/>
<!--android:layout_marginTop="10dp"-->
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
android:layout_marginTop="10dp"
android:id="#+id/editTitle" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
android:layout_marginTop="10dp"
android:text="Course Code"
android:id="#+id/txtCode"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:layout_marginTop="10dp"
android:id="#+id/editCode" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="2"
android:layout_marginTop="10dp"
android:text="Number of Student"
android:id="#+id/txtNumberOfSts"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="2"
android:layout_marginTop="10dp"
android:id="#+id/editNumberOfSts" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="3"
android:layout_marginTop="10dp"
android:text="Course Level"
android:id="#+id/txtLevel"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="3"
android:layout_marginTop="10dp"
android:id="#+id/editLevel" />
</GridLayout>
</LinearLayout>
click for Screenshoot
user layout_margins in your layout for every edittext
android:layout_marginRight="10dp"
set whatever value you like for margin