Changing button sizes for screen sizes Android Studio - android

<?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

Related

Scrollview automatically extend height of linearlayout

I have a problem with height of linear layout. When I use only linear layout, my form is scaled to screen size, and everything look like good. But now, I need to have scrollview only when I click an edittext and keyboard appear. I set scrollview as a root of my layout, but it extended height of this layout. Scrollview should be work only while keyboard appear, but now it work's every time and ruined my linearlayout. So right now, when I'm using a scrollview, layout is bigger than screen size. What should I do?
<ScrollView
android:layout_width="match_parent"
android:id="#+id/scrollView"
android:fillViewport="true"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" android:layout_height="match_parent"
tools:context=".activities.FormDialog"
>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical"
android:layout_alignParentTop="true" android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" android:background="#drawable/new_background">
<ImageView
android:layout_width="84dp"
android:id="#+id/imageView"
android:src="#drawable/applogo"
android:layout_alignParentTop="true" android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:layout_gravity="end" android:layout_marginRight="20dp"
android:layout_height="29dp"/>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" android:layout_alignParentStart="true"
>
<TextView
android:text="Info"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/missedCall"
android:layout_alignParentTop="true" android:layout_centerHorizontal="true"
android:textColor="#color/apptheme_color"
android:layout_marginBottom="16dp" android:textSize="15sp" android:layout_marginTop="16dp"/>
</RelativeLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="2" android:layout_height="wrap_content" android:layout_width="match_parent"
android:layout_marginLeft="25dp" android:layout_marginRight="25dp"
android:layout_marginBottom="6dp" android:weightSum="1">
<ImageView
android:text="Button"
android:id="#+id/leftButton"
android:layout_width="40dp" android:layout_height="40dp"
android:layout_gravity="center_vertical" android:src="#drawable/left"/>
<TextView
android:text="Text"
android:layout_width="244dp"
android:layout_height="match_parent" android:id="#+id/numberTextView"
android:gravity="center_vertical|center_horizontal|center"
android:textColor="#color/apptheme_color" android:textSize="24sp"
android:layout_weight="1"/>
<ImageView
android:text="Button"
android:id="#+id/rightButton"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_width="40dp" android:layout_height="40dp"
android:src="#drawable/right_arrow"/>
</LinearLayout>
<TextView
android:text="Text"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="#+id/textView7"
android:textColor="#color/apptheme_color" android:textAlignment="viewStart"
android:textSize="18sp"
android:layout_weight="0.5"
android:layout_below="#+id/missedCall" android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" android:layout_marginLeft="30dp"
android:layout_marginRight="25dp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/nameTextView"
android:background="#drawable/blueborder"
android:textColorHint="#FFFFFF"
android:textColor="#FFFFFF"
android:layout_marginLeft="25dp" android:layout_marginRight="25dp" android:layout_marginTop="16dp"
android:paddingTop="10dp" android:paddingBottom="10dp"
android:hint="Edit1" android:paddingLeft="10dp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/detailsTextView"
android:background="#drawable/blueborder"
android:textColorHint="#FFFFFF"
android:textColor="#FFFFFF"
android:layout_marginLeft="25dp" android:layout_marginRight="25dp" android:layout_marginTop="6dp"
android:paddingTop="10dp" android:paddingBottom="10dp" android:paddingLeft="10dp"
android:layout_weight="1"
android:hint="Edit2"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textWebEmailAddress"
android:ems="10"
android:id="#+id/emailEditText"
android:textColorHint="#FFFFFF"
android:textColor="#FFFFFF"
android:layout_marginLeft="25dp" android:layout_marginRight="25dp" android:layout_marginTop="6dp"
android:paddingTop="10dp" android:paddingBottom="10dp" android:paddingLeft="10dp"
android:layout_weight="1"
android:hint="Edit3"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/companyEditText"
android:background="#drawable/blueborder"
android:textColorHint="#FFFFFF"
android:textColor="#FFFFFF"
android:layout_marginLeft="25dp" android:layout_marginRight="25dp" android:layout_marginTop="6dp"
android:paddingTop="10dp" android:paddingBottom="10dp" android:paddingLeft="10dp"
android:layout_weight="1"
android:hint="Edit4"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textMultiLine|textPersonName"
android:ems="10"
android:id="#+id/noteEditText"
android:background="#drawable/blueborder"
android:textColorHint="#FFFFFF"
android:layout_marginLeft="25dp" android:layout_marginRight="25dp" android:layout_marginTop="6dp"
android:paddingTop="10dp" android:paddingBottom="20dp" android:paddingLeft="10dp"
android:layout_weight="3.33"
android:scrollbars="vertical" android:hint="Edit5" android:lines="2" android:textColor="#FFFFFF"
android:gravity="top|center_vertical"/>
<CheckBox
android:text="Check1"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="#+id/newContactCheckbox"
android:layout_marginLeft="20dp"
android:textColor="#color/apptheme_color"
android:layout_weight="1"
/>
<CheckBox
android:text="Check2"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="#+id/isWantedCheckbox" android:layout_marginLeft="20dp"
android:textColor="#color/apptheme_color"
android:layout_weight="1"
/>
<Button
android:text="Send"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="#+id/addButton" android:layout_weight="2"
android:textColor="#02485a" android:background="#drawable/blackborder"
android:layout_marginLeft="25dp" android:layout_marginRight="25dp"
android:layout_marginBottom="16dp"/>
<TextView
android:text="Cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/notRegisterTextView"
android:textSize="14sp" android:textColor="#color/apptheme_color"
android:layout_marginLeft="25dp" android:padding="7dp"
/>
</LinearLayout>
</ScrollView>
And in Manifest I set android:windowSoftInputMode="stateUnchanged|adjustResize"

How to make this android layout more 'responsive'?

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>

when i change my virtual device to render in android studio my components get rearranged

This is Nexus 6 virtual device with which I have rendered my activity_.xml
This is the device when I change it automatically edits the components(for example the CLEAR button in the app)
Following is my activity_main.xml file which I have used in the project:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:weightSum="1"
tools:context=".MainActivity">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="arial"
android:text="Enter Numbers"
android:textSize="20sp"
android:layout_marginLeft="15dp"/>
<EditText
android:id="#+id/et1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/text1"
android:layout_toRightOf="#id/text1"
android:layout_marginRight="15dp"/>
<Button
android:id="#+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/text1"
android:layout_marginTop="40dp"
android:layout_marginLeft="15dp"
android:text="1" />
<Button
android:id="#+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/b1"
android:layout_toEndOf="#+id/b1"
android:layout_toRightOf="#+id/b1"
android:clickable="true"
android:text="2" />
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/b2"
android:layout_toEndOf="#+id/b2"
android:layout_toRightOf="#+id/b2"
android:clickable="true"
android:text="3" />
<Button
android:id="#+id/b4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/b3"
android:layout_toEndOf="#id/b3"
android:layout_toRightOf="#id/b3"
android:clickable="true"
android:text="4" />
<Button
android:id="#+id/b5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/b1"
android:layout_marginLeft="15dp"
android:clickable="true"
android:text="5" />
<Button
android:id="#+id/b6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/b5"
android:layout_toEndOf="#+id/b5"
android:layout_toRightOf="#id/b5"
android:clickable="true"
android:text="6" />
<Button
android:id="#+id/b7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/b6"
android:layout_toEndOf="#id/b6"
android:layout_toRightOf="#+id/b6"
android:clickable="true"
android:text="7" />
<Button
android:id="#+id/b8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/b7"
android:layout_toEndOf="#id/b7"
android:layout_toRightOf="#+id/b7"
android:clickable="true"
android:text="8" />
<Button
android:id="#+id/b9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/b5"
android:layout_marginLeft="15dp"
android:clickable="true"
android:text="9" />
<Button
android:id="#+id/b0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/b9"
android:layout_toEndOf="#+id/b9"
android:layout_toRightOf="#+id/b9"
android:clickable="true"
android:text="0" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/b10"
android:text="."
android:layout_toRightOf="#+id/b0"
android:layout_toEndOf="#id/b0"
android:layout_alignTop="#id/b0"
android:clickable="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/b11"
android:text="Clear"
android:layout_alignTop="#id/b10"
android:layout_toRightOf="#+id/b10"
android:layout_toEndOf="#id/b10"
android:clickable="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/b12"
android:text="+"
android:layout_below="#+id/b9"
android:layout_marginLeft="15dp"
android:layout_marginTop="40dp"
android:clickable="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/b13"
android:text="-"
android:layout_alignTop="#id/b12"
android:layout_toRightOf="#+id/b12"
android:layout_toEndOf="#id/b12"
android:clickable="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/b14"
android:text="*"
android:layout_alignTop="#id/b13"
android:layout_toRightOf="#+id/b13"
android:layout_toEndOf="#id/b13"
android:clickable="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/b15"
android:text="/"
android:layout_alignTop="#id/b14"
android:layout_toRightOf="#+id/b14"
android:layout_toEndOf="#id/b14"
android:clickable="true"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/b16"
android:text="="
android:layout_marginLeft="15dp"
android:layout_below="#+id/b13"
android:clickable="true"
android:layout_alignRight="#+id/b15"
android:layout_alignEnd="#+id/b15" />
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:id="#+id/text2"
android:hint="Result"
android:layout_below="#+id/b16"
android:layout_alignLeft="#+id/b16"
android:layout_alignStart="#+id/b16"
android:layout_alignRight="#+id/et1"
android:layout_alignEnd="#+id/et1" />
</RelativeLayout>
When I switch between devices I want my design to be displayed the same way as it is displayed in Nexus 6.
Please help me out with the above issues. I have surfed the net but I'm not finding any appropriate answer to resolve my query.

Android ListView Item Layout getting screwed up

I tried to customize the layout of my ListView so I made up the following layout file:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="100dp"
tools:context=".workout.WorkoutPlanFragment"
android:paddingRight="10dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/edit_view"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:layout_row="0"
android:visibility="gone">
<ImageView
android:layout_width="40dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_delete"
android:layout_column="0"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:layout_marginRight="15dp"
android:layout_marginLeft="15dp"
android:id="#+id/image_view_delete_workout_plan"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image_view_move_down"
android:src="#drawable/ic_down" android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image_view_move_up"
android:src="#drawable/ic_up" android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"/>
</LinearLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/workout_plan_fragment" android:layout_column="1" android:layout_row="0">
<ImageView
android:layout_width="93dp"
android:layout_height="match_parent"
android:src="#drawable/img_workout"
android:id="#+id/imageView5"
android:layout_column="0" android:layout_row="0" android:layout_rowSpan="3"
android:paddingBottom="4dp" android:paddingTop="4dp" android:layout_marginRight="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Someting"
android:alpha="1"
android:id="#+id/text_view_plan_name" android:layout_gravity="center_vertical"
android:layout_column="1" android:layout_row="0"
android:textColor="#5a70ff"
android:textSize="26dp" android:layout_marginTop="5dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="asdf"
android:id="#+id/text_view_anz_exercises" android:layout_row="1" android:layout_column="1"
android:layout_rowWeight="0.1" android:alpha="1" android:textSize="15dp"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall" android:text="blablablablablabla"
android:id="#+id/text_view_last_workout" android:layout_row="2" android:layout_column="1"
android:layout_marginBottom="5dp"/>
</GridLayout>
When I use this layout on a Fragment or just check it in the design tab it looks totally fine like this:
But as soon as I apply this layout to a ListView item it turns out looking like that:
I already tried replacing the GridLayout by a LinearLayout or something like that but it always looks like that...
How can I make the ListView item look like the designed Layout?

Try this code.
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingRight="10dp" />
<LinearLayout
android:id="#+id/edit_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:layout_row="0"
android:orientation="horizontal"
android:visibility="gone">
<ImageView
android:id="#+id/image_view_delete_workout_plan"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image_view_move_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image_view_move_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<GridLayout
android:id="#+id/workout_plan_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0">
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginRight="10dp"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/text_view_plan_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="center_vertical"
android:layout_marginTop="5dp"
android:layout_row="0"
android:alpha="1"
android:text="Someting"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#5a70ff"
android:textSize="26dp" />
<TextView
android:id="#+id/text_view_anz_exercises"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:layout_rowWeight="0.1"
android:alpha="1"
android:text="asdf"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="15dp" />
<TextView
android:id="#+id/text_view_last_workout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_marginBottom="5dp"
android:layout_row="2"
android:text="blablablablablabla"
android:textAppearance="?android:attr/textAppearanceSmall" />
</GridLayout>

UI component in Gridlayout does not fit properly and they owerflow

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

Categories

Resources