I had a few group in my constraint layout, which I use it to show/hide its component. But then I notice I can add constraint to group(saw the Constraint Widget at Attributes). I tried resizing the group, adding constraint at Attributes, but nothing changed.
The only thing i found online regarding to group is that i can show/hide its component. Even according to https://developer.android.com/reference/android/support/constraint/Group , it doesnt seems like it's possible to add constraint to group.
My question is, is it possible to add constraint between groups instead of adding constraint to every single view?
Here I'm providing an example you can check here how constrain to view-group work. Try this layout for any demo activity to check the functionality. Here you can see I have set visibility="gone" for view-group and set references for Add and Done buttons. So for child add and done buttons will be set as visibility="gone".
<?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:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.Group
android:layout_width="wrap_content"
android:visibility="gone"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
app:constraint_referenced_ids="btnAdd,btnDone" />
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="No buttons visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnDone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Done"
app:layout_constraintEnd_toStartOf="#+id/btnAdd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Related
I have implemented below layout using linear layout , I want to get same result using constraint layout, how can I do it?
Use chain to configure a group of views that are linked to each other with bi-directional position constraints.
Official docs: Control linear groups with a chain
<?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">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<!-- With packed the views are packed together -->
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
</androidx.constraintlayout.widget.ConstraintLayout>
Just add a RelativeLayout or LinearLayout within the ContraintLayout and do the same thing.
UI with constraint layout shows good on Android Studio, but become irregular and scattered once I build and test on mobile. And when change my constraint layout to relative or linear layout, my design works perfectly. So, whats so good in constraint layout then if we can't code properly in it. 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/background_color"
android:paddingHorizontal="#dimen/button_horizontal_padding">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="143dp"
android:layout_marginStart="143dp"
android:text="#string/booking_done_title"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="56dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/booking_done_sub_title"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="95dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_booking_done_image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="188dp" />
<Button
android:id="#+id/hotelBookNowBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginHorizontal="#dimen/button_horizontal_padding"
android:background="#drawable/green_button_background"
android:gravity="center"
android:paddingHorizontal="#dimen/button_horizontal_padding"
android:text="#string/done"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/white"
android:textStyle="normal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="353dp" />
<TextView
android:id="#+id/viewSummaryView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/view_full_summary"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="425dp" />
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>
The tools namespace attributes enable design-time features that are only used in layout editor. The value of tools:layout_editor_absoluteY will have no effect on the View at runtime.
When a View is missing proper constraints, the layout editor will display a warning about it. However, in your case you have ignored these warnings by setting tools:ignore="MissingConstraints" for your Views. You have only set horizontal constraints for your Views but the vertical ones are missing.
In order to set constraints for a View in the layout editor you need to click on the circles at the edges of the View and drag them towards other Views or the edge of the parent. The constraints can also be set directly in the XML by using appropriate attributes. The full list can be found in the ConstraintLayout documentation
I was having the same issue and it turns out all the views you workin on has to be constraint. For example if you have a button at the bottom/middle of the layout and you want to stay in that place you need to use constraint to both side of the layout and bottom. Android studio give you a warning about this.
I've built a Fragment with constraint layout with a ListView, empty view and a total count view. The bottom constraint is working (with an artificial adjustment though), but the top is overlapping the tabs from my MainActivity:
My code is here and it's my first time using constraint 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/total_items_view"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.98"
tools:layout_editor_absoluteX="8dp" />
<TextView
android:id="#+id/total_items_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorOrange"
android:padding="4dp"
android:text="Items in this category: "
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintRight_toLeftOf="#id/items_number_view"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/items_number_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorOrange"
android:padding="4dp"
android:text="44"
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toRightOf="#id/total_items_view" />
<RelativeLayout
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:visibility="gone">
<ImageView
android:id="#+id/empty_book_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/orange_orange_book" />
<TextView
android:id="#+id/empty_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/empty_book_image"
android:layout_centerHorizontal="true"
android:fontFamily="sans-serif-medium"
android:paddingTop="16dp"
android:text="This category is still empty..."
android:textAppearance="?android:textAppearanceMedium" />
<TextView
android:id="#+id/empty_subtitle_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/empty_title_text"
android:layout_centerHorizontal="true"
android:fontFamily="sans-serif"
android:paddingTop="8dp"
android:text="Let's start with adding books!"
android:textAppearance="?android:textAppearanceSmall"
android:textColor="#A2AAB0" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
}
Is there any way to set a constraint to a view in a separate (main) activity? How can I fix this?
I have tried the wrap_content, and the only thing I can think of is manually setting it a little bit off the top, which kind of ruins the concept of constraint layout.
Thanks.
You cannot apply constraint outside constraint layout. The problem is with parent layout, it seems like your view pager is overlapping tab layout.
First of all, do not use match_parent in ConstraintLayout, just eg. if you want to make view match screen width use
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
The thing why it overlapping is that you probably do not limit top of your list (or list container) to bottom of this top view like
app:layout_constraintTop_toBottomOf="#+id/top_view"
Your ListView's height is set to wrap_content in which case it will expand as much as it needs to and overlap other views. If you want to use wrap_content and enforce the constraints of the view at the same time, you need to add app:layout_constrainedHeight="true" attribute to to your ListView.
I am using constraint layout as parent, and added multiple child using constraint. There are three views horizontally and I have to apply rounded corner background for two view only, which was achieved by linear layout previously. But with the help of constraint layout, I am not able to achieve this.
How can I achieve this?
ConstraintLayout recently introduced the concept of constrainthelper which can be used to perform an action on a group of views. 'Group', which is used to toggle visibility of multiple view is subclass of this.
A constrainthelper which changes background of multiple views together is not yet a part of the stable release, but soon will be.
Until then, you can achieve a backround as in the example below, where 3 textview share a common background, using an View class:
<?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="#AAA">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFF"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toTopOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView1"
tools:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView2"
tools:text="TextView" />
</android.support.constraint.ConstraintLayout>
EDIT: A nice blog on what to expect from ConstraintLayout 2.0
You can do it with simple Image View following this steps:
Put a Image view before text views
set Image view's start, top constraint to match first text view
Set Image view's end & bottom constraint to match last text views
This will gone stretch that imageview to a Rectangle defined by top-left of first view and bottom-right of last view.
Note that ImageView must be before text views:
<!--Background Image View-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/lake"
app:layout_goneMarginRight="#dimen/activity_vertical_margin"
<!--Top_LEFT by first view-->
app:layout_constraintStart_toStartOf="heding"
app:layout_constraintTop_toTopOf="#+id/heding"
<!--BOTTOM RIGHT by last view-->
app:layout_constraintEnd_toEndOf="#+id/info"
app:layout_constraintBottom_toBottomOf="#+id/info"
/>
<!--first view-->
<TextView
android:id="#+id/heding"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Lake Tahoe "
android:textSize="17sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toEndOf="#+id/thumb"
app:layout_constraintTop_toTopOf="#+id/thumb"
tools:layout_constraintBottom_creator="1"
android:textColor="#FFF"
tools:layout_constraintTop_creator="1" />
<!--last view-->
<TextView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="LakeTahoe is a large freshwater lake in Sierra Naveda"
android:textSize="15sp"
android:textColor="#FFF"
app:layout_constraintBottom_toBottomOf="#+id/thumb"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toEndOf="#+id/thumb"
app:layout_constraintTop_toBottomOf="#+id/heding"
app:layout_constraintVertical_bias="1.0"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1" />
Result:
My xml file is using constraint layout the text does not gets wrapped properly, using the dependency 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
<?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:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools">
<ImageView
android:layout_width="254dp"
android:layout_height="100dp"
app:srcCompat="#mipmap/ic_launcher"
android:id="#+id/thumbnail_image_view"
android:layout_marginTop="16dp"
android:scaleType="centerCrop"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp" />
<TextView
tools:text="name of the movie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/original_title"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/thumbnail_image_view"
app:layout_constraintLeft_toLeftOf="#+id/thumbnail_image_view" />
<TextView
tools:text="ReleaseDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/release_date"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/original_title"
app:layout_constraintLeft_toLeftOf="#+id/original_title" />
<TextView
tools:text="Ratings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/user_rating"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/release_date"
app:layout_constraintLeft_toLeftOf="#+id/release_date" />
<Button
tools:text="Favourite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fav_btn"
android:layout_marginTop="96dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:onClick="addToFav"/>
<TextView
tools:text="ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are layed out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.
Everything you can do with ConstraintLayout is available directly from the Layout Editor's visual tools, because the layout API and the Layout Editor were specially built for each other. So you can build your layout with ConstraintLayout entirely by drag-and-dropping instead of editing the XML."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/synopsis"
app:layout_constraintRight_toRightOf="#+id/fav_btn"
app:layout_constraintLeft_toLeftOf="#+id/user_rating"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/user_rating"
app:layout_constraintHorizontal_bias="0.0" />
</android.support.constraint.ConstraintLayout>
The design view looks like this:
Set padding in each component of your layout for example:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="#string/plus" />
Try this.
The answer is wrong. You should set constrain for the textView instead of using "wrap_content"