Supporting different screen sizes

Question

My UI fits my virtual device fine but when I run the app on my phone, the UI is too wide and I lose a portion off the RHS of my device.

I read this article;(https://developer.android.com/training/multiscreen/screensizes.html) It talks of using a constraint layout but before I go and make wholesale changes to my XML, can anyone see any glaring flaws?

<RelativeLayout 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="horizontal"
    tools:context="com.example.wbc.TabFragment0"
    android:id="@+id/frag7"
    android:padding="5dp">

    <TextView
        android:id="@+id/todayDate0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:textSize="25sp"/>


    <TableLayout
        android:id="@+id/tab_layout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/todayDate0">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp">

            <TextView
                android:id="@+id/rink1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="1"
                android:textSize="30sp" />

            <Button
                android:id="@+id/twelve7R1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="bookRink"
                android:tag="7112"
                android:text="12:00"
                tools:ignore="OnClick" />

            <Button
                android:id="@+id/two7R1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="bookRink"
                android:tag="7114"
                android:text="14:00"
                tools:ignore="OnClick" />

            <Button
                android:id="@+id/four7R1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="bookRink"
                android:tag="7116"
                android:text="16:00"
                tools:ignore="OnClick" />

            <Button
                android:id="@+id/six7R1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="bookRink"
                android:tag="7118"
                android:text="18:00"
                tools:ignore="OnClick" />
        </TableRow>


    </TableLayout>
</RelativeLayout>

Can you edit your question and show how your UI looks right now? Any details regarding your problem will be appreciated. People generally don't have time to try out layouts on their machines, so at least I'll be better able to assist you if you add atleast a picture showing how your UI looks currently and how you want it to look. — Vedprakash Wagh, Jun 03 '19 at 19:54
A picture would help, but I don't see any large wastes of space or mistakes here, other than some REALLY big text sizes. 30 sp is huge. A constraint layout isn't going to help, unless you're ok with cutting off text. — Gabe Sechan, Jun 03 '19 at 20:06

score 0 · Answer 1 · answered Jun 03 '19 at 20:06

Please post the picture which shows the desired result for your Layout File, Here I assumed the result layout as in the Image.

Result Layout

I used ConstraintLayout which can adjust the Views at runtime, This helps the device to adjust the layout according to any device screen size

ConstraintLayout as per Google

<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"
android:orientation="horizontal"
android:id="@+id/frag7"
android:padding="5dp">

<TextView
    android:id="@+id/todayDate0"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:textSize="25sp"
    android:text="Today's Date 4.06.19"
    app:layout_constraintEnd_toEndOf="@+id/tab_layout1"
    app:layout_constraintStart_toStartOf="@+id/tab_layout1"
    app:layout_constraintTop_toTopOf="parent" />


<TableLayout
    android:id="@+id/tab_layout1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_below="@+id/todayDate0"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.307"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/todayDate0">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">

        <TextView
            android:id="@+id/rink1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="1"
            android:textSize="30sp" />

        <Button
            android:id="@+id/twelve7R1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="bookRink"
            android:tag="7112"
            android:text="12:00"
            tools:ignore="OnClick" />

        <Button
            android:id="@+id/two7R1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="bookRink"
            android:tag="7114"
            android:text="14:00"
            tools:ignore="OnClick" />

        <Button
            android:id="@+id/four7R1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="bookRink"
            android:tag="7116"
            android:text="16:00"
            tools:ignore="OnClick" />

        <Button
            android:id="@+id/six7R1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="bookRink"
            android:tag="7118"
            android:text="18:00"
            tools:ignore="OnClick" />
    </TableRow>


</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

score 0 · Answer 2 · answered Jun 05 '19 at 18:24

0

Thank you for your posts, for whatever reason, it is now working as it should, I have made no changes other than to reload the APK onto my phone....apologies for wasting your time.

answered Jun 05 '19 at 18:24

SteveC

53
1
7

Supporting different screen sizes

2 Answers2