I use the follow code to display buttons and ViewPager. I want to display ViewPager above of buttons but that it have wrap_content height and width.
<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:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent_hd_image_scrim">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/buttons_bottom_layout"
android:layout_width="0dp"
android:layout_height="#dimen/hd_preview_buttons_height"
android:layout_marginEnd="#dimen/basic_keyline"
android:layout_marginRight="#dimen/basic_keyline"
android:orientation="horizontal"
android:layout_marginBottom="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/view_pager"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:visibility="invisible" />
<View
android:id="#+id/stubBottom"
android:layout_width="#dimen/basic_keyline"
android:layout_height="wrap_content" />
<Button
android:id="#+id/send_button"
style="#style/HDPreviewButtonStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorAccent"
android:text="#string/send"
android:textAllCaps="true" />
</LinearLayout>
What I see on preview.
But on practice on emulator I get this screen.
What I do incorrect?
From the XML code you posted there are several issues that ConstraintLayout might have problem with.
Also ConstraintLayout can help you with nesting layout, which you also mentioned in comments you want to avoid.
I am not sure you want the view pager to behave as wrap rather than match it's constraints.
I created what I think is what you want using what ConstraintLayout has to offer to ease pain of previous layouts.
<android.support.constraint.ConstraintLayout android:id="#+id/linearLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent_hd_image_scrim">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/barrier"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/send_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_pager" />
<Button
android:id="#+id/send_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="8dp"
android:background="#color/colorAccent"
android:textAllCaps="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/view_pager"
tools:text="Send" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="send_button, button"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Bottom buttons are chained horizontally together - this is basically replacement of the previous LinearLayout and the weight usage.
Also added barrier for height of the bottom buttons - this will make sure the height of the view pager will always accomodate to the height of any of them.
If you will actually want to the view pager to have wrap content add these
app:layout_constraintWidth_max="wrap"
app:layout_constraintHeight_max="wrap"
Related
I have a ConstraintLayout with layout_height="wrap_content"
Inside I have four children. What I need is to constraint the last child to the second one, but I need the last child to be above the ConstraintLayout it should be excluded from the wrap_content of the parent. I'm breaking my head for a few days, I can't find a way to do so. Maybe someone has an idea.
Here is my XML:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#color/colorAccent"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button one"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button two"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button1" />
<TextView
android:id="#+id/status_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Collaps"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<FrameLayout
android:layout_width="110dp"
android:layout_height="250dp"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button2"
app:layout_constraintTop_toBottomOf="#+id/button2" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is what I get:
This is what I need:
I know I can constraint the bottom and the top of my FrameLayout outside the ConstraintLayout to his bottom, but the problem is that I need it to be constrained exactly to button2 and not to be wrapped by his parent.
Thanks in advance.
If the effect you're after is just to do with the view being 'outside' of the background, then you shouldn't set a background on the ConstraintLayout itself, but add another view to represent it. So in your case, you could use something like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="#id/status_text_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
...
</androidx.constraintlayout.widget.ConstraintLayout>
I center my two Input layout vertically in my view using chaining. I also have an image view and a text view on top of this two Input layout. I would like to have this Input Layout center only if the view enough space.
Right now the Input layout are always center and the text go over the image.
In ios i would use constraint priority to do so but it looks like this is not available for constraint layout yet?
What i have right now
What I want to have is
Edit
Sorry i should have add the text :)
<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:id="#+id/registration_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:adjustViewBounds="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/logo" />
<!--To get the focus when page appear-->
<include layout="#layout/layout_focus_interceptor" />
<TextView
android:id="#+id/tv_extra_info"
style="#style/TextContent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:gravity="center"
app:layout_constraintBottom_toTopOf="#+id/input_layout_email"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_email"
style="#style/TextInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_bottom_text_input_layout"
android:layout_marginTop="8dp"
android:theme="#style/PreAuthorizationTextTheme"
app:layout_constraintBottom_toTopOf="#id/input_layout_email_confirmation"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed">
<android.support.design.widget.TextInputEditText
android:id="#+id/etxt_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:nextFocusLeft="#id/etxt_email"
android:nextFocusUp="#id/etxt_email"
tools:hint="#string/general_email" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_email_confirmation"
style="#style/TextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_bottom_text_input_layout"
android:layout_marginTop="#dimen/margin_top_text_input_layout"
android:theme="#style/PreAuthorizationTextTheme"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/input_layout_email">
<android.support.design.widget.TextInputEditText
android:id="#+id/et_email_confirmation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:nextFocusLeft="#id/etxt_email"
android:nextFocusUp="#id/etxt_email"
tools:hint="#string/registration_email_confirmation" />
</android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout>
I don't know how to do this either! But I was able to come up with something that comes close to what you're looking for.
What I did was create a Guideline element fixed at a particular height that caused my views to seem vertically centered when they were positioned below it. For different size phones, this will probably be off by a pixel or ten, but it should never be too bad.
I then create a Barrier that references the guideline and the other view I want to "dodge". And I position my other elements with respect to this barrier.
My XML:
<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">
<View
android:id="#+id/rect"
android:layout_width="300dp"
android:layout_height="100dp"
android:layout_marginTop="16dp"
android:background="#fac"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.34"/>
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="rect,guideline"/>
<View
android:id="#+id/first"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginTop="16dp"
android:background="#caf"
app:layout_constraintTop_toBottomOf="#id/barrier"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<View
android:id="#+id/second"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginTop="16dp"
android:background="#caf"
app:layout_constraintTop_toBottomOf="#+id/first"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
With a short rect view the two middle views appear vertically centered, and with a tall rect view the two middle views get pushed down:
With Android's constraint layout, how can I put a single border around multiple elements? One of the main benefits of constraint layout is that you don't have to nest views. Is this the one scenario where you would use another layout inside of constraint layout?
Without seeing more of your code it is hard for me to know what your actual layout looks like. But this is one way to draw a border around some layouts without nesting any of the views
<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:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_margin="4dp"
app:layout_constraintBottom_toBottomOf="#id/guideline"/>
<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.7"/>
<View
android:id="#+id/v1"
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="#8FF0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/v2"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:background="#8F0F"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/v3"
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:background="#80FF"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/v1"
app:layout_constraintBottom_toBottomOf="#id/guideline"/>
<View
android:id="#+id/v4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#8000"
app:layout_constraintBottom_toTopOf="#+id/v5"
app:layout_constraintEnd_toStartOf="#+id/v2"
app:layout_constraintStart_toEndOf="#+id/v1"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/v5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#8000"
app:layout_constraintBottom_toBottomOf="#+id/v3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/v1"
app:layout_constraintTop_toBottomOf="#+id/v2" />
</android.support.constraint.ConstraintLayout>
This is how the output looks like
Those colored views are some some widgets that have been placed in the layout. And the border has been set in another view.
I'm working on an Android activity in which I want to have a header, and the content below the header. I want to have background image that is streched just on the content, but not on the header.
From the picture you can see that my image is streched also on the logo part of the screen, which I don't want.
Here is the xml of my current 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"
android:background="#drawable/background_11"
tools:context=".login.LoginActivity"
>
<ImageView
android:id="#+id/logo"
android:layout_width="381dp"
android:layout_height="156dp"
android:src="#drawable/logo"
tools:ignore="ContentDescription"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="-480dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintHorizontal_bias="0.47" />
<ImageView
android:id="#+id/emptyImage"
android:layout_width="384dp"
android:layout_height="445dp"
android:layout_marginBottom="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:background="#color/TICK_BACKGROUND"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/empty" />
<EditText
android:id="#+id/login_usernameTextField"
android:layout_width="291dp"
android:layout_height="63dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="80dp"
android:background="#drawable/rounded_text_edit_shape"
android:ems="10"
android:hint="Username"
android:inputType="textPersonName"
android:textColor="#color/INPUT_TEXT_COLOR"
android:textColorHint="#color/iron"
android:textCursorDrawable="#null"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<EditText
android:id="#+id/login_passwordTextField"
android:layout_width="291dp"
android:layout_height="63dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="-38dp"
android:background="#drawable/rounded_text_edit_shape"
android:ems="10"
android:hint="Password"
android:textCursorDrawable="#null"
android:inputType="textPassword"
android:textColor="#color/INPUT_TEXT_COLOR"
android:textColorHint="#color/iron"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_usernameTextField"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<Button
android:id="#+id/login_loginButton"
android:onClick="loginButtonClick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:background="#drawable/rounded_button_shape"
android:text="Log In"
android:textColor="#color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_passwordTextField"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.28"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
</android.support.constraint.ConstraintLayout>
I thought about making a parent Layout and inside that Layout add a header and another layout that contains the content. And then set the background inside the content layout like like this: android:background="#drawable/background_11"
Here is the code I tried:
<?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">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
app:srcCompat="#drawable/logo_2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="-1dp"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.0" />
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
app:layout_constraintTop_toBottomOf="#id/logo"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent">
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
However, my background is not showing up. Here are the reuslts:
You can use a ConstraintLayout in an other ConstraintLayout but you need to respect some rules. All direct childs of a ConstraintLayout should have constraint on left,top, right and bottom.
I think that without the constraint left and right of your inner ConstraintLayout, he have a width and height equals to 0dp , he is not displayed.
Have you try to add constraint left and rigth to your inner 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">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
app:srcCompat="#drawable/logo_2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="-1dp"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.0" />
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
app:layout_constraintTop_toBottomOf="#id/logo"
android:layout_marginLeft="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Hope this helps.
I made it work by making a constraint layout inside the Linear Layout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="146dp"
app:srcCompat="#drawable/netset_logo_2" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/background_11">
</android.support.constraint.ConstraintLayout>
</LinearLayout>
Still I don't understand why doesn't my first solution work. Why can't you add a constraint layout inside the constraint layout?
There is no problem adding a constraint layout inside of another constraint layout if you satisfy all constraints.
This would work:
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
android:layout_marginLeft="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
</android.support.constraint.ConstraintLayout>
But also:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#drawable/background_11"
android:layout_marginLeft="8dp"
app:layout_constraintTop_toBottomOf="#id/logo"
app:layout_constraintBottom_toBottomOf="parent">
</android.support.constraint.ConstraintLayout>
If it is the right approach using a ConstraintLayout for the purpose of setting a background image is another question.
Since you are only using the ConstraintLayout to use the background property, you can skip that layout completely and use a View directly.
Since all views inherit from View, but just add a lot of logic on top of it, in this use case a View is enough to satisfy the needs.
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
android:layout_marginLeft="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
</View>
Well naturally, you made the constraint layout take the entire screen, and the Logo take a smaller subset of it.
so you have the logo on your screen, and beneath it the background.
you might want to set the "background" on a different sub layout inside the main constraint layout.
something like this
<constraintlayout
width:match_parent
height:match_parent>
<logo here/>
<constraintlayout
background_here>
<constraintlayout/>
<constraintlayout/>
hope it makes sense.
I am using this color picker above a guideline and want to align a Text View (and other views) below the guideline and bind them to the width of the color picker by using a ConstraintLayout with these options:
app:layout_constraintRight_toRightOf="#+id/colorPicker"
app:layout_constraintLeft_toLeftOf="#+id/colorPicker"
(The width of the color picker depends on the available height.)
The problem I am facing is that the view seems to be placed exactly below the color picker, however, the content of the view is not adjusted and therefore not shown completely as shown in this picture.
Similar behavior can be reproduced with an ImageView instead of TextView.
A RecyclerView seems to be working, however, the 'list end animation' when reaching the start or end of the list is misplaced.
When using other views instead of this color picker I do not face this issue.
Can anyone explain this behavior and how to fix it?
The complete xml code I am using for 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="match_parent"
tools:context="xxx.xxx.xxx.MainActivity">
<com.rarepebble.colorpicker.ColorPickerView
android:id="#+id/colorPicker"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.60"
android:orientation="horizontal"
/>
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Hello World! Some chars in this TextView are cut on the right side."
app:layout_constraintTop_toTopOf="#+id/guideline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="#+id/colorPicker"
app:layout_constraintLeft_toLeftOf="#+id/colorPicker"
/>
</android.support.constraint.ConstraintLayout>
Did you try using LinearLayout? With problems like these, where one view needs to occupy a percentage of the screen, using layout_weight
Solution using LinearLayout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<com.rarepebble.colorpicker.ColorPickerView
android:id="#+id/colorPicker"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="6"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Hello World! Some chars in this TextView are cut on the right side." />
</FrameLayout>
</LinearLayout>
Edit based on comments
Something like this should work. You can change the View's visibility to GONE or VISIBLE depending on whether the FloatingActionButton has been tapped or not.
<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.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="#+id/linearContainer"
app:layout_constraintTop_toTopOf="#+id/linearContainer"
android:layout_marginTop="16dp" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
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="parent"
app:layout_constraintVertical_bias="0.0" />
<LinearLayout
android:id="#+id/linearContainer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginBottom="0dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent">
<com.rarepebble.colorpicker.ColorPickerView
android:id="#+id/colorPicker"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="6" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Hello World! Some chars in this TextView are cut on the right side." />
</FrameLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>