Home > DeveloperSection > Articles > Responsive layout in Android

Responsive layout in Android


Android Android  Responsive Design 
Ratings:
0 Comment(s)
 1091  View(s)
Rate this:

Responsive layout in Android


Android does not provide Responsive layout. You have need to create different layout for supporting all the screens.

If you would want to display same number of buttons in all screens then I would suggest you to prepare different set of images/drawables and include them in your project. Here you don't need to do anything other than placing images in particular drawable folders.

Android provides drawable folder. A Drawable resource is a general concept for a graphic which can be drawn. The simplest case is a graphical file (bitmap), which would be represented in Android via a BitmapDrawable class. Every Drawable is stored as individual files in one of the res/drawable folders.

drawable-ldpi-: By default android takes drawable images or files from this folder. It also supporting for lower density screen.

Drawable-mdpi-: For supporting medium density screens.

drawable-hdpi-: For supporting higher density screen.

drawable-xhdpi-: This folder supports for extra higher density screen.

drawable-xxhdpi-: This drawable folder support extra extra higher density screens.

You can also add folder for different layout. i.e

Here I am creating a sample ui of calculator for different – different screens

On default layout folder (layout/activity_main.xml)

<LinearLayout 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"

    android:gravity="center"

    android:orientation="vertical"

    tools:context=".MainActivity" >

 

    <EditText

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginBottom="30sp"

        android:layout_marginLeft="10sp"

        android:layout_marginRight="10sp"

        android:hint="Enter Value" />

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".50"

            android:text="C" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="+" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".25"

            android:text="-" />

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="1" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="2" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="3" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".25"

            android:text="/" />

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="4" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="5" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="6" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".25"

            android:text="*" />

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="7" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="8" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="9" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".25"

            android:text="=" />

    </LinearLayout>

 

</LinearLayout>

On layout-landscappe mode (res/layout-land/activity.xml)

<LinearLayout 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"

    android:orientation="vertical"

    tools:context=".MainActivity" >

 

    <EditText

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginLeft="10sp"

        android:layout_marginRight="10sp"

        android:layout_marginTop="15sp"

        android:hint="Enter Value" />

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="30sp"

        android:orientation="horizontal" >

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="1" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="2" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="3" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".17"

            android:text="C" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="+" />

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="4" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="5" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="6" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".17"

            android:text="-" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="*" />

    </LinearLayout>

 

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="7" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="8" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".16"

            android:text="9" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_marginRight="2dp"

            android:layout_weight=".17"

            android:text="/" />

 

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_marginLeft="3sp"

            android:layout_weight=".17"

            android:text="=" />

    </LinearLayout>

 

</LinearLayout>

 

You can create layout on layout-large and layout-large-land folder for large screen.

Now see calculator layout

For android device

 

    

On device landscape

 

On android tab

 


Don't want to miss updates? Please click the below button!

Follow MindStick