Develop Reference

In Android, some cell phones work the graphical interface perfectly, and other cell phones do not the same graphical interface. For what reason?

I'm developing a code on Android, and testing it on two cell phones of different brands. Sorry these screens are not in English language, okay?
You can see that in the screenshot below, it's from a mobile phone brand A. It's showing the GUI without any problem.
In the screenshot below, it's from a brand of cellphone B. And it's showing the SAME Graphical Interface with problems:
Code:
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/corDeFundo">
<TextView
android:id="#+id/textoDosSintomas1"
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="0dp"
android:layout_marginBottom="501dp"
android:text="#string/textodossintomas"
android:textColor="#color/corPreta"
android:textSize="20sp"
android:textStyle="bold" />
<CheckBox
android:id="#+id/doresNoCorpo"
android:layout_width="204dp"
android:layout_height="wrap_content"
android:layout_below="#+id/textoDosSintomas1"
android:layout_alignParentEnd="true"
android:layout_marginTop="-450dp"
android:layout_marginEnd="111dp"
android:text="#string/doresNoCorpo"
android:textColor="#color/corPreta"
android:textSize="20sp"
android:textStyle="bold" />
<CheckBox
android:id="#+id/perdaDePaladarOuOlfato"
android:layout_width="363dp"
android:layout_height="wrap_content"
android:layout_below="#+id/doresNoCorpo"
android:layout_alignParentEnd="true"
android:layout_marginTop="43dp"
android:layout_marginEnd="-48dp"
android:text="#string/perdaDePaladarOuOlfato"
android:textColor="#color/corPreta"
android:textSize="20sp"
android:textStyle="bold" />
<CheckBox
android:id="#+id/dorDeCabeca"
android:layout_width="204dp"
android:layout_height="wrap_content"
android:layout_below="#+id/perdaDePaladarOuOlfato"
android:layout_alignParentEnd="true"
android:layout_marginTop="38dp"
android:layout_marginEnd="113dp"
android:text="#string/dorDeCabeca"
android:textColor="#color/corPreta"
android:textSize="20sp"
android:textStyle="bold" />
<CheckBox
android:id="#+id/diarreia"
android:layout_width="121dp"
android:layout_height="wrap_content"
android:layout_below="#+id/dorDeCabeca"
android:layout_alignParentEnd="true"
android:layout_marginTop="39dp"
android:layout_marginEnd="196dp"
android:text="#string/diarreia"
android:textColor="#color/corPreta"
android:textSize="20sp"
android:textStyle="bold" />
<Button
android:id="#+id/botaoPaginaAnterior2"
android:layout_width="147dp"
android:layout_height="62dp"
android:layout_below="#+id/diarreia"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="35dp"
android:layout_marginTop="70dp"
android:layout_marginEnd="229dp"
android:foreground="#drawable/seta_esquerda"
android:text="Button" />
<Button
android:id="#+id/botaoProximo2"
android:layout_width="106dp"
android:layout_height="65dp"
android:layout_below="#+id/diarreia"
android:layout_alignParentEnd="true"
android:layout_marginTop="68dp"
android:layout_marginEnd="56dp"
android:foreground="#drawable/seta_direita"
android:text="Button" />
</RelativeLayout>
In the following screenshot of mobile brand A, it is showing the Graphical Interface without any problems:
In the following screenshot of mobile brand B, it is showing the SAME Graphical Interface with problems:
Please what can I do to fix it?
Maybe it's not a problem with XML, as on mobile brand A, the GUI is working without any problems.
Is there any programming code that facilitates Responsiveness (ie adapting to different screen sizes) on Android please?

Yeah, you should not be setting a fixed width for those checkboxes. Make them match_parent and allow them to fill the space they need to fit the text.
Additionally, even if you do this it isn't guaranteed to take the same space on all devices- users can change the size of the font in settings. People with vision problems use that to be able to actually see your app. You should write your layout to help make this possible, not try to prevent it.

I cannot see your xml so I'm going to assume you set
android:layout_width="xdp"
So you can change it to
android:layout_width="match_parent"
If this is not the case please edit your question and add your xml

Android Normal Layout is displayed differently on devices

I'm relatively new in the area of App Development and still cant get behind the proper way to set up an xml file (in this case for a normal layout) to fit every mobile device that uses this layout type.
For example: I have a Pixel 2 Emulator and a Nexus 5 Emulator (both use the normal layout). However the result on the screen looks different on the devices:
Pixel 2 (1080x1920 - 420dpi): https://i.stack.imgur.com/5zmZ3.png
Nexus 5 (1080x1920 - xxhdpi): https://i.stack.imgur.com/sSLtb.png
After some research in the Google developers section about Device compability I found out that it could be due to the different pixel densities, but I have no clue how to fix this.
The xml code of this 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="#drawable/mybackground"
tools:context=".Start">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#00FFFFFF"
android:padding="5dp"
android:scrollbars="none"
android:layout_below="#id/name_add"
android:layout_marginTop="15dp"
android:layout_marginBottom="160dp"
android:layout_marginStart="200dp"
/>
<EditText
android:id="#+id/name_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="100dp"
android:layout_marginTop="200dp"
android:width="180dp"
android:ems="10"
android:hint="Name"
android:importantForAutofill="no"
android:inputType="text"
android:singleLine="true"
android:textColor="#424242"
android:textColorHint="#424242"
app:backgroundTint="#585858" />
<ImageButton
android:id="#+id/btn_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/name_add"
android:layout_marginBottom="11dp"
android:layout_toEndOf="#id/name_add"
android:layout_marginStart="9dp"
android:src="#drawable/ic_plus"
android:background="#android:color/transparent"
android:contentDescription="add"/>
<Button
android:id="#+id/goToSelection"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="520dp"
android:background="#drawable/play_btn"
android:fontFamily="sans-serif"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:text="#string/btn_play"
android:textAllCaps="false"
android:textSize="20sp"
/>
<Button
android:id="#+id/languagegbr"
android:layout_width="45dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="15dp"
android:layout_marginBottom="15dp"
android:background="#drawable/gbr"
/>
<Button
android:id="#+id/languagedr"
android:layout_width="45dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="15dp"
android:layout_marginBottom="55dp"
android:background="#drawable/germanyr"
android:visibility="gone"/>
</RelativeLayout>
All of the images will later be replaced by vector graphics.
My question now is, how I can make my layout on the Nexus 5 (and on any other mobile device with a resolution of 1080x1920 or that uses the normal layout in general) look the same as it looks on the Pixel 2?

I've struggled with this kind of issues for a long time.
This stuff happens when you mess too much with dp's in margins and paddings usually. Given that dp's stay almost equal between different phone sizes, you will get variations of your display, such as the one you're showing us.
The way I solved it is by using Constraint Layout. It's very simple to use, and it has a lot of advantages. If there's no particular reason why you're not using Constraint Layout I highly suggest you to start now.
In a Constraint Layout all you need to do for your error to be solved is set the horizontal constraints to the parent and that's it.
<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"
tools:context=".login.YourActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Just by saying you'll be attached to your parent's left and right, sets the view right in the middle of your screen. Of any screen actually.

How to make Text to look like same with respect to length (width) and height in all devices

I have a text screen in the bottom and aligned left to the screen and the button which is also in the bottom aligned right to the screen. I have given the size as a 36 sp , but on Samsung tab 4 7'(tvdpi) it looks fine , but on the device S4 (xxhdpi) the text goes behind the button. Where as I want the text to get flexible and to adjust itself.
The Text view in my xml goes like this :
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New tools Available"
android:textSize="30sp"
android:textColor="#ffffff"
android:id="#+id/tv_new_tools_available"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:padding="5dp"
android:layout_marginLeft="10dp"/>
What I want :
I want that my text should look good in all devices and should not be overlap with the button and it should look good not screw on large devices and should not look bigger in small device
I am wondering How can I achieve this , please help me as I am a newbie in the android. I did research in regards but found that I should use sp instead of dp, but this also created problem for me . Please help me.

Use text font sizes from dimension folders wrt device sizes.

Try this
<LinearLayout
android:id="#+id/ly"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:text="TextView"
/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text="Button"
/>
</LinearLayout>

Making the Button's align_parentBottom = "true" when other view's height is not Zero

First the title may look senseless but I don't know how I describe my problem well in the title.
I have a Relative layout which has 2 buttons (Past games and Upcoming Games) and 2 listviews. Whenever a button is pressed the associated listview is collapsed (height will be zero) if it is already expanded or the reverse will happen. ( i used this solution)
Problem:
Everything is fine when I run it on a 5-inch screen phone. Please see the following picture:
[![][2]][2]
But if I run it on a 10-inch tablet it looks like this:
[![][3]][3]
The same will happen when it will run on less than 5-inch phone.
My questions
Do I need to make another layout for the tablet? like in the layout-large folder?
or I can use some event(s) in Jave file that dynamically set the buttons align parent bottom property when the listview is not collapsed.
or it can be fixed in my current XML
Below is the code for that part I am asking for help
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnPastGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Past Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvPastGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:layout_marginTop="5dp"
android:divider="#null" />
<Button
android:id="#+id/btnUpcommigGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/lvPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Up Coming Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvUpcomingGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnUpcommigGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:divider="#null" />
</RelativeLayout>
</LinearLayout>
If you guys can give me some advice on making the user interface that will run on all screen sizes and densities I will be very thankful
Thanks to anyone who will help me

You are trying to workaround functionality of ExpandableListView. Look at the following page:
http://www.androidhive.info/2013/07/android-expandable-list-view-tutorial/

Actual position of app design in graphical versus in Emulator

I am very novice in android platform.I am trying to design an application.For the design purpose i have taken RelativeLayout .But the unique thing that i am noticing is while seeing it in graphical Layout in eclipse ,Buttons and EditText are at different position while it is at right position when seeing in emulator.
Here is my code..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/pnr_bg"
android:orientation="vertical"
android:padding="0dp" >
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:layout_marginTop="220dp"
android:maxHeight="30dp"
android:src="#drawable/pnr_normal" />
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="266dp"
android:layout_marginTop="220dp"
android:maxHeight="30dp"
android:src="#drawable/tenq_normal" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:ems="10" >
<requestFocus />
</EditText>
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:src="#drawable/submit" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_column="0"
android:layout_columnSpan="6"
android:layout_gravity="right|bottom"
android:layout_row="6"
android:layout_height="match_parent"
android:textColor="#0f0f0f" />
Why is this happening.Will it do any impact on the different size of the mobile screens.
Please help me..

Yes that's correct thing. Whatever layout/UI you see, it won't be the same in emulator or real device. Reason being is android comes with multiple and variety of resolutions. The layout which you see while designing is just to preview the design or we can say just a sample preview of UI with controls/widgets you have taken.
You can consider it as an advantage of designing UI/layout in android for different resolutions/multiple screens.
When I say advantage, it means you can design just a single layout and can preview it for multiple screens, and so you would be having better idea.
Update:
Just check the image and do the same thing as depicted in image, to preview all screens. Once again I am repeating, the preview which you are seeing is just a preview, it would looks somewhat different in real devices.