0

I've made an android app and spent quite a bit of time making it fit perfectly on my screen (specifically part marked as "this part" on xml). To my surprise, everything appears out of place in other screens. How do I make sure that it looks the same in all screens?

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:background="@drawable/wood"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.luanca.charangomaster.ChordActivity"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <TextView
                android:id="@+id/chordintip"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/choose_root" />

            <Button
                android:id="@+id/chordin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/dark_plank"
                android:text=""
                android:textColor="#ffffff" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/emptymiddle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">
        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_toRightOf="@+id/emptymiddle"
            android:layout_weight="1">

            <TextView
                android:id="@+id/chordintip2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/choose_type" />

            <Button
                android:id="@+id/chordin2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/dark_plank"
                android:text=""
                android:textColor="#ffffff" />
        </LinearLayout>

    </LinearLayout>

    <TextView
        android:id="@+id/tip1"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:gravity="center"
        android:text="@string/help" />

    <!--This part doesn't fill all screens -->

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:scaleType="fitCenter"
            android:src="@drawable/chord_box1"
            />

        <LinearLayout
            android:id="@+id/tabgrid"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignBottom="@+id/imageView1"
            android:layout_alignTop="@+id/imageView1"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:weightSum="10" >



            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="horizontal"></LinearLayout>

            <LinearLayout
                android:id="@+id/firstrow"
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:layout_weight="1.15"
                android:gravity="center_horizontal"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/empty1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text=""
                    android:visibility="invisible" />

                <TextView
                    android:id="@+id/fretposition1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="1"
                    android:textColor="#000000"/>

                <TextView
                    android:id="@+id/fretposition2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="2"
                    android:textColor="#000000"/>

                <TextView
                    android:id="@+id/fretposition3"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="3"
                    android:textColor="#000000"/>

                <TextView
                    android:id="@+id/fretposition4"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="4"
                    android:textColor="#000000"/>

                <TextView
                    android:id="@+id/fretposition5"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="5"
                    android:textColor="#000000"/>

                <Button
                    android:id="@+id/empty2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Button"
                    android:visibility="invisible" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:layout_alignTop="@+id/firstrow"
                android:layout_weight="1.15"
                android:gravity="center_horizontal"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/empty4"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.55"
                    android:text=""
                    android:visibility="invisible" />

                <Button
                    android:id="@+id/fret10"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="-20dp"
                    android:layout_weight="1"
                    android:background="@drawable/no_press1"
                    android:text=""
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret11"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="1"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret12"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="2"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret13"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="3"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret14"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="4"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret15"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="1"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/empty3"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Button"
                    android:visibility="invisible" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_weight="1.15"
                android:gravity="center_horizontal"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/empty5"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.55"
                    android:text=""
                    android:visibility="invisible" />

                <Button
                    android:id="@+id/fret20"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="-20dp"
                    android:layout_weight="1"
                    android:background="@drawable/no_press1"
                    android:text=""
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret21"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="1"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret22"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="2"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret23"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="3"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret24"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="4"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret25"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="1"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/empty6"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Button"
                    android:visibility="invisible" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_weight="1.15"
                android:gravity="center_horizontal"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/empty7"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.55"
                    android:text=""
                    android:visibility="invisible" />

                <Button
                    android:id="@+id/fret30"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="-20dp"
                    android:layout_weight="1"
                    android:background="@drawable/no_press1"
                    android:text=""
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret31"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="1"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret32"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="2"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret33"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="3"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret34"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="4"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret35"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="1"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/empty8"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Button"
                    android:visibility="invisible" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_weight="1.15"
                android:gravity="center_horizontal"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/empty9"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.55"
                    android:text=""
                    android:visibility="invisible" />

                <Button
                    android:id="@+id/fret40"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="-20dp"
                    android:layout_weight="1"
                    android:background="@drawable/no_press1"
                    android:text=""
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret41"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="1"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret42"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="2"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret43"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="3"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret44"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="4"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret45"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="1"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/empty10"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text=""
                    android:visibility="invisible" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:layout_marginBottom="10dp"
                android:layout_weight="1.15"
                android:gravity="center_horizontal"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/empty11"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.55"
                    android:text=""
                    android:visibility="invisible" />

                <Button
                    android:id="@+id/fret50"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="-20dp"
                    android:layout_weight="1"
                    android:background="@drawable/no_press1"
                    android:text=""
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret51"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="1"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret52"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="2"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret53"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="3"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret54"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="4"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/fret55"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/finger1"
                    android:text="1"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/empty12"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text=""
                    android:visibility="invisible" />
            </LinearLayout>

            <Button
                android:id="@+id/empty13"
                android:layout_width="0dp"
                android:layout_height="10dp"
                android:layout_weight="1.15"
                android:text=""
                android:visibility="invisible" />
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:id="@+id/radioButton"
            android:clickable="false"
            android:checked="false"
            android:visibility="gone" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:id="@+id/radioButton2"
            android:clickable="false"
            android:visibility="gone" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:id="@+id/radioButton3"
            android:clickable="false"
            android:visibility="gone" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:id="@+id/radioButton4"
            android:clickable="false"
            android:visibility="gone" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:id="@+id/radioButton5"
            android:clickable="false"

            android:visibility="gone" />
    </LinearLayout>

</LinearLayout>

My drawables:

enter image description here

Marshall
  • 1,353
  • 3
  • 17
  • 38
  • 3
    making it fit perfectly **on my** screen. Did you set up different emulators with different screen resolutions and densities? Have you read [this](http://developer.android.com/training/multiscreen/screensizes.html)? – Phantômaxx Dec 31 '14 at 11:58
  • 1
    You should understand different layouts first, please go through android website and layout part, because you have used linear layout and relative layout properties – Android Noob Dec 31 '14 at 12:08

2 Answers2

1

You have to create different layouts (.xmls) for different different screen resolutions and place it in layout folder accordingly 

res/layout/my_layout.xml             // layout for normal screen size ("default")
res/layout-small/my_layout.xml       // layout for small screen size
res/layout-large/my_layout.xml       // layout for large screen size
res/layout-xlarge/my_layout.xml      // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation

Or else you have to create layout without hardcoded heights or widths and with the help of scrollViews you can access that view

Android Noob
  • 621
  • 8
  • 18
1

You can move all your dp values to dimen.xml, dimen.xml(large), etc. , and set different values for all screensizes.

Max Makeichik
  • 227
  • 4
  • 18