I want to add some buttons in a line and break it in a new line when they reach the end of the screen:
If you know CSS, what I need is similar to display: inline-block rule.
I am looking for a XML solution only, I want to avoid measuring the screen and buttons using java to emplace them below programatically.
This is my current code, the following buttons are inside a ConstraintLayout:
<Button
android:id="#+id/boton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:text="Imagen" />
<Button
android:id="#+id/boton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/boton1"
android:text="Play" />
<Button
android:id="#+id/boton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/boton2"
android:text="Audio" />
<Button
android:id="#+id/boton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/boton3"
android:text="Play"
android:onClick="playVideo" />
<Button
android:id="#+id/boton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/boton4"
android:text="Youtube" />
<Button
android:id="#+id/boton6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/boton5"
android:text="Raw" />
since last time, I found this library that you should enjoy ! github.com/google/flexbox-layout
In your case, you should use the flexWrap attribute :
This attribute controls whether the flex container is single-line or multi-line, and the direction of the cross axis. Possible values are:
nowrap (default)
wrap (use this)
wrap_reverse
You will be able to wrap your buttons.
Installation
Add the following dependency to your build.gradle file:
dependencies {
implementation 'com.google.android:flexbox:2.0.1'
}
Usage
FlexboxLayout that extends the ViewGroup like LinearLayout and RelativeLayout. You can specify the attributes from a layout XML like:
<com.google.android.flexbox.FlexboxLayout
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"
app:flexWrap="wrap"
app:alignItems="stretch"
app:alignContent="stretch" >
<TextView
android:id="#+id/textview1"
android:layout_width="120dp"
android:layout_height="80dp"
app:layout_flexBasisPercent="50%"
/>
<TextView
android:id="#+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_alignSelf="center"
/>
<TextView
android:id="#+id/textview3"
android:layout_width="160dp"
android:layout_height="80dp"
app:layout_alignSelf="flex_end"
/>
</com.google.android.flexbox.FlexboxLayout>
Have you tried using gridLayout ?
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4">
<Button
android:id="#+id/boton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Imagen"
/>
<Button
android:id="#+id/boton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
/>
<Button
android:id="#+id/boton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Audio"
/>
<Button
android:id="#+id/boton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
android:onClick="playVideo"
/>
<Button
android:id="#+id/boton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Youtube"
/>
<Button
android:id="#+id/boton6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Raw"
/>
</GridLayout>`
Related
Here the image from my mobile:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:visibility="visible"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="110dp"
android:layout_height="40dp"
android:text="Miles"
android:textSize="24sp"
android:visibility="visible"
tools:layout_editor_absoluteX="46dp"
tools:layout_editor_absoluteY="56dp"
tools:visibility="visible" />
<TextView
android:id="#+id/textView2"
android:layout_width="110dp"
android:layout_height="40dp"
android:text="Km"
android:textSize="24sp"
tools:layout_editor_absoluteX="46dp"
tools:layout_editor_absoluteY="140dp" />
<Button
android:id="#+id/buttonConvMilesToKm"
android:layout_width="287dp"
android:layout_height="54dp"
android:text="Convert Miles To Km"
android:textSize="18sp"
tools:layout_editor_absoluteX="62dp"
tools:layout_editor_absoluteY="209dp" />
<Button
android:id="#+id/buttonConvKmToMiles"
android:layout_width="280dp"
android:layout_height="60dp"
android:text="Convert Km To Miles"
android:textSize="18sp"
tools:layout_editor_absoluteX="65dp"
tools:layout_editor_absoluteY="284dp" />
<EditText
android:id="#+id/editTextMiles"
android:layout_width="200dp"
android:layout_height="50dp"
android:text="Convert Km To Miles"
android:textSize="18sp"
tools:layout_editor_absoluteX="179dp"
tools:layout_editor_absoluteY="46dp" />
<EditText
android:id="#+id/editTextKm"
android:layout_width="200dp"
android:layout_height="50dp"
android:ems="10"
android:inputType="textPersonName"
tools:layout_editor_absoluteX="179dp"
tools:layout_editor_absoluteY="130dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
This maybe a small error i did , but what am i missing so the interface appears to be overlapped . Im using Android Studio to develop this But the reference design looks alright unless i run it on emulator or my mobile itself . Im guessing im not wrong in coding the layouts n i even tried to change the way the layouts can be written
Your layout has no constraints. Please review the documentation on the valid ConstraintLayout XML attributes you can use to layout views relative to each other within a ConstraintLayout. You are looking for attributes like layout_constraintStart_toEndOf.
I'm working on an Android app. I create an item layout for a recycler view and I'd like to display a preview of it in Android Studio using layout preview with tools namespace. To accomplish this task I:
Put in sampledata an image (sampledata\nre1.png). This is an important thing because I don't want to include the sample image in the apk.
Use tools namespace in the ImageView to display the image in the layout preview
An screenshot:
And the 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="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp"
android:paddingRight="8dp"
android:paddingBottom="8dp"
tools:context=".ui.adapters.BarcodeAdapter">
<ImageView
android:id="#+id/item_barcode_nre1_image"
android:layout_width="wrap_content"
tools:layout_width="120dp"
android:layout_height="112dp"
android:scaleType="fitXY"
android:layout_marginStart="#dimen/text_margin"
android:contentDescription="NRE1"
android:layout_marginTop="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre_label"
tools:src="#sample/nre1.png" />
<ImageView
android:id="#+id/item_barcode_nre2_image"
android:layout_width="wrap_content"
android:layout_height="112dp"
android:scaleType="fitXY"
android:layout_marginEnd="#dimen/text_margin"
android:contentDescription="NRE2"
android:adjustViewBounds="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/item_barcode_nre1_image"
tools:src="#sample/nre2.png" />
<ImageView
android:id="#+id/item_barcode_codice_fiscale_image"
android:layout_width="wrap_content"
android:layout_height="112dp"
android:scaleType="fitXY"
android:contentDescription="Codice fiscale"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_codice_fiscale_label"
tools:src="#sample/codice-fiscale.png" />
<TextView
android:id="#+id/item_barcode_nre_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/text_margin"
android:text="#string/item_qrcode_nre"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_barcode_nre1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:ellipsize="end"
android:maxLines="10"
android:textAppearance="#android:style/TextAppearance.Material.Body1"
app:layout_constraintEnd_toEndOf="#+id/item_barcode_nre1_image"
app:layout_constraintStart_toEndOf="#+id/item_barcode_nre_label"
app:layout_constraintStart_toStartOf="#+id/item_barcode_nre1_image"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre1_image"
tools:text="1300A" />
<TextView
android:id="#+id/item_barcode_nre2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="10"
android:layout_marginTop="4dp"
android:textAppearance="#android:style/TextAppearance.Material.Body1"
app:layout_constraintEnd_toEndOf="#+id/item_barcode_nre2_image"
app:layout_constraintHorizontal_bias="0.482"
app:layout_constraintStart_toStartOf="#+id/item_barcode_nre2_image"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre2_image"
tools:text="4003535379" />
<TextView
android:id="#+id/item_barcode_codice_fiscale_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/text_margin"
android:text="#string/item_qrcode_codice_fiscale"
app:layout_constraintStart_toStartOf="#+id/item_barcode_nre_label"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre1" />
<TextView
android:id="#+id/item_barcode_codice_fiscale"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginTop="4dp"
android:textAppearance="#android:style/TextAppearance.Material.Body1"
app:layout_constraintEnd_toEndOf="#+id/item_barcode_codice_fiscale_image"
app:layout_constraintStart_toStartOf="#+id/item_barcode_codice_fiscale_image"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_codice_fiscale_image"
tools:text="CF" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think I do it correctly, but it does not work. Any idea? Tnx.
<ImageView
android:id="#+id/item_barcode_nre1_image"
android:layout_width="wrap_content"
tools:layout_width="120dp"
android:layout_height="112dp"
android:scaleType="fitXY"
android:contentDescription="NRE1"
android:layout_marginTop="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_barcode_nre_label"
tools:src="#drawable/ic_launcher_background" />
Working on my side. Let's try. Thanks
My ConstraintLayout is showing some strange plotting of items on app. It is showing the elements correct positions on the preview screen of the android studio but while running app on the phone the positions of the elements are strange.
Here is the screen shot of app:
My layout is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="34dp"
android:layout_height="56dp"
android:text="appbar"
android:background="#android:color/transparent"
tools:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="8dp" />
<ImageView
android:id="#+id/imgBooks"
android:layout_width="272dp"
android:layout_height="302dp"
android:src="#drawable/books"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="56dp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/toolbar" />
<ImageView
android:id="#+id/imgName"
android:layout_width="40dp"
android:layout_height="35dp"
app:srcCompat="#drawable/name"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="373dp"
android:layout_below="#+id/imgBooks"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/etEmail"
android:layout_width="320dp"
android:layout_height="43dp"
android:ems="10"
android:text="Email"
android:inputType="textEmailAddress"
tools:layout_editor_absoluteX="67dp"
tools:layout_editor_absoluteY="417dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:layout_above="#+id/etPhone"
android:layout_toEndOf="#+id/imgPhone" />
<ImageView
android:id="#+id/imgEmail"
android:layout_width="38dp"
android:layout_height="34dp"
app:srcCompat="#drawable/email"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="417dp"
android:layout_alignTop="#+id/etEmail"
android:layout_toStartOf="#+id/etEmail" />
<EditText
android:id="#+id/etName"
android:layout_width="320dp"
android:layout_height="43dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
tools:layout_editor_absoluteX="67dp"
tools:layout_editor_absoluteY="373dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:layout_above="#+id/etEmail"
android:layout_alignEnd="#+id/btn" />
<ImageView
android:id="#+id/imgPhone"
android:layout_width="35dp"
android:layout_height="31dp"
app:srcCompat="#drawable/phone"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="463dp"
android:layout_alignTop="#+id/etPhone"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/etPhone"
android:layout_width="320dp"
android:layout_height="43dp"
android:ems="10"
android:inputType="phone"
android:text="Phone"
tools:layout_editor_absoluteX="67dp"
tools:layout_editor_absoluteY="463dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:layout_above="#+id/btn"
android:layout_alignStart="#+id/etName"
android:layout_alignEnd="#+id/btn" />
<Button
android:id="#+id/btn"
android:layout_width="344dp"
android:layout_height="48dp"
android:text="Download Brochure"
android:layout_gravity="center_vertical|center_horizontal"
tools:layout_editor_absoluteX="20dp"
tools:layout_editor_absoluteY="514dp"
android:fontFamily="AvenirLTStd Light"
android:textColor="#ffffff"
android:background="#drawable/curves"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</android.support.constraint.ConstraintLayout>
The problem is you are not using constraints at all which is the whole point of constraint layout.
For example, if you don't use constraints on Download Brochure button and use only tools:layout_editor_absoluteX and tools:layout_editor_absoluteY attributes, the button stays at the position where you put it on the editor but when you compile the app, the button goes top left corner.
You need to add those to Download Brochure button, then set its location. So it will be on the same position in every possible situation.
app:layout_constraintLeft_toLeftOf="parent",
app:layout_constraintRight_toRightOf="parent"
But I suggest you to do it on editor while playing around with constraint layout which is much easier.
You can also watch this video. https://www.youtube.com/watch?v=sO9aX87hq9c. It helps a lot.
I am trying to use this layout as a header in a listview but the bottom row of textviews below the inner constraintlayout is not visible - it's like its height has collapsed to zero.
In the xml the inner constraintlayout declaration has a red line under it with a popup message "This view is not constrained vertically: at runtime it will jump to the left unless you add a vertical constraint..." (jump to the LEFT? does that even make sense?) and I have tried to add vertical constraints like
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
but what happens is the whole layout loses its height.
I also find it very confusing when the design editor changes my xml without asking or warning me. It seems to like to set layout_width and height elements to "0dp" alot and also setting the guidelines width and height to
android:layout_width="wrap_content"
android:layout_height="wrap_content".
Back when the only elements were the bottom row of textviews I did not set layout_width and layout_height as the constraints seemed to do the work. But now that I have added the top part "leaderinfo", the designer has added them as "0dp". I know I can reset them to be "wrap_content" and then the textviews will reappear but why should that be necessary - doesn't the designer set them to "0dp" for a good reason?
Thanks for any help !
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/listheaderbg"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/leaderinfo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/subsection1background"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
app:layout_constraintStart_toStartOf="#+id/guideline01"
android:id="#+id/iv_profilepic"
android:src="#drawable/ic_flag"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="2dp"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_username"
tools:text="#string/username"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#+id/iv_profilepic"
app:layout_constraintTop_toTopOf="#+id/iv_profilepic"
tools:layout_editor_absoluteX="150dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_firstname"
tools:text="#string/first_name"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toEndOf="#+id/iv_profilepic"
app:layout_constraintTop_toBottomOf="#+id/tv_username"
tools:layout_editor_absoluteX="150dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_lastname"
tools:text="#string/last_name"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toEndOf="#+id/iv_profilepic"
app:layout_constraintTop_toBottomOf="#+id/tv_firstname"
tools:layout_editor_absoluteX="150dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:elevation="0dp"
app:elevation="0dp"
app:fabSize="mini"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toStartOf="#+id/guideline04"
app:srcCompat="#android:drawable/ic_input_add"
app:layout_constraintTop_toTopOf="parent"
android:tint="#FFFFFF"
app:backgroundTint="#color/submitbuttoncolor_hotpink"
tools:layout_editor_absoluteX="351dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline01"
android:id="#+id/iv_weight"
android:src="#drawable/ic_scale"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/iv_profilepic"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_weight"
tools:text="#string/_225"
android:padding="5dp"
app:layout_constraintStart_toEndOf="#+id/iv_weight"
app:layout_constraintTop_toTopOf="#+id/iv_weight"
app:layout_constraintBottom_toBottomOf="#+id/iv_weight"
tools:layout_editor_absoluteX="62dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/guideline02"
android:id="#+id/iv_height"
android:src="#drawable/ic_height"
app:layout_constraintTop_toTopOf="#+id/iv_weight"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="206dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_height"
tools:text="#string/_0_0"
app:layout_constraintStart_toEndOf="#+id/iv_height"
app:layout_constraintTop_toTopOf="#+id/iv_height"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_height"
tools:layout_editor_absoluteX="248dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline01"
android:id="#+id/iv_age"
android:src="#drawable/ic_age"
app:layout_constraintTop_toBottomOf="#+id/tv_weight"
android:layout_marginTop="10dp"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_age"
tools:text="23"
app:layout_constraintStart_toEndOf="#+id/iv_age"
app:layout_constraintTop_toTopOf="#+id/iv_age"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_age"
tools:layout_editor_absoluteX="62dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline02"
android:id="#+id/iv_country"
android:src="#drawable/ic_flag"
app:layout_constraintTop_toTopOf="#+id/iv_age"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="206dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_country"
tools:text="CA"
app:layout_constraintStart_toEndOf="#+id/iv_country"
app:layout_constraintTop_toTopOf="#+id/iv_country"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_country"
tools:layout_editor_absoluteX="248dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/iv_followers"
android:src="#drawable/ic_followers"
app:layout_constraintStart_toStartOf="#+id/guideline01"
app:layout_constraintTop_toBottomOf="#+id/tv_age"
android:layout_marginTop="10dp"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_followers"
tools:text="223"
app:layout_constraintStart_toEndOf="#+id/iv_followers"
app:layout_constraintTop_toTopOf="#+id/iv_followers"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_followers"
tools:layout_editor_absoluteX="62dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline01"
app:layout_constraintGuide_percent="0.05"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="21dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline02"
app:layout_constraintGuide_percent="0.5"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="206dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline03"
app:layout_constraintGuide_percent="0.69"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="284dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline04"
app:layout_constraintGuide_percent="0.95"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="391dp" />
</android.support.constraint.ConstraintLayout>
<TextView
android:id="#+id/text1"
style="#style/MyTextView"
android:gravity="center"
android:text="#string/exercise"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:background="#color/listheaderbg"
android:layout_height="0dp"
android:layout_width="0dp" />
<TextView
style="#style/MyTextView"
app:layout_constraintStart_toEndOf="#+id/guideline1"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
android:gravity="center"
android:text="#string/rm1"
android:id="#+id/text2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:background="#color/listheaderbg"
android:layout_height="0dp"
android:layout_width="0dp"
tools:layout_editor_absoluteX="213dp" />
<TextView
style="#style/MyTextView"
app:layout_constraintStart_toEndOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
android:gravity="center"
android:text="#string/rm1bw"
android:id="#+id/text3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:background="#color/listheaderbg"
android:layout_height="0dp"
android:layout_width="0dp"
tools:layout_editor_absoluteX="310dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
android:id="#+id/iv_rank"
android:src="#drawable/ic_rank"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:visibility="gone"
android:background="#color/listheaderbg"
tools:layout_editor_absoluteX="376dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline1"
app:layout_constraintGuide_percent="0.44"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="181dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.71"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="292dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline3"
app:layout_constraintGuide_percent="0.83"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="341dp" />
For the first issue about the inner layout needing a vertical constraint, you just need to constrain the top like this:
app:layout_constraintTop_toTopOf="parent"
The bottom does not need a constraint since the height is wrap_content.
Concerning the bottom text views, you have the outer constraint layout as wrap_content, so if the text views also have a height of wrap_content, then the layout can determine the appropriate size of the outer container which is the height of the inner constraint layout + the height of the text views.
But if the text views are set to 0dp which means to match the constraints, then there is a dependency that cannot be resolved. In other words, the size of the height of the text views depend upon the size of the outer constraint layout (match constraints) but the size of the outer constraint layout depends on the size of its contents which include the height of the text views but that can't be determined without knowing the size of its container. It can't be both, so the designer is trying to help you out of this dilemma by making the changes that you mention.
The bottom line is to constrain just the top of the inner layout and to specify a height size for the text views. If you make those changes, then it should work.
I want to overlap 10 buttons on an image. I am using RelativeLayout to do the same but as a result, the position of the buttons changes in different devices. So, can someone tell me a workaround for that? This is the xml file for this activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/exercise1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp"
tools:context="nmss.example.com.coach.Exercise1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/humanbody"
android:layout_marginStart="20dp"/>
<Button
android:id="#+id/btn_neck"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_marginStart="145dp"
android:layout_marginTop="62dp"
android:text="Neck"
android:textSize="12sp" />
<Button
android:id="#+id/btn_shoulder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="35dp"
android:layout_marginTop="75dp"
android:text="Shoulder"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_biceps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="135dp"
android:text="Biceps"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_forearm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:layout_marginTop="195dp"
android:text="Forearm"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_quads"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="68dp"
android:layout_marginTop="315dp"
android:text="Quads"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_chest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="145dp"
android:layout_marginTop="100dp"
android:text="Chest"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_abs"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_marginStart="150dp"
android:layout_marginTop="160dp"
android:text="Abs"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_triceps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="246dp"
android:layout_marginTop="125dp"
android:text="Triceps"
android:textSize="12sp" />
<Button
android:id="#+id/btn_mid_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="215dp"
android:layout_marginTop="175dp"
android:text="Middle back"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_calves"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="210dp"
android:layout_marginTop="400dp"
android:text="Calves"
android:textSize="12sp"/>
</RelativeLayout>
This is the view in Android Studio
Just use LinearLayout instead of RelativeLayout.
Try to arrange your image buttons on top,bottom,right and left using the percentages.
You also need to create different Layouts Folders in your res folder for all devices and use the dimensions accordingly.
Never hard code the sizes like this, 25dp,
Add this link to your dependencies, to get the dimensions for every screen.
compile 'com.intuit.sdp:sdp-android:1.0.4'
Its uses is like this,
android:layout_marginTop="#dimen/_110sdp"
After writing, #dimen/...Ctrl+Space, you can see the value of dimensions from 1dp to 600dp. Try it, its very useful.