I am using constarintLayout. The intention is to present five ui components aligned vertically with no gap separating them. In xml file, the five ui component are separated with a large gap separating them.
how can I reduce or eliminate the gap.
I referred to some examples in the internet, but it was not clear how to remove the separating gaps
code:
<Button
android:id="#+id/btn_start_gps_reading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/str_start_gps_readings"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/ll_lat_container"/>
<LinearLayout
android:id="#+id/ll_lat_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_start_gps_reading"
app:layout_constraintBottom_toBottomOf="#+id/ll_long_container">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lat_readings"/>
<TextView
android:id="#+id/tv_lat_readings_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_long_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ll_lat_container"
app:layout_constraintBottom_toTopOf="#+id/ll_alt_container">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/long_readings"/>
<TextView
android:id="#+id/tv_long_readings_value"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_alt_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ll_long_container"
app:layout_constraintBottom_toTopOf="#+id/ll_acc_container">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/alt_readings"/>
<TextView
android:id="#+id/tv_alt_readings_value"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_acc_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ll_alt_container"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/acc_readings"/>
<TextView
android:id="#+id/tv_acc_readings_value"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
If you remove the bottom constraint of the last linearlayout the gaps go away
<LinearLayout
android:id="#+id/ll_acc_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ll_alt_container">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/acc_readings"/>
<TextView
android:id="#+id/tv_acc_readings_value"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
If your elements are evenly spaced out that means you successfully created a vertical chain.
Default chain mode is spread and this is what you're experiencing. What you actually want is to change your chain mode to packed which will remove all gaps.
You accomplish it by modifying first item in the chain (for vertical chains that means top-most):
<Button
android:id="#+id/btn_start_gps_reading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/str_start_gps_readings"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/ll_lat_container"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0.5"/>
layout_constraintVertical_chainStyle changes chain style.
layout_constraintVertical_bias positions your packed views relative to parent: 0.0 is on top, 1.0 on the bottom and 0.5 is centered (default).
Check out the documentation for more details.
Related
I have two TextViews, one above the other. I would like the vertical middle of the two TextViews to be at the same position as the vertical middle of the ImageView. (This is so, regardless of the amount of text that may go into either TextView, everything will always look neat, vertically.)
I created what I need perfectly using two LinearLayouts (as the space above the title is the same as the space beneath the description):
But Android Studio was unable to covert it to ConstraintLayout successfully, as it just dumped the TextViews at the bottom of the layout. I've played with a lot of attributes, but could not quite arrive at the desired layout.
My question is similar to this one, except that I am trying to center_vertical align a pair of views rather than a single one - which means I have no view edge to align to the centre of the ImageView/container.
Is it possible to achieve what I'm after with ConstraintLayout? (I expect I may be able to do it with a single RelativeLayout, but I would like to use the layout_constraintDimensionRatio attribute on my ImageView which presumably leave me needing to use ConstraintLayout.)
In case it helps, here's the code for my aforementioned LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="#dimen/resources_list_image_size"
android:layout_height="#dimen/resources_list_image_size"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_gravity="center_vertical"
android:contentDescription="#string/resource_image"
android:scaleType="centerCrop"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/textViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/MyTextAppearanceMedium"
tools:text="Title" />
<TextView
android:id="#+id/textViewDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/MyTextAppearanceSmall"
tools:text="Description" />
</LinearLayout>
</LinearLayout>
Update: Solution
Thanks to Ben P's answer, this is my final code:
<?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="wrap_content">
<!-- Add guideline to align imageView to. -->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="#string/resource_image"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="#+id/textViewTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
app:layout_constraintBottom_toTopOf="#id/textViewDescription"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/imageView"
app:layout_constraintTop_toTopOf="parent"
android:textAppearance="#style/MyTextAppearanceMedium"
app:fontFamily="#font/roboto_slab_regular"
app:layout_constraintVertical_chainStyle="packed"
tools:text="#string/enter_title_colon" />
<TextView
android:id="#+id/textViewDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/imageView"
app:layout_constraintTop_toBottomOf="#id/textViewTitle"
app:fontFamily="#font/roboto_slab_light"
android:textAppearance="#style/MyTextAppearanceSmall"
tools:text="Description" />
</androidx.constraintlayout.widget.ConstraintLayout>
It sounds like you could solve this problem by using a packed chain anchored to the top and bottom of the ImageView. You'll also need to use horizontal bias and a constrained width in order to get wrapping to work correctly.
<?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">
<View
android:id="#+id/anchor"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_margin="64dp"
android:background="#caf"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintHorizontal_bias="0"
app:layout_constrainedWidth="true"
app:layout_constraintTop_toTopOf="#id/anchor"
app:layout_constraintStart_toEndOf="#id/anchor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/two"/>
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_bias="0"
app:layout_constrainedWidth="true"
app:layout_constraintTop_toBottomOf="#id/one"
app:layout_constraintStart_toEndOf="#id/anchor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/anchor"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The important attributes here are:
app:layout_constraintVertical_chainStyle="packed" on the first view, which causes the two textviews to stack right on top of each other
app:layout_constraintHorizontal_bias="0" on both views, which means that when the text is not long enough to reach the edge of the screen it will stick to the edge of the anchor view
app:layout_constrainedWidth="true" on both views, which prevents the textview from ever being wider than its constraints, and so the text wraps to a new line
If you want to use ConstraintLayout you could use something like this:
<?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">
<ImageView
android:id="#+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:contentDescription="description"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView">
<TextView
android:id="#+id/textViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Title" />
<TextView
android:id="#+id/textViewDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Description" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
You can use this 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">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorAccent"
android:text="I am 5% of the screen height"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="#+id/textView3"
app:layout_constraintHeight_percent="0.05"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.15"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorPrimary"
android:text="I am 15% of the screen height (And the image is 20% screen size in height) "
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.20"
app:layout_constraintDimensionRatio="1:1"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/rose" />
</android.support.constraint.ConstraintLayout>
It will look like this:
One important thing about this layout:
You can control your aspect ratio (for the image) with app:layout_constraintDimensionRatio="x:y" and by passing "1:1" make it square
And by the way - I am using support library for no reason on this example, you can use androidx
I am doing a constraint layout for screen. And in some small screens is not showing correctly, because the button is over the text.
In the other devices with a bigger screen is showing correctly.
And i don't know how i can solve it.
Thanks
This is my layout (Constraint Layout) with a Linear layout inside.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/wf_white">
<LinearLayout
android:id="#+id/ly_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/form_margins"
android:orientation="vertical"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="parent"
android:background="#color/wf_light_grey">
<TextView
style="#style/wf_text_link"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textAllCaps="true"
android:layout_marginTop="#dimen/form_margins"
android:text="#string/_BIWC_your_agent"/>
<ImageView
android:id="#+id/broker_image"
android:layout_width="#dimen/broker_image_size"
android:layout_height="#dimen/broker_image_size"
android:layout_gravity="center"
android:layout_marginTop="#dimen/text_margin_sides"
android:src="#drawable/img_broker_without_image"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/broker_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/form_margins_mini"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="#dimen/form_margins_mini"
android:orientation="horizontal">
<ImageView
android:id="#+id/broker_icon_phone"
android:layout_width="#dimen/icons_size_broker"
android:layout_height="#dimen/icons_size_broker"
android:layout_marginTop="#dimen/form_margins_small"
android:layout_marginBottom="#dimen/text_margin_sides"
android:visibility="gone"
android:src="#drawable/icon_action_phone"
tools:ignore="ContentDescription"/>
<ImageView
android:id="#+id/broker_icon_email"
android:layout_width="#dimen/icons_size_broker"
android:layout_height="#dimen/icons_size_broker"
android:layout_marginTop="#dimen/form_margins_small"
android:layout_marginStart="#dimen/icons_margin_broker"
android:layout_marginBottom="#dimen/text_margin_sides"
android:src="#drawable/ic_email"
tools:ignore="ContentDescription"/>
<ImageView
android:id="#+id/broker_icon_location"
android:layout_width="#dimen/icons_size_broker"
android:layout_height="#dimen/icons_size_broker"
android:layout_marginTop="#dimen/form_margins_small"
android:layout_marginStart="#dimen/icons_margin_broker"
android:layout_marginBottom="#dimen/text_margin_sides"
android:visibility="gone"
android:src="#drawable/ic_location"
tools:ignore="ContentDescription"/>
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/broker_introduction_title"
style="#style/wf_text_copy"
android:layout_width="match_parent"
android:gravity="start"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/ly_container"
android:text="#string/_SR_head"/>
<TextView
android:id="#+id/access_code_description"
style="#style/wf_text_hero_copy"
android:layout_width="match_parent"
android:layout_below="#+id/broker_introduction_title"
android:layout_marginLeft=“20dp”
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/broker_introduction_title"
android:gravity="start"
android:text="#string/_BIWC_welcome_message"/>
<Button
android:id="#+id/btn_go_to_register"
style="#style/wf_button_primary"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:descendantFocusability="beforeDescendants"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="#string/_BIWC_create_account"/>
</android.support.constraint.ConstraintLayout>
And also i attach a photo of the problem. Where you can see how the button is over the text, and the user can't read the text.
You should add layout_constraintBottom_toTopOf & layout_constraintTop_toBottomOf.
layout_constraintBottom_toTopOf —> Align the bottom of the desired view
to the top of another.
layout_constraintTop_toBottomOf —> Align the top of the desired view to
the bottom of another.
<TextView
android:id="#+id/access_code_description"
app:layout_constraintBottom_toTopOf"#+id/btn_go_to_register"
android:layout_marginBottom="20dp" //Remove this line
And
<Button
android:id="#+id/btn_go_to_register"
app:layout_constraintTop_toBottomOf="#+id/access_code_description"
FYI
It will be good approach if you use ScrollView ( Where child is TextView).
Set ScrollView as parent layout and ConstraintLayout in it.
ScrollView documentation
I have this layout:
<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=".MainActivity">
<android.support.constraint.Guideline
android:id="#+id/bottomGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.95"/>
<ImageView
android:id="#+id/logo"
android:layout_width="144dp"
android:layout_height="52dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/tvTitle"
app:layout_constraintVertical_chainStyle="packed"
android:src="#drawable/ic_launcher_background"/>
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="28dp"
app:layout_constraintTop_toBottomOf="#+id/logo"
app:layout_constraintStart_toStartOf="#id/btnGooglePlay"
app:layout_constraintEnd_toEndOf="#id/btnGooglePlay"
app:layout_constraintBottom_toTopOf="#id/tvText"
app:layout_constraintVertical_chainStyle="packed"
android:text="Title!"
/>
<TextView
android:id="#+id/tvText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="28dp"
android:gravity="center"
app:layout_constraintTop_toBottomOf="#id/tvTitle"
app:layout_constraintStart_toStartOf="#id/btnGooglePlay"
app:layout_constraintEnd_toEndOf="#id/btnGooglePlay"
app:layout_constraintBottom_toTopOf="#id/scroll"
app:layout_constraintVertical_chainStyle="packed"
android:text="Many test about something.\nMany test about something Many test about something Many test about something"
/>
<ScrollView
android:id="#+id/scroll"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/tvText"
app:layout_constraintStart_toStartOf="#id/btnGooglePlay"
app:layout_constraintEnd_toEndOf="#id/btnGooglePlay"
app:layout_constraintBottom_toTopOf="#id/btnGooglePlay"
app:layout_constraintVertical_chainStyle="packed"
>
<LinearLayout
android:id="#+id/containerFeature"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"/>
</ScrollView>
<android.support.v7.widget.CardView
android:id="#+id/btnGooglePlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
app:layout_constraintBottom_toTopOf="#id/bottomGuideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/colorPrimary"
app:cardElevation="4dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="12dp"
android:paddingBottom="12dp"
android:background="#color/colorPrimary"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Push this"
android:textAllCaps="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_gravity="center"
android:text="some description"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
I want the icon(R.id.logo) to be closer to the center if there are not many items in containerFeature. Like on this picture:
and if there are more items, icon must be closer to the top:
but if there are to many items, I expect that ScrollView will be work.
And I will see this:
If I change ScrollView attribute layout_height to "0dp" I see that all works fine, but icon always up and chainStyle="packed" have no sense for me.
What can I do to fix ScrollView behavior with chainStyle="packed?
By default, if a dimension of a View is set to wrap_content its constraints are not enforced when it gets too big to satisfy them. In order to change that behavior and have them enforced you need to add app:layout_constrainedHeight="true" to your ScrollView.
Documentation:
WRAP_CONTENT : enforcing constraints (Added in 1.1)
If a dimension is set to WRAP_CONTENT, in versions before 1.1 they will be treated as a literal dimension -- meaning, constraints will not limit the resulting dimension. While in general this is enough (and faster), in some situations, you might want to use WRAP_CONTENT, yet keep enforcing constraints to limit the resulting dimension. In that case, you can add one of the corresponding attribute:
app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”
So, I would like to add a button with the text "Already Registered?" on the middle bottom screen but my code contains a two different LinearLayouts for the half left and the half right side. I want the button to be half on the left Linearlayout and half on the right. In addition, they are clickable so as far as I concern I must have them in my current layout and not include them.
what I currently have:
What I want to get:
my code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
tools:context=".MainActivity"
android:weightSum="2"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/customerLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_weight="1"
android:background="#color/lightblueMainActivity"
android:onClick="customerSignUp">
<TextView
android:layout_gravity="center_vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24sp"
android:textColor="#color/orangeMainActivity"
android:text="#string/customerMainActivity"/>
</LinearLayout>
<LinearLayout
android:id="#+id/electricianLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_weight="1"
android:background="#color/orangeMainActivity"
android:onClick="electricianSignUp">
<TextView
android:layout_gravity="center_vertical"
android:gravity="center"
android:textSize="24sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/lightblueMainActivity"
android:text="#string/electricianMainActivity"/>
</LinearLayout>
</LinearLayout>
THANKS IN ADVANCE!
There are other types of ViewGroup besides LinearLayout which allow you to achieve a "split screen" effect, but let's keep it simple and use a weighted LinearLayout to divide the screen.
The child Views however can be TextViews (no intermediate ViewGroup required) because you can let them have a background color and also control the text alignment.
Since you want the Button to overlap both parts of the screen, you can put it and the LinearLayout into a FrameLayout (I used a TextView but the attributes are basically the same):
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Customer"
android:textColor="#aaaaaa"
android:textSize="20sp"
android:gravity="center"
android:background="#0000ff"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Electrician"
android:textColor="#666666"
android:textSize="20sp"
android:gravity="center"
android:background="#ffab00"/>
</LinearLayout>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="24dp"
android:textColor="#ffffff"
android:textSize="20sp"
android:text="Already Registered?"/>
</FrameLayout>
I want to do this layout with ConstraintLayout.
But I failed even to do the 1(green) part of it.
What I do is I add 3 TextViews 1,2 and 3 (pink) connect them to the left of parent and tell them to be one under the other. It works.
Then I need to add views 4 and 5 so they always be on the right of 2 and 3 and its content must be aligned vertically to the left edge just as shown on the picture.
The problem that when I add
app:layout_constraintLeft_toRightOf="2 OR 3"
the text in 4 and 5 is not aligned properly. I get this
When I use Guideline I get this
app:layout_constraintLeft_toRightOf="#id/guideline"
Does anyone know what can help with this?
Edit. P.S. layout of 1st attempt
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:id="#+id/constraintLayout"
>
<TextView
android:id="#+id/instrument_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="AUDUSD"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<TextView
android:id="#+id/trade_action_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="BUYjhkjhkjhvg"
app:layout_constraintStart_toStartOf="#+id/instrument_name"
app:layout_constraintTop_toBottomOf="#id/instrument_name"
tools:layout_editor_absoluteX="16dp"
android:layout_marginTop="1dp"/>
<TextView
android:id="#+id/net_pl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Net p/l"
app:layout_constraintStart_toStartOf="#+id/trade_action_label"
app:layout_constraintTop_toBottomOf="#id/trade_action_label"/>
<TextView
android:id="#+id/record_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
app:layout_constraintTop_toTopOf="#id/trade_action_label"
app:layout_constraintLeft_toRightOf="#id/trade_action_label"
tools:layout_editor_absoluteY="33dp"
/>
<TextView
android:id="#+id/pl_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12"
app:layout_constraintTop_toTopOf="#id/net_pl"
app:layout_constraintLeft_toRightOf="#id/net_pl"/>
</android.support.constraint.ConstraintLayout>
Edit. (screenshot of how the result should look like)
You can use a Barrier to replicate the behavior of the TableLayout.
<?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">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="#string/warehouse"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="#string/hospital"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<android.support.constraint.Barrier
android:id="#+id/barrier7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="textView2,textView1" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/lorem_ipsum"
app:layout_constraintStart_toEndOf="#+id/barrier7"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
More info here: https://constraintlayout.com/basics/barriers.html
I took a closer look at what you are trying to do. I think that you need to look into using weighted chains in your ConstraintLayout. See the documentation here.
Make sure you use a version of ConstraintLayout that implements chains.
Update
Here is an example of what you are trying to do. I have simplified your layout to better show what will work. Notice the cross linking of box1<->box2 and box3<->box4. These links establish the chains.
<?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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/box1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="16dp"
android:text="Text box 1 xxxxxxx"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/box2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#id/box2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:text="Text box 2 yyyyyyyyyy"
app:layout_constraintLeft_toRightOf="#id/box1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/box1" />
<TextView
android:id="#+id/box3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:text="Text box 3 zzzz"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/box4"
app:layout_constraintTop_toBottomOf="#id/box1" />
<TextView
android:id="#id/box4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:text="Text box 4"
app:layout_constraintLeft_toRightOf="#id/box3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/box3" />
</android.support.constraint.ConstraintLayout>
Here is an image of the layout.
Use app:layout_constraintHorizontal_weight to effect how much space each view gets.