Reputation: 157

Android: UIdesign

I have problem with UI design in android. I try to put a button at the bottom of my Fragment and I set it by putting 60dp margin from top elements.

It is in a good position in my emulator in IDE , but when I run my project in my phone the button go out of the screen.

emulator device : pixel 2 my device phone : s8

<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=".sabtHazine" android:layout_weight="1"
             android:background="@android:color/holo_blue_light">


        <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent" android:background="@android:color/holo_purple"
                android:padding="3dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true"
                android:paddingBottom="0dp">
            <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                <EditText
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:inputType="textPersonName"
                        android:text="Name"
                        android:ems="10"
                        android:id="@+id/editText" android:layout_weight="1"/>
                <TextView
                        android:text="مبلغ"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" android:id="@+id/textView" android:layout_weight="1"/>
            </LinearLayout>
            <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                <EditText
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:inputType="textPersonName"
                        android:text="Name"
                        android:ems="10"
                        android:id="@+id/editText" android:layout_weight="1"/>
                <TextView
                        android:text="بابت"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" android:id="@+id/textView" android:layout_weight="1"/>
            </LinearLayout>
            <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                <EditText
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:inputType="textPersonName"
                        android:text="Name"
                        android:ems="10"
                        android:id="@+id/editText2" android:layout_weight="1"/>
                <TextView
                        android:text="تاریخ"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" android:id="@+id/textView2" android:layout_weight="1"/>
            </LinearLayout>
            <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" android:gravity="right" android:layout_marginBottom="150dp">
                <TextView
                        android:text="مشترک با"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" android:id="@+id/textView" android:layout_weight="1"/>
                <LinearLayout
                        android:orientation="horizontal"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" android:layout_weight="1">
                    <CheckBox
                            android:text="CheckBox"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content" android:id="@+id/checkBox" android:layout_weight="1"/>
                    <CheckBox
                            android:text="CheckBox"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content" android:id="@+id/checkBox8" android:layout_weight="1"/>
                    <CheckBox
                            android:text="CheckBox"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content" android:id="@+id/checkBox7" android:layout_weight="1"/>
                </LinearLayout>
                <LinearLayout
                        android:orientation="horizontal"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" android:layout_weight="1">
                    <CheckBox
                            android:text="CheckBox"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content" android:id="@+id/checkBox8" android:layout_weight="1"/>
                    <CheckBox
                            android:text="CheckBox"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content" android:id="@+id/checkBox6" android:layout_weight="1"/>
                </LinearLayout>
            </LinearLayout>
            <Button
                    android:text="ثبت هزینه"
                    android:layout_width="match_parent"
                    android:layout_height="80dp" android:id="@+id/button3" tools:layout_editor_absoluteY="415dp"
                    tools:layout_editor_absoluteX="67dp" android:textSize="30sp"
                    android:textColor="@android:color/holo_green_light" android:background="#1b0387"
                    android:layout_alignParentStart="true" android:layout_alignParentBottom="true"
                    android:gravity="center" android:layout_marginTop="150dp" android:layout_marginBottom="0dp"/>
        </LinearLayout>

</FrameLayout>

Any help would be appreciated, Thanks.

Upvotes: 1

Answers (3)

Bayar Şahintekin

Reputation: 447

You should use ConstraintLayout for the best UI design.

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="60dp"
        android:background="@android:color/holo_purple"
        android:orientation="vertical"
        android:padding="3dp"
        android:paddingBottom="0dp"
        app:layout_constraintBottom_toTopOf="@+id/button3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

            <EditText
                android:id="@+id/editText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:ems="10"
                android:inputType="textPersonName"
                android:text="Name" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="مبلغ" />
        </LinearLayout>

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

            <EditText
                android:id="@+id/editText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:ems="10"
                android:inputType="textPersonName"
                android:text="Name" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="بابت" />
        </LinearLayout>

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

            <EditText
                android:id="@+id/editText2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:ems="10"
                android:inputType="textPersonName"
                android:text="Name" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="تاریخ" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="150dp"
            android:gravity="right"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="مشترک با" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal">

                <CheckBox
                    android:id="@+id/checkBox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="CheckBox" />

                <CheckBox
                    android:id="@+id/checkBox8"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="CheckBox" />

                <CheckBox
                    android:id="@+id/checkBox7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="CheckBox" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal">

                <CheckBox
                    android:id="@+id/checkBox8"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="CheckBox" />

                <CheckBox
                    android:id="@+id/checkBox6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="CheckBox" />
            </LinearLayout>
        </LinearLayout>

    </LinearLayout>

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="8dp"
        android:background="#1b0387"
        android:gravity="center"
        android:text="ثبت هزینه"
        android:textColor="@android:color/holo_green_light"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

Upvotes: 1

Faiz Mir

Reputation: 609

Hope this help:

<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"
    android:layout_weight="1"
    android:background="@android:color/holo_blue_light">
    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent" android:background="@android:color/holo_purple"
        android:padding="3dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true"
        android:paddingBottom="0dp">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="textPersonName"
                android:text="Name"
                android:ems="10"
                android:id="@+id/editText" android:layout_weight="1"/>
            <TextView
                android:text="مبلغ"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:id="@+id/textView" android:layout_weight="1"/>
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="textPersonName"
                android:text="Name"
                android:ems="10"
                android:id="@+id/editText" android:layout_weight="1"/>
            <TextView
                android:text="بابت"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:id="@+id/textView" android:layout_weight="1"/>
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="textPersonName"
                android:text="Name"
                android:ems="10"
                android:id="@+id/editText2" android:layout_weight="1"/>
            <TextView
                android:text="تاریخ"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:id="@+id/textView2" android:layout_weight="1"/>
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" android:gravity="right" android:layout_marginBottom="150dp">
            <TextView
                android:text="مشترک با"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:id="@+id/textView" android:layout_weight="1"/>
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="match_parent" android:layout_weight="1">
                <CheckBox
                    android:text="CheckBox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" android:id="@+id/checkBox" android:layout_weight="1"/>
                <CheckBox
                    android:text="CheckBox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" android:id="@+id/checkBox8" android:layout_weight="1"/>
                <CheckBox
                    android:text="CheckBox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" android:id="@+id/checkBox7" android:layout_weight="1"/>
            </LinearLayout>
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="match_parent" android:layout_weight="1">
                <CheckBox
                    android:text="CheckBox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" android:id="@+id/checkBox8" android:layout_weight="1"/>
                <CheckBox
                    android:text="CheckBox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" android:id="@+id/checkBox6" android:layout_weight="1"/>
            </LinearLayout>
        </LinearLayout>
        
          
       
    </LinearLayout>
        <Button
            android:text="ثبت هزینه"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:id="@+id/button3"
            android:textSize="30sp"
            android:layout_alignParentBottom="true"
            android:textColor="@android:color/holo_green_light"
            android:background="#1b0387"
            android:gravity="center"/>
    </RelativeLayout>
</FrameLayout>

Upvotes: 0

ahmad shafizadeh

Reputation: 79

you used 60dp margin but its may that this size is good in that resolution and size which your emulator have (xxhdpi) but your phone is difference (xxxhdpi)

make your layout in hdpi xhdpi xxhdpi xxxhdpi sw600dp and sw720dp size

it will help you to make your layout how work good in other phones

or do other thing like using scrollview or other kind of layout

Upvotes: 0

Android: UIdesign

Answers (3)

Related Questions