I have a layout, which supports RTL. It looks fine in preview in Android studio and on device in default locale, but is broken in Arabic locale. There is an image on start, button on end and two texts in between.
Here's how it is designed and looks like in preview:
For some reason both button and image are placed at the end in Arabic locale. So, texts have no room and are not displayed, but view height is much larger than expected.
Here's how it looks like in LayoutInspector
What can be wrong with it?
I use databinding, if it does matter. This layout is placed in separate file and included with include tag
Here's the layout:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent" android:layout_height="match_parent"
android:padding="#dimen/spacing_med"
>
<!-- Avatar image -->
<ImageView
android:id="#+id/avatar"
android:layout_width="32dp"
android:layout_height="32dp"
tools:layout_constraintStart_toStartOf="parent"
tools:layout_constraintTop_toTopOf="parent"
/>
<!-- Call button -->
<Button android:layout_width="wrap_content" android:layout_height="32dp"
android:id="#+id/call"
android:text="#string/call"
android:drawableStart="#drawable/ic_phone_pink"
android:paddingLeft="#dimen/spacing_med"
android:paddingRight="#dimen/spacing_med"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:minWidth="70dp"
/>
<!-- Name-->
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/spacing_med"
android:layout_marginEnd="#dimen/spacing_med"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#id/call"
app:layout_constraintStart_toEndOf="#id/avatar"
/>
<!-- Phone-->
<TextView
android:id="#+id/phone"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/spacing_med"
android:layout_marginEnd="#dimen/spacing_med"
app:layout_constraintTop_toBottomOf="#id/name"
app:layout_constraintEnd_toStartOf="#id/call"
app:layout_constraintStart_toEndOf="#id/avatar"
/>
</android.support.constraint.ConstraintLayout>
I think that you had some missing constraints and you had some fixed size on your views.
What I did was to create a horizontal chain to all 3 views, make them the same height (exept the textViews with half the height of the other views) and it all worked out fine, here is what I did :
<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/avatar"
android:layout_width="0dp"
android:layout_height="wrap_content"
tools:layout_constraintStart_toStartOf="parent"
tools:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toTopOf="#+id/button"
tools:src="#tools:sample/avatars[2]" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
android:textDirection="rtl"
app:layout_constraintBottom_toTopOf="#+id/textView8"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
android:textDirection="rtl"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4" /
And here is how the row looks:
Related
I want the layout to be visible based on the content till max 80% of the device height.
Listview which is inside the constraint layout needs to fit (with scroll) between the above text and below button.
Problem:
ListView is overlapping with the above and below views.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/error_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_max="wrap"
app:layout_constraintHeight_percent="0.8"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/error_instruction_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:background="#drawable/primary_button"
android:fontFamily="#font/poppins_medium"
android:minWidth="180dp"
android:text="#string/error_try_again"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ListView
android:id="#+id/instruction_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="18dp"
app:layout_constraintBottom_toTopOf="#+id/error_instruction_again"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/instruction_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:fontFamily="#font/poppins_medium"
android:text="Please read the instructions below and try again to get accurate results"
android:textAlignment="center"
android:textColor="#FEFEFE"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_list"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/instruction_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="6dp"
android:fontFamily="#font/poppins_bold"
android:text="#string/instruction_title"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Draw TextView1 (instruction_title) at the top of parent, then draw TextView 2 (instruction_subtitle) below TextView1 (top_toBottomOf).
Then draw Button at the bottom of parent.
Finally draw ListView top_toBottomOf TextView 2 (instruction_subtitle) and bottom_toTopOf Button (error_instruction_again) and set height of listview to 0dp to make sure that ListView will expand all height.
<?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:id="#+id/error_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2"
android:id="#+id/guideLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideLine"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/instruction_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="6dp"
android:text="instruction_title"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/instruction_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:text="Please read the instructions below and try again to get accurate results"
android:textAlignment="center"
android:textColor="#FEFEFE"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="#+id/instruction_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/error_instruction_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:minWidth="180dp"
android:background="#drawable/background_button_highlight"
android:text="error_try_again"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ListView
android:id="#+id/instruction_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="18dp"
android:background="#android:color/holo_blue_dark"
app:layout_constraintBottom_toTopOf="#+id/error_instruction_again"
app:layout_constraintTop_toBottomOf="#id/instruction_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
You have two issues from what I can see, one is the chaining: when you want to order elements with a constraint layout you have to define both the top and bottom relationship for everything (or start and end if you're stacking them horizontally).
For example your instruction_subtitle is missing the top constraint. You can read about chains here. You can add them automatically selecting elements in the component tree of the design view, right clicking them and choosing chains -> create/modify existing chains. For small layouts like this you can simply write them.
Another thing about chaining, if you want your widgets layout to be stretched according to the constraints, you need to use 0dp for the layout_width or layout_height. Change your list layout_height to 0dp.
After that, remove app:layout_constraintHeight_max="wrap" from your contraintlayout
Some notes:
you can use tools:listitem="#layout/your_list_item_layout" to show a preview of your items in the list
why use a listview instead of a recyclerview?
Keep your widget in the same order as they appear on the screen, you have button - list - text - text but what you need is text - text - list - button
Final code:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/error_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.8"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/instruction_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="6dp"
android:fontFamily="#font/poppins_bold"
android:text="#string/instruction_title"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/instruction_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:fontFamily="#font/poppins_medium"
android:text="Please read the instructions below and try again to get accurate results"
android:textAlignment="center"
android:textColor="#FEFEFE"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_list"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/instruction_title" />
<ListView
android:id="#+id/instruction_list"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="18dp"
app:layout_constraintBottom_toTopOf="#+id/error_instruction_again"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/instruction_subtitle" />
<Button
android:id="#+id/error_instruction_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:background="#drawable/primary_button"
android:fontFamily="#font/poppins_medium"
android:minWidth="180dp"
android:text="#string/error_try_again"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/instruction_list" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am using Constraintlayout and I want to place my Textview on my Imageview, it is supposed to look like this after I'm done: https://i.stack.imgur.com/mYAws.png but each time I add constraints to the texts(Vertically and horizontally), the texts disorganizes and goes totally from how I want it to be,
Sometimes even shifting my images. I have tried severally to adjust it well to no avail
My layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="358dp"
android:layout_height="337dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:srcCompat="#drawable/orange_panel" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginStart="45dp"
android:layout_marginTop="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/green_panel" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/pink_panel" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="89dp"
tools:layout_editor_absoluteY="415dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
The answer is pretty straightforward. First you should delete this lines from both text views.
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp"
Then all you need to do is add constraints like this. Below are constraints for your image
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
And the constraints for your text view would be like this.
app:layout_constraintEnd_toEndOf="#+id/image_view"
app:layout_constraintStart_toStartOf="#+id/image_view"
app:layout_constraintTop_toTopOf="#+id/image_view"
Of course you can add different constraints for the image because i do not know how do you want to position the image view in the app. But if you want a text view to be inside the image like in the link you sent then the constraints for the text view will be always like this.
It's all about tools:layout_editor_absoluteX and tools:layout_editor_absoluteY for yours textView3 and textView4. Also i think you do not know for what namespace tools exist.
Check the example below; it shows you what constraints can be used to get in the direction of your layout goals.
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="16dp"
android:background="#00FF00"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#0000FF"
app:layout_constraintStart_toStartOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#FF0000"
app:layout_constraintEnd_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
See how this example looks: screenshot.
I am having trouble to aligning TextViews and Barrier in Android. Somehow the barrier stays/stick to the left or right edge of the parent layout. See the blue and green line in image.
I want to align the barrier in the way the red line in image so it can separate left and right content.
Layout 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_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/cover_photo"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="24dp"
android:scaleType="centerCrop"
android:src="#drawable/ferrari"
app:layout_constraintBottom_toBottomOf="#id/user_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/user_avatar"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_marginStart="16dp"
android:background="#FFFFFF"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/user_avatar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.3" />
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Lora Mitchell's Car"
android:textColor="#000"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/user_avatar" />
<TextView
android:id="#+id/manufacturer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Manufacturer"
app:layout_constraintStart_toStartOf="#+id/username"
app:layout_constraintTop_toBottomOf="#+id/username" />
<TextView
android:id="#+id/model"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Model"
app:layout_constraintStart_toStartOf="#+id/username"
app:layout_constraintTop_toBottomOf="#+id/manufacturer" />
<TextView
android:id="#+id/type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Type"
app:layout_constraintStart_toStartOf="#+id/username"
app:layout_constraintTop_toBottomOf="#+id/model" />
<TextView
android:id="#+id/bore_stroke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Bore and stroke"
app:layout_constraintStart_toStartOf="#+id/username"
app:layout_constraintTop_toBottomOf="#+id/type" />
<TextView
android:id="#+id/max_power"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Maximum power**"
app:layout_constraintStart_toStartOf="#+id/username"
app:layout_constraintTop_toBottomOf="#+id/bore_stroke" />
<TextView
android:id="#+id/specific_power"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Specific power output"
app:layout_constraintStart_toStartOf="#+id/username"
app:layout_constraintTop_toBottomOf="#+id/max_power" />
<TextView
android:id="#+id/max_torque"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Maximum torque"
app:layout_constraintStart_toStartOf="#+id/username"
app:layout_constraintTop_toBottomOf="#+id/specific_power" />
<TextView
android:id="#+id/type_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="V8 - 90°"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="351dp" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
app:barrierDirection="right"
app:constraint_referenced_ids="bore_stroke,manufacturer,max_torque,model,max_power,type,specific_power" />
</android.support.constraint.ConstraintLayout>
I am not sure that barrier is the best option to separate left and right in your screen, from the documentation :
If the widgets dimensions change, the barrier will automatically move according to its direction to get the most extreme widget:
In my layouts using constraint layout when I want to separate right and left part of the screen I usually use guideline in this way :
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
I constraint all of my views to the guideline and it works like charm.
I want to have two, side-by-side ImageViews that spread to take up 50% of the screen each. Over each, I want to arrange an array of Buttons and TextViews. I am doing this in a single ConstraintLayout.
When I set up the ImageViews by themselves, they lay out properly using these properties:
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
The ImageViews have constraints like this (there's also a 1dp View separator bar):
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/separator_bar"
app:layout_constraintTop_toTopOf="parent"
Here's what the split looks like:
However, when I add the Buttons and TextViews and chain them together, linking them to the sides of the ImageView and each other, making them essentially "contained" in the ImageView, the ImageView shrinks horizontally so that it is the width of the widgets, almost as if wrap_content were applied. What's even weirder is that the other ImageView also shrinks, even though I haven't added its widgets yet.
When marked up, the controls look like this:
<Button
android:id="#+id/btnKingW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♔"
app:layout_constraintBottom_toTopOf="#id/btnQueenW"
app:layout_constraintEnd_toStartOf="#id/tvKingW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toTopOf="#id/white_king_image"
app:layout_constraintVertical_chainStyle="spread" />
(the constraints of the original ImageView are unchanged)
Here's what it looks like with just one ImageView anchored to the parent on all four sides. The widgets look fine.
And here's the hot mess when I use the two ImageViews.
What's going on here? Why does linking a widget inside another widget/view cause the nice layout that I had before to change? I would assume that the ImageViews were anchored to the parent and shouldn't move, but this is clearly not the case.
I've looked at a bunch of tutorials, but they all seem to show me how to perform a half dozen tricks using the Android Studio GUI and don't really get into the zen of how the layouts are evaluated. I want to actually grok what's going on and not just click some buttons in a GUI design tool. FWIW, I did try the GUI design tool and spent about as much time cleaning up the magic trash it added to my XML (no, I don't need padding, thanks) as I would have saved using the tool, so I essentially abandoned it and now just use it to experiment.
I'm new to Android development, if that isn't clear. This is a toy app for an ungraded Udacity course.
Full 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_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.chessmaniac.MainActivity"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/white_king_image"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:alpha="0.3"
android:contentDescription="#string/white_king_chesspiece"
android:scaleType="centerCrop"
android:src="#mipmap/white_king"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/separator_bar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/separator_bar"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/black_king_image"
app:layout_constraintStart_toEndOf="#id/white_king_image"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/black_king_image"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:alpha="0.3"
android:contentDescription="#string/black_king_chesspiece"
android:scaleType="centerCrop"
android:src="#mipmap/black_king"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/separator_bar"
app:layout_constraintTop_toTopOf="parent" />
<!-- WHITE BUTTONS -->
<Button
android:id="#+id/btnKingW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♔"
app:layout_constraintBottom_toTopOf="#id/btnQueenW"
app:layout_constraintEnd_toStartOf="#id/tvKingW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toTopOf="#id/white_king_image"
app:layout_constraintVertical_chainStyle="spread" />
<Button
android:id="#+id/btnQueenW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♕"
app:layout_constraintBottom_toTopOf="#id/btnRookW"
app:layout_constraintEnd_toStartOf="#id/tvQueenW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toBottomOf="#id/btnKingW" />
<Button
android:id="#+id/btnRookW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♖"
app:layout_constraintBottom_toTopOf="#id/btnBishopW"
app:layout_constraintEnd_toStartOf="#id/tvRookW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toBottomOf="#id/btnQueenW" />
<Button
android:id="#+id/btnBishopW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♗"
app:layout_constraintBottom_toTopOf="#id/btnKnightW"
app:layout_constraintEnd_toStartOf="#id/tvBishopW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toBottomOf="#id/btnRookW" />
<Button
android:id="#+id/btnKnightW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♘"
app:layout_constraintBottom_toTopOf="#id/btnPawnW"
app:layout_constraintEnd_toStartOf="#id/tvKnightW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toBottomOf="#id/btnBishopW" />
<Button
android:id="#+id/btnPawnW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♙"
app:layout_constraintBottom_toBottomOf="#id/white_king_image"
app:layout_constraintEnd_toStartOf="#id/tvPawnW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toBottomOf="#id/btnKnightW" />
<!-- WHITE TEXTVIEWS -->
<TextView
android:id="#+id/tvKingW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WK"
app:layout_constraintBottom_toTopOf="#id/tvQueenW"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnKingW"
app:layout_constraintTop_toTopOf="#id/white_king_image"
app:layout_constraintVertical_chainStyle="spread" />
<TextView
android:id="#+id/tvQueenW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WQ"
app:layout_constraintBottom_toTopOf="#id/tvRookW"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnQueenW"
app:layout_constraintTop_toBottomOf="#id/tvKingW" />
<TextView
android:id="#+id/tvRookW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WR"
app:layout_constraintBottom_toTopOf="#id/tvBishopW"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnRookW"
app:layout_constraintTop_toBottomOf="#id/tvQueenW" />
<TextView
android:id="#+id/tvBishopW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WB"
app:layout_constraintBottom_toTopOf="#id/tvKnightW"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnBishopW"
app:layout_constraintTop_toBottomOf="#id/tvRookW" />
<TextView
android:id="#+id/tvKnightW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WN"
app:layout_constraintBottom_toTopOf="#id/tvPawnW"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnKnightW"
app:layout_constraintTop_toBottomOf="#id/tvBishopW" />
<TextView
android:id="#+id/tvPawnW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WP"
app:layout_constraintBottom_toBottomOf="#id/white_king_image"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnPawnW"
app:layout_constraintTop_toBottomOf="#id/tvKnightW" />
</android.support.constraint.ConstraintLayout>
Try this
<?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/imageOne"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/imageTwo"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<ImageView
android:id="#+id/imageTwo"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#id/imageOne"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
app:layout_constraintTop_toBottomOf="#id/guideline" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toRightOf="#+id/button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline"
tools:layout_editor_absoluteY="232dp" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
app:layout_constraintTop_toBottomOf="#id/button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toRightOf="#+id/button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/button2" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="87dp" />
</android.support.constraint.ConstraintLayout>
OUTPUT
Here is the good tutorial for this
First you have to arrange the image views correctly. Like the LinearLayout, you can set weight in ConstraintLayout.
<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/imageOne"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#drawable/img_one"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/imageTwo"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageTwo"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#drawable/img_two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#id/imageOne"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Then try to align button over the ImageViews. Hope it helps:)
I'm struggling to create a layout to consists of a chain of evenly distributed squares that grow to fill the available space.
I want the layout in the end to look like this:
The idea is that on phones with a different aspect ratio this squares grow a little bit to use up the extra space.
I managed to create a chain with weights that with 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"
android:id="#+id/activity_main_inference"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="32dp"
android:layout_height="0dp"
android:text="All"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="32dp"
android:layout_height="0dp"
android:text="2"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/textView1"
app:layout_constraintRight_toLeftOf="#id/textView4"/>
<TextView
android:id="#+id/textView4"
android:layout_width="32dp"
android:layout_height="0dp"
android:text="4"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/textView2"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
This looks like this:
This is fine except that the width of the Textviews is fix to 32dp.
I hoped, that if I set the width also to zero, match constraints would first determine the needed width to cover all the space and then set the height to width to make the views square.
Sadly my layout looks like this:
Is this idea of a layout that I want to achieve possible with ContraintLayout?
Here is one way to do what you are looking for that depends on the proper sizing of the first TextView. There may be some additional refinement (do you need all the ratios set, for instance), but this will give you a start.
XML Layout
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main_inference"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="All"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="0dp"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="2"
app:layout_constraintBottom_toBottomOf="#id/textView1"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintEnd_toStartOf="#id/textView4"
app:layout_constraintStart_toEndOf="#+id/textView1"
app:layout_constraintTop_toTopOf="#+id/textView1" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="0dp"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="4"
app:layout_constraintBottom_toBottomOf="#+id/textView1"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toTopOf="#+id/textView2" />
</android.support.constraint.ConstraintLayout>
I hope there is a more elegant way to do it, but I have been able to create this kind of design with the help of guidelines :
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="All"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.50" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />