0

So, after days of trying, I simply can't find the solution to this, I already asked this in one question, but as someone said to me there, I didn't formulate my question well.

How can I make my simple app look good on all screens, I have some screenshots to show you what is bothering me:

When i run my app on emulator on screen: 1440x2560:560dpi 5.5" it looks fine:

Success Screenshot

But when I run it on 480x800:hdpi 4" it looks like this:

Failure Screenshot

or if I set android:layout_below="@id/containerLayout" than my seek bars and textviews above them just go down, offscreen (i can see first seek bar and others are pushed below visible part of the "container")

Here is my code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:background="@drawable/background"
    tools:context="com.myapp.MainActivity">

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <RelativeLayout
            android:id="@+id/logoLayout"
            android:layout_width="match_parent"
            android:layout_height="110dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="10dp"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="8dp">

            <ImageView
                android:id="@+id/logo"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/logo"/>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/containerLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/buttonsLayout"
            android:layout_below="@+id/logoLayout"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="10dp"
            android:background="@drawable/container">

            <LinearLayout
                android:id="@+id/layoutSaDataText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/tutorialImage"
                android:layout_alignParentTop="true"
                android:layout_margin="20dp"
                android:gravity="top"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/datatext1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAllCaps="false"
                    android:textColor="@color/whiteDark"
                    android:textSize="19sp"
                    android:textStyle="italic"/>

                <TextView
                    android:id="@+id/datatext3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAllCaps="false"
                    android:textColor="@color/whiteDark"
                    android:textSize="16sp"/>

                <TextView
                    android:id="@+id/datatext2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAllCaps="false"
                    android:textColor="@color/whiteDark"
                    android:textSize="16sp"/>

                <TextView
                    android:id="@+id/datatext4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAllCaps="false"
                    android:textColor="@color/whiteDark"
                    android:textSize="16sp"/>

                <TextView
                    android:id="@+id/datatext5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAllCaps="false"
                    android:textColor="@color/whiteDark"
                    android:textSize="16sp"/>

            </LinearLayout>

            <ImageView
                android:id="@+id/tutorialImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/logoLayout"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="70dp"
                android:layout_marginTop="25dp"
                app:srcCompat="@drawable/usagetutorial"
                tools:ignore="NotSibling"/>

            <ProgressBar
                android:id="@+id/loadingbar"
                style="?android:attr/progressBarStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:indeterminate="true"
                android:indeterminateTint="@color/progressBar"
                android:indeterminateTintMode="src_atop"
                />

            <LinearLayout
                android:id="@+id/layoutSaSeekerima"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="25dp"
                android:layout_marginEnd="25dp"
                android:layout_marginStart="25dp"
                android:gravity="bottom"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/playerLvlSeekerText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:gravity="center"
                    android:text="data 1"
                    android:visibility="gone"/>

                <SeekBar
                    android:id="@+id/playerLvlSeeker"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="7dp"
                    android:max="250"
                    android:visibility="gone"/>


                <TextView
                    android:id="@+id/townHallLvlSeekerText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:gravity="center"
                    android:text="data 2"
                    android:visibility="gone"/>

                <SeekBar
                    android:id="@+id/townHallLvlSeeker"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="7dp"
                    android:max="11"
                    android:visibility="gone"/>

                <TextView
                    android:id="@+id/trophiesCountSeekerText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:gravity="center"
                    android:text="data 3"
                    android:visibility="gone"/>

                <SeekBar
                    android:id="@+id/trophiesCountSeeker"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="7dp"
                    android:max="100"
                    android:visibility="gone"/>

                <TextView
                    android:id="@+id/warStarsWonSeekerText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:gravity="center"
                    android:text="data 4"
                    android:visibility="gone"/>

                <SeekBar
                    android:id="@+id/warStarsWonSeeker"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="7dp"
                    android:max="100"
                    android:visibility="gone"/>
            </LinearLayout>

            <RelativeLayout
                android:id="@+id/usernameInputLayout"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_alignParentBottom="true"
                android:layout_marginEnd="25dp"
                android:layout_marginStart="25dp">

                <TextView
                    android:id="@+id/playertagbelow"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_centerInParent="false"
                    android:layout_centerVertical="false"
                    android:text="insert your data below"
                    android:textAllCaps="true"
                    android:textColor="@android:color/darker_gray"/>

                <EditText
                    android:id="@+id/usernameInput"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_centerInParent="false"
                    android:layout_centerVertical="false"
                    android:ems="10"
                    android:hint="82VPLR89"
                    android:inputType="textPersonName"/>

            </RelativeLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/buttonsLayout"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:layout_alignParentBottom="true"
            >

            <Button
                android:id="@+id/button2"
                android:layout_width="200dp"
                android:layout_height="70dp"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_centerInParent="false"
                android:layout_marginBottom="15dp"

                android:backgroundTint="@android:color/holo_green_dark"
                android:elevation="0dp"
                android:text="proceed"
                android:textSize="19sp"/>

            <Button
                android:id="@+id/button1"
                android:layout_width="200dp"
                android:layout_height="70dp"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_centerInParent="false"
                android:layout_marginBottom="15dp"

                android:backgroundTint="@android:color/holo_green_dark"
                android:elevation="0dp"
                android:text="verify user"
                android:textSize="17sp"/>
        </RelativeLayout>

    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

Is there a solution to make my seek bars and everything resize according to screen size, or only solution is to make separated layouts for every screen (small, normal, large)?

I lost days trying to figure this out, I am not using pixels at all, everything is dp and math content/parent.. and still the problem persists.

Thanks in forward! And sorry for long code and not the best English :)

guipivoto
  • 18,327
  • 9
  • 60
  • 75
Stefan Tapi Krstić
  • 25
  • 7
  • I think this can [answer](https://stackoverflow.com/questions/8255985/how-to-support-different-screen-size-in-android) your problem. –  Oct 09 '17 at 20:14

3 Answers3

1

So after days and days of trying to find the solution, i found it by accident.. But that's the best way to learn :D

Solution was to set layout weights for Text-Views and Seek-Bars inside Linear Layout properly

android:layout_weight="1"

and to put Linear Layout gravity to center

android:gravity="center"

My objects (Text-Views and Seek-Bars) don't go off-screen anymore, they just resize properly to fit the Layout/screen

Stefan Tapi Krstić
  • 25
  • 7
0

do you have your layout folders set correctly, such as layout,layout-small, layout, and layout-large????'

heres an example Android XML Layout for all Devices (Small/Normal/Large/XLarge, etc)

sdfbhg
  • 109
  • 5
  • I did not, since i asked a question few days ago: https://stackoverflow.com/questions/46608434/how-to-make-app-work-on-all-screens-greater-than-hdpi And the guys told me that i am probbably doing to much, that i need to make it look good without making separate layouts.. So i asked again here is there any way to do it without making Small/Normal/Large/XLarge, etc.. Its not hard for me to make layouts for every screen size, just i thought maybe thats the wrong solution, that there is a way to do it correct without layout folders.. – Stefan Tapi Krstić Oct 09 '17 at 20:18
  • Nope no other way to do it without layout folders, density pixels wont work either it just wont look right on all devices you need the different folders and size it out right on each. – sdfbhg Oct 09 '17 at 20:20
0

Remove all the layouts you have (except Constraint layout) and put everything in place with:

    android:layout_width="0dp"
    android:layout_height="0dp"

and appropriate constraints (+margins)

Shmuel
  • 488
  • 1
  • 6
  • 18