I'm trying to put a Button at the top of the screen and under it an ImageView which need to fill the screen (all screen sizes).
In RelativeLayout it's seems to be easy to do, but in the ConstraintLayout I don't succeed to get it done.
Here is an example of what it's look like in RelativeLayout:
and the XML Code:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Download Image"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:onClick="downloadImage" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:layout_below="#+id/button"
android:layout_alignParentStart="true" />
Thanks for your help,
Shay.
Maybe I've not understod your question completely but this is what I did to recreate the image you gave as example:
<?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">
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView27"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
</android.support.constraint.ConstraintLayout>
and the result:
Actually fill_parent property is deprecated. so use 0dp to fill available space of the ConstraintLayout
For your question use following code to show Button at the top of the screen and under it an ImageView which will definitely fill the screen (for all screen sizes).
<?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:onClick="downloadImage"
android:text="Download Image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
</android.support.constraint.ConstraintLayout>
Note: If you want to add margin/padding then apply to the layout or any view as per your requirement. but when you are adding any margin to the view inside to the ConstraintLayout, that view need to have Constraint for that particulate side.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Download Image"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:onClick="downloadImage"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:layout_below="#+id/button"
android:layout_alignParentStart="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"
app:layout_constraintBottom_toBottomOf="parent"/>
Button needs to have left, right and top constraints with parent.
And ImageView needs to have left, right , bottom constraints with parent and top constraint with button's bottom.
Related
Here is the Constraintlayout with 3 views:
<?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">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_profile_image" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>
The result:
As you can see, there is a big gap between each view. How can I remove those gaps and have them centered on the screen. I can achieve this easily using RelativeLayout or LinearLayout, but how can I do it in this ConstraintLayout? Is ConstraintLayout suppose to be a replacement for RelativeLayout?
When a view has two opposing constraints, ConstraintLayout will center the view between those constraints. This is what is happening in your layout.
If you want the views stacked one on top of another in the center of the screen, one way to do it is to used a packed chain.
Here is your layout using a vertical packed chain:
Here is the XML. Notice how the views are vertically constrained.
<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">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tv_name"
app:layout_constraintBottom_toTopOf="#+id/tv_headline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_profile_image" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tv_headline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>
ConstraintLayouts are said to give a flatter view hierarchy and better performance than normal RelativeLayouts.
I see some things that might cause wierd behaviour. For example in this view:
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_profile_image" />
You say that the top of this view should be aligned with the top of the #+id/iv_profile_image-view. Are you sure you don't mean that the top of this view should be aligned with the bottom of the #+id/iv_profile_image-view? And so on for the other views...
Try this it was helpful for you
we,ve to used all four constraints like left,right,top and bottom
you can implement like this also
I don'nt think you always prefer Drag and Drop you may go with the programmatic approarch also
<?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">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintTop_toBottomOf="#+id/iv_profile_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/tv_headline" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>
Happy to help you
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>
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"
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 trying to create a ConstraintLayout containing a complex layout but for some reason, it won't appear in the way that is expected. Does anyone know what must be done in order to fix the constraints and achieve the expected outcome?
XML layout 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="wrap_content"
android:orientation="vertical"
android:background="#color/lightgrey"
android:weightSum="100">
<com.google.android.gms.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mymap"
android:name="com.google.android.gms.maps.SupportMapFragment"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="41dp"
android:layout_height="0dp"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp" />
<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.9"/>
<ImageView
android:id="#+id/imageViewSun"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_sun_black"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="guideline"
app:layout_constraintRight_toLeftOf="#+id/switch_stationstopmap_lighttheme"
app:layout_constraintHorizontal_bias="0.5"
android:layout_marginEnd="8dp"
android:layout_marginBottom="0dp" />
<Switch
android:id="#+id/switch_stationstopmap_lighttheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintHorizontal_bias="0.5"
android:background="#android:color/transparent"
android:theme="#android:style/Theme.Material.Light" />
<ImageView
android:id="#+id/imageViewMoon"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_moon_black"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintLeft_toRightOf="#+id/switch_stationstopmap_lighttheme"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="#+id/guideline"
android:layout_marginBottom="5dp" />
</android.support.constraint.ConstraintLayout>
Expected result
Current result
Desired requirements
The MapView height needs to be 90% of the layout's height
The height underneath for the 3 items needs to be 10% of the layout's height
The Switch needs to be exactly in the horizontal centre of the screen
The 3 items (both image views and Switch) need to be exactly in the vertical centre of the 10% height for point 2
The ImageView of the sun needs to be exactly halfway horizontally between the left hand side of the screen and the switch
The ImageView of the moon needs to be exactly halfway horizontally between the switch and the right hand side of the screen
5dp margin is required for both the top and bottom of the 10% height at the bottom of the layout (for the 3 items)
All of the above should result in the expected result image, which is what I want.
You can try this. I changed your root layout height to android:layout_height="match_parent" and then most of the issues are solved.
<?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:background="#color/colorAccent">
<com.google.android.gms.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mymap"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#f00"
app:layout_constraintBottom_toBottomOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/imageViewSun"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/switch_stationstopmap_lighttheme"
app:layout_constraintTop_toBottomOf="#+id/guideline"
/>
<Switch
android:id="#+id/switch_stationstopmap_lighttheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#android:color/transparent"
android:theme="#android:style/Theme.Material.Light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageViewSun"
app:layout_constraintRight_toLeftOf="#+id/imageViewMoon"
app:layout_constraintTop_toBottomOf="#+id/guideline"/>
<ImageView
android:id="#+id/imageViewMoon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/switch_stationstopmap_lighttheme"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline"/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9"/>
</android.support.constraint.ConstraintLayout>