I have built a layout using ConstraintLayout for my android application. The application will be only available on mobile (no TV or Tablets). But honestly I don't how to make the layout perfectly fit the phone size.
Here's one of my activity
<?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"
android:background="#color/colorPrimary"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="#font/billabong"
android:gravity="center"
android:text="Applikáció"
android:textColor="#color/white"
android:textSize="65sp"
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.054" />
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayoutEmail"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:textColorHint="#color/inputText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.505"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.255">
<android.support.design.widget.TextInputEditText
android:id="#+id/login_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/inputText"
android:hint="E-mail cim"
android:inputType="text"
android:textColor="#color/colorAccent"
android:textColorHint="#color/colorPrimaryLight"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="214dp" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayoutPassword"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:textColorHint="#color/inputText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/inputLayoutEmail"
app:layout_constraintVertical_bias="0.0">
<android.support.design.widget.TextInputEditText
android:id="#+id/login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/inputText"
android:textColor="#color/colorAccent"
android:hint="Jelszó"
android:inputType="textPassword"
android:textColorHint="#color/colorPrimaryLight" />
</android.support.design.widget.TextInputLayout>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="21dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:buttonTint="#color/colorAccent"
android:hint="Maradjak bejelentkezve"
android:textColorHint="#color/inputText"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/inputLayoutPassword"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/login_button"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_style_1"
android:onClick="onClickButtonMain"
android:text="Bejelentkezés"
android:textColor="#color/white"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/checkBox"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/registration_button"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="18dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_style_blue"
android:onClick="onClickButtonMain"
android:text="Regisztráció"
android:textColor="#color/white"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.494"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_button"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/information_button"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_style_2"
android:onClick="onClickButtonMain"
android:text="Lépések"
android:textColor="#color/colorAccent"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.505"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/registration_button"
app:layout_constraintVertical_bias="0.612" />
</android.support.constraint.ConstraintLayout>
This layout looks great on Pixel but for example on Nexus S the buttons and margins like they don't actually care about how I defined them. I really would like to know what am I doing wrong. I would like to be able to build responsive layouts.
In Android, you need to consider the number of different screen sizes when developing an android application.
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is android:layout_width="300dp" for example) and the result is that what may look good on one screen (your android studio preview screen)but will not look good on another screen (your actual phone).
For your case, I recommend using Chains and Guildelines, this will make your layout responsive.
Here is an example of the layout that you want to achieve using ConstraintLayout:
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="Applikáció"
android:textSize="65sp"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayoutEmail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColorHint="#color/inputText"
app:layout_constraintBottom_toTopOf="#+id/inputLayoutPassword"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toTopOf="#+id/guideline6">
<android.support.design.widget.TextInputEditText
android:id="#+id/login_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/inputText"
android:hint="E-mail cim"
android:inputType="text"
android:textColor="#color/colorAccent"
android:textColorHint="#color/colorPrimaryLight" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayoutPassword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColorHint="#color/inputText"
app:layout_constraintBottom_toTopOf="#+id/checkBox"
app:layout_constraintEnd_toEndOf="#+id/inputLayoutEmail"
app:layout_constraintStart_toStartOf="#+id/inputLayoutEmail"
app:layout_constraintTop_toBottomOf="#+id/inputLayoutEmail">
<android.support.design.widget.TextInputEditText
android:id="#+id/login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/inputText"
android:hint="Jelszó"
android:inputType="textPassword"
android:textColor="#color/colorAccent"
android:textColorHint="#color/colorPrimaryLight" />
</android.support.design.widget.TextInputLayout>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:buttonTint="#color/colorAccent"
android:hint="Maradjak bejelentkezve"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/login_button"
app:layout_constraintEnd_toEndOf="#+id/inputLayoutEmail"
app:layout_constraintStart_toStartOf="#+id/inputLayoutEmail"
app:layout_constraintTop_toBottomOf="#+id/inputLayoutPassword" />
<Button
android:id="#+id/login_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:onClick="onClickButtonMain"
android:text="Bejelentkezés"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/registration_button"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintStart_toStartOf="#+id/inputLayoutEmail"
app:layout_constraintTop_toBottomOf="#+id/checkBox" />
<Button
android:id="#+id/registration_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:onClick="onClickButtonMain"
android:text="Regisztráció"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/information_button"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintStart_toStartOf="#+id/inputLayoutEmail"
app:layout_constraintTop_toBottomOf="#+id/login_button" />
<Button
android:id="#+id/information_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:onClick="onClickButtonMain"
android:text="Lépések"
android:textColor="#color/colorAccent"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/inputLayoutEmail"
app:layout_constraintStart_toStartOf="#+id/inputLayoutEmail"
app:layout_constraintTop_toBottomOf="#+id/registration_button" />
<android.support.constraint.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".9" />
<android.support.constraint.Guideline
android:id="#+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".1" />
</android.support.constraint.ConstraintLayout>
It will look like this (I am adding a picture from the layout editor so you can see the guidelines):
Now all that left to do is to style your views and you have your layout ready.
Related
I am developing android app and I have implemented constrainlayout but in real device password edit text and register button overlapping to each other I want to empty space between them how can achieve that
below my currentlayout
<?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"
android:background="#color/white">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="100dp"
android:background="#drawable/circle_back"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person">
<ImageView
android:id="#+id/person_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/empty"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person" />
</androidx.constraintlayout.widget.ConstraintLayout>
<EditText
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:hint="#string/firstname"
style="#style/textFieldStyle"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout"
tools:ignore="RtlSymmetry"
android:autofillHints="" />
<EditText
android:id="#+id/email"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
style="#style/textFieldStyle"
android:hint="#string/email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/lastName"
tools:ignore="TextFields" />
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/already_have_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/already_have_an_account"
android:textColor="#color/primaryBlack"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.33"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.73"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:hint="#string/password"
android:inputType="textPassword"
style="#style/textFieldStyle"
app:layout_constraintEnd_toEndOf="#+id/email"
app:layout_constraintStart_toStartOf="#+id/email"
app:layout_constraintTop_toBottomOf="#+id/email" />
<EditText
android:id="#+id/lastName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
style="#style/textFieldStyle"
android:hint="#string/lastName"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/name" />
</androidx.constraintlayout.widget.ConstraintLayout>
following screenshot in real device I want to know what I have to do in order to put space between password and register button
but I want to see in real device as if you see there space between password and register button
Add a constraint from the top of the register button to the bottom of the password field. Every element should have a top and bottom constraint to not overlap another element that is above or below it.
When you do something like android:layout_marginBottom="40dp", you will eventually get some views overlapping and that's because you are using hardcoded values, you want to adjust your views to the size of your screen in a responsive way.
You can do it using Guidelines, app:layout_constraintHeight_percent="0.xx" and chain verticly your views:
Inside you constarintLayout (I have used a single layout)
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/backgrounds/scenic" />
<EditText
android:id="#+id/editTextTextPersonName"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="FirstName"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName2"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<EditText
android:id="#+id/editTextTextPersonName2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="LastName"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName3"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName" />
<EditText
android:id="#+id/editTextTextPersonName3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="Email"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName4"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName2" />
<EditText
android:id="#+id/editTextTextPersonName4"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="Password"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName3" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:text="Register"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName4"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName4"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName4" />
<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="0.85" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already have account?"
app:layout_constraintBottom_toBottomOf="#+id/textView2"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Log in"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="#+id/guideline2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
app:layout_constraintGuide_percent="0.05"
android:layout_height="wrap_content"
android:orientation="vertical" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.95"
android:orientation="vertical" />
It will look like this (arrows pointing to the guidelines):
Adding app:layout_constraintTop_toBottomOf.
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/password" />
Adding app:layout_constraintBottom_toTopOf="#id/registration"
<EditText
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:hint="#string/password"
android:inputType="textPassword"
style="#style/textFieldStyle"
app:layout_constraintEnd_toEndOf="#+id/email"
app:layout_constraintStart_toStartOf="#+id/email"
app:layout_constraintTop_toBottomOf="#+id/email"
app:layout_constraintBottom_toTopOf="#id/registration" />
The above solution works only when all of your views are within a single screen. If height of the View is bigger than the screen, then you may need ScrollView or other method.
<?xml version="1.0" encoding="utf-8"?>
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
... your main content here ...
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
Adding ScrollView and LinearLayout outside your main content ConstraintLayout solves the overlapping issue, and allow bigger view to scroll on smaller view.
Try increasing the margin_botton of the password field and also decreasing margin_botton of the Button.
The Problem is that your register button is bottom aligned, while the above elements are top aligned, which means they will overlap on smaller screens.
Try updating your Register button in the following way to enforce a minimum top margin with the password field if there is too little space (I just added a constraint to the password field, set constraintVerticalbias to 1.0 and set a topMargin):
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="ENTER YOUR TOP MARGIN HERE"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password"
app:layout_constraintVertical_bias="1.0" />
IMPORTANT: To make this work you need to wrap your screen in a Scrollview with android:fillViewport="true".
Here would be your whole layout reworked so that it should work (with registerbutton minimum top margin of 40dp):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="#color/white">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/constraintLayout"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="100dp"
android:background="#drawable/circle_back"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person">
<ImageView
android:id="#+id/person_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/empty"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person" />
</LinearLayout>
<EditText
android:id="#+id/name"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:autofillHints=""
android:hint="#string/firstname"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout"
tools:ignore="RtlSymmetry" />
<EditText
android:id="#+id/email"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/lastName"
tools:ignore="TextFields" />
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/already_have_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/already_have_an_account"
android:textColor="#color/primaryBlack"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.33"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.73"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/password"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#+id/email"
app:layout_constraintStart_toStartOf="#+id/email"
app:layout_constraintTop_toBottomOf="#+id/email" />
<EditText
android:id="#+id/lastName"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/lastName"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/name" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</LinearLayout>
I'm a beginner on Android, but my question require a little bit knowledge in UI and not in programming.
I have an xml code, i have their some views but for this question only two components are relevant.
The component is a ScrollView "father" that has only one "son" that is a TextView.
When setting padding in ScrollView, if the text inside the TextView is long, first line of TextView is a little bit truncated (although i am using padding). But on the other hand, when using margin_layout text is seen fine. I read a lot on the difference between margin and padding and from what i have understand setting padding inside father should give the same affect as setting margin inside son. I emphasize that i'm using only one son.
Code with margin (where text is fine):
<?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:background="#color/colorPrimary"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/chewy"
android:text="#string/title"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="300dp"
android:layout_height="80dp"
android:layout_marginStart="8dp"
android:layout_marginTop="68dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="5dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/question_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="8dp"
android:text="Hello There this is where we are going to add something..."
android:textSize="18sp" />
</ScrollView>
</android.support.v7.widget.CardView>
<Button
android:id="#+id/true_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:text="#string/true_title"
app:layout_constraintStart_toEndOf="#+id/prev_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<Button
android:id="#+id/false_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:text="#string/false_title"
app:layout_constraintEnd_toStartOf="#+id/next_button"
app:layout_constraintStart_toEndOf="#+id/true_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<ImageButton
android:id="#+id/prev_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/previous_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_previous" />
<ImageButton
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/next_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_next" />
<TextView
android:id="#+id/counter_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="#font/chewy"
android:text="#string/counter_questions"
app:layout_constraintBottom_toTopOf="#+id/cardView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>
Code with padding (where first line is truncated)
<?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:background="#color/colorPrimary"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/chewy"
android:text="#string/title"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="300dp"
android:layout_height="80dp"
android:layout_marginStart="8dp"
android:layout_marginTop="68dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="5dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
>
<TextView
android:id="#+id/question_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Hello There this is where we are going to add something..."
android:textSize="18sp" />
</ScrollView>
</android.support.v7.widget.CardView>
<Button
android:id="#+id/true_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:text="#string/true_title"
app:layout_constraintStart_toEndOf="#+id/prev_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<Button
android:id="#+id/false_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:text="#string/false_title"
app:layout_constraintEnd_toStartOf="#+id/next_button"
app:layout_constraintStart_toEndOf="#+id/true_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<ImageButton
android:id="#+id/prev_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/previous_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_previous" />
<ImageButton
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/next_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_next" />
<TextView
android:id="#+id/counter_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="#font/chewy"
android:text="#string/counter_questions"
app:layout_constraintBottom_toTopOf="#+id/cardView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>
In addition, putting padding inside CardLayout make thins to be even bad than when adding padding inside the ScrollView
Can someone explain me the reason?
It seems that the difference related to ScrollView odd behavior. I fixed the issue by setting android:fillViewport="true", and removing padding and margin_layout
I'm using constraintlayout and I have an activity that is a user profile. and it includes a picture of user. when I code xml layout. I can see the picture in preview window inside android studio the image is a png image. I have tried changing the image to one of the android studio avatar. still doesn't work. however, when I run the app the picture is not displaying. does anyone know why this happen?
<?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"
android:background="#color/profileBackground">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="8dp"
android:background="#drawable/bacround_gradient"
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.001">
<TextView
android:id="#+id/name_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="72dp"
android:layout_marginEnd="8dp"
android:fontFamily="sans-serif-condensed-medium"
android:text="Amanda Bozquet"
android:textAlignment="center"
android:textColor="#color/headerTextColor"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<ImageView
android:id="#+id/user_imageview"
android:layout_width="126dp"
android:layout_height="109dp"
android:layout_marginStart="8dp"
android:layout_marginTop="144dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/prifile_pic" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:paddingBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/user_imageview"
app:layout_constraintVertical_bias="0.275">
<TextView
android:id="#+id/occupation_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Marine Biologist"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/workplace_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Key Biscaine National Park"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/occupation_textview" />
<TextView
android:id="#+id/state_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="FL, USA"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/workplace_textview" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/state_textview">
<ImageView
android:id="#+id/email_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/state_textview"
app:srcCompat="#drawable/ic_mail_black_24dp" />
<TextView
android:id="#+id/email_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="8dp"
android:text="abozquet#biscainepark.org"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/email_imageview"
app:layout_constraintTop_toBottomOf="#+id/state_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<ImageView
android:id="#+id/phone_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/email_imageview"
app:srcCompat="#drawable/ic_local_phone_black_24dp" />
<TextView
android:id="#+id/phone_textview"
android:layout_width="239dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="1 (786) 352-2254"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/phone_imageview"
app:layout_constraintTop_toBottomOf="#+id/email_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2">
<ImageView
android:id="#+id/video_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/phone_imageview"
app:srcCompat="#drawable/ic_videocam_white_24dp" />
<TextView
android:id="#+id/video_textview"
android:layout_width="242dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="1 (786) 352-2254"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/video_imageview"
app:layout_constraintTop_toBottomOf="#+id/phone_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout3">
<ImageView
android:id="#+id/facebook_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/video_textview"
app:srcCompat="#drawable/ic_icon_facebook" />
<TextView
android:id="#+id/facebook_textview"
android:layout_width="336dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="http://facebook.com/amandab"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/facebook_imageview"
app:layout_constraintTop_toBottomOf="#+id/video_textview" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout4">
<ImageView
android:id="#+id/twitter_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.126"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/facebook_textview"
app:srcCompat="#drawable/ic_twitter_white" />
<TextView
android:id="#+id/twitter_textview"
android:layout_width="336dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="184dp"
android:text="\#mandabuz48"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.031"
app:layout_constraintStart_toEndOf="#+id/twitter_imageview"
app:layout_constraintTop_toBottomOf="#+id/facebook_textview" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
From: https://developer.android.com/studio/write/tool-attributes
Android Studio supports a variety of XML attributes in the tools
namespace that enable design-time features (such as which layout to
show in a fragment) or compile-time behaviors (such as which shrinking
mode to apply to your XML resources). When you build your app, the
build tools remove these attributes so there is no effect on your APK
size or runtime behavior.
So the attribute:
tools:src="#drawable/prifile_pic"
is valid only for design-time.
It is not compiled in the APK and you will not see the image when you run the app.
Change it to:
app:srcCompat="#drawable/prifile_pic"
Do any of your ImageViews display the intended images? Your profile pic ImageView is using tools:src while others are using app:srcCompat
I just noticed a potential typo too -
tools:src="#drawable/prifile_pic" <<--- supposed to be profile_pic?
Are you getting any exception in your android studio log-cat, like image not found? As Stitches wrote in above comment --> typo error for prifile_pic, please check you drawable name is same in your xml layout and image name in drawable folder.
I'm using Android Oreo AutoTextSize capability in my project.
Every thing works fine except that at first when RecyclerView being loaded, some of textView that uses AutoTextSize has a margin bottom on some RecyclerView items but when I scroll down and then come back to that items, problem solves.
and Although in some items, length of TextView is same with another item, but text sizes are different.
You can see my problem in below image :
When I scroll down and then come back, it is ok
here is items layout :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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="wrap_content"
android:layout_margin="8dp"
android:background="#android:color/white"
app:cardCornerRadius="10dp"
app:cardElevation="3dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:id="#+id/fessMetaCL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="24dp"
android:background="#drawable/fees_item_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fee_currency_icon"
app:layout_constraintVertical_bias="1.0">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fees_update_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/lastupdate"
android:textColor="#color/fees_text_color"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fee_currency_date"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/fee_currency_stock"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fee_currency_date"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:maxLines="1"
android:textColor="#color/fees_text_color"
app:autoSizeMaxTextSize="#dimen/order_result_text_max_size"
app:autoSizeMinTextSize="#dimen/order_result_text_min_size"
app:autoSizeStepGranularity="#dimen/order_result_text_rise_step_size"
app:autoSizeTextType="uniform"
app:layout_constraintBaseline_toBaselineOf="#+id/fees_update_label"
app:layout_constraintEnd_toEndOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fees_stock_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/stock"
android:textColor="#color/fees_text_color"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fee_currency_stock"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:maxLines="1"
android:textColor="#color/fees_text_color"
app:autoSizeMaxTextSize="#dimen/order_result_text_max_size"
app:autoSizeMinTextSize="#dimen/order_result_text_min_size"
app:autoSizeStepGranularity="#dimen/order_result_text_rise_step_size"
app:autoSizeTextType="uniform"
app:layout_constraintBaseline_toBaselineOf="#+id/fees_stock_label"
app:layout_constraintStart_toEndOf="#+id/fees_stock_label" />
</android.support.constraint.ConstraintLayout>
<ImageView
android:id="#+id/fee_currency_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/others" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fee_currency_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textColor="#color/fees_text_color"
android:textSize="#dimen/dashboard_fees_small_font_size"
app:layout_constraintStart_toEndOf="#+id/fee_currency_icon"
app:layout_constraintTop_toTopOf="#+id/fee_currency_icon" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fee_currency_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/fees_text_color"
android:textSize="#dimen/dashboard_fees_small_font_size"
app:layout_constraintBottom_toBottomOf="#+id/fee_currency_icon"
app:layout_constraintStart_toStartOf="#+id/fee_currency_name"
app:layout_constraintTop_toBottomOf="#+id/fee_currency_name" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fee_currency_change"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:textColor="#color/fees_text_color"
android:textSize="#dimen/dashboard_fees_big_font_size"
app:layout_constraintBottom_toBottomOf="#+id/fee_currency_icon"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/fee_currency_icon" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/fees_change_tip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="#string/change"
android:textColor="#color/fees_text_color"
android:textSize="#dimen/dashboard_fees_small_font_size"
app:layout_constraintBottom_toBottomOf="#+id/fee_currency_change"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/fee_currency_change" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="187dp" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
I am trying to create a list view to display two TextViews and an ImageView right of the TextViews. I have tried designing this using Relative Layout only, RelativeLayout with nested LinearLayout and ConstraintLayout. All seem to work, but not responsively enough to fit different screens. For example it displays well on mobile, but not good enough on Android TV emulator.
I am at odds how to modify the following layout to show image on the right and the two TextViews on the left and try to fit the screen, but have the images align to each other.
<?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"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_title"
android:layout_width="179dp"
android:layout_height="117dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_descr"
android:layout_width="184dp"
android:layout_height="239dp"
android:layout_below="#+id/tv_video_title"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title"
app:layout_constraintVertical_bias="0.044" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="163dp"
android:layout_height="381dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/tv_video_descr"
android:layout_toRightOf="#+id/tv_video_descr"
android:contentDescription="#string/video_thumbnail_image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/video" />
</android.support.constraint.ConstraintLayout>
Try this
According to you it display like this
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_title"
android:layout_width="179dp"
android:layout_height="117dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/iv_video_thumbnail"
android:layout_marginLeft="0dp"
android:layout_marginRight="8dp" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_descr"
android:layout_width="184dp"
android:layout_height="239dp"
android:layout_below="#+id/tv_video_title"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title"
app:layout_constraintVertical_bias="0.044"
app:layout_constraintRight_toLeftOf="#+id/iv_video_thumbnail"
android:layout_marginRight="8dp" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="163dp"
android:layout_height="381dp"
app:layout_constraintLeft_toRightOf="#+id/tv_video_descr"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/tv_video_descr"
android:layout_toRightOf="#+id/tv_video_descr"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginRight="0dp"
app:layout_constraintVertical_bias="0.047" />
</android.support.constraint.ConstraintLayout>
Here is your updated xml file implement this I used a linear layout and assign layout weights so it cover all screen sizes depending on available width
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<android.support.v7.widget.AppCompatTextView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/tv_video_title"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tv_video_descr"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_below="#+id/tv_video_title"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:paddingEnd="#dimen/padding"
android:paddingLeft="#dimen/padding"
android:paddingRight="#dimen/padding"
android:paddingStart="#dimen/padding"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title"
app:layout_constraintVertical_bias="0.044" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/iv_video_thumbnail"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/tv_video_descr"
android:layout_toRightOf="#+id/tv_video_descr"
android:contentDescription="#string/video_thumbnail_image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/video" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>