# Different screen sizes android

**URL:** <https://discourse.processing.org/t/different-screen-sizes-android/2233>\
**Category:** Processing for Android\
**Created:** [July 31, 2018, 9:47am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233 "2018-07-31T09:47:37Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [July 31, 2018, 9:47am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/1 "2018-07-31T09:47:37Z")

</div>

Hello,  
While writing a little program on android processing, I noticed that the rendering was not the same depending on the screen I was using. Here is the code:

void setup () {  
background (0);  
fullScreen();  
}

void draw () {  
noStroke();  
fill(245);  
ellipse(width / 2, height / 1.95, height / 4.8, height / 4.8);  
fill(245);  
ellipse(width / 1.421, height / 2.365, height / 18.5, height / 18.5);  
ellipse(width / 3.71824f, height / 1.73, height / 18.5, height / 18.5);  
}

Here are the different image:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/697d8643928d1ebe66dc5990dfdadb943292f65c.png)

Sorry for the mistakes I use the Google Translate

Can you help me troubleshoot screen compatibility?  
Thanks you.

---

<div class="post-metadata">

**Author:** ![erwrow](https://avatars.discourse-cdn.com/v4/letter/e/b782af/32.png) [@erwrow](https://discourse.processing.org/u/erwrow)\
**Post date:** [July 31, 2018, 11:26am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/2 "2018-07-31T11:26:59Z")

</div>

i would assume that this is because the proportion of the screen varies between devices. I would first calculate the proportion of the screen and then i would use that info to calculate the position (and size) of the ellipses.

---

<div class="post-metadata">

**Author:** ![hugo52](https://avatars.discourse-cdn.com/v4/letter/h/f1d935/32.png) [@hugo52](https://discourse.processing.org/u/hugo52)\
**Post date:** [August 3, 2018, 9:57pm UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/3 "2018-08-03T21:57:28Z")

</div>

Sorry I did not understand, is that someone could rewrite the sketch so that the proportion is respect ?  
Thank.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 3, 2018, 10:39pm UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/4 "2018-08-03T22:39:11Z")

</div>

Check this: [http://andrescolubri.net/androidbook/chapter-3/index.html](http://andrescolubri.net/androidbook/chapter-3/index.html)

Go to the section: _Preparing sketch for release_

Kf

---

<div class="post-metadata">

**Author:** ![hugo52](https://avatars.discourse-cdn.com/v4/letter/h/f1d935/32.png) [@hugo52](https://discourse.processing.org/u/hugo52)\
**Post date:** [August 4, 2018, 12:58pm UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/5 "2018-08-04T12:58:21Z")

</div>

Thank you i’m going to look.

---

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [August 9, 2018, 11:51am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/6 "2018-08-09T11:51:48Z")

</div>

I am a beginner in programming and I still can not understand how to do it.  
if anyone has any other advice I am a taker.  
Thank.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 9, 2018, 4:37pm UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/7 "2018-08-09T16:37:16Z")

</div>

If you follow the link above, it says you need to use displayDensity():

```java
void setup() {
  fullScreen();
  noStroke();
}

void draw() {
  background(0);
  float r = 50 * displayDensity; // <------ This ensures this value is independent on screen specifications
  int maxi = int(width/r);
  int maxj = int(height/r);
  for (int i = 0; i <= maxi; i++) {
    float x = map(i, 0, maxi, 0, width);
    for (int j = 0; j <= maxj; j++) {
      float y = map(j, 0, maxj, 0, height);
      ellipse(x, y, r, r);
    }
  }
}

```

I do not have much experience with this topic, but I believe this is the way to do it. Give it a try and tell us if it works for you, or if it doesn’t.

Kf

---

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [August 10, 2018, 7:59am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/8 "2018-08-10T07:59:01Z")

</div>

The example works but I can not adapt it to my initial code.  
Thank.

---

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [August 11, 2018, 10:27am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/9 "2018-08-11T10:27:42Z")

</div>

I do not know too much, but I think the problem does not come from the dpi but rather a problem of compatibility between the screen ratio (16 / 9,18 / 9,4 / 3).

---

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [August 17, 2018, 7:29pm UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/10 "2018-08-17T19:29:42Z")

</div>

Help me please, I’m lost. 😥😥😥

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 18, 2018, 5:24am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/11 "2018-08-18T05:24:17Z")

</div>

> [@hugo](#):
>
> ellipse(width / 3.71824f, height / 1.73, height / 18.5, height / 18.5);

Can you verify this? You have two dimensions, along the width and the height of the display. But your ellipses are based on the height only. Shouldn’t it be:

`ellipse(width / 3.71824f, height / 1.73, width/ 18.5, height / 18.5);`

Can you provide the output of this line: `println(nf(1.0/displayDensity,0,4), width, height, nf(width*1.0/height, 0, 2));`

Kf

---

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [August 18, 2018, 6:54pm UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/12 "2018-08-18T18:54:46Z")

</div>

if I use the line " ellipse(width / 3.71824f, height / 1.73, width/ 18.5, height / 18.5); " I would need a square screen (width=height), otherwise the ellipse is not round.

Here is the result of the next line " println(nf(1.0/displayDensity,0,4), width, height, nf(width\*1.0/height, 0, 2)); "  
Consol : 0,3333 1080 1920 0,56

My phone is an Asus zenfone 3 laser ,DPI = 401, screen = 1080\*1920.

Thank you.

---

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [August 19, 2018, 11:12am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/13 "2018-08-19T11:12:54Z")

</div>

I realized this screen compatibility problem when I replaced the line " fullScreen(); " (16/9) with " size(909,1920); " (19/9) :

 ![Screenshot_20180819-131220](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b239940dcb231b8f62d571bef322fe53d5ece767.jpeg)

---

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [August 21, 2018, 11:51am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/14 "2018-08-21T11:51:17Z")

</div>

> [@kfrajer](#):
>
> println(nf(1.0/displayDensity,0,4), width, height, nf(width\*1.0/height, 0, 2));

Consol: 0,3333 1080 1920 0, 56

Thank you.

---

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [August 27, 2018, 8:30am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/15 "2018-08-27T08:30:33Z")

</div>

@kfrajer when do you think ?

---

<div class="post-metadata">

**Author:** ![Boti](https://avatars.discourse-cdn.com/v4/letter/b/839c29/32.png) [@Boti](https://discourse.processing.org/u/Boti)\
**Post date:** [August 27, 2018, 2:06pm UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/16 "2018-08-27T14:06:46Z")

</div>

Hi,

This is because you are placing the small circles relative to the width of the screen.  
Here is a video demonstrating your code:  
 ![demonstration](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f68a545871568826e67d5c67d26eb6322f93c85b.gif)

If you want the small circles to always be the same distance from the center try addig constants to the center coordinate, something like this:

> void setup () {  
> background (0);  
> size(1000,480);  
> }
> 
> void draw () {  
> noStroke();  
> fill(245);  
> ellipse(width / 2, height / 1.95, height / 4.8, height / 4.8);  
> fill(245);  
> ellipse((width / 2)+70, height / 2.365, height / 18.5, height / 18.5);  
> ellipse((width / 2)-70, height / 1.73, height / 18.5, height / 18.5);  
> }

---

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [August 28, 2018, 8:03am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/17 "2018-08-28T08:03:21Z")

</div>

Hello,  
First of all i want to thank you for your post is very complete.

But unfortunately your example does not work on all screens in portrait mode, as this video shows:

 ![Exemple](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f7c4722cf81272d632614fa965bf1e421a5335c1.gif)  
As you can see after a while the two little circles get into the big circle.

Thank you.

---

<div class="post-metadata">

**Author:** ![Boti](https://avatars.discourse-cdn.com/v4/letter/b/839c29/32.png) [@Boti](https://discourse.processing.org/u/Boti)\
**Post date:** [August 28, 2018, 8:15am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/18 "2018-08-28T08:15:34Z")

</div>

I only considered screens with different width. If the height of the screen changes the center circle also changes. Maybe you should make it independent from the height.

> void setup () {  
> fullScreen();  
> }
> 
> void draw () {  
> background(0);  
> stroke(255);  
> fill(0);  
> rect(0,0,width,height);  
> noStroke();  
> fill(245);  
> ellipse(width / 2, height / 2, 100,100);  
> ellipse((width/2)+50, (height / 2)-50, 30, 30);  
> ellipse((width/2)-50, (height / 2)+50, 30, 30);  
> }

An other idea is to always use a fixed 16:9 rectangle inside of the screen.  
If there is a 16:9 phone it will display fullscreen, but width a 18:9 smartphone there will be a black line on the bottom.

---

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [August 28, 2018, 8:36am UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/19 "2018-08-28T08:36:38Z")

</div>

If to define the size of the circle I use the width instead of the height, the problem is the same.  
About your other idea you may be right for the 18/9 screen but it may be more embarrassing if the user uses a screen 4/3.

Thank you.

---

<div class="post-metadata">

**Author:** ![hugo](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@hugo](https://discourse.processing.org/u/hugo)\
**Post date:** [August 29, 2018, 5:34pm UTC](https://discourse.processing.org/t/different-screen-sizes-android/2233/20 "2018-08-29T17:34:43Z")

</div>

I think there must be a way to solve the problem,  
the link that @kfrajer has to share is interesting but I have trouble understanding and google translate does not really help me.  
Link : [http://andrescolubri.net/androidbook/chapter-3/index.html](http://andrescolubri.net/androidbook/chapter-3/index.html)

Thank you.

[Next page](https://discourse.processing.org/t/different-screen-sizes-android/2233.md?page=2)