I am getting error in LinearLayout tag while using linearlayout in constraintlayout
<?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="com.example.tourwip2.LoginActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username: "
/>
<EditText
android:id="#+id/edtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password: "
/>
<EditText
android:id="#+id/edtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Is there any way to resolve that?
In order to use any layout or view inside a ConstraintLayout you must provide constraints.
Just add these lines inside your XML in your LinearLayout tag
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
After adding your code should look like
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:ignore="MissingConstraints"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" >
You need to provide constraints to all view inside Constraint Layout, also this applies for ViewGroups like Linear Layout, and Relative Layout.
Mainly you have to provide X, Y, X-end, Y-end, width or height, any 4 from them.
These bottom simple XML additions to Linear Layout will solve your problem.
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
Related
Hey I am working in android Constraint layout. In my xml I used constraint layout with linear layout. I want to know is there in any way, I can use only constraint layout remove other children layout like linear layout.
item_layout.xml
<?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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/item_selector_background"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
tools:text="from $1.65" />
</LinearLayout>
<LinearLayout
android:id="#+id/tagContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/item_tag_background"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:visibility="visible">
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
My view look like this
I only want to achieve this through constraint layout.
There is definitely a way to do it. Something like this may work for you:
<ConstraintLayout>
<TextView
android:id="#+id/text
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/tagText"
tools:text="from $1.65" />
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintTop_toBottomOf="#id/subtext"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</ConstraintLayout>
Just pull the child layouts out and constrain the views the way that you want them.
Note: This is not exact. You may have to play with the constraints to get them the way you want it.
You can use View behind them to set background for the first two TextViews like,
<ConstraintLayout
...>
<View
android:id="#+id/backgroundView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/item_selector_background"
app:layout_constraintTop_toTopOf="#id/text"
app:layout_constraintEnd_toEndOf="#id/subtext"
app:layout_constraintStart_toStartOf="#id/subtext"
app:layout_constraintBottom_toBottomOf="#id/subtext"/>
<TextView
android:id="#+id/text"
...
/>
<TextView
android:id="#+id/subtext"
...
/>
<TextView
android:id="#+id/tagText"
...
/>
...
</ConstraintLayout>
the height and width of the backgroundView can be constrained to match the first two TextViews
I have a constraint layout with a ViewStub inside it. I have added constraints to the viewStub. but, I wanted to move it down a bit and I tried to use vertical bias but it doesn't move at all. any idea why?
here is my Viewstub
<ViewStub
android:id="#+id/no_data_viewstub"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout="#layout/no_data_layout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView2"
app:layout_constraintVertical_bias="0.71000004" />
here is the layout that I use in the views tub
<?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="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:layout_marginBottom="16dp"
android:fontFamily="#font/montserrat_medium"
android:text="#string/oops"
android:textColor="#color/azure"
android:textSize="24sp" />
<ImageView
android:id="#+id/imageView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_nodata" />
<TextView
android:id="#+id/textView38"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:fontFamily="#font/montserrat_medium"
android:gravity="center"
android:text="#string/no_data"
android:textColor="#color/error_massage"
android:textSize="18sp" />
</LinearLayout>
I found out that this was a simple error. view stub height can not be match constraint.
in order to change the bias, it needs to have a hight of wrap content.
So like the picture below, I want view B be twice the length of view A.
What I exactly need is view A sticks to the left edge, view B sticks to the right edge and they stick to each other in between. And in the length, the B is going to be twice the length of A. I tried a lot, but no luck! in the end, something is not what I want. Either there is unwanted space between a view and its according edge or between the two views.
Here is my last try:
<?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:padding="10dp"
tools:context=".MainActivity">
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:ems="10"
android:text="B"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:gravity="center"
android:text="A"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
You can use app:layout_constraintWidth_percent ti tell your view how to spread on the screen.
For your wanted look you can use it 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">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintWidth_percent=".33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintWidth_percent=".66"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/button" />
</android.support.constraint.ConstraintLayout>
It will look like this
To use layout_constraintHorizontal_weight, you have to put your Views in a chain first. That means you have to constraint both Views to each other and the parent horizontally. What you are missing in your case is the app:layout_constraintEnd_toStartOf="#id/editText" on the TextView. You also need to change the android:layout_width of both Views to 0dp so that the weight is enforced:
<?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:padding="10dp"
tools:context=".MainActivity">
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:ems="10"
android:text="B"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:gravity="center"
android:text="A"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/editText"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
ConstraintLayout is powerful but tricky sometimes.
I want to implement a layout with the ConstraintLayout which can be easily achieved with the LinearLayout.
The Blue area is parent constraintLayout. The red part is LinearLayout. I want to convert this LinearLayout to ConstraintLayout by maintaining the following conditions
All children (Buttons)'s width should match the widest child.
The widest child is not fixed. It will be changed at runtime.
The red box should remain to maintain wrap_content.
I have tried with doing with barrier, guidelines and other properties of constraint layout without success.
Here is the code with LinearLayout:
<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="#476dce"
android:padding="16dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#f5aaaa">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
tools:text="Small" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
tools:text="Bigggggeer" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
tools:text="Even Bigggggggggeer" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
The current 1.1 stable release allows a tricky solution based on Barriers and separate backgrounds.
<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">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#f5aaaa"
app:layout_constraintBottom_toBottomOf="#+id/button3_txt"
app:layout_constraintLeft_toLeftOf="#+id/left_barrier"
app:layout_constraintRight_toRightOf="#+id/right_barrier"
app:layout_constraintTop_toTopOf="#+id/button1_txt" />
<TextView
android:id="#+id/button1_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="8dp"
android:padding="16dp"
android:text="small"
app:layout_constraintBottom_toTopOf="#+id/button2_txt"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/button2_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="8dp"
android:padding="16dp"
android:text="Bigggggeer"
app:layout_constraintBottom_toTopOf="#+id/button3_txt"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button1_txt" />
<TextView
android:id="#+id/button3_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="8dp"
android:padding="16dp"
android:text="Even Bigggggggggeer"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2_txt" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/button1_txt"
app:layout_constraintLeft_toLeftOf="#+id/left_barrier"
app:layout_constraintRight_toRightOf="#+id/right_barrier"
app:layout_constraintTop_toTopOf="#+id/button1_txt" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/button2_txt"
app:layout_constraintLeft_toLeftOf="#+id/left_barrier"
app:layout_constraintRight_toRightOf="#+id/right_barrier"
app:layout_constraintTop_toTopOf="#+id/button2_txt" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/button3_txt"
app:layout_constraintLeft_toLeftOf="#+id/left_barrier"
app:layout_constraintRight_toRightOf="#+id/right_barrier"
app:layout_constraintTop_toTopOf="#+id/button3_txt" />
<android.support.constraint.Barrier
android:id="#+id/right_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="button1_txt, button2_txt, button3_txt" />
<android.support.constraint.Barrier
android:id="#+id/left_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="button1_txt, button2_txt, button3_txt" />
</android.support.constraint.ConstraintLayout>
We can separate texts from buttons, and set two barriers at each end to track the biggest text between the three TextViews. So now, Buttons act only as a background and as click zones, and, they are set to match constraint between the two barriers.
You might want to be careful with elevation related to texts as Buttons have elevation by default.
Of course, if you are not into Buttons' animated elevation, change them to views.
Finally, ConstraintLayout has the chains feature to mimic LinearLayout's behavior in a more flexible way.
Hope this helps!
Here is the modified layout 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"
android:background="#476dce"
android:padding="16dp">
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f5aaaa"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
tools:text="Small" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toBottomOf="#id/button1"
tools:text="Bigggggeer" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toBottomOf="#id/button2"
tools:text="Even Bigggggggggeer" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
I cannot achieve this one.
I want viewB to follow the start of viewA.
Then I want to create a constraint to have a space from the start of viewA to its parent.
.
Code I tried:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<TextView
android:id="#+id/descriptionTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="8dp"
android:text="Txt1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/descriptionTxt2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Txt2"
app:layout_constraintEnd_toEndOf="#+id/descriptionTxt"
app:layout_constraintStart_toStartOf="#+id/descriptionTxt"
app:layout_constraintTop_toBottomOf="#+id/descriptionTxt" />
</android.support.constraint.ConstraintLayout>
The code above will show in Preview that only viewA will have a margin from the left. viewB does not follow the left of viewA.
Im using com.android.support.constraint:constraint-layout:1.0.2
Do not use match_parent. Instead, start using "0dp" for match_parent and define left/right or top/bottom parent constraints
Here is working code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="10dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/descriptionTxt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="8dp"
android:text="Txt1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/descriptionTxt2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Txt2"
app:layout_constraintEnd_toEndOf="#+id/descriptionTxt"
app:layout_constraintStart_toStartOf="#+id/descriptionTxt"
app:layout_constraintTop_toBottomOf="#+id/descriptionTxt" />
</android.support.constraint.ConstraintLayout>
Also , it is good to use Guidelines to have uniform left/top/right/bottom margin.
try this :
<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="wrap_content">
<TextView
android:id="#+id/descriptionTxt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Txt1"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/descriptionTxt2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Txt2"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/descriptionTxt"
app:layout_constraintLeft_toLeftOf="#+id/descriptionTxt"
app:layout_constraintTop_toBottomOf="#+id/descriptionTxt"
/>
</android.support.constraint.ConstraintLayout>