I have a linear layout with some EditText and Buttons. And when running the app on smaller screens, the layout gets cut off (not all elements are displayed). I've added <supports-screens ...> in manifest, but it's still not working. Is there a way to display all elements?
Edit: Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold"
android:text="#string/tx" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tx1"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/ed1"
android:inputType="number" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tx2"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/ed2"
android:inputType="textCapCharacters|textAutoCorrect"
android:ems="10" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tx3"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/ed3"
android:inputType="textCapCharacters|textAutoCorrect"
android:ems="10" />
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton
android:id="#+id/radio1"
android:layout_width="304dp"
android:layout_height="wrap_content"
android:checked="true"
android:text="#string/radioTX1" />
<RadioButton
android:id="#+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/radioTX2" />
<RadioButton
android:id="#+id/radio3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/radioTX3" />
</RadioGroup>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="doSomething"
android:text="#string/bt1" />
You should make sure to make your layouts as flexible as possible. This includes using things like RelativeLayouts, and things like layout_weight. You can also preview your layouts in the android layout editor by changing the screen size ... this ensures that it will behave as expected on smaller (or larger) screen sizes.
The mindset should be similar to web developers making responsive layouts. Some great documentation/guidance from Google can be found here:
http://developer.android.com/training/multiscreen/screensizes.html
Well, if there isn't enough space to show all this on a small screen, then you should put this all these inside a ScrollView so that the user can scroll the page. Android won't add a ScrollView automatically for you.
You can do this for all sizes of screen (shouldn't hurt anyone even if they have a bigger screen) or only for the smaller screens.
Related
I'm using Relative Layout and I set the width and length to match_parent. It displays fine in Redmi k30 but in Pixel XL it only display up-to Delete Record, it does not display View All Record and scrolling also does not work.
I'm new to android and just starting layout designs, please advice. Thank you!
It should display like this:
But on Pixel XL the last button is missing:
XML layout:
<?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:background="#2196F3"
android:padding="10dp"
tools:context=".RUDActivity">
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Please enter product ID to retrieve"
android:textColor="#37474F"
android:textSize="24dp" />
<EditText
android:id="#+id/prodId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/txtTitle"
android:hint="Product ID"
android:textColor="#37474F"
android:inputType="number"
android:textSize="24dp" />
<EditText
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/prodId"
android:layout_marginTop="30dp"
android:hint="Name"
android:textColor="#37474F"
android:inputType="textPersonName"
android:textSize="24dp" />
<EditText
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/name"
android:hint="Description"
android:textColor="#37474F"
android:inputType="text"
android:textSize="24dp" />
<EditText
android:id="#+id/price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/description"
android:hint="Price"
android:textColor="#37474F"
android:inputType="numberDecimal"
android:textSize="24dp" />
<EditText
android:id="#+id/quantity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/price"
android:hint="Quantity"
android:textColor="#37474F"
android:inputType="number"
android:textSize="24dp" />
<Button
android:id="#+id/btnSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/quantity"
android:layout_marginTop="30dp"
android:text="Search Data"
android:textSize="24dp" />
<Button
android:id="#+id/btnView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/btnDelete"
android:layout_marginTop="30dp"
android:text="View All Record"
android:textSize="24dp" />
<Button
android:id="#+id/btnUpdate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/btnSearch"
android:layout_marginTop="30dp"
android:text="Update Record"
android:textSize="24dp" />
<Button
android:id="#+id/btnDelete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/btnUpdate"
android:layout_marginTop="30dp"
android:text="Delete Record"
android:textSize="24dp" />
Welcome to android..
Think of arranging 15 people in 5 rows of 3 in a dark room.
If you have to make them look the same whatever the dimensions of the room might be then the space cannot be the same.
Redmi and Pixel XL are high density and long devices.
You can use this library Intuit SDK library for the dimensions. This library helps to automatically scale depending on the screen size.
Going forward However you have to use ConstraintLayout with matchConstraints and come up with a design idea that makes it look the same in most devices.
For eg: Making the upper form 1 section and the lower buttons another.
And instead of following a top-down approach make the form part stick to the top and the buttons part to the bottom.
For the scroll you have to use a ScrollView and wrap your layouts within it , Here is a good Stackover FLow Question to get started
I have an app which is supposed to work on different layouts of phone and tablets.
On my phone it uses a vertical layout and uses all the screen while on my tablet it stays tiny instead of using the whole screen.
I used a relative layout but referring to fill_parent for widths thinking that this was the right way to use all the parent's space (the whole screen).
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#bbbbbb" >
<!-- Parte1 -->
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Distanza Km m Gare"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:onClick="OnClickButton1"
android:text="#string/calcola" />
<EditText
android:id="#+id/editText1_1"
android:layout_width="#dimen/single_textEdit"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:inputType="numberDecimal"
android:singleLine="true"
android:textSize="40sp"
android:gravity="center"
android:imeOptions="actionDone"
android:layout_toRightOf="#+id/button1"
android:nextFocusDown="#+id/editText1_2"
android:layout_below="#+id/textView1"/>
<EditText
android:id="#+id/editText1_2"
android:layout_width="#dimen/double_textEdit"
android:layout_height="50dp"
android:layout_below="#+id/textView1"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:layout_toRightOf="#+id/editText1_1"
android:gravity="center"
android:inputType="numberDecimal"
android:nextFocusDown="#+id/editText2_1"
android:singleLine="true"
android:textSize="40sp" />
<Spinner
android:id="#+id/gare_spinner"
android:layout_width="fill_parent"
android:layout_below="#+id/textView1"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#layout/border"
android:gravity="center_vertical|center_horizontal"
android:dropDownSelector="#drawable/ic_launcher"
android:layout_toRightOf="#+id/editText1_2" />
....
Make a new layout folder. Your normal folder is just called layout, but make a second one called layout-sw600dp. This is for screen width of 600 pixels, so basically for tablets. You can make the exact same xml layouts and just give them different dimensions in here.
I have a vertical layout: 2 text field and a horizontal bar of buttons:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff00ff00"
android:orientation="vertical"
android:padding="4dp" >
<EditText
android:id="#+id/et_email"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textEmailAddress" >
</EditText>
<EditText
android:id="#+id/et_comment"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textMultiLine"
android:maxLines="5"
android:minLines="5" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_send"
android:layout_weight="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />
<Button
android:id="#+id/btn_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some very long text" />
<Button
android:id="#+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
I want the button bar to have wrap_content size policy (can't even have them fixed size because this app has different localizations). I also want the text fields to have the same width as the button box. Here's how the above xml looks in designer (Eclipse + ADT) with platform 17 selected (and how I want it to look). Colors are just for easy debugging:
And here's how it looks on an Android 4.1 tablet:
This layout is used as a custom layout to a Dialog. No manipulations has been done to the Dialog apart from setting content and title.
Interesting fact: it looks exactly as I want it to (and same as ADT designer shows) on Android 3.1 tablet. But not on 4.1.
How can I achieve the desired layout?
You might want to use RelativeLayout to accomplish what you're looking for. Try changing your xml to the following:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:background="#ff00ff00"
android:padding="4dp" >
<EditText
android:id="#+id/et_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonbar"
android:layout_alignRight="#+id/buttonbar"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textEmailAddress" >
</EditText>
<EditText
android:id="#+id/et_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonbar"
android:layout_alignRight="#+id/buttonbar"
android:layout_below="#+id/et_email"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textMultiLine"
android:maxLines="5"
android:minLines="5" />
<RelativeLayout
android:id="#+id/buttonbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/et_comment" >
<Button
android:id="#+id/btn_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_show"
android:layout_alignTop="#+id/btn_show"
android:layout_toLeftOf="#+id/btn_show"
android:text="OK" />
<Button
android:id="#+id/btn_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Some very long text" />
<Button
android:id="#+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_show"
android:layout_alignTop="#+id/btn_show"
android:layout_toRightOf="#+id/btn_show"
android:text="Cancel" />
</RelativeLayout>
</RelativeLayout>
This seems silly but it seems to work. Try putting in a nested layout. Change your outer layout width/height to fill parent. Then, inside that make another linear layout with all of your views and such. Give the inner LinearLayout the wrap_content values and that should do it. There's got to be a better way to do it than this but I can't think of it at the moment.
I have a problem while placing the buttons in my xml file.
Now what I want is that the "ok" button at the bottom should come below the mileage edit text that is at the second last strip. I am using a scroll view before the button. Also I am using a single image as a background.
How is it possible that all my buttons in my application only come on the second last strip (gray color)? The rest of the layout should come in between (i.e. between top gray strip and the bottom gray strip).
I tried using margin_top or margin_bottom in 'dp' but its not coming properly plus on every other phone the layout of button changes. Here is my code (.xml file):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/menu"
android:padding="10dp">
<ScrollView
android:id="#+id/scv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="105dp"
android:layout_marginBottom="105dp" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:ems="10"
android:hint="Year"
android:inputType="date" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/editText1"
android:layout_alignRight="#+id/editText1"
android:layout_below="#+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner1"
android:layout_alignRight="#+id/spinner1"
android:layout_below="#+id/spinner1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<Spinner
android:id="#+id/spinner3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner2"
android:layout_alignRight="#+id/spinner2"
android:layout_below="#+id/spinner2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner3"
android:layout_below="#+id/spinner3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:ems="10"
android:hint="Mileage"
android:inputType="number" />
</RelativeLayout>
</ScrollView>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:text="OK" />
</RelativeLayout>
You should never use a single image for your complete layout on Android. That just doesn't run very well as you have so many different screen sizes.
I'd recommend you cut the graphic out in portions and make it stretch so it will fit depending on the screen size. It's not really possible to help you much more based on the poorly copy paste of your own code and the lack of visualization of what you want the graphic to look like.
For your button xml, try
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scv"
android:layout_centerHorizontal="true"
android:text="OK" />
You can add android:layout_marginTop="5sp" changing the value if necessary.
This will place your button below your scrollview.
So here is my XML. I am trying to fill the whole screen and when I view it in Eclipse, it fills the whole screen. However, when I open it on my phone, everything is smaller and there are views overlaying. I don't know what's going on.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/front"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Front"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/frontInput"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_below="#+id/front"
android:ems="10" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/frontInput"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Back"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/backInput"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/back"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:ems="10"
android:inputType="textMultiLine" />
<TextView
android:id="#+id/background"
android:layout_width="wrap_content"
android:layout_marginLeft="5dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/backInput"
android:layout_marginTop="44dp"
android:text="Background"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Spinner
android:id="#+id/colors_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/backInput"
android:layout_marginLeft="30dp"
android:layout_marginTop="22dp"
android:layout_toRightOf="#+id/background"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/colors_spinner" >
<Button
android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</RelativeLayout>
this is what it looks in Eclipse.
But I get this:
Another thing is that when I open the keyboard my view does not rezise so you can see everything but smaller so you can see what you are typing etc... I have added the android:windowSoftInputMode="adjustResize" for the specific activity but nothing is happening... Any ideas? Thanks guys...
If you use adjustResize it will resize everything to fit as best it can. The other option is adjustPan, which will scroll the window so that the focused EditText will be in the view and the caret visibile. Other than that there's no real way to control things.
In your case you have some exact heights in there, so it won't work well with a resize, since you can't shrink an exact height.
Also, never trust how things look in Eclipse. Its an attempt to lay things out that shares no code with how Android really does things, it should be viewed as an estimate. Real layouts may end up looking significantly different, especially for complex layouts.