javaandroidandroid-layoutandroid-screen-support

Android doesn't resize with different screen layouts

I am trying to resize my layouts, based on which device I am using. I am testing on two differents phones (Samsung Galaxy S8+ and Sony Xperia Z2 (and even two different emulators)).

I've added some code into the Manifest file. I've created different folders with the right (supposedly) names (layout, layout-small, layout-large, layout-xlarge). I put my code into the values folder, file "dimens.xml" and call it from my layouts. But nothing seems to work.

The only time my screens are changing is when I am modifying the corresponding file into the "layout" folder.

I would love any help or advice. Thank you!

I've read many times the documentation on Android Developer and Stack Overflow and I can't seem to find a solution.

Snippet of AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.applicationpro">

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

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />

Snippet of res/layout-large/my_layout.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainLL"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg4"
    android:orientation="vertical"
    tools:context=".activity.LoginActivity">

    <ProgressBar
        android:id="@+id/loginPG"
        android:theme="@style/FragmentsProgressBar"
        style="@style/Widget.AppCompat.ProgressBar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        android:layout_marginTop="100dp"/>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/loginTIY"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_top_large">

            <AutoCompleteTextView
                android:id="@+id/loginTV"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/prompt_login"
                android:maxLines="1"
                android:singleLine="true" />
        </android.support.design.widget.TextInputLayout>

dimens.xml


<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="standard_55">65dp</dimen>
    <dimen name="standard_105">135dp</dimen>
    <dimen name="standard_155">155dp</dimen>

    <!-- Small Dimensions = "Medium Dimensions * 0.75" For Example: 210*.75 = 157.5-->
    <dimen name = "margin_top_small">150dp</dimen>

    <!-- Medium Dimensions -->
    <dimen name = "margin_top_medium">200dp</dimen>


    <!-- Large Dimensions = "Medium Dimensions * 1.5" For Example: 210*1.5 = 315 -->
    <dimen name = "margin_top_large">300dp</dimen>


    <!-- XLarge Dimensions = "Medium Dimensions * 2" For Example: 210*1.5 = 420 -->
    <dimen name = "margin_top_xLarge">400dp</dimen>

</resources>
Solution

  • TL;DR This is another approach using ConstraintLayout and not a single layout for every screen size

    You can support different screen sizes by using ConstraintLayout:

    ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

    You can use those attributes to specify your views size in precents:

    app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"

    For example, single button that is equal to 50% of the screen both in height and width:

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  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">


<Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent=".5"
    app:layout_constraintHeight_percent=".5"/>

</androidx.constraintlayout.widget.ConstraintLayout>

    And it will look something like this:

    enter image description here

    I can recommend using ConstraintLayout with guidelines and Chains to support different screen sizes (In addition to what I mentioned above - app:layout_constraintWidth_percent and app:layout_constraintHeight_percent).

    At first look this may look like a lot of work and some may wonder if this is really worth the effort but here is why I believe ConstraintLayout is the proper way to build your UI: