Margin under ConstraintLayout guideline not appearing properly - android

I am trying to add some space underneath the Guideline for my constraint layout, but for some reason it doesn't appear to be applied. Does anyone know what is going on and how to apply 5dp of margin underneath the Guideline (for both portrait and landscape orientations)?
XML layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/lightgrey">
<com.google.android.gms.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map_townmap"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#09c"
app:layout_constraintBottom_toBottomOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9"/>
<ImageView
android:id="#+id/imageViewSun"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:src="#drawable/ic_sun_black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/switch"
app:layout_constraintTop_toBottomOf="#+id/guideline"
/>
<Switch
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="5dp"
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_moon_black"
android:layout_marginBottom="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/switch"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline"/>
</android.support.constraint.ConstraintLayout>
Portrait orientation
Portrait orientation (close-up)
Landscape orientation
Landscape orientation (close-up)

You can apply margins to Guidelines:
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="5dp" />
Although you might need to adjust the margin layout_constraintGuide_begin and the android:orientation accordingly. Probably you should do that though a portrait layout xml file and a landscape layout xml file in their correct res folder locations.

Actually, the thing is you have added Guideline and you are using app:layout_constraintGuide_percent="0.9". This means that Guideline will be set according to the parent layout, so when you change orientation it will look weird.
Use following code to solve your problem:
<?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/lightgrey">
<com.google.android.gms.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map_townmap"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#09c"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/imageViewSun"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/imageViewSun"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:src="#drawable/ic_sun_black"
app:layout_constraintTop_toBottomOf="#+id/map_stationmap_lighttheme"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/switch" />
<Switch
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
app:layout_constraintTop_toBottomOf="#+id/map_stationmap_lighttheme"
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"/>
<ImageView
android:id="#+id/imageViewMoon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_moon_black"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
app:layout_constraintTop_toBottomOf="#+id/map_stationmap_lighttheme"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/switch"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

Related

Android: ScrollView containing two nested ConstraintLayouts, cant fill screen horizontally

I am having an issue with the following 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="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp">
<View
android:id="#+id/block"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#419E9E9E"
android:orientation="horizontal"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/block"></LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/holder"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<TextView
android:id="#+id/holderText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginLeft="50dp"
android:layout_marginTop="12sp"
android:gravity="center_vertical"
android:maxLines="4"
android:text="Hello World"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/holder" />
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Vertically, the layout does what I want: it puts the last layout and fills the screen.
However, when the device is flipped horizontally, the bottom portion (the nested constraintlayout) disappears due to the constraint on itself of app:layout_constraintBottom_toBottomOf="parent"
"How do I fill the screen with a second layout while still having it scroll horizontally ?"
I have attached pics and a demo repository to isolate the problem.
Link: https://github.com/taesookim0412/StackOverflow_Question_Android_NestedConstraintLayouts_ScrollView
I've found a solution. Instead of minHeight, you can use
app:layout_constraintHeight_min="100dp"

Layout in fragment not centering

I'm building my first proper application for Android. I wish to use the Navigation Drawer Activity to switch between screens and options. So far so good. All working great. But my layouts that load in the content are not aligned properly. See pictures
I have tried to change the layout_width and layout_height to fill_parent, match_parent and wrap_content in all combinations. Also tried adding the gravity center and vertical gravity but so far i have failed.
content layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/app_bar_main_menu"
tools:context=".MainMenu">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
the content im trying to put in the content layout:
<?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:layout_editor_absoluteY="81dp">
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/fragment_client_add_address"
android:id="#+id/imageView10"
app:layout_constraintEnd_toStartOf="#+id/editText10"
android:layout_marginEnd="12dp" android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText10"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Kontakt broj"
android:ems="10"
android:id="#+id/editText9"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="#+id/editText11"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Adresa"
android:ems="10"
android:id="#+id/editText10"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="#+id/editText9"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Naziv klijenta"
android:ems="10"
android:id="#+id/editText11" android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="64dp" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.518"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="E-Mail"
android:ems="10"
android:id="#+id/editText12"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="#+id/editText10"/>
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/round_person_black_48"
android:id="#+id/imageView11"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText11" app:layout_constraintEnd_toStartOf="#+id/editText11"
android:layout_marginEnd="12dp"/>
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/round_call_black_48"
android:id="#+id/imageView12"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText9" app:layout_constraintEnd_toStartOf="#+id/editText9"
android:layout_marginEnd="12dp"/>
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/fragment_client_add_email"
android:id="#+id/imageView13"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText12" app:layout_constraintEnd_toStartOf="#+id/editText12"
android:layout_marginEnd="12dp"/>
<Spinner
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/spinner"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/editText12" app:layout_constraintStart_toStartOf="#+id/editText12"
app:layout_constraintEnd_toEndOf="#+id/editText12" android:entries="#array/clientType"
/>
<Spinner
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/spinner2" app:layout_constraintStart_toStartOf="#+id/spinner"
app:layout_constraintEnd_toEndOf="#+id/spinner" android:entries="#array/clientContract"
app:layout_constraintTop_toBottomOf="#+id/spinner" android:layout_marginTop="32dp"/>
<Button
android:text="#string/button_genericConfirm"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/button" android:layout_marginBottom="32dp"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="128dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="128dp" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/spinner2" app:layout_constraintVertical_bias="1.0"/>
</androidx.constraintlayout.widget.ConstraintLayout>
This is what i expect it to look like:
But in reality this is what it looks like:
The issue in your RelativeLayout inside your content layout
You need to chnage the width of your RelativeLayout to android:layout_width="match_parent" in your content layout
Try this
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/app_bar_main_menu"
tools:context=".MainMenu">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is not with your fragment layout implementation, I just tried in an activity and it is worked properly.
I would say to change the content layout to FrameLayout, which is often used to hold the fragments, more information can be found here :Why is a FrameLayout used for fragments?
The frame layout instead of relative layout should be
<FrameLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Just left the id as relativeLayout, but feel free to change it.
Also, if you have such a problem, you can always use the layout inspector, it is in the tools menu, give it a try. Or you can just play with background colors, to check the layout sizes, just like back in time, before layout inspector.
It is always good to use drawablestart instead of imageview in all edit text
Please find below xml may it will be helpful
<?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">
<EditText
android:id="#+id/editText11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="64dp"
android:layout_marginEnd="8dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="Naziv klijenta"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.518"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="Kontakt broj"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText11" />
<EditText
android:id="#+id/editText10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="Adresa"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText9" />
<EditText
android:id="#+id/editText12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="E-Mail"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText10" />
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:entries="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="#+id/editText12"
app:layout_constraintStart_toStartOf="#+id/editText12"
app:layout_constraintTop_toBottomOf="#+id/editText12" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:entries="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="#+id/spinner"
app:layout_constraintStart_toStartOf="#+id/spinner"
app:layout_constraintTop_toBottomOf="#+id/spinner" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="128dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="128dp"
android:layout_marginBottom="32dp"
android:text="xxxx"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spinner2"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
In case you want specific size for your imageview in left use below code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:drawable="#drawable/icon"
android:width="#dimen/icon_size"
android:height="#dimen/icon_size"
/>
</layer-list >
Use FrameLayout instead of relative layout and finally remove the line from parent constraint layout..
tools:layout_editor_absoluteY="81dp"
try to use like below
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
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_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="34dp"
android:layout_height="34dp"
app:srcCompat="#drawable/fragment_client_add_address"
android:id="#+id/imageView10"
android:layout_marginEnd="12dp"
android:layout_marginTop="8dp"/>
</androidx.appcompat.widget.LinearLayoutCompat>
And for content main
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.appcompat.widget.LinearLayoutCompat>
You can use the property app:layout_constraintVertical_bias so that it is biased equally to parent. This can also be achieved in layout editor by constraining all 4 sides of the layout to parent.

Android Setup constraint for view2 to follow start of view1. But view1 has constraint to start of its parent

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>

Items not constrained properly in ConstraintLayout

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>

ConstraintLayout: set height of all views in row to match the tallest one

I'm trying to utilize a ConstraintLayout (version 1.0.2) to set the height of 2 side-by-side views to match the tallest one of them. This serves as a ViewHolder in for a RecyclerView, where each TextView gets an arbitrary length of text...
If I set each to wrap_content, the shorter one will shrink.
If I set both to 0dp (match_contraints), both end up 0 height.
Here's the setup:
<?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_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/id1"
android:layout_width="60dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/id2"/>
<TextView
android:id="#+id/id2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/id1"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>
I suppose this is a bug, as "0dp" should act more like match_parent than actual 0 dp.
On iOS, by the way, the equivalent Auto Layout rules (of setting views' heights to match top and bottom of parent) produce the expected result.
Of course this is pretty simple using LinearLayout, but this layout plays part in a larger layout, and I'd like to trim the view hierarchy...
Answering, in case anyone is looking out for answer in future.
ConstraintLayout introduced Barrier in v1.1 to achieve one such functionality asked by the OP in the question
The above mentioned functionality can be achieved using below xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/id1"
android:layout_width="60dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/barrier"
app:layout_constraintVertical_bias="0.0"
android:text="#string/id1_text" />
<TextView
android:id="#+id/id2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#+id/id1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/barrier"
app:layout_constraintVertical_bias="0.0"
android:text="#string/id2_text" />
<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="id1,id2" />
</android.support.constraint.ConstraintLayout>
This might help you.
<android.support.constraint.ConstraintLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/tv_1"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/colorAccent"
android:gravity="center"
android:padding="#dimen/activity_vertical_margin"
android:text="sjdjhshdjhdjhsdgfjhgsdjfgjsdgfjsdgfhgdsjhfghs"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/tv_2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_2"
android:layout_width="150dp"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:gravity="center"
android:padding="#dimen/activity_vertical_margin"
android:text="sjdjhsjhd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/tv_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
This is tricky and slow, but it works.
The point is:
Add additional invisible same layout for measure height. This one has wrap_content height attribute, so it will stretch parent if it is big enough.
Set your visible layout height to 0dp, so it will fill rest of parent.
As you can see the capture below, we have two layouts. Hidden one is wrap_contents
<?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="wrap_content">
<TextView
android:id="#+id/view_1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#DDDDDD"
android:text="#android:string/yes"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/view_2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/view_1_invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#DDDDDD"
android:text="#android:string/yes"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/view_2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/view_2"
android:layout_width="100dp"
android:layout_height="0dp"
android:background="#DDDDDD"
android:text="#android:string/httpErrorBadUrl"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/view_2_invisible"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#DDDDDD"
android:text="#android:string/httpErrorBadUrl"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I've managed to do this with LinearLayout
parent to be height = wrap content
children to be height = match parent
children width = 0 and same weight
<?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_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
>
<TextView
android:layout_weight="1"
android:id="#+id/id1"
android:layout_height="match_parent"
android:layout_width="0dp"
android:background="#color/green_400"
android:text="11"
android:textSize="50sp"
/>
<TextView
android:layout_weight="1"
android:id="#+id/id2"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:background="#color/cat_grey_lite"
android:text="2222222222"
android:textSize="50sp"
/>
</LinearLayout>
<TextView
android:id="#+id/txt_service_request_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_id"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/txt_service_request_status"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_service_request_status"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_status"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/txt_service_request_id"
app:layout_constraintEnd_toStartOf="#+id/txt_service_request_desc"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/txt_service_request_id"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_service_request_desc"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_desc"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/txt_service_request_id"
app:layout_constraintEnd_toStartOf="#+id/txt_service_request_cat"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/txt_service_request_status"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_service_request_cat"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_cat"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/txt_service_request_id"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/txt_service_request_desc"
app:layout_constraintTop_toTopOf="parent" />

Categories

Resources