Keep view the same on all devices - android

How can I change my activities xml file so that the view stays the same regardless of the size of the screen. What I mean is the location in which the buttons or text is. I want it to stay relatively the same distance and everything. How would I do that? Would relative layout work for that or do is there something else that I would have to do in order for the view to be the same on all devices?
XML file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.example.navjeevenmann.mytycoon.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="0dp"
android:layout_height="59dp"
android:background="#2C3AAD"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text=""
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.21"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.01999998" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#000"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.8"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.02" />
<ImageButton
android:id="#+id/button"
android:layout_width="247dp"
android:layout_height="243dp"
android:background="#0000"
android:src="#drawable/opengraph"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/autoclick"
android:layout_width="49dp"
android:layout_height="47dp"
android:src="#drawable/cursor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.991" />
<ImageButton
android:id="#+id/imageview"
android:layout_width="62dp"
android:layout_height="58dp"
android:adjustViewBounds="true"
android:background="#2c3aad"
android:maxHeight="62dp"
android:maxWidth="5dp"
android:scaleType="fitXY"
android:src="#drawable/home"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<ImageButton
android:id="#+id/singleclick"
android:layout_width="47dp"
android:layout_height="47dp"
android:background="#2C3AAD"
android:src="#drawable/singlecursor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.99" />
<ImageButton
android:id="#+id/imageButton2"
android:src="#drawable/notes"
android:layout_width="47dp"
android:layout_height="49dp"
android:adjustViewBounds="true"
android:maxHeight="62dp"
android:maxWidth="5dp"
android:scaleType="fitXY"
android:background="#null"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintHorizontal_bias="0.047" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.100000024" />


You could use layout percentage if you want it to be same in other devices. Here are links that you could use for reference Percentage layout and Percent Relative Layout

Related

View overlapping on keyboard popup android in constraintlayout

Below is my xml
<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:id="#+id/parentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
tools:context="com.viewlift.views.fragments.LoginFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/nativeLoginContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/emailFieldsContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/emailContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/textfield_bg"
android:minHeight="40dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailTitle">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/email"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:hint="#string/enter_email"
android:inputType="textEmailAddress"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/emailTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#android:color/white"
android:gravity="center"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:text="#string/email"
android:textColor="#android:color/black"
android:textSize="14sp"
android:translationY="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/passwordFieldsContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailFieldsContainer">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/passwordContainer"
android:layout_width="0dp"
android:layout_height="40dp"
android:background="#drawable/textfield_bg"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordTitle">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/passwordInputLayout"
android:layout_width="0dp"
android:layout_height="0dp"
app:boxBackgroundMode="none"
app:hintEnabled="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:hint="#string/enter_password"
android:inputType="textPassword"
android:padding="5dp"
android:textCursorDrawable="#drawable/custom_edit_text_cursor" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/passwordTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#android:color/white"
android:gravity="center"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:text="#string/password"
android:textColor="#android:color/black"
android:textSize="14sp"
android:translationY="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mobileFieldsContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordFieldsContainer">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/countryCodeContainer"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/textfield_bg"
android:minWidth="70dp"
app:layout_constraintBottom_toBottomOf="#+id/mobileContainer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/mobileContainer">
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/countryCode"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:background="#null"
android:overlapAnchor="false"
android:spinnerMode="dialog"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/countryCodeArrow"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/countryCodeArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/triangle_down"
android:tint="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mobileContainer"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginStart="10dp"
android:background="#drawable/textfield_bg"
app:layout_constraintLeft_toRightOf="#+id/countryCodeContainer"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mobileTitle">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/mobile"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/transparent"
android:hint="#string/enter_number"
android:inputType="number"
android:maxLength="10"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/mobileTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#android:color/white"
android:gravity="center"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:text="#string/mobile"
android:textColor="#android:color/black"
android:textSize="14sp"
android:translationY="10dp"
app:layout_constraintLeft_toRightOf="#+id/countryCodeContainer"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/forgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/app_cms_forgot_password_title"
android:textColor="#android:color/darker_gray"
android:textSize="12sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mobileFieldsContainer" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
app:layout_constraintLeft_toLeftOf="#+id/forgotPassword"
app:layout_constraintRight_toRightOf="#+id/forgotPassword"
app:layout_constraintTop_toBottomOf="#+id/forgotPassword" />
<androidx.appcompat.widget.AppCompatCheckBox
android:id="#+id/terms"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="start|center_vertical"
android:text="#string/sign_up_tos_and_pp_text"
android:textColor="#android:color/black"
android:textSize="12sp"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/forgotPassword" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/signInButton"
android:layout_width="0dp"
android:layout_height="55dp"
android:layout_marginTop="20dp"
android:text="#string/signin_continue"
android:textColor="#android:color/white"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/terms" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/separator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nativeLoginContainer">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/orLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/signin_other_account"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/socialLoginContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/separator">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/fbButtonContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:minHeight="55dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/fbImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/login_facebook"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/fbButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="#string/login_facebook"
android:textColor="#color/facebookBlue"
app:layout_constraintBottom_toBottomOf="#+id/fbImg"
app:layout_constraintStart_toEndOf="#+id/fbImg"
app:layout_constraintTop_toTopOf="#+id/fbImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/googleButtonContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/holo_blue_bright"
android:minHeight="55dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fbButtonContainer">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/googleImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/login_google"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/googleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="#string/login_google"
android:textColor="#color/googleRed"
app:layout_constraintBottom_toBottomOf="#+id/googleImg"
app:layout_constraintStart_toEndOf="#+id/googleImg"
app:layout_constraintTop_toTopOf="#+id/googleImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mobileButtonContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/holo_blue_bright"
android:minHeight="55dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/googleButtonContainer">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/mobileImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/login_mobile"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/mobileButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="#string/mobile"
android:textColor="#android:color/holo_green_dark"
app:layout_constraintBottom_toBottomOf="#+id/mobileImg"
app:layout_constraintStart_toEndOf="#+id/mobileImg"
app:layout_constraintTop_toTopOf="#+id/mobileImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tveMsg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/tve_login_msg"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/tveButtonContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/tveButtonContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:minHeight="55dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/tveImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/login_tve"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="#string/app_cms_tve_log_in"
android:textColor="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="#+id/tveImg"
app:layout_constraintStart_toEndOf="#+id/tveImg"
app:layout_constraintTop_toTopOf="#+id/tveImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This is the output I have
Now when the keyboard is shown the bottom tv button overlaps with fb button
How can I fix this?

If you have a view with constraintBottom_toBottomOf="parent", add a parent scrolling container for your whole view. This should solve your issue.
This happens with keyboards and views having constraintBottom_toBottomOf always as the view only has remaining screen size above the keyboard and below the status bar, hence resulting in the view with constraintBottom_toBottomOf="parent" overlapping the view like you have.

Two spinners's text should start exactly under each other in Android

I want two spinner's text to start exactly under each other. In the XML-file I put the spinners exactly under each other but when content is displayed the texts do not start at the same horizontal positions. How can I do that? Further, the textSize can't be changed (I tried different values for the attribute textSize but this did not have any effect.
Here is the XML 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">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="265dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:ignore="ContentDescription" />
<ImageButton
android:id="#+id/commentButton"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#null"
android:contentDescription="comment_Button"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.87"
app:srcCompat="#mipmap/comment" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/comment"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.8" />
<Button
android:id="#+id/ordering_button"
android:layout_width="163dp"
android:layout_height="72dp"
android:background="#drawable/custom_button"
android:text="#string/order_Button"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.885" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
app:labelVisibilityMode="labeled"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorGreen"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_navigation"
app:itemIconTint="#color/colorPrimaryDark"
app:itemTextColor="#color/colorAccent"
/>
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#000000"
android:textSize="29sp"
android:textStyle="bold"
app:fontFamily="casual"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.41" />
<TextView
android:id="#+id/textViewS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/size"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.481" />
<TextView
android:id="#+id/textViewB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.642" /><![CDATA[
/>
]]>
<RadioGroup
android:id="#+id/radioGroup_Size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.485"
app:layout_constraintHorizontal_bias="0.862"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="#+id/r_Button_Small"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_weight="1"
android:background="#drawable/background_selector"
android:text="#string/small"
android:textColor="#drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.322"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="50dp" />
<RadioButton
android:id="#+id/r_Button_Medium"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_weight="1"
android:background="#drawable/background_selector"
android:checked="true"
android:text="#string/Medium"
android:textColor="#drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.962"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toTopOf="parent"
/>
<RadioButton
android:id="#+id/r_Button_Large"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="#drawable/background_selector"
android:text="#string/Large"
android:textColor="#drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.962"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</RadioGroup>
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.645"
android:textSize="25sp"
android:popupBackground="#5fe0f5"/>
<Spinner
android:id="#+id/spinner2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.723"
android:textSize="20sp"
android:popupBackground="#5fe0f5"/>
<TextView
android:id="#+id/textViewC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.72" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'd appreciate every comment as I tried a lot without success (with paddings and alignments).
Here is a picture of the current and the desired layout for the 2 spinners. Both texts should start at the same horizontal position and also the arrows should be exactly underneath each other.

As per your desired screenshot & your layout. Check below code with comment marked //user8608556 for your easy understanding.
Making width of spinner to 0dp to constraint in layout
You should align spinner2 w.r.t spinner1.
So adding required margin on spinner1 at start & end for spacing, spinner2 will adjust according to it as per pt#2 (you can adjust margin as per your need).
<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">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="265dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:ignore="ContentDescription" />
<!-- app:srcCompat="#mipmap/comment"-->
<ImageButton
android:id="#+id/commentButton"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#null"
android:contentDescription="comment_Button"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.87" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="comment"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.8" />
<!-- android:background="#drawable/custom_button"-->
<!-- android:text="#string/order_Button"-->
<Button
android:id="#+id/ordering_button"
android:layout_width="163dp"
android:layout_height="72dp"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.885" />
<!-- app:menu="#menu/bottom_navigation"-->
<!-- android:background="#color/colorGreen"-->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemIconTint="#color/colorPrimaryDark"
app:itemTextColor="#color/colorAccent"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#000000"
android:textSize="29sp"
android:textStyle="bold"
app:fontFamily="casual"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.41" />
<!-- android:text="#string/size"-->
<TextView
android:id="#+id/textViewS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.481" />
<!-- android:text="TextViewB"-->
<TextView
android:id="#+id/textViewB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.642" /><![CDATA[
/>
]]>
<RadioGroup
android:id="#+id/radioGroup_Size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.862"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.485">
<!-- android:background="#drawable/background_selector"-->
<!-- android:text="#string/small"-->
<!-- android:textColor="#drawable/text_selector"-->
<RadioButton
android:id="#+id/r_Button_Small"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_marginLeft="50dp"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.322"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- android:background="#drawable/background_selector"-->
<!-- android:text="#string/Medium"-->
<!-- android:textColor="#drawable/text_selector"-->
<RadioButton
android:id="#+id/r_Button_Medium"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:checked="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.962"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- android:background="#drawable/background_selector"-->
<!-- android:text="#string/Large"-->
<!-- android:textColor="#drawable/text_selector"-->
<RadioButton
android:id="#+id/r_Button_Large"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.962"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</RadioGroup>
<!-- android:background="#color/md_teal_800"
android:entries="#array/days_of_week" -->
<!-- //user8608556 Both spinner1 & 2 layout_width make 0dp to set in constraint added marginStart & end, change as per need -->
<Spinner
android:id="#+id/spinner1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginEnd="50dp"
android:popupBackground="#5fe0f5"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.645" />
<!-- android:background="#color/md_teal_800"
android:entries="#array/days_of_week_options"-->
<!-- //user8608556 //spinner2 start & end align to spinner1 so just margin on spinner1 will do the trick-->
<Spinner
android:id="#+id/spinner2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:popupBackground="#5fe0f5"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/spinner1"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintStart_toStartOf="#id/spinner1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.723" />
<!-- android:text="TextViewC"-->
<TextView
android:id="#+id/textViewC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.72" />
</androidx.constraintlayout.widget.ConstraintLayout>
I suggest to check this link as to understand how constraint layout work. Just to answer in short -> "0dp" is the equivalent of "match_parent" in ConstraintLayout.
Its upto you how to constraint your views inside parent. They can be constraint to parent or another view as per your need. Considering you wanted to align both spinner to each other, setting constraint of one to another I don't have to repeat it moreover it is more flexible if you want to support different screen sizes.
To change text size(/style attribute) of spinner Refer this . In short, Spinner doesn't expose internal textView hence setting textSize doesn't work.

Android: "duplicate attribute" error problem

I was making a simple calculator app design and mid-way I decided to test it. I though it was going to run without any errors however it shows an error like this:
C:\Users\mahir\AndroidStudioProjects\SimpleCalculatorappforstudents\app\src\main\res\layout\activity_main.xml:5: error: duplicate attribute.
C:\Users\mahir\AndroidStudioProjects\SimpleCalculatorappforstudents\app\src\main\res\layout\activity_main.xml: error: file failed to compile.
I have searched google to solve this problem however I am unable to arrive at a solution. This is my XML file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/number5"
android:layout_width="81dp"
android:layout_height="72dp"
android:text="5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.336"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.881" />
<Button
android:id="#+id/number4"
android:layout_width="81dp"
android:layout_height="72dp"
android:text="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.027"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.881" />
<Button
android:id="#+id/number7"
android:layout_width="81dp"
android:layout_height="72dp"
android:text="7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.027"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<Button
android:id="#+id/number8"
android:layout_width="81dp"
android:layout_height="72dp"
android:text="8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.336"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<Button
android:id="#+id/number1"
android:layout_width="81dp"
android:layout_height="72dp"
android:text="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.027"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.748" />
<Button
android:id="#+id/brackets"
android:layout_width="81dp"
android:layout_height="72dp"
android:text="( )"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.951"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.749" />
<Button
android:id="#+id/number9"
android:layout_width="81dp"
android:layout_height="72dp"
android:text="9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.633"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<Button
android:id="#+id/number6"
android:layout_width="81dp"
android:layout_height="72dp"
android:text="6"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.633"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.881" />
<Button
android:id="#+id/multiply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Multiply"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.346"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.631" />
<Button
android:id="#+id/divide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Divide"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.972"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.631" />
<Button
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.027"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.631" />
<Button
android:id="#+id/number2"
android:layout_width="81dp"
android:layout_height="72dp"
android:text="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.336"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.749" />
<Button
android:id="#+id/number3"
android:layout_width="81dp"
android:layout_height="72dp"
android:text="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.633"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.749" />
<Button
android:id="#+id/history"
android:layout_width="98dp"
android:layout_height="45dp"
android:background="#drawable/roundbutton"
android:text="History"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.968"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.008" />
<Button
android:id="#+id/subtract"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subtract"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.661"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.631" />
I would gladly accept any help on this error. I am a beginner in Android development and I am using the latest Android Studio.

You have added the same line twice as an attribute within the ConstraintLayout.
xmlns:android="http://schemas.android.com/apk/res/android"
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" (1st time)
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android" (2nd time)
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

ConstraintLayout not wrapping content nor matching parent

Below you can see my XML code where I have a ConstraintLayout in a ScrollView. The ConstraintLayout does not wrapping content and i cant find the problem. It actually "hides" some of my views - in this case a button.
When I try to change the height attribute in the ConstraintLayout nothing happens so i feel its something else that i cant find.
Thank you
<ScrollView 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"
android:background="#546E7A"
tools:context="com.example.android.business_card.MainActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/mainConst"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/logotop" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:adjustViewBounds="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#drawable/logo5" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="#dimen/spacing2"
android:drawableLeft="#drawable/map2"
android:drawablePadding="#dimen/spacing"
android:text="#string/map"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing2"
android:drawableLeft="#drawable/phone3"
android:drawablePadding="#dimen/spacing"
android:text="#string/phone"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="#+id/textView3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="19dp"
android:layout_margin="#dimen/spacing2"
android:drawableLeft="#drawable/web2"
android:drawablePadding="#dimen/spacing"
android:text="#string/site"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="8dp"
android:drawablePadding="#dimen/spacing"
android:paddingBottom="#dimen/spacing2"
android:paddingTop="#dimen/spacing2"
android:text="#string/name"
android:textColor="#android:color/white"
android:textSize="25sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing"
android:background="#color/butCol"
android:text="#string/sign"
android:textAllCaps="false"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>

Solved - i had to use android:fillViewport="true" in the scrollview attributes.

ConstraintLayout shows height but is actually 0

I have a ConstraintLayout within a layout file and when I set the height of the ConstraintLayout to be 0dp and set additional constraints, I can see that the layout is at the size of what I want (here), however, when I put another View within the layout (in this case a MapView), it does not resize to its parent's height (here)! This is my whole XML file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:mapbox="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/dialogContainer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/closeDialogButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:background="#drawable/ic_close_workorder"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/dialogInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/open_sans_semibold"
android:text="TextView"
android:textColor="#color/textTint"
android:textSize="15sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/dialogTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/gotham_medium"
android:text="TextView"
android:textColor="#color/primaryDark"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dialogInfo" />
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout6"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dialogTitle">
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_description" />
<TextView
android:id="#+id/descriptionText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/open_sans_light"
android:text="TextView"
android:textColor="#color/primaryDark"
android:textSize="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageView6"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/divider1"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="4dp"
android:background="#color/dividerColor"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout6">
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider1">
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_materials" />
<TextView
android:id="#+id/materialsText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/open_sans_light"
android:text="TextView"
android:textColor="#color/primaryDark"
android:textSize="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageView7"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/divider2"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="4dp"
android:background="#color/dividerColor"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout7">
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider2">
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_contact" />
<TextView
android:id="#+id/contactText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/open_sans_light"
android:text="TextView"
android:textColor="#color/primaryDark"
android:textSize="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageView8"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<TextView
android:id="#+id/noMapInstruction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Geen kaart beschikbaar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout9" />
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout9">
<com.mapbox.mapboxsdk.maps.MapView
android:id="#+id/locationMap"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
mapbox:mapbox_cameraZoom="11"
mapbox:mapbox_renderTextureMode="true"
mapbox:mapbox_styleUrl="mapbox://styles/mapbox/streets-v10" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/fadedWhite"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout9">
<TextView
android:id="#+id/locationText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:fontFamily="#font/open_sans_light"
android:text="TextView"
android:textColor="#color/primaryDark"
android:textSize="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageView10"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_location" />
</android.support.constraint.ConstraintLayout>
<ImageView
android:id="#+id/openWorkOrder"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:src="#drawable/button_open_workorder"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
Can anyone explain this behaviour to me and help me get the full ConstraintLayout's height? This is what I'm trying to achieve, but without the info of the middle view (the contact icon). So basically, the MapView should be displayed behind the location text.

Those constraints:
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
Ignores the width set in layout_width and join the left of this view with the left of the parent, and the right to the right, the result will be a match_parent width.
Similar, you can do Top_topTopOf="parent" and Bottom_toBottomOf="parent" but since you have more views on screen if you want to place then linearly you can use the Top_toBottomOf="#id/other"

Change 0dp with wrap_content for both the MapView and its container. And possibly for other layouts as well.
Also, I see you're using a lot of ConstraintLayouts. For instance the dividers (divider1 and divider2) are ConstraintLayout but could simply be Views, which would improve performance.

Categories

Resources