Hasan A Yousef
Hasan A Yousef

Reputation: 25008

How can I fix the button alignment to have same appearance in different screens

I've the below layout, but the buttons I made in a line are not represented properly from a screen to another:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:card_view="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_margin="8dp">

    <Spinner/>
    <EditText/>

    <LinearLayout android:orientation="horizontal"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content">
            <Button
                    android:text="Update notes"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:id="@+id/button" android:layout_marginLeft="-8dp"/>
        <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/sym_action_call"
                android:id="@+id/dialBtn"/>

        <ImageButton
                    android:layout_centerInParent="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_mylocation"
                    android:id="@+id/locationBtn"/>
        <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_send"
                android:id="@+id/whasappBtn"/>

            <Button
            android:text="Set Alarm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:id="@+id/alarmBtn"/>

    </LinearLayout>

    <TextView />
    <TextView />
    <TextView />
    <Button />
    <ImageView />
</LinearLayout>

The button to the right set alarm is not coming correctly depending on screen size/resolution:

Correct layout:

correct layout

Wrong layout:

wrong layout

Upvotes: 1

Views: 83

Answers (4)

Hasan A Yousef
Hasan A Yousef

Reputation: 25008

Based on the answers and comments I got, I used mix of: 1. Reduce elements in the same row 2. Use relative layout

So, my code now is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:card_view="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_margin="8dp">

    <Spinner
            android:prompt="@string/task_status"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/status"
            android:spinnerMode="dropdown"/>

    <EditText
            android:layout_width="match_parent"
            android:layout_height="171dp"
            android:inputType="textMultiLine"
            android:gravity="start|top"
            android:ems="10"
            android:id="@+id/statusNote"/>

    <RelativeLayout android:orientation="horizontal"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content">
        <Button
                android:text="Update notes"
                android:layout_width="350px"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true" android:layout_marginEnd="-9dp"
                android:id="@+id/button"/>

        <Button
                android:text="Set Alarm"
                android:layout_width="350px"
                android:layout_height="wrap_content"
                android:id="@+id/alarmBtn" android:layout_alignParentEnd="true" android:layout_marginEnd="-9dp"/>



    </RelativeLayout>

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

        <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/sym_action_call"
                android:layout_alignParentStart="true" android:layout_marginEnd="-9dp"
                android:id="@+id/dialBtn"/>

        <ImageButton
                android:layout_centerInParent="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_mylocation"
                android:id="@+id/locationBtn"/>
        <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_send"
                android:id="@+id/whasappBtn" android:layout_alignParentEnd="true" android:layout_marginEnd="-9dp"/>

    </RelativeLayout>

    <TextView
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
            android:text="Occupation"
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="244dp"/>


</LinearLayout>

Upvotes: 1

Athira
Athira

Reputation: 1213

Use weight for views

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">

<LinearLayout android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:layout_weight="1"
        android:text="Update notes"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:id="@+id/button" android:layout_marginLeft="-8dp"/>
    <ImageButton
        android:layout_weight="1.3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/sym_action_call"
        android:id="@+id/dialBtn"/>

    <ImageButton
        android:layout_weight="1.3"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:srcCompat="@android:drawable/ic_menu_mylocation"
        android:id="@+id/locationBtn"/>
    <ImageButton
        android:layout_weight="1.3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_send"
        android:id="@+id/whasappBtn"/>

    <Button
        android:text="Set Alarm"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:id="@+id/alarmBtn"/>

</LinearLayout>

Upvotes: 2

Tamir Abutbul
Tamir Abutbul

Reputation: 7661

If you want to support different screen sizes you can just use ConstraintLayout, the main problem with your layout is that you cant guaranty full responsivity while using so many wrap_content.

Here is an example of a responsive layout that looks like you want it to look:

<?xml version="1.0" encoding="utf-8"?>
<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">

<Spinner
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent=".1"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:text="1"
    app:layout_constraintEnd_toStartOf="@+id/button"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHeight_percent=".05"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline2" />

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="2"
    app:layout_constraintBottom_toBottomOf="@+id/button5"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button5"
    app:layout_constraintTop_toTopOf="@+id/button5" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="3"
    app:layout_constraintBottom_toBottomOf="@+id/button5"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="@+id/button5" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="4"
    app:layout_constraintBottom_toBottomOf="@+id/button5"
    app:layout_constraintEnd_toStartOf="@+id/button4"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintTop_toTopOf="@+id/button5" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="5"
    app:layout_constraintBottom_toBottomOf="@+id/button5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button3"
    app:layout_constraintTop_toTopOf="@+id/button5" />

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Name"
    app:layout_constraintEnd_toStartOf="@+id/button"
    app:layout_constraintHeight_percent=".05"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button5" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="16dp"
    android:text="TextView"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintHeight_percent=".05"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView3" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="16dp"
    android:text="First teak"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintHeight_percent=".05"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:background="@color/colorAccent"
    android:text="Save galery"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHeight_percent=".07"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView2" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".8" />


<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".4" />

</androidx.constraintlayout.widget.ConstraintLayout>

It will look like this: (I am adding an image from the preview for better understanding constraintlayout)

enter image description here

Notice that for the view sizes and positioning I have used app:layout_constraintHeight_percent , app:layout_constraintWidth_percent and guidelines

Upvotes: 1

Sergio
Sergio

Reputation: 461

Buttons are inside a LinearLayout, so you could probably use the android:layout_weight="" property to make them fill the screen proportionally.

Upvotes: 1

Related Questions