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

Why is the layout from design view so different on an actual device?

I am using a Relative Layout and am very confused why the layout is so different: the EditText is so close to the second spinner, the second spinner is a little to the left, not aligned to the one above it, even though they both have the same marginStart; also, the button should be centered horizontally.
I've read that the actual phone screen might differ from the view I see in Android Studio but how does that affect the marginStart which is the same for those two spinners?!
Is it something that I do wrong? (I am a beginner in developing with Android Studio). Here is my xml:
<?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"
tools:context=".QuizzesFragment">
<Spinner
android:id="#+id/fragquizzes_spn_courses"
android:layout_width="286dp"
android:layout_height="85dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="71dp"
android:layout_marginTop="225dp"
android:entries="#array/courses_array" />
<Spinner
android:id="#+id/fragquizzes_spn_departments"
android:layout_width="286dp"
android:layout_height="85dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="71dp"
android:layout_marginTop="123dp"
android:entries="#array/depts_array" />
<Button
android:id="#+id/fragquizzes_btn_createQuiz"
android:layout_width="126dp"
android:layout_height="63dp"
android:layout_alignBottom="#id/fragquizzes_spn_courses"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginStart="-90dp"
android:layout_marginTop="22dp"
android:layout_marginEnd="137dp"
android:layout_marginBottom="70dp"
android:text="#string/create_quiz" />
<EditText
android:id="#+id/fragquizzes_et_quizname"
android:layout_width="250dp"
android:layout_height="64dp"
android:layout_alignBottom="#+id/fragquizzes_spn_courses"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="70dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="162dp"
android:ems="10"
android:inputType="text"
android:hint="quiz name"/>
</RelativeLayout>
I would like to have the same view on the phone or at least something similar?
These are the screenshots:
![design view] https://imgur.com/a/bGBm4YW
![actual device] https://imgur.com/a/9KaghT4

The reason that your layout is not responsive is that you are using fixed size on your views (android:layout_width="286dp" and android:layout_height="85dp" for example).
Because different phones got different screen sizes if you will use fixed size in dp your layout may look good on one device but won't look good on other devices with different screen size.
"how does that affect the marginStart which is the same for those two spinners" - well again - you use fixed size so it won`t be responsive to all screen sizes.
If you want your layout to be responsive to all screen either don't use fixed size/use fixed size but create 1 layout for every screen size or what I think is the most easy solution - use ConstraintLayout, it is super easy to use, super fast to create your layout and it will be responsive to all screen sizes.
Here is an example using constraintLayout with some guidelines to achieve your desired layout:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Spinner
android:id="#+id/some"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/editText"
app:layout_constraintEnd_toEndOf="#+id/spinner2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/spinner2"
app:layout_constraintTop_toBottomOf="#+id/spinner2" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="395dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/some"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText"
tools:text="button" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3"
app:layout_constraintVertical_chainStyle="spread" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>

Please try below layout file. Let me know if it is useful or not. If you need any further help regarding your layout feel free to ask.
<?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">
<Spinner
android:id="#+id/fragquizzes_spn_departments"
android:layout_width="match_parent"
android:layout_height="85dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="70dp"
android:layout_marginTop="123dp"
android:layout_marginEnd="70dp"
android:entries="#array/depts_array" />
<Spinner
android:id="#+id/fragquizzes_spn_courses"
android:layout_width="match_parent"
android:layout_height="85dp"
android:layout_below="#+id/fragquizzes_spn_departments"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="70dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="70dp"
android:entries="#array/courses_array" />
<EditText
android:id="#+id/fragquizzes_et_quizname"
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_above="#+id/fragquizzes_btn_createQuiz"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="70dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="70dp"
android:layout_marginBottom="30dp"
android:ems="10"
android:hint="quiz name"
android:inputType="text" />
<Button
android:id="#+id/fragquizzes_btn_createQuiz"
android:layout_width="126dp"
android:layout_height="63dp"
android:layout_alignBottom="#id/fragquizzes_spn_courses"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="70dp"
android:text="#string/create_quiz" />
</RelativeLayout>

Plz try this code.
In this code we use spinner height and width not fix, so in all frame it fill fit.
we use LinearLayout for set spinner, edittext and button on fix layout. We use android:orientation="vertical" so all field inside this layout show on vertical.
Upper spinner margin you set according to your choice.
I set margin left and Right in linearlayout so all field automatic adjust according to this layout.
I hope its very helpful to design layout according to your.
Thanku..

Android Studio Text not conforming to layout_margin when I run App on Emulator

I am trying to resolve a Layout Margin issue, where after I run the app on the emulator the Status Text doesn't appear where I intend it to be.
Attached is the full layout code. How can I improve the code to mitigate this issue in the future?
<?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="#color/colorPrimary"
tools:context=".SettingsActivity">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/settings_profile_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:src="#drawable/default_profile" />
<TextView
android:id="#+id/settings_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="244dp"
android:text="#string/user_name"
android:textColor="#android:color/background_light"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:id="#+id/settings_user_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:layout_marginBottom="260dp"
android:text="#string/user_profile_status"
android:textColor="#android:color/background_light"
android:textSize="18sp" />
</RelativeLayout>
What am I missing?

In the 1st place, you may want to try the constraint layout introduced by android as part of android material design which is aimed at avoiding all the overhead of nesting views. In constraint layout views can be dragged and drooped and they can be assigned margins in the multiples of 8. It is highly suggested to use constraint layouts as opposed to the old nesting of layouts.

if you want the status below user name, just use
android:layout_below="#+id/settings_username"
In your current layout, marginTop is useless, vertical position is decided by
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="260dp"
It is better to use ContraintLayout, which will remove all unused attributes (e.g, if margin is useless, margin attribute is automatically removed).

Try this You just have to remove android:layout_marginBottom="260dp" and android:layout_alignParentBottom="true" and Add android:layout_below="#+id/settings_username" in settings_user_status
<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="#color/colorPrimary"
tools:context=".SettingsActivity">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/settings_profile_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:src="#drawable/default_profile" />
<TextView
android:id="#+id/settings_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="244dp"
android:text="#string/user_name"
android:textColor="#android:color/background_light"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:id="#+id/settings_user_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:layout_below="#+id/settings_username"
android:text="#string/user_profile_status"
android:textColor="#android:color/background_light"
android:textSize="18sp" />
</RelativeLayout>

How to debug an unexpected Android layout?

My ConstraintLayout is showing some strange plotting of items on app. It is showing the elements correct positions on the preview screen of the android studio but while running app on the phone the positions of the elements are strange.
Here is the screen shot of app:
My layout is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="34dp"
android:layout_height="56dp"
android:text="appbar"
android:background="#android:color/transparent"
tools:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="8dp" />
<ImageView
android:id="#+id/imgBooks"
android:layout_width="272dp"
android:layout_height="302dp"
android:src="#drawable/books"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="56dp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/toolbar" />
<ImageView
android:id="#+id/imgName"
android:layout_width="40dp"
android:layout_height="35dp"
app:srcCompat="#drawable/name"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="373dp"
android:layout_below="#+id/imgBooks"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/etEmail"
android:layout_width="320dp"
android:layout_height="43dp"
android:ems="10"
android:text="Email"
android:inputType="textEmailAddress"
tools:layout_editor_absoluteX="67dp"
tools:layout_editor_absoluteY="417dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:layout_above="#+id/etPhone"
android:layout_toEndOf="#+id/imgPhone" />
<ImageView
android:id="#+id/imgEmail"
android:layout_width="38dp"
android:layout_height="34dp"
app:srcCompat="#drawable/email"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="417dp"
android:layout_alignTop="#+id/etEmail"
android:layout_toStartOf="#+id/etEmail" />
<EditText
android:id="#+id/etName"
android:layout_width="320dp"
android:layout_height="43dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
tools:layout_editor_absoluteX="67dp"
tools:layout_editor_absoluteY="373dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:layout_above="#+id/etEmail"
android:layout_alignEnd="#+id/btn" />
<ImageView
android:id="#+id/imgPhone"
android:layout_width="35dp"
android:layout_height="31dp"
app:srcCompat="#drawable/phone"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="463dp"
android:layout_alignTop="#+id/etPhone"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/etPhone"
android:layout_width="320dp"
android:layout_height="43dp"
android:ems="10"
android:inputType="phone"
android:text="Phone"
tools:layout_editor_absoluteX="67dp"
tools:layout_editor_absoluteY="463dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:layout_above="#+id/btn"
android:layout_alignStart="#+id/etName"
android:layout_alignEnd="#+id/btn" />
<Button
android:id="#+id/btn"
android:layout_width="344dp"
android:layout_height="48dp"
android:text="Download Brochure"
android:layout_gravity="center_vertical|center_horizontal"
tools:layout_editor_absoluteX="20dp"
tools:layout_editor_absoluteY="514dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:background="#drawable/curves"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</android.support.constraint.ConstraintLayout>

The problem is you are not using constraints at all which is the whole point of constraint layout.
For example, if you don't use constraints on Download Brochure button and use only tools:layout_editor_absoluteX and tools:layout_editor_absoluteY attributes, the button stays at the position where you put it on the editor but when you compile the app, the button goes top left corner.
You need to add those to Download Brochure button, then set its location. So it will be on the same position in every possible situation.
app:layout_constraintLeft_toLeftOf="parent",
app:layout_constraintRight_toRightOf="parent"
But I suggest you to do it on editor while playing around with constraint layout which is much easier.
You can also watch this video. https://www.youtube.com/watch?v=sO9aX87hq9c. It helps a lot.

Android studio - Relative layout misplaced items after run on phisical device

Hope you can help me with my question, I have three TextViews and a sepparator, on my relative layout, on the designer I have aranged them , but after I run it on a phisical device , only one item appear and even that item is misplaced. I have to tell you that i have searched for many many hours before coming here to ask this question, so please help me!
Here it is the XML file
<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:paddingBottom="44dp"
android:paddingTop="24dp"
tools:ignore="RtlSymmetry">
<TextView
android:id="#+id/tv_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/tv_today_date"
android:gravity="end|center_vertical"
android:paddingEnd="16dp"
android:textAlignment="center"
android:textSize="56sp"
android:visibility="visible"
tools:text="12:34" />
<TextView
android:id="#+id/tv_today_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:paddingEnd="16dp"
android:text="Tue, 20 Apr"
android:textSize="16sp"
android:layout_below="#+id/tv_today_time"
android:layout_toStartOf="#+id/separator" />
<View
android:id="#+id/separator"
android:layout_width="0.05dp"
android:layout_height="0.05dp"
android:layout_alignBottom="#+id/tv_today_date"
android:layout_alignTop="#+id/tv_today_time"
android:layout_centerHorizontal="true"
android:background="#66FFFFFF" />
<TextView
android:id="#+id/tv_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:paddingStart="16dp"
android:textSize="16sp"
tools:text="Bucharest"
android:layout_below="#+id/tv_today_time"
android:layout_toEndOf="#+id/separator" />
If needed, i will post some screenshots.
Also I have also some other questions, so if anyone wants to help me, tell me :)
EDIT
Here iis what I would like it to be:Designer
Here is what i get:Phisical device

Option 1: Use constraint layout (Material design)
Option 2: Wrap tv_today_date separator & tv_location in LinearLayout with horizontal orientation. Place this LinearLayout below tv_time

This is working fine for me.Check it and let me know.
<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:paddingTop="24dp"
>
<TextView
android:id="#+id/tv_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="end|center_vertical"
android:paddingRight="16dp"
android:textAlignment="center"
android:textSize="56sp"
android:visibility="visible"
android:text="12:34" />
<View
android:id="#+id/separator"
android:layout_width="0.05dp"
android:layout_height="0.05dp"
android:layout_alignBottom="#+id/tv_today_date"
android:layout_alignTop="#id/tv_time"
android:layout_centerHorizontal="true"
android:background="#66FFFFFF" />
<TextView
android:id="#+id/tv_today_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:paddingRight="16dp"
android:text="Tue, 20 Apr"
android:textSize="16sp"
android:layout_below="#id/tv_time"
android:layout_toLeftOf="#id/separator" />
<TextView
android:id="#+id/tv_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:paddingLeft="16dp"
android:textSize="16sp"
android:text="Bucharest"
android:layout_below="#id/tv_time"
android:layout_toRightOf="#id/separator" />
</RelativeLayout>