ConstraintLayout buttons going off screen
My ConstraintLayout
works fine when using it on my phone, but on my friends phone some buttons don’t show on the screen.
How would I fix this?
Is it possible to convert it to some other type of layout, while not having to redesign everything?
This is my current code:
<?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" tools:context=".MainActivity"> <AutoCompleteTextView android:id="@+id/clubname" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="96dp" android:layout_marginEnd="102dp" android:layout_marginBottom="36dp" android:gravity="center" android:hint="@string/club_name" app:layout_constraintBottom_toTopOf="@+id/EditDate" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" /> <Button android:id="@+id/EditDate" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="96dp" android:layout_marginTop="285dp" android:layout_marginEnd="102dp" app:layout_constraintHeight_percent="0.1" app:layout_constraintWidth_percent="0.3" android:ems="10" android:gravity="center" android:hint="@string/date_button" android:onClick="sendButton" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Spinner android:id="@+id/eventName" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="100dp" android:layout_marginTop="44dp" android:layout_marginEnd="102dp" android:ems="10" android:gravity="center" android:visibility="visible" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="1.0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/EditDate" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="104dp" android:onClick="sendButton" android:text="@string/send" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.498" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/eventName" /> </androidx.constraintlayout.widget.ConstraintLayout>
Thank you in advance!
-Tiebe
Remove the hardcoded top margin of the EditDate
, and center it vertically in parent with app:layout_constraintBottom_toBottomOf="parent"
Also add app:layout_constraintBottom_toBottomOf="parent"
to the bottom button
so that you can make sure it won’t get beyond the bottom of the screen.
<?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" tools:context=".MainActivity"> <AutoCompleteTextView android:id="@+id/clubname" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="96dp" android:layout_marginLeft="96dp" android:layout_marginEnd="102dp" android:layout_marginRight="102dp" android:layout_marginBottom="36dp" android:gravity="center" android:hint="@string/club_name" app:layout_constraintBottom_toTopOf="@+id/EditDate" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" /> <Button android:id="@+id/EditDate" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="96dp" android:layout_marginLeft="96dp" android:layout_marginEnd="102dp" android:layout_marginRight="102dp" android:ems="10" android:gravity="center" android:hint="@string/date_button" android:onClick="sendButton" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHeight_percent="0.1" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintWidth_percent="0.3" /> <Spinner android:id="@+id/eventName" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="100dp" android:layout_marginLeft="100dp" android:layout_marginTop="44dp" android:layout_marginEnd="102dp" android:layout_marginRight="102dp" android:ems="10" android:gravity="center" android:visibility="visible" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="1.0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/EditDate" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="104dp" android:onClick="sendButton" android:text="@string/send" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.498" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toBottomOf="@+id/eventName" /> </androidx.constraintlayout.widget.ConstraintLayout>