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

how to add tablet resolution support in Android Studio

Using ConstraintLayout I saw this problem: on phones, the resolution of my widgets is normal and takes up almost all of the
screen space:
But when I switch to the resolution of the tablets, all the widgets become small and cannot be viewed on the screen:
How to make the resolution of widgets look normal on all resolutions and devices?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableLayout
android:id="#+id/table_l"
android:layout_width="297dp"
android:layout_height="329dp"
android:layout_weight="1"
android:layout_x="57dp"
android:layout_y="202dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</TableRow>
</TableLayout>
<Button
android:id="#+id/st"
android:layout_width="178dp"
android:layout_height="wrap_content"
android:layout_x="120dp"
android:layout_y="112dp"
android:text="start"
app:layout_constraintBottom_toTopOf="#+id/table_l"
app:layout_constraintEnd_toEndOf="#+id/table_l"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="#+id/table_l"
app:layout_constraintTop_toTopOf="parent"
android:layout_weight="1"
app:layout_constraintVertical_bias="0.647" />
<TextView
android:id="#+id/X_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
android:layout_x="118dp"
android:layout_y="608dp"
android:text="x:"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/O_text"
app:layout_constraintStart_toStartOf="#+id/O_text"
app:layout_constraintTop_toBottomOf="#+id/O_text" />
<TextView
android:id="#+id/O_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:layout_x="116dp"
android:layout_y="661dp"
android:text="o:"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/table_l"
app:layout_constraintHorizontal_bias="0.153"
app:layout_constraintStart_toStartOf="#+id/table_l"
app:layout_constraintTop_toBottomOf="#+id/table_l"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="27dp"
android:layout_height="47dp"
android:layout_marginTop="36dp"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.139"
app:layout_constraintStart_toEndOf="#+id/O_text"
app:layout_constraintTop_toBottomOf="#+id/table_l"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView4"
android:layout_width="25dp"
android:layout_height="45dp"
android:layout_marginBottom="52dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.151"
app:layout_constraintStart_toEndOf="#+id/X_text"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:layout_constraintVertical_bias="0.571" />
</androidx.constraintlayout.widget.ConstraintLayout>

You should create layout xml files for different screen size. For example; If your app running in Tablet(7 inch), you must create new layout as a layout-sw600dp.
Look at this link for more details.

You should stop using fixed sizes and x/y positions for layouts. There might be exceptions, but in general, all views should be able to dynamically resize themselves. That means, you almost never use fixed values for widths but instead wrap_content or match_parent. After 4 years of android development I also have to find one case where I ever needed the layout_x and layout_y XML tags.
Otherwise, this layout will be small on big screens and it won't fit on small screens.
For 90% of layouts, all you need is ConstraintLayout and maybe LinearLayout. RelativeLayouts have become mostly obsolete.
Explaining how to properly arrange your ui would be to exhaustive here. Instead, I recommend you to take the time to go through a tutorial like this google codelab on building a responsive UI with constraintlayouts. If done correctly, you can build one UI which looks good an smartphones and tablets.
But if you want to have an entirely different layout for tablets, then #Mustafa Yanık's approach is correct. Then you need to create a second layout in a different subfolder.

Android layout preview not matching with device

Acc to the definition of a dp, 10dp should be same on devices having same dimensions irrespective of density. Then why is the layout preview in Android Studio not matching with the layout when I am running it in my mobile? I am using pixel XL in Android Studio preview and I am running it on Samsung J7 prime. Both are 5.5" diagonally but with different densities.Layout code:-
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/re/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center_horizontal|center"
tools:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="0dp">
<ProgressBar
android:id="#+id/progressBar2"
style="?android:attr/progressBarStyle"
android:layout_width="147dp"
android:layout_height="173dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="454dp"
android:layout_marginStart="248dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.0" />
<SeekBar
android:id="#+id/seekBar"
android:layout_width="122dp"
android:layout_height="116dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#android:color/black"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/progressBar2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="494dp"
app:layout_constraintHorizontal_bias="0.518" />
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="9dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:background="#android:color/holo_purple"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.75" />
</android.support.constraint.ConstraintLayout>
The screenshot of the app:
Here is the picture of preview:

My guess, is that since you used percentage for the positioning of the views, yet the normal size of them (wrap_content, or fixed sizes you used), the result would be different across different device displays.
On some cases, they would overlap, and on some, they won't.
I suggest you to try to run it on multiple displays, to confirm this. Try to change orientation and try on various emulator configurations, for example.
To solve this issue, there are multiple solutions, depends on your needs:
size and position must match : either both are percentage, or both are fixed sizes.
create better relations between the views, that will always work

It is the problem of the IDE that shows you this error, what you do is everytime you use widget, in that always use the width as wrap_content or match_parent it is because the Preview which your getting is slightly different from what the natural phone looks like.
For height you can give you own height. The width of the screen creates an issue.
If in wrap_content if you find the issue in size then you can follow like this in order to get the desired result.
<ProgressBar
android:width="match_parent"
android:height="115dp"
android:marginLeft="20dp"
androidMarginRight="20dp">
You can achieve the desired width, you can adjust the value of the margin nothing else.
The benefit of doing thing like will give you the desired result in the phone as it will take up the full space of the width of the phone (Real One) and now adjust the margin according to it.
Try it and then tell me whether you are getting some result or not.
EDITS
Do like this in your layout in order to adjust
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="25dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="170dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:layout_marginRight="20dp">
<Button
android:id="#+id/facebookButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="13dp"
android:paddingBottom="11dp"
android:layout_marginTop="4dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="170dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1">
<Button
android:id="#+id/googleButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>
Do like this for your problem.

How to achieve this kind of layout in Android

I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.
I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.
First I went through:
developer.android.com/guide/practices/screens_support.html
And questions like:
stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products
I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.
I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.
This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):
(sorry for the link, I need 10 rep to post images)
http://i.imgur.com/KXTAXir.jpg
My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.
B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.
Here is an example of how it should work:
http://i.imgur.com/cH7fUze.jpg
Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.
Here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkgray"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="LEVEL"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/level_text_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="SCORE"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/level_text_clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="01:59"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8.4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="1000"
android:progress="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
</LinearLayout>
<RelativeLayout
android:id="#+id/pauseMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:visibility="gone" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/gameoverMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:visibility="gone" >
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="0/0"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="useHint" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button1"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="toggleSound" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="togglePause" />
</RelativeLayout>
The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.
Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.

I'm not sure, if I got your question right.
However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html
Just give the respective suffix in the name of your layout XML file.

I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.
To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.
With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.

AppWidget looking different on emulator and phone - shifted View content

The Layout is looking as expected on the phone and looking different on the emulator. I am using SDK API 10 (Android 2.3). The test phone is a Motorola Milestone with Android 2.3.3 (Cyanogen Mod 7).
The SDK layout preview renders the preview like the Emulator.
The following image shows the expected rendering on the right side (rendered by phone) and the unexpected rendering on the left side (SDK API 10, emulator and preview).
What is the reason for the difference and how do I fix it? Removing margin and padding (by setting it to 0dp at TextView1) did not help.
main layout (parent)
<?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/test_bg_red"
android:padding="20dp"
>
<include
android:layout_width="fill_parent"
android:layout_height="26dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
layout="#layout/test_child" />
/>
<include
android:layout_width="fill_parent"
android:layout_height="26dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
layout="#layout/test_child" />
</RelativeLayout>
child layout
<?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="26dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="4dp"
android:gravity="top"
android:includeFontPadding="false"
android:text="42"
android:textSize="32dp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_toRightOf="#+id/textView1"
android:includeFontPadding="false"
android:text="TextView2"
android:textSize="12dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_alignParentTop="true"
android:includeFontPadding="false"
android:text="TextView3"
android:textSize="10dp" />
</RelativeLayout>

I believe this is caused by different screens having different aspect ratios. Since phones have 4x4 cells regardless of physical screen size, each cell must be wider or narrow to fit 4 in a row. Using DP takes care of density, but screens which are more or less square will still require cells to be more or less square. That means the number of DP per cell will vary and cause your views to not look the same on different devices.
The only solution I have found is to make your layouts as flexible as possible.