CODEWITHSUNDEEP
androidandroid-layout
Rufio Rocco
Rufio Rocco

Reputation: 121

Design layout display is not the same

How to edit xml file layout. All display screen is the same.

screen size 4.7", 5.0" display accuracy. But screen other than this. Display Distortion. Except screen tablet.

Help me fix it.

screen_main.xml

<FrameLayout 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"
    tools:context="jp.vertice.test.MainScreenFragment">

    <!-- TODO: Update blank fragment layout -->

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#51c8fc">

        <ImageView
            android:layout_width="200dp"
            android:layout_height="195dp"
            android:id="@+id/imageView2"
            android:src="@mipmap/ic_launcher"
            android:background="#fc0c0c"
            android:layout_marginLeft="18dp"
            android:layout_marginStart="18dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <ImageButton
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/btn1"
            android:layout_alignParentTop="true"
            android:layout_alignLeft="@+id/btn3"
            android:layout_alignStart="@+id/btn3" />

        <ImageButton
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/btn2"
            android:layout_below="@+id/btn1"
            android:layout_alignLeft="@+id/btn1"
            android:layout_alignStart="@+id/btn1" />

        <ImageButton
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/btn5"
            android:layout_below="@+id/btn2"
            android:layout_alignLeft="@+id/imageView2"
            android:layout_alignStart="@+id/imageView2"
            android:layout_marginTop="5dp" />

        <ImageButton
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/btn4"
            android:layout_alignTop="@+id/btn5"
            android:layout_toRightOf="@+id/btn5"
            android:layout_toEndOf="@+id/btn5"
            android:layout_marginLeft="9dp"
            android:layout_marginStart="9dp" />

        <ImageButton
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/btn3"
            android:layout_alignTop="@+id/btn4"
            android:layout_toRightOf="@+id/btn4"
            android:layout_toEndOf="@+id/btn4"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="205dp"
        android:background="#F4F4F4"
        android:layout_gravity="bottom">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="YYYY.MM.DD"
            android:id="@+id/txt1"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="22dp"
            android:layout_marginStart="22dp"
            android:layout_marginBottom="173dp" />

        <TextView
            android:layout_width="230dp"
            android:layout_height="50dp"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
            android:id="@+id/text2"
            android:layout_alignTop="@+id/txt1"
            android:layout_alignLeft="@+id/txt1"
            android:layout_alignStart="@+id/txt1"
            android:layout_marginTop="25dp" />

        <Button
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="BUTTON"
            android:id="@+id/btn6"
            android:layout_marginLeft="11dp"
            android:layout_marginStart="11dp"
            android:layout_alignTop="@+id/text2"
            android:layout_toRightOf="@+id/text2"
            android:layout_toEndOf="@+id/text2" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="20dp"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="FOOTER"
            android:id="@+id/textView2"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:textSize="10sp"
            android:textStyle="bold"
            android:textAlignment="center"
            android:gravity="center_vertical"
            android:background="#FFFFFF" />

    </RelativeLayout>
</FrameLayout>

Display is not the same

Upvotes: 1

Views: 83

Answers (4)

miva2
miva2

Reputation: 2151

I see you are using fixed dp values for layout_width and layout_height. dp means density independent pixel. It is not a size independent pixel. The dp makes sure your layout looks the same on devices with the same size, but different pixel density. It will not look the same on bigger devices. If you want it to scale to larger devices you will have to use match_parent and wrap_content. Use the power of the relative layout to place items on the right side of the screen also.

You can also make separate layout files for differently sized devices. So you can customise it depending on the size. You do this by making a new layout folder named for example layout-sw600dp/ (or any number you want) which will only be used on devices that have at least the width you specified (so 600dp in this example). Make sure your layout file has the same name in this folder as in the normal folder.

You can find very useful information about this in the documentation: here and here.

Upvotes: 1

user6122855
user6122855

Reputation:

Don't use Frame Layout here because Frame Layout used to show single view.

Upvotes: 1

Master Fathi
Master Fathi

Reputation: 349

you can't work with dp and expect the same result on different if you want same display for all the devices you can work with weightSum and weight here is a little example

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="2">


        <LinearLayout
            android:id="@+id/layout1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <LinearLayout
            android:id="@+id/layout2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
</LinearLayout>

Upvotes: 0

Noelia K
Noelia K

Reputation: 1

You can try using a GridLayout. This way, the image columns will fill the whole screen.

Upvotes: 0

Related Questions