Develop Reference

Why does this android app does not display in full view in smaller screen device?

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

limit a view to the left/right of center in android

Is there a way to specify that a view should lie strictly to the left of the center (or strictly to the right of the center)? I have two textviews, one for LOGIN and one for REGISTER. I have them as children of RelativeLayout. No matter what I do I can't get them to behave. The one configuration that works in the Graphical Layout of eclipse, only shows the registration button on a real device. Here it is
<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="#drawable/login_bckg"
android:padding="10dip"
tools:context=".LoginActivity" >
...
<View
android:id="#+id/center_btns"
android:layout_width="1dp"
android:layout_height="20dp"
android:layout_below="#id/text_fields"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/login_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toLeftOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="login"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Login"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/register_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="register"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
...
</RelativeLayout>
If I set them as children of a horizontal linearLayout, how do I specify their relationship to get it to work? I already tried that and no avail.

I wish I could post this as a comment but I don't quite have the rep... Anyway, to clarify, do you want the items to be right next to each other on the same line? If so the LinearLayout should work just fine...
<LinearLayout
...android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
/>
Should work just fine. If not you may try playing with weights depending on which one you want to take up more space. For weights to work you will need to see the width of both to fill_parent.

Is there a way to make text, buttons, progress bar stay in around the same area with any resolution

Is there a way to make text, buttons, progress bar stay in around the same area with any resolution. So if you on a nexus 10 and nexus 7 the text, buttons, progress bar will say around the same place. As my app just looks silly on nexus 10. Heres my xml 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:background="#drawable/background"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next"
android:textSize="20dp"
android:layout_marginTop="40dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="center"
android:textStyle="bold"
android:textColor="#FFFFFF"/>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="150dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp" />
<ImageButton
android:id="#+id/pauseicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/pauseicon"
android:layout_gravity="center"
android:layout_marginTop="20dp"
style="?android:attr/borderlessButtonStyle"/>

I would not recommend that you write your layout like you have. To make your app look similar on different devices, you should align all the views so that they are relational to each other.
There is a lot of information here
I would also advise that you use a relative layout rather than a linear layout, because it is easier to make the views relational to each other, which (usually) makes your app look better at different screen sizes.
Here is an example of a relative layout(from the dev docs)
<EditText
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/reminder" />
<Spinner
android:id="#+id/dates"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#id/name"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/times" />
<Spinner
android:id="#id/times"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/name"
android:layout_alignParentRight="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/times"
android:layout_alignParentRight="true"
android:text="#string/done" />

Cannot completely fill the screen with RelativeLayout and cannot resize on Keyboard opening

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.

XML layout overlapping text issue

I used relativelayout and here is what I've got. I can't get the image to fill the section I want. I don't know how to fix it. I've heard something about using layout weight, is that some thing I should use?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background">
<ImageView
android:id="#+id/imagehome"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_margin="10dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvtitle1"
android:src="#drawable/one" />
<TextView
android:id="#+id/tvtitle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Voted Best Dentist five years running by"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvtitle2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="6dp"/>
<TextView
android:id="#+id/tvtitle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="The Oakland Tribune"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvhome"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"/>
<TextView
android:id="#+id/tvhome"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" You&apos;ll be cared for by our highly trained staff of dental professionals,energized to work as a team while providing the highest quality of care for your dental health. We offer complete dentistry for the entire family at a single location. "
android:textColor="#4C2016"
android:textSize="15dp"
android:layout_centerHorizontal="true"
android:layout_above="#+id/special"
android:layout_marginBottom="25dp" />
<Button
android:id="#+id/special"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:text="Specials"
android:textColor="#F6E6C6"
android:textSize="17dp"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvbutton"
android:layout_marginBottom="15dp" />
<TextView
android:id="#+id/tvbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App provided by Bay Area Dental Marketing"
android:layout_centerHorizontal="true"
android:textSize="10dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
on the xml file,
and on the device
It got better but it'snot there yet!

Not sure how much flexibility you have but the best solution would be to remove the text and image from the background and add them as views instead. As you have experienced unless each piece is added as a view it is nearly impossible to guarantee it will look correct on all devices.

When working with multiple screen sizes, I have found it best practice to either (a) use RelativeLayout, or (b) set a LinearLayout inside a ScrollView.

Use RelativeLayout so you won't have to specify the pixels.
Alternativley if you are doing that for one particular phone select corresponding screen size in the XML designer in Eclipse. Yet, using RelativeLayout guarantees it will work on all the phones

Even using the suggested answers above you may still run into problem on different size screens. The best solution I can think of is to create separate image resources for the background and foreground then add an image view with the foreground image as the source.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background" >
<!-- This method makes this layout redundant, dont need this anymore
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="23dip"
android:layout_marginRight="15dip"
android:layout_marginTop="255dip"
android:orientation="vertical" >-->
<!-- put the foreground image in an imageview -->
<ImageView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/foregroundImage"/>
<TextView
android:layout_width="276dp"
android:layout_height="132dp"
android:textSize="15dp"
android:gravity="center_vertical"
android:text="some text"
android:textColor="#4C2016"/>
<Button
android:id="#+id/special"
android:layout_width="131dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:layout_marginTop="20dip"
android:layout_marginLeft="75dip"
android:textSize="17dp"
android:textStyle="bold"
android:text="Specials"
android:textColor="#F6E6C6" />
</LinearLayout>