1

I'm starting just starting out in android development. My IDE is Android Studio and I'm currently building my own calculator app. I used Nexus 5X 's screen which is 5.7": My app using the 5.7 screen

The only problem I encountered is that when I tried to my friend's phone which has a 4.7 screen, it somewhat looks like this: My app using the 4.7 screen

I thought that it the app would automatically scale everything just like when you're using viewport on web development. I'm a web-developer (html, php, javascript, css) and I'm planning to migrate to android development for ease-of-use. Is there any way to fix this without re-designing everything again guys?

Thanks, and peace out.

Dranreb Benedicto
  • 89
  • 2
  • 9

3 Answers3

3

Android devices come in a variety of screen sizes and resolutions. That’s why handling the multiple screen size in android is most important.

Look into this: https://stuff.mit.edu/afs/sipb/project/android/docs/guide/practices/screens_support.html

Actual physical size, measured as the screen’s diagonal.For simplicity, Android groups has four generalized sizes: small, normal, large, and extra large.

To set up support for multiple device sizes in Android, add the element into the AndroidManifest.xml file. 

<?xml version="1.0" encoding="utf-8"?>
<manifest ..>

<supports-screens
android:smallScreens="true"
android:normalScreens="true"
android:largeScreens= "true"
android:anyDensity="true"
/>

<application... >
….
</application>
</manifest>

As we design our UI for different screen sizes, we’ll discover that each design requires a minimum amount of space. 

res/layout/my_layout.xml             // layout for normal screen size ("default")
res/layout-small/my_layout.xml       // layout for small screen size
res/layout-large/my_layout.xml       // layout for large screen size
res/layout-xlarge/my_layout.xml      // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape

We can also define it on the basis of dp like :

res/layout/main_activity.xml           // For handsets
res/layout-sw600dp/main_activity.xml   // For 7”  tablets(600x1024 mdpi).600dp wide and bigger.
res/layout-sw720dp/main_activity.xml   // For  10” tablets (720x1280 mdpi).720dp wide and bigger.

Steps to create Different Screen Layouts :

Step 1 : First go to Android to Project mode in Android studio change at below of the project name.

Step 2 : Create Folders for all screen sizes.

Step 3 : create same xml layout on all these folders.

Abhishek kumar
  • 4,347
  • 8
  • 29
  • 44
  • So practically the app would then automatically use the necessary xml design based on the current size of the screen of the mobile? – Dranreb Benedicto Jan 30 '18 at 07:55
  • Android Device automatically detect its Screen to fit on Phone you have to only design screens , Multiple Screen (Layouts/Xml) but single java class.Like if you open your app on Tablet tablet will detect tablet layout large and opens. @DranrebBenedicto – Abhishek kumar Jan 30 '18 at 07:59
  • Or you can use Relative Layout on parent but expert suggestion is to design all screens – Abhishek kumar Jan 30 '18 at 08:02
  • Thank you sir. So to summary, I'll have to add the code provided above, design different sizes in xmls, and then when you run it on different screens it would automatically adjusts itself based on what screen size its on? – Dranreb Benedicto Jan 30 '18 at 08:10
  • Thank you sir! @Abhishek. One last thing, I have to manually adjust all the elements inside each xmls right? Like when it's screen size is small, I have to like reduce the sizes of the buttons, labels, etc. so that it'll fit on screen. It's like that? or like I would just copy-paste everything sir?, like same xml design on every sizes – Dranreb Benedicto Jan 30 '18 at 08:16
  • First Design a single Xml and paste it on all the layouts folder and you are right you have to design manually all the screen according to screen size – Abhishek kumar Jan 30 '18 at 08:19
  • Thanks sir! This was very useful! – Dranreb Benedicto Jan 30 '18 at 08:36
2

For Screen Compatibility Issues Try to Use Relative Layout & with Scroll View So To Make your app compatible to Tablet & Horizontal Layout.

Suraj
  • 66
  • 12
1

I had the same issue and I used this library and it did the thing for me.

The thing is you just have to replace sp with ssp in your xml after adding this library in your gradle and you'll be good to go.

Also for width and height I used this library.

Just replace dp scales with sdp.

I've also answered a question like this here aswel, have a look.

3iL
  • 2,146
  • 2
  • 23
  • 47
  • Thank you! This seems interesting! One question sir, how do I use this to my project? I'm really kind of new – Dranreb Benedicto Jan 30 '18 at 07:44
  • You have to copy the dependencies of both the libs in your build.gradle file, then sync the project and then you can use them. – 3iL Jan 30 '18 at 07:50
  • It gives me this error "Gradle sync failed: Could not find method compile() for arguments [com.intuit.ssp:ssp-android:1.0.5] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler. Consult IDE log for more details" – Dranreb Benedicto Jan 30 '18 at 07:53
  • Make sure that you are editing the correct build.gradle file. you can receive this error when editing android/build.gradle rather than android/app/build.gradle – 3iL Jan 30 '18 at 08:02