Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android layouts for different screen sizes

I am struggling for layouts for an Android app. I have defined different layouts for different screen sizes and the current layout directory structure is something like this:

  • layout
  • layout-land
  • layout-small
  • layout-xlarge
  • layout-xlarge-land

Problem

The main layout directory files are being displayed for 3.7 to 7.0 which is a very broad range. And text overlap on small screens and if I adjust on small; it becomes very tiny on the large screen.

According to me, the layout small files should be rendered for smaller screens but those files are only rendered for android wear devices.

layout-xlarge seems to work for Nexus 9 to Nexus 10

I want to know, how can I define the different layout for 3.7-5.0 and 5.0-7.0 screen sizes.

like image 337
Alena Avatar asked Jul 07 '17 04:07

Alena


People also ask

How do I make my layout different screen sizes?

The best way to create a responsive layout is to use ConstraintLayout as the base layout in your UI. ConstraintLayout enables you to specify the position and size of each view according to spatial relationships with other views in the layout. All the views can then move and resize together as the screen size changes.

How do I set Android layout to support all screen sizes?

Use “wrap_content” and “match_parent” To ensure that your layout is flexible and adapts to different screen sizes, you should use "wrap_content" and "match_parent" for the width and height of some view components.

How would you ensure the application you're designing will scale to fit multiple screen sizes?

To ensure that your layout is flexible and adapts to different screen sizes, you should use "wrap_content" and "match_parent" for the width and height of some view components.


1 Answers

The answer is already given by user5594218 but looks like you are still unclear. (maybe you are beginner)

So, here is the step by step guideline

Solution 1: (short and simple)

  1. Navigate to app > src > main > res

  2. Duplicate layout directory by copying and pasting

  3. Rename duplicated Directories e.g layout-sw300dp

Solution 2: (bit lengthy)

  1. Create new resource directory: res > New > Android resource directory

Create new resource directory

  1. Select Resource Type as layout

  2. Add sw<N>dp in Directory name e.g layout-sw300dp and Hit OK

enter image description here

  1. Navigate to app > src > main > res

  2. Copy layouts XML file inside new directory

    //repeat process for other qualifiers
    

List of Qualifiers to support all screens:

  • layout-sw300dp
  • layout-sw330dp
  • layout-sw480dp
  • layout-sw600dp
  • layout-sw720dp

Testing:

This is how it gonna look like, if you did it right. enter image description here

For more detail and examples, check: Android Application Development All-in-One For Dummies

like image 103
Atlas_Gondal Avatar answered Oct 13 '22 18:10

Atlas_Gondal