I want to have two horizontal buttons with the first one taking 60 % of the layout width and the second one taking 40%. Both buttons have a max width for very large screens and in that case it has to be left aligned.
I tried with LinearLayout as shown below. But I am not sure if max width would work with weight. What is the correct way of implementing this?
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:orientation="horizontal"
android:weightSum="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/eventTitle">
<Button
android:id="#+id/one"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_weight=".6"
android:maxWidth="547dp"
android:text="One" />
<Button
android:id="#+id/two"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_marginLeft="32dp"
android:layout_weight=".4"
android:maxWidth="349dp"
android:text="Two" />
The attribute maxWidth should be set in your LinearLayout:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:orientation="horizontal"
android:weightSum="1"
android:maxWidth="896dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/eventTitle">
Remove it from your child views and the corresponding weight will be used.
I think the requirement is like below image :
Here is code to achieve the same :
<android.support.constraint.ConstraintLayout
android:id="#+id/main_content"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
<Button
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_width="0dp"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_width="0dp"
android:text="Button"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Related
I want to put 4 buttons in in 2x2 way, but I would like to make their width constance as half of a screen. How to do it, when I want to keep it on horizontal mode too (so in horiozontal mode they have the same place and half of screen width)?
This is current my layout.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"
android:background="#EB0808">
<!-- tools:context=".MainActivity">-->
<Button
android:id="#+id/buttonSecondAnswer"
android:layout_width="186dp"
android:layout_height="104dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.967"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/questionContentTextView"
app:layout_constraintVertical_bias="0.054" />
<TextView
android:id="#+id/questionNumberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:text="Question 1"
android:textAlignment="center"
android:textSize="32sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/questionContentTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:text="someQuestionContent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/buttonFirstAnswer"
android:layout_width="186dp"
android:layout_height="104dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.022"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/questionContentTextView"
app:layout_constraintVertical_bias="0.054" />
</androidx.constraintlayout.widget.ConstraintLayout>
So if you put items in a horizontal/vertical chain, if you set the width/height to 0dp, it will occupy whatever space is available on the x/y axis. For more info visit: https://developer.android.com/training/constraint-layout
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EB0808">
<!-- tools:context=".MainActivity">-->
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="#id/button2"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/button1" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toBottomOf="#id/button1"
app:layout_constraintEnd_toStartOf="#id/button4"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toTopOf="#id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/button3" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here is what I'm trying to achieve: The buttons should have equals widths if the button titles are short, but the longer text should stretch the corresponding button at the expense of the other.
Here is my layout, which works used in a Fragment's or Activity's layout. But it does not correctly displayed used in a custom view of an AlertDialog
<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
app:columnCount="2"
app:rowCount="1"
app:alignmentMode="alignBounds"
app:useDefaultMargins="true"
android:layout_height="wrap_content">
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
app:layout_columnWeight="1"
app:layout_gravity="fill_horizontal"
android:text="Cancel" />
<com.google.android.material.button.MaterialButton
app:layout_columnWeight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill_horizontal"
android:text="Very long button title" />
</androidx.gridlayout.widget.GridLayout>
This is the failed result, displayed in the Layout Inspector. Any ideas on how to make this layout work in this case?
Here copy the layout to archive the result you want.
<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="match_parent">
<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.5" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:text="large text Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am using a constraint layout and card views in it, but on different screen sizes the card views are not in the same place. I thought the idea of constraint is that you only have to arrange the card view for one time and it automatically aligns to the different device sizes. The first picture shows the screen I want to have on every device size and the other picture shows you the result of a different size where the CardViews are obviously not in the right place.
I already tried using guidelines but it doesn't help. Or is it better to use another Layout like RelativeLayout? But what's then the point of a ConstraintLayout?
Design as it should be
Result with different size
Thank you for your help!
Here is my 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=".spielen_uebersicht">
<TextView
android:id="#+id/spieler_suche"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Spieler suchen:"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.484"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cardView3"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/spieler_suche">
<SearchView
android:id="#+id/searchView_spieler_suchen"
android:layout_width="match_parent"
android:layout_height="50dp"
android:clickable="true"
android:focusable="true"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:queryBackground="#android:color/transparent" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/zufälliger_spieler"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView3"
app:layout_constraintVertical_bias="0.198">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Zufälliger Spieler"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/zufaelliger_spieler" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="#+id/zufälliger_spieler"
app:layout_constraintStart_toEndOf="#+id/zufälliger_spieler"
app:layout_constraintTop_toBottomOf="#+id/cardView3"
app:layout_constraintVertical_bias="1.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Freunde einladen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freunde_einladen" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewFreundesübersicht"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toEndOf="#+id/cardView2"
app:layout_constraintTop_toBottomOf="#+id/cardView">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Freundes-\nübersicht"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freundes_uebersicht" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/cardView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/zufälliger_spieler">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Anfragen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="#mipmap/freundes_anfragen" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>```
You don't see your layout the same way on different phones because your cardviews dimensions are a fixed size , why is it bad?
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
How to fix it:
You can just use app:layout_constraintWidth_percent and app:layout_constraintHeight_percent on your cardviews to give the size in precents according to the screen.
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">
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>
In this example, I have 4 buttons that represent your cardViews.
They are all equal in size and will be responsive to all screen sizes.
This layout will look like this (the arrow points to the guideline, to make it more understandable):
For Future Visitors, Chains are the magical word when trying to simulate Linear layout form. using horizontal chains with vertical ones along with using dynamic View sizes as Tamir Abutbul mentioned should be the best practice.
<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">
<TextView
android:id="#+id/textView24"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="Title"
android:textColor="#android:color/black"
android:textSize="?android:attr/actionBarSize"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 4"
android:textSize="24sp"
android:padding="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btn3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn3"
app:layout_constraintTop_toTopOf="#+id/btn3" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 2"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="#+id/btn4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn4"
app:layout_constraintTop_toTopOf="#+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 3"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/btn4"
app:layout_constraintEnd_toStartOf="#+id/btn1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/ic_media_play"
android:text="text 1"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toTopOf="#+id/btn3"
app:layout_constraintEnd_toStartOf="#+id/btn2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView24"/></androidx.constraintlayout.widget.ConstraintLayout>
Best of luck ;)
What is the best way of supporting different screen sizes when using a constrainLayout?
The problem:
When I change the device to any device with a screen size of less than 4.7" the button at the bottom tends to go below the bottom edge of the screen. I have anchored the button and I thought that all the views will be shrunk to accommodate the rest.
My 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="match_parent"
android:background="#android:color/background_dark"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="false"
android:cropToPadding="false"
android:scaleType="fitXY"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/maziwapp_logo"
/>
<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.4"
/>
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp"
/>
<android.support.constraint.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp"
/>
<EditText
android:id="#+id/emailTxt"
android:layout_width="0dp"
android:layout_height="48dp"
android:background="#drawable/edittext_outline"
android:fontFamily="sans-serif"
android:hint="Email"
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:textColor="#android:color/white"
android:typeface="serif"
app:layout_constraintLeft_toRightOf="#id/guideline2"
app:layout_constraintRight_toLeftOf="#id/guideline3"
app:layout_constraintTop_toBottomOf="#id/guideline"
tools:text="Email"
/>
<EditText
android:id="#+id/passwordTxt"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginTop="16dp"
android:background="#drawable/edittext_outline"
android:hint="Password"
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:textColor="#android:color/white"
app:layout_constraintLeft_toRightOf="#id/guideline2"
app:layout_constraintRight_toLeftOf="#id/guideline3"
app:layout_constraintTop_toBottomOf="#id/emailTxt"
tools:text="Password"
/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="I forgot my password?"
android:textColor="#color/colorFont1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="#id/guideline2"
app:layout_constraintRight_toLeftOf="#id/guideline3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/passwordTxt"
/>
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:background="#drawable/login_button"
android:text="Login"
android:textColor="#android:color/white"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/view2"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toBottomOf="#+id/textView"
tools:textAllCaps="false"
/>
<view
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"
/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/create_account_button"
android:text="Create New Account"
android:textColor="#android:color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toBottomOf="#+id/view2"
tools:textAllCaps="false"
/>
</android.support.constraint.ConstraintLayout>
Captures:
I thought that all the views will be shrunk to accommodate the rest.
No. You have to design it so that it supports a certain minimum screen size.
And this is not specific only to ConstraintLayout, it will happen with RelativeLayout or any other layout.
Please see supporting different screen sizes.
In your case you can use a ScrollView, so that the content will scroll when it exceed the size of the screen.
Whenever I run into this I simply wrap my ConstraintLayout in a ScrollView.
Most designs are made for one screen size in mind, I don't think your minimum screen size should need to be so large.
Hope this helps.
I have a ConstraintLayout that contains 3 buttons horizontally. I want the 3 buttons to have a fixed width and be evenly distributed across the width of the layout.
Here is a visual example.
Select the views
Right click and choose Chain > Create Horizontal Chain
See also
ConstraintLayout: pack vs chain
To make 3 view equally distribute across the width just need to set constraint start/end of each view must define correct
Code
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintStart_toStartOf="parent"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintStart_toEndOf="#+id/button1"
/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button2"
/>
</android.support.constraint.ConstraintLayout>
Output
MORE
If you need 3 views full width, just need to change android:layout_width="wrap_content" to android:layout_width="0dp"
Output
Try the below 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:id="#+id/activity_main_inference"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_editor_absoluteX="0dp"
app:layout_editor_absoluteY="80dp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="80dp">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
tools:layout_constraintRight_creator="1"
tools:layout_constraintLeft_creator="1" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button8"
app:layout_constraintTop_toTopOf="#+id/button7"
tools:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintRight_toLeftOf="#+id/button7"
android:layout_marginEnd="8dp" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button9"
app:layout_constraintBaseline_toBaselineOf="#+id/button7"
tools:layout_constraintRight_creator="1"
android:layout_marginEnd="7dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toRightOf="#+id/button7" />
</android.support.constraint.ConstraintLayout>
Try this it works for me...
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button_save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/button_save_text"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="4dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button_share"
app:layout_constraintHorizontal_chainStyle="spread" />
<Button
android:id="#+id/button_share"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/button_share_text"
android:layout_marginStart="4dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintLeft_toRightOf="#+id/button_save"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
You can use guideline with the percentage tag please check below xml and replace with image or button anything you want
<android.support.constraint.ConstraintLayout
android:id="#+id/layoutMyProperty"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="#dimen/margin12"
android:visibility="visible"
>
<android.support.constraint.Guideline
app:layout_constraintGuide_percent="0.33"
android:id="#+id/Guideline1"
android:orientation="vertical"
android:layout_width="1dp"
android:layout_height="0dp"/>
<android.support.constraint.Guideline
app:layout_constraintGuide_percent="0.66"
android:id="#+id/Guideline2"
android:orientation="vertical"
android:layout_width="1dp"
android:layout_height="0dp"/>
<ImageView
android:id="#+id/myPropertyImage1"
android:layout_width="0dp"
android:layout_height="#dimen/homeImageH"
android:scaleType="centerCrop"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="#+id/Guideline1"
app:layout_constraintEnd_toStartOf="#+id/Guideline1"
tools:src="#drawable/placeholder" />
<ImageView
android:id="#+id/myPropertyImage2"
android:layout_width="0dp"
android:layout_height="#dimen/homeImageH"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/Guideline1"
app:layout_constraintRight_toLeftOf="#+id/Guideline2"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/placeholder" />
<ImageView
android:id="#+id/myPropertyImage3"
android:layout_width="0dp"
android:layout_height="#dimen/homeImageH"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/Guideline2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/placeholder" />
</android.support.constraint.ConstraintLayout>
Just set android:layout_width="wrap_content" to android:layout_width="0dp" in all the 3 buttons
try to use 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">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
tools:layout_editor_absoluteX="148dp"
tools:layout_editor_absoluteY="92dp" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="44dp"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="92dp" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button2"
tools:layout_editor_absoluteY="92dp" />
</android.support.constraint.ConstraintLayout>