We Keep Coding

Android Studio components not centering correctly when tested on an external device

I have a simple app written in Java that I am trying to make work on Android devices. The code runs without issue, but the layout of the widgets is inconsistent.
I want all of them to be centered on the screen, and this works when I run the program in an emulator from Android Studio- I have tried this with an emulated Nexus 6P and a Pixel 3A.
However, when I run the program on a physical device, a Galaxy S9, some of the widgets are no longer centered.
I have tried centering the gravity for the RelativeLayout, and using android:layout_centerHorizontal="true" for each of the widgets. I also tried setting the size of the widgets to match_parent and then centering the gravity horizontally inside them. So far this has all given the same result.
I include the XML code below, along with two screenshots for comparison, one from the emulated Nexus 6P and one from the Galaxy S9. You should see that the button and the number field are centered, but all of the text is slightly off-centre.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginStart="0dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="25dp"
android:editable="false"
android:gravity="center_horizontal"
android:text="Arby's Hi-Lo Guessing Game"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:visibility="visible" />
<TextView
android:id="#+id/txtPrompt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerHorizontal="true"
android:layout_marginStart="-2dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="75dp"
android:gravity="center|center_horizontal"
android:text="Enter a number between 1 and 100:"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:layout_alignParentLeft="true" />
<EditText
android:id="#+id/txtGuess"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="105dp"
android:layout_marginEnd="166dp"
android:layout_marginRight="166dp"
android:ems="10"
android:gravity="center_horizontal"
android:inputType="number" />
<Button
android:id="#+id/btnGuess"
android:layout_width="126dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_marginTop="175dp"
android:text="Guess!" />
<TextView
android:id="#+id/lblOutput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="250dp"
android:gravity="center_horizontal"
android:text="Enter a number, then click Guess!"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textSize="18sp" />
</RelativeLayout>
Emulator Alignment
Physical Device Alignment

Your views have absolute margins set in dp. These will not look the same on different sized screens. Remove all marginStart, marginEnd, marginRight and marginLeft attributes. Then RelativeLayout should center the views properly.

try this, i did it fast but i hope it wiill work ;)
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:textAlignment="center"
android:layout_marginTop="25dp"
android:editable="false"
android:text="Arby's Hi-Lo Guessing Game"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:visibility="visible"
/>
<TextView
android:id="#+id/txtPrompt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/txtTitle"
android:textAlignment="center"
android:layout_marginTop="25dp"
android:text="Enter a number between 1 and 100:"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
/>
<EditText
android:id="#+id/txtGuess"
android:layout_width="75dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/txtPrompt"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:inputType="number" />
<Button
android:id="#+id/btnGuess"
app:layout_constraintTop_toBottomOf="#+id/txtGuess"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="30dp"
android:layout_width="126dp"
android:layout_height="wrap_content"
android:text="Guess!" />
<TextView
android:id="#+id/lblOutput"
app:layout_constraintTop_toBottomOf="#+id/btnGuess"
android:textAlignment="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Enter a number, then click Guess!"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textSize="18sp" />
</android.support.constraint.ConstraintLayout>

Getting the background image to not "squash" when one of the text input's is clicked to bring up the keyboard

So I'm a beginner to coding android and normally I'm able to find my solutions on google but I've had no luck this time. I've made an app with two activities (a login screen that also has a register button that leads to a register screen) and on the initial log in screen, clicking one of the text inputs squashes the background image, to essentially fit it into the smaller space created when the keyboard takes up some of the screen. It's pretty annoying.
Sorry for pasting such a huge block of code but as a beginner, I'm not really sure which part of this code is relevant so I've included the whole xml. Thanks!
Oh, and again - I can't stress enough that I'm a total noob - so could any answers please state crystal clear exactly what code I should be changing/including and in what file, and where abouts in that file?
<?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="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#drawable/qlogoonwallpaper"
tools:context=".MainActivity">
<!-- Login progress -->
<ProgressBar
android:id="#+id/login_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<ScrollView
android:id="#+id/login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="32dp"
android:layout_marginBottom="48dp">
<LinearLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:dropDownWidth="match_parent"
android:hint="#string/prompt_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_password"
android:imeActionId="6"
android:imeActionLabel="#string/action_sign_in_short"
android:imeOptions="actionUnspecified"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/email_sign_in_button"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:background="#color/colorPrimaryDark"
android:text="#string/action_sign_in"
android:textAllCaps="false"
android:textColor="#android:color/background_light"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
<EditText
android:id="#+id/editText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText"
android:layout_centerHorizontal="true"
android:layout_marginTop="-208dp"
android:ems="10"
android:hint="#string/prompt_email"
android:inputType="textEmailAddress" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="225dp"
android:background="#android:color/transparent"
android:text="#string/register_intro"
android:textAllCaps="false"
android:textColor="#android:color/background_light"
android:textSize="18sp"
android:textStyle="bold|italic" />
</RelativeLayout>

Inside the Android Manifest file, try adding the following attribute for your MainActivity :
<activity
android:name=".MainActivity"
android:windowSoftInputMode="adjustPan">
...
</activity>
that makes the views pan when the soft keyboard appears but the activity's window is not resized. See if that makes any difference. If resizing would work better, instead of the "adjustPan" attribute, you can add "adjustResize". Hopefully one of the two will do the trick for you.

How can I fix the alignment issue in my android application

I have created a login page with :
1 small image,
2 text boxes,
1 button
but I want them to align in all types of devices like when I tried on my device and it looks fine but not for the other devices that are bigger-smaller in screen-sizes
Thanks in advance
Here is the code :
<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:hardwareAccelerated="true"
android:background="#color/white"
tools:context=".MainActivity">
<View
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="0dp"
android:layout_marginTop="0dp"
android:hardwareAccelerated="true" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="37dp"
android:background="#color/blend"
android:contentDescription="#string/todo"
app:srcCompat="#drawable/imagelogo" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginStart="58dp"
android:layout_marginBottom="294dp"
android:ems="10"
android:hint="#string/User_name"
android:inputType="text" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginEnd="147dp"
android:layout_marginBottom="227dp"
android:ems="10"
android:hint="#string/Pass_word"
android:inputType="textPassword" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginStart="97dp"
android:layout_marginBottom="138dp"
android:ems="13"
android:background="#color/colorPrimary"
android:text="#string/login" />
and the output :
Design + Blueprint
So i want all my things at same place in every type of devices

Add below into your project level Gradle file:
compile 'com.intuit.sdp:sdp-android:1.0.5'
Usage : In code wherever you are specifying dimensions like 10dp change it to #dimen/_10sdp. Like I have specified in this example ImageView.
<ImageView
android:id="#+id/your_image"
android:layout_marginTop="#dimen/_10sdp"
android:layout_marginBottom="#dimen/_10sdp"
android:layout_width="#dimen/_100sdp"
android:layout_height="#dimen/_100sdp"
android:src="#drawable/logo"/>
This will make your application look same on different devices.

Android Book Search App Search Results Layout Out Of Screen Occasionally

I was tasked to create a simple book searching app for Android as an internship project. I'm almost done with this, but I'm very bad at doing layouts. The published date and description will ALWAYS fly to the left and out of the screen if the ISBN number is 10 digits long, but it's perfectly fine when its just 13 digits long. Just for reference, I'm using the google books API. This would be much clearer if I could post pictures, but my rep is too low for that.
Here's my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/img_cover"
android:layout_width="180dp"
android:layout_height="170dp"
android:src="#drawable/img_books_large"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/tvTitle"
android:text="Title"
android:layout_marginTop="20dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/img_cover"
android:layout_toEndOf="#+id/img_cover" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Author"
android:id="#+id/tvAuthor"
android:layout_marginTop="25dp"
android:layout_below="#+id/tvTitle"
android:layout_toRightOf="#+id/img_cover"
android:layout_toEndOf="#+id/img_cover" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_below="#+id/img_cover"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="ISBN"
android:id="#+id/tvISBN"
android:layout_below="#+id/img_cover"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Publish Date"
android:id="#+id/tvPublishYear"
android:layout_below="#+id/tvISBN"
android:layout_marginTop="40dp"
android:layout_marginLeft="-220dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvDescription"
android:layout_marginTop="80dp"
android:layout_below="#+id/tvPublishYear"
android:layout_marginLeft="-270dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Description"
/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
Thanks in advance

Nvm fixed it.
Just had to add
android:orientation="vertical"
to LinearLayout

Android: auto-resize for each device

I've create a very simple app and i download it in 15 different devices. For some of them the layout have no resize problem and appear like this:
Layout that should be in all layouts
But when i installed the app in a Sansung Galaxy Neo Plus and in the tablet Archos 101 Copper the items' layout were not in the position that i want. In the tablet are up of the background different color view and in the Galaxy Neo Plus are like this:
Layout in the Galaxy Neo Plus
To auto-resize, in the activities xml, i used thse codes:
android:layout_marginTop="125dp"
android:layout_marginBottom="15dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
to set the buttons' margin from top/bottom/left/right
android:textSize="30dp"
to set the size of buttons' text
The layout code is this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg"
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Al meglio di:"
android:textSize="22dp"
android:id="#+id/almegliodi"
android:layout_alignParentTop="true"
android:layout_marginTop="220dp"
android:layout_centerHorizontal="true"
android:typeface="serif"
android:textStyle="bold|italic"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="center" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" UNO "
android:textStyle="bold"
android:textSize="35dp"
android:textColor="#android:color/white"
android:id="#+id/uno"
android:background="#android:drawable/dialog_holo_dark_frame"
android:onClick="uno"
android:layout_below="#+id/almegliodi"
android:layout_marginTop="30dp"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" TRE "
android:textStyle="bold"
android:textSize="35dp"
android:textColor="#android:color/white"
android:id="#+id/tre"
android:background="#android:drawable/dialog_holo_dark_frame"
android:onClick="tre"
android:layout_centerHorizontal="true"
android:layout_below="#+id/uno"
android:layout_marginTop="30dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" CINQUE "
android:textStyle="bold"
android:textSize="35dp"
android:textColor="#android:color/white"
android:id="#+id/cinque"
android:background="#android:drawable/dialog_holo_dark_frame"
android:onClick="cinque"
android:layout_centerHorizontal="true"
android:layout_below="#+id/tre"
android:layout_marginTop="30dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ESCI"
android:textStyle="bold"
android:textSize="30dp"
android:id="#+id/esci"
android:background="#android:color/transparent"
android:layout_marginBottom="7dp"
android:layout_marginLeft="30dp"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:onClick="esci"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="INDIETRO"
android:textStyle="bold"
android:textSize="30dp"
android:textColor="#android:color/white"
android:id="#+id/indietro"
android:background="#android:color/transparent"
android:onClick="indietro"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/esci"
android:layout_marginRight="30dp"
android:layout_marginBottom="7dp"
/>
</RelativeLayout
I searched on google but i found that use the 'dp' is the best way to auto-resize margin and text in all device.
What are my mistakes? What i have to do to solve the compatibility?
Thank you

Here is an example how your layout could look like:
<?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="#005"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_gravity="center_horizontal"
android:src="#android:drawable/btn_star_big_on"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_margin="24dp"
android:layout_weight="1"
android:background="#cfff"
android:gravity="center"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<android.support.v4.widget.Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
</LinearLayout>
</LinearLayout>
You should of cause use #string/ for each button to make your app translatable, but that basic layout should give you the right idea how to make a layout which scales correctly.
Basically I use some linear layouts which just say how the views should been arranged (horizontal or vertical). Then I told the view which contains the three main buttons that its height should be zero (just for performance) and the most important part that the layout weight is 1 (android:layout_weight="1") that tells the system to split up the open space to all views with a weight attribute. So this one will fill your display as far as possible. The other views will still been rendered as you want in my case wrap_content.