Adam J
Adam J

Reputation: 1450

Android: Adapting app to small screens with layouts including other layouts

I finished my app with all my xml layouts in the "layout" folder, which is used by normal-sized screens. So now I am starting with small screens and create a folder called "layout-small" right under the "layout" folder in "res".

I did some modifications in the smaller layout with smaller buttons and margins and then tried to running it on a normal screen and a small screen to see if each screen would use the layout it should, but both use the normal layout. The small screen doesn't use the small layout.

I believe this is due to the fact that the Java class that uses the setContent() method uses a layout which in turn includes another layout which also includes a third layout.

Here is my code for more clarity. The 3 activity_main.xml app_bar_main.xml and content_main.xml layout files are in res/layout and res/layout-small as well, with differences in button sizes only in content_main.xml.

Home.java :

public class Home extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

/**fields*/
private Button butVentes, butLocations, butRecherche, butFavoris, butContact, butSocial;   //Buttons for home screen
private Toolbar toolbar;
private DrawerLayout drawer;
private NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().setFormat(PixelFormat.RGBA_8888);
    setContentView(R.layout.activity_main);

    /**toolbar*/
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    /**drawer*/
    drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.addDrawerListener(toggle);
    toggle.syncState();

    /**navigationView*/
    navigationView = (NavigationView) findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);
}

/*...*/

}

activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

app_bar_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivities.Home">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />

content_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/home_background_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/app_accueil_background"
android:orientation="horizontal"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivities.Home"
tools:showIn="@layout/app_bar_main">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center|bottom"
    android:layout_marginBottom="40dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="240dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/buttonVentes"
            android:layout_width="60dp"
            android:layout_height="48dp"
            android:layout_marginRight="5dp"
            android:background="@drawable/circle"
            android:drawableTop="@drawable/ic_view_list"
            android:paddingTop="10dp"
            android:text="@string/content_main_vente"
            android:textColor="@color/colorBlackText"
            android:textSize="13sp" />

        <Button
            android:id="@+id/buttonLocations"
            android:layout_width="60dp"
            android:layout_height="48dp"
            android:layout_marginRight="5dp"
            android:background="@drawable/circle"
            android:drawableTop="@drawable/ic_view_list"
            android:paddingTop="10dp"
            android:text="@string/content_main_location"
            android:textColor="@color/colorBlackText"
            android:textSize="13sp" />

        <Button
            android:id="@+id/buttonRecherche"
            android:layout_width="60dp"
            android:layout_height="48dp"
            android:background="@drawable/circle"
            android:drawableTop="@drawable/ic_search"
            android:paddingTop="10dp"
            android:text="@string/content_main_recherche"
            android:textColor="@color/colorBlackText"
            android:textSize="13sp" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/buttonFavoris"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:layout_marginRight="14dp"
            android:background="@drawable/circle"
            android:drawableTop="@drawable/ic_star_accueil"
            android:paddingTop="10dp"
            android:text="@string/content_main_favoris"
            android:textColor="@color/colorBlackText"
            android:textSize="13sp" />

        <Button
            android:id="@+id/buttonContact"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:layout_marginRight="14dp"
            android:background="@drawable/circle"
            android:drawableTop="@drawable/ic_contacts"
            android:paddingTop="10dp"
            android:text="@string/content_main_contact"
            android:textColor="@color/colorBlackText"
            android:textSize="13sp" />

        <Button
            android:id="@+id/buttonSocial"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="@drawable/circle"
            android:drawableTop="@drawable/ic_share"
            android:paddingTop="10dp"
            android:text="@string/content_main_social"
            android:textColor="@color/colorBlackText"
            android:textSize="13sp" />


    </LinearLayout>

</LinearLayout>

Upvotes: 0

Views: 232

Answers (1)

Kumar Kalluri
Kumar Kalluri

Reputation: 513

instead of creating other layout folders, just maintain different dimension folders like :
values-sw320dp - 1dp
values-sw360dp - 1.12dp
values-sw410dp - 1.28dp
values-sw480dp - 1.5dp

Upvotes: 1

Related Questions