I'm trying to place my views into ConstraintLayout, but every views like button/textview look different in real device than in AndroidStudio.
Check how its look:
in Android Studio
in real Device
It's looks horrible ! How I can fix that ? What I should do ?
I thought it was the easiest way to arrange views.
and my xml:
<?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=".activity.LoginActivity">
<Button
android:id="#+id/btnLogin"
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="228dp"
android:text="Login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.275"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.599" />
<EditText
android:id="#+id/etLogin"
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:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498" />
<EditText
android:id="#+id/etPassword"
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:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.63" />
<Button
android:id="#+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
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.0" />
</android.support.constraint.ConstraintLayout>
The idea of ConstraintLayout is to use constraints to position views relative to each other. In your case you try to constrain each view in relation to the parent and then use bias to position the view which is the reason everything seems out of order.
Here is the simple example XML that will give you a basic idea how to position these views using constraints:
<?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=".activity.LoginActivity">
<EditText
android:id="#+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#id/etLogin"
app:layout_constraintStart_toStartOf="#id/etLogin"
app:layout_constraintTop_toBottomOf="#id/etLogin" />
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
app:layout_constraintEnd_toStartOf="#id/btnDefault"
app:layout_constraintStart_toStartOf="#id/etLogin"
app:layout_constraintTop_toBottomOf="#id/etPassword" />
<Button
android:id="#+id/btnDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="default user"
app:layout_constraintEnd_toEndOf="#id/etLogin"
app:layout_constraintStart_toEndOf="#id/btnLogin"
app:layout_constraintTop_toBottomOf="#id/etPassword" />
</android.support.constraint.ConstraintLayout>
The result:
If you want to add some spacing between the views you can experiment with adding some margins between them.
I haven't checked this for syntax, but something like this might work better (tying things to each other, rather than to the screen edges).
<?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=".activity.LoginActivity">
<Button
android:id="#+id/btnLogin"
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="228dp"
android:text="Login"
app:layout_constraintEnd_toEndOf="#+id/etPassword"
app:layout_constraintStart_toEndOf="#+id/btnDefault"
app:layout_constraintTop_toBottomOf="#+id/etPassword"/>
<EditText
android:id="#+id/etLogin"
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="64dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/etPassword"
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:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#+id/etLogin"
app:layout_constraintStart_toStartOf="#+id/etLogin"
app:layout_constraintTop_toBottomOf="#+id/etLogin" />
<Button
android:id="#+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
app:layout_constraintStart_toStartOf="#+id/etPassword"
app:layout_constraintEnd_toStartOf="#+id/btnLogin"
app:layout_constraintTop_toBottomOf="#+id/etPassword" />
</android.support.constraint.ConstraintLayout>
Related
Ive got problem with my single item activity, in my activity design everything looks good image in design tab,but when I run the app image gets bigger in app image in the app
Code for whole xml layout
<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="175dp">
<ImageView
android:id="#+id/container_org"
android:layout_width="match_parent"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#android:drawable/screen_background_light_transparent"
app:tint="#color/grey" />
<ImageView
android:id="#+id/item_org_logo"
android:layout_width="110dp"
android:layout_height="150dp"
android:layout_marginStart="8dp"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.48"
app:srcCompat="#drawable/eu" />
<TextView
android:id="#+id/item_org_description"
android:layout_width="250dp"
android:layout_height="85dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="#string/eu_long_desc"
app:layout_constraintStart_toEndOf="#+id/item_org_logo"
app:layout_constraintTop_toBottomOf="#+id/item_org_title" />
<TextView
android:id="#+id/item_org_title"
android:layout_width="249dp"
android:layout_height="38dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:text="#string/eu2"
android:textColor="#color/black"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/item_org_logo"
app:layout_constraintTop_toTopOf="#+id/container_org" />
</androidx.constraintlayout.widget.ConstraintLayout>
It's because of the conflict between
app:layout_constraintVertical_bias="0.48"
and explicitly declared width:
android:layout_width="110dp"
You either have to remove bias attribute or change width attribute to wrap_content or 0dp. I would recommend this edition:
<?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="175dp">
<ImageView
android:id="#+id/container_org"
android:layout_width="match_parent"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#android:drawable/screen_background_light_transparent"
app:tint="#color/grey" />
<ImageView
android:id="#+id/item_org_logo"
android:layout_width="110dp"
android:layout_height="150dp"
android:layout_marginStart="8dp"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/eu" />
<TextView
android:id="#+id/item_org_description"
android:layout_width="0dp"
android:layout_height="85dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="#string/eu_long_desc"
app:layout_constraintStart_toEndOf="#+id/item_org_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_org_title" />
<TextView
android:id="#+id/item_org_title"
android:layout_width="0dp"
android:layout_height="38dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:text="#string/eu2"
android:textColor="#color/black"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/item_org_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/container_org" />
</androidx.constraintlayout.widget.ConstraintLayout>
When adding a constraint layout within another constraint layout the inner one gets cut off.
I already tried changing the constraint top of view but that didn't change anything. Anyone knows why this is happening?
I also tried it out with different layouts ( the cyan one is the culprit ) which all had the same effect.
<?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/cyberpunk_background"
tools:context=".Todo_create">
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:autofillHints=""
android:background="#drawable/square_round"
android:ems="10"
android:hint="Title"
android:inputType="textPersonName"
android:textColor="#color/cardview_light_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="148dp"
android:background="#drawable/square_round"
android:ems="10"
android:hint="Description"
android:inputType="textPersonName"
android:textColor="#color/cardview_light_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="104dp"
android:background="#drawable/square_round"
android:clickable="true"
android:ems="10"
android:hint="Time"
android:inputType="textPersonName"
android:textColor="#color/cardview_light_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<Button
android:id="#+id/button_add_new_todo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
android:background="#drawable/square_round"
android:text="Button"
android:textColor="#color/cardview_light_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="1dp"
android:layout_marginEnd="1dp"
android:layout_marginBottom="256dp"
android:adjustViewBounds="true"
android:background="#color/colorAccent"
android:orientation="horizontal"
android:scaleType="centerInside"
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/editText4"
app:layout_constraintVertical_bias="1.0">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="47dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="26dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/alarm_clock_1" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
It seems that you have an unnecessary android:layout_marginBottom="256dp" in your nested constraint layout.
Android studio doesn't show any buttons or textview in GridLayout, but when I put it in constraint layout it shows up properly and it even works fine when I run the app in the emulator:
Here's the Screen Shot:
This is how the xml file looks:
<?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=".MainActivity">
<android.support.v7.widget.GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:columnCount="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rowCount="2">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</android.support.v7.widget.GridLayout>
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="514dp"
android:layout_marginEnd="291dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="291dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
And I am getting this error:
Error screenshot
Thanks for helping!
just remove the <android.support.v7.widget.GridLayout> or <androidx.gridlayout.widget.GridLayout> tag instead with <GridLayout>
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:columnCount="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rowCount="2">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</GridLayout>
I have a recycler view in an Activity where sometimes I show a lot of elements. The problem is that when the number of elements is very high the recycler view needs some seconds to render the elements and it's frustrating. I wonder why.
My code:
<android.support.v4.widget.NestedScrollView 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/_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="cct.appload.fragments.FileManagerFragment">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusableInTouchMode="true">
<Spinner
android:id="#+id/_order_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/back"
android:src="#drawable/ic_arrow_back_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:elevation="1dp"
card_view:cardCornerRadius="0dp"
card_view:cardElevation="2dp">
<TextView
android:id="#+id/_msg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:gravity="center"
android:visibility="invisible" />
<ProgressBar
android:id="#+id/manager_progress_bar"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:progressTint="#color/colorAccent"
android:visibility="invisible" />
<android.support.v7.widget.RecyclerView
android:id="#+id/_recycler_view"
android:layout_width="match_parent"
android:nestedScrollingEnabled="false"
android:layout_height="wrap_content"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:scrollbars="vertical" />
</android.support.v7.widget.CardView>
</LinearLayout>
My single item:
<?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:id="#+id/_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/_icon"
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle_background"
android:padding="10dp"
android:tint="#color/white"
app:layout_constraintBottom_toTopOf="#+id/_separator"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_folder_black_24dp" />
<TextView
android:id="#+id/_titolo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ellipsize="end"
android:lines="1"
android:maxLines="1"
android:text="Titolo"
android:textAppearance="#android:style/TextAppearance.Material.Body2"
app:layout_constraintEnd_toStartOf="#+id/_menu"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/_icon"
app:layout_constraintTop_toTopOf="#+id/_icon" />
<TextView
android:id="#+id/_dimensione"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:padding="0dp"
android:text="dimensione"
android:ellipsize="end"
android:lines="1"
app:layout_constraintBottom_toBottomOf="#+id/_icon"
app:layout_constraintEnd_toStartOf="#+id/_menu"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/_icon"
app:layout_constraintTop_toBottomOf="#+id/_titolo" />
<ImageButton
android:id="#+id/_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_more_vert_black_24dp" />
<View
android:id="#+id/_separator"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginBottom="0dp"
android:background="#color/lightGrey"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
In order to update the elements I simply change the list of them and then I notify that to the recycler view.
I think the best solution is not loading all data, just using lazy-loading
Refer here
I had a problem with a very small amount of items. I'm using Room Dao.
The reason why RecycleView ran so slow was the fact that photos that l used were large in size. So be careful about that.
Here is my code
<?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/nav_and_action_bar_color"
>
<ImageView
android:id="#+id/some_person"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/some_person"
app:layout_constraintBottom_toTopOf="#+id/et_username"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/et_username"
android:layout_width="#dimen/login_page_text_fields_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#android:color/white"
android:hint="#string/email_hint"
android:padding="10dp"
app:layout_constraintBottom_toTopOf="#+id/et_password"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/some_person" />
<EditText
android:id="#+id/et_password"
android:layout_width="#dimen/login_page_text_fields_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#android:color/white"
android:hint="#string/password_hint"
android:inputType="textPassword"
android:padding="10dp"
app:layout_constraintBottom_toTopOf="#+id/login_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_username" />
<Button
android:id="#+id/login_button"
android:layout_width="#dimen/login_button_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#color/colorAccent"
android:elevation="5dp"
android:onClick="clickedOnLogin"
android:text="#string/login_button"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_password" />
</android.support.constraint.ConstraintLayout>
and i seem to be getting this as a result
How do i bring the elements together? I want them to be close together.
You need to define variable for every view, where you want to apply chaining logic. Pick just one:
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_chainStyle="spread_inside"
Use below code to get the desired layout.
Changes in the below code of yours is "app:layout_constraintVertical_chainStyle="packed".
<?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/nav_and_action_bar_color">
<ImageView
android:id="#+id/some_person"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/some_person"
app:layout_constraintBottom_toTopOf="#+id/et_username"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<EditText
android:id="#+id/et_username"
android:layout_width="#dimen/login_page_text_fields_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#android:color/white"
android:hint="#string/email_hint"
android:padding="10dp"
app:layout_constraintBottom_toTopOf="#+id/et_password"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/some_person" />
<EditText
android:id="#+id/et_password"
android:layout_width="#dimen/login_page_text_fields_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#android:color/white"
android:hint="#string/password_hint"
android:inputType="textPassword"
android:padding="10dp"
app:layout_constraintBottom_toTopOf="#+id/login_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_username" />
<Button
android:id="#+id/login_button"
android:layout_width="#dimen/login_button_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#color/colorAccent"
android:elevation="5dp"
android:onClick="clickedOnLogin"
android:text="#string/login_button"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_password" />
</android.support.constraint.ConstraintLayout>
I managed to bring the elements close together. According to this page
Chains are controlled by attributes set on the first element of the chain (the "head" of the chain):
So i added this to <ImageView> tag
app:layout_constraintVertical_chainStyle="packed"
and since i did not want it to be at the center vertically i also added this to the same tag
app:layout_constraintVertical_bias="0.4"
So that it is not at the center but is slightly biased towards to the top.