I'm quite new to this whole Android Studio and all, but I'm quickly getting used to it all.
Now here's my problem:
I have my main Activity with two screen-filling buttons and I want a checkbox on top of the first button.
I've looked all around the Internet, but I couldn't find a single clue.
EDIT: Messing with the order of the objects doesn't work.
This is my XML code (I haven't filled in the functionality, yet):
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ggblbl.example.MainActivity">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:text="#string/button_one"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:text="#string/button_two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline"
app:layout_constraintVertical_bias="0.0" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<CheckBox
android:id="#+id/checkBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/checkbox"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginRight="150dp"
android:layout_marginLeft="150dp"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toTopOf="#+id/guideline" />
</android.support.constraint.ConstraintLayout>
PS: I don't know if this helps, but I use API 15 and Android Studio 2.3.2.
EDIT: I've got this
But I want this
I have removed your margins and non-needed code. Try the following layout
<?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">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="32dp"
android:text="Button 1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button2"
/>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="CheckBox"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button1"
/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 2"
app:layout_constraintTop_toBottomOf="#+id/button1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
Edit: It looks like drawing over button is not possible. In the edited layout you have a bottom margin of button1 equal to height of the checkbox. You can distribute this height equally to bottom margin of button1 and top-margin of button 2. In support of my claim you can see the following layout, which gives what you want. In this example I have replaced upper button by a textview
<?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">
<TextView
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#ddd"
app:layout_constraintBottom_toTopOf="#+id/button2"
/>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/button1"
/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button 2"
app:layout_constraintTop_toBottomOf="#+id/button1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
I finally chose to abandon the use of a checkbox, as I guess it's hard-coded in that checkboxes are behind buttons.
I've found that the toggleButton does what I need too.
This one is in front of the button.
Related
I am using Fragment in my app. I try to put a Button top of layout but it does not go to top of the layout.
This is my xml of Fragment :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.home.HomeFragment">
<Button
android:id="#+id/zirai"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="ZİRAİ"
android:textColor="#color/white"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/döviz"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="DÖVİZ"
android:textColor="#color/white"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="290dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
it looks like this :
I need to put that two button top of the layout
How I can solve this issue
Thanks
You probably have a padding or margin attribute in your activity's xml file. Find;
android:paddingTop="?attr/actionBarSize"
or
android:marginTop="?attr/actionBarSize"
and remove them.
I built an application (for practice Android), and i use start, end in order to support both LTR and RTL languages. I also set android:supportsRtl="true" in manifest file.
When device is set to LTR language all text looks great, and alignment great to the left. But, when changing device language to RTL language, all text seems bad and isn't alignment to the right (maybe some of the TextView are alignment and some aren't). In addition it seems that the Spinner view is totally Wrong. I have attached two screen shot (for both languages). I'm asking for your help, because i don't understand what i'm doing wrong.
Also attached 3 code snipping (one for all the layout, the second for the item inside the RecyclerView and the third the item for the Spinner:
<?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/backgroundColor">
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginStart="3dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="3dp"
android:background="#null"
android:dropDownWidth="120dp"
android:dropDownVerticalOffset="96dp"
android:gravity="center"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.example.currencyconvertor.MultiButton
android:id="#+id/multiButton"
android:layout_width="300dp"
android:layout_height="50dp"
android:layout_marginTop="15dp"
app:activeButtonIndex="0"
app:backgroundSelector="#drawable/multi_button_background_selector"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/spinner"
app:numOfButtons="2"
app:reversedOrder="false"
android:visibility="gone"
app:textColorSelector="#drawable/multi_button_text_color" />
<TextView
android:id="#+id/textView1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:layout_marginTop="22dp"
android:textColor="#color/titleTextColor"
android:textSize="13sp"
app:layout_constraintEnd_toStartOf="#id/textView2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/multiButton"
tools:text="TextView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="Symbol"
android:textColor="#color/titleTextColor"
android:textSize="13sp"
app:layout_constraintEnd_toStartOf="#id/textView3"
app:layout_constraintStart_toEndOf="#id/textView1"
app:layout_constraintTop_toTopOf="#id/textView1"
tools:text="TextView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:textColor="#color/titleTextColor"
android:textSize="13sp"
app:layout_constraintEnd_toStartOf="#id/textView4"
app:layout_constraintStart_toEndOf="#id/textView2"
app:layout_constraintTop_toTopOf="#id/textView1"
app:layout_goneMarginEnd="3dp"
tools:text="TextView3" />
<TextView
android:id="#+id/textView4"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:textColor="#color/titleTextColor"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/textView3"
app:layout_constraintTop_toTopOf="#id/textView1"
android:visibility="gone"
tools:text="TextView4" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="3dp"
android:layout_marginTop="7dp"
android:layout_marginEnd="3dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView1"
tools:listitem="#layout/relative_currency_rate_row" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxHeight="200dp"
android:maxWidth="200dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView1" />
</androidx.constraintlayout.widget.ConstraintLayout>
Code for RecyclerView item:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginBottom="1dp"
android:background="#color/rowColor"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/container"
android:layout_width="80dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/targetCountryTextView"
app:layout_constraintHorizontal_chainStyle="spread_inside"
tools:ignore="MissingConstraints">
<ImageView android:id="#+id/countryFlagImageView"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintStart_toStartOf="#id/container"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/ic_launcher_background"
android:paddingEnd="4dp" />
<TextView
android:id="#+id/currencyTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/countryFlagImageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginStart="2dp"
android:layout_marginTop="13dp"
android:layout_marginBottom="12dp"
android:textSize="13sp"
android:text="USA"
android:textColor="#color/currencyRowTextColor"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/targetCountryTextView"
android:layout_width="80dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/container"
app:layout_constraintEnd_toStartOf="#id/rateTextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="13dp"
android:layout_marginBottom="12dp"
android:textSize="13sp"
android:text="Dollar"
android:textColor="#color/currencyRowTextColor" />
<TextView
android:id="#+id/rateTextView"
android:layout_width="80dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/targetCountryTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="13dp"
android:layout_marginBottom="12dp"
android:textSize="13sp"
android:text="0.417"
android:textColor="#color/currencyRowTextColor" />
</androidx.constraintlayout.widget.ConstraintLayout>
Code for Spinner item:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/rowColor">
<ImageView
android:id="#+id/flagImageView"
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintEnd_toStartOf="#+id/countryTextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:padding="4dp"
app:srcCompat="#drawable/default_glag"
android:textColor="#color/currencyRowTextColor"/>
<TextView
android:id="#+id/countryTextView"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/flagImageView"
android:layout_marginStart="30dp"
android:gravity="center"
android:textSize="17sp"
android:textColor="#color/currencyRowTextColor"/>
<TextView
android:id="#+id/currencyTextView"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/countryTextView"
android:layout_marginStart="5dp"
android:gravity="center"
android:text="countryCurrencyTextView"
android:textSize="17sp"
android:textColor="#color/currencyRowTextColor"/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="4dp"
android:src="#mipmap/ic_arrow_drop_down"/>
</androidx.constraintlayout.widget.ConstraintLayout>[![enter image description here][1]][1]
disable supports RTL on your manifest file:
<application
...
android:supportsRtl="false">
I hope to be useful ;)
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>
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.
I have a problem when i try to display a listview in my fragment, it seems like there is a white border around the fragment. I also have a similar listview displayed in an activity and it matches perfectly with the borders of the screen.
I'm gonna post below the xml file and a screenshot I took of the fragment, I hope you can help me out.
<?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">
<!-- displays the loading animation while downloading the listview -->
<RelativeLayout
android:id="#+id/loadingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true" />
</RelativeLayout>
<TextView
android:id="#+id/tv_benvenuto"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Ecco l'elenco completo dei libri a catalogo."
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<ListView
android:id="#+id/lv_dashboard"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_benvenuto" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Benvenuto"
android:textColor="#android:color/black"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:includeFontPadding="false"
android:text="#string/empty_dashboard"
android:textAlignment="center"
android:textSize="18sp"
android:visibility="gone"/>
</android.support.constraint.ConstraintLayout>
Image of my fragment problem
Your Listview is inheriting the Benvenuto Textview's margins as it's set to aling it. Put the views in a LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Benvenuto"
android:textColor="#android:color/black"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_benvenuto"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Ecco l'elenco completo dei libri a catalogo."
android:textColor="#android:color/black"
android:textSize="18sp" />
<ListView
android:id="#+id/lv_dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Sometimes when you set the width and height to match-constraint I've noticed that it adds some imaginary padding like this for whatever reason. It looks like this layout is pretty simple and just linearly goes from top to bottom in terms of its views. Why don't you just use a LinearLayout instead, and set the dimensions to matchparent? That should fix it, unless you need to add more stuff to this layout.