How to make responsive Android application which is used in mobile and also in tablet?

Question

I have created one Android application.

When I run my application in Mobile Phone it works very well, but when I run in Tablet the layout of application is changed.

So, how to make responsive Android application which is used in Mobile and also in Tablet?

Answer 1

You have to create layout for different screen sizes as creating a single design layout and hoping that it would work and look good on all screen size is next to impossible

As defined in android docs for supporting multiple screen sizes we need to focus on using 3 things.

1. using more Constraint Layout as it provide us with using more relative styling as compared to other layout component
2. Create alternate layout using qualifiers in android studio
3. use bitmaps or svg component that could stretch without being blurred.

ConstraintLayout It supports things like percentage values,now combine those with guidelines it becomes a powerful tool for designing layout

Alternate Layout In the layout design tab of android studio click orientation change icon then select create other... options from the dropdown list . Now you need to select qualifier from the provided list and create layout relative to different screen sizes without the need of extra code to write for showing those layout. Those layout would appear when a provided qualifier layout design matches.

You could follow the link provided above to see how they used smallest width qualifier with values

320dp: a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).
480dp: a large phone screen ~5" (480x800 mdpi).
600dp: a 7” tablet (600x1024 mdpi).
720dp: a 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc).

These are the commonly used custom values that covers nearly all device sizes, you could add more refined sizes according to your need and then you could also add different orientation qualifiers too with addition to smallest width qualifiers.

Combination of all those would make your application completely responsive

I know i am answering to an old question but may be my answers helps other in search of similar query with a recent available solution.

Answer 2

@Sagar Zala

Try to use constraint layout as parent view for your layout which will help to make your application responsive for phone and device.

Constraint Layout

Answer 3

On Android we can use screen size selector, introduced from Android 3.2, to define which layout to use. More details available at http://android-developers.blogspot.in/2011/07/new-tools-for-managing-screen-sizes.html. Following code snippet has been extracted from the same link :

public class MyActivity extends Activity 
{
    @Override protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate();
        Configuration config = getResources().getConfiguration();
        if (config.smallestScreenWidthDp >= 600) 
        {
            setContentView(R.layout.main_activity_tablet);
        } 
        else 
        {
            setContentView(R.layout.main_activity);
        }
    }
}

Another good reference for size configuration is keeping separator. This is explain in details at : http://www.vanteon.com/downloads/Scaling_Android_Apps_White_Paper.pdf

Answer 4

I am only talkin about Mobile Responsive Design. With layouts, I believe you can only current differentiate by the following:

res/layout/my_layout.xml            // layout for normal screen size
res/layout-small/my_layout.xml      // layout for small screen size
res/layout-large/my_layout.xml      // layout for large screen size
res/layout-large-land/my_layout.xml // layout for large screen size in landscape mode

You can find more info on what you can add to the folder structure to differentiate between different settings Documentation and android-developers.blogspot

In order to accommodate other types of tablets and screen sizes android introduces a new way to specify resources for more discrete screen sizes. The new technique is based on the amount of space your layout needs (such as 600dp of width), rather than trying to make your layout fit the generalized size groups (such as large or xlarge).

Update: There are essentially two ways you can give your audience a good experience utilizing responsive design:

1. Optimize the layout of your content.

2. Adapt the content that’s shown.

Update2: Write this code in your activity

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);

if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
    setContentView(R.layout.landscapeView);

} else {
    setContentView(R.layout.portraitView);
}

And also add this line in your Manifest file

android:configChanges="orientation|keyboardHidden|screenSize"

So this will handle both things, it will not restart your activity and will load the layout as per your orientation changes. For more information go to http://www.codeproject.com/Articles/422431/Handling-screen-layout-changes-in-Android