I'm new to Android development. I created an activity/layout with two views. The first one is a custom button that I want to be 50dp high. The second is a list view that I want to take the rest of the screen below it.
My problem is that when I constrain them to each other, the ListView gets crushed to 0 and the "springs" around the 50dp button expand to take all the space. Here I've given the list a height of 200dp so you can see it. If I set it to "match constraint" it goes to 0. There is content in the list.
With iOS constraints I know how to do this. The constraints around the button are behaving like "greater than or equal" constraints in iOS. I want them to be "equal". How do you do this in Android?
Here's the 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"
app:layout_constrainedHeight="false"
tools:context=".WorkoutActivity">
<mycompany.PlayPauseButton
android:id="#+id/play_pause_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/workout_list"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ListView
android:id="#+id/workout_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You have to attach the top of listView to the bottom of playButton not other way around
<?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"
app:layout_constrainedHeight="false"
tools:context=".WorkoutActivity">
<mycompany.PlayPauseButton
android:id="#+id/play_pause_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ListView
android:id="#+id/workout_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
app:layout_constraintTop_toBottomOf="#id/play_pause_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Cheers :)
Since you want the ListView to occupy all of the available space, it is a good idea to set the height to 0dp. This is sorta like a stretch-me-how-you-like scheme for ConstraintLayouts. The height would therefore entirely depend on the top and bottom constraints. So, nice step!
Your mistake, however, was the way you constrained your views. You were supposed to constrain the ListView to the bottom of play_pause_button (as shown below). This way, the position of the ListView is always dependent on (and below) playButton.
<?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"
app:layout_constrainedHeight="false"
tools:context=".WorkoutActivity">
<mycompany.PlayPauseButton
android:id="#+id/play_pause_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ListView
android:id="#+id/workout_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
app:layout_constraintTop_toBottomOf="#id/play_pause_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I hope this helps. Merry coding!
Just set the constraints the right way. No constraint bottom in the button but a constraintTop in the listview.
<?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"
app:layout_constrainedHeight="false"
tools:context=".ui.MainActivity">
<mycompany.PlayPauseButton
android:id="#+id/play_pause_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ListView
android:id="#+id/workout_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/play_pause_button"/>
</androidx.constraintlayout.widget.ConstraintLayout>
this is working for me :
<?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"
app:layout_constrainedHeight="false">
<mycompany.PlayPauseButton
android:id="#+id/play_pause_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ListView
android:id="#+id/workout_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/play_pause_button"/>
</androidx.constraintlayout.widget.ConstraintLayout>
With constraint layout, it's usually (at least in my experience) a lot easier to build either top-down or bottom-up, so get one component into a position where you're happy with it and then add then next one, maybe that helps
Related
I am using constraint layout with a vertical bias to fill view in recycler view. I successfully did that.
<?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="#color/white">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recylerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
</androidx.constraintlayout.widget.ConstraintLayout>
My recyclerview items showing me in reverse order because I want to make chat application. So I added reverseLayout and stackFromEnd true. So it look like this.
If my item is single my ui convert into like this by above xml code
Now I want to add edittext and button in bottom. Its not working vertical bias. Does any one know how to fix. Any suggestion to what can i use
Expected Output
Scenerio 1
Scenerio 2
Actual Output
I tried this code
<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="#color/white">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart=10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/crecyclerView">
<EditText
android:id="#+id/editTextContainer"
android:layout_width="200dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/editTextContainer"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE
After adding #MartinMarconcini answer it fixed my Scenario 2. I want to fix as Scenario 1 as well.
The idea is that your RV will handle its own item size and space by itself. You don't need to worry about this.
The Remainder of the space, will be used by ConstraintLayout.
So you need to pin the RV and the "Bottom Container" together. This would by default cause the CL to try to pull and balance layouts, so you have to tell the bottom container to be biased at the bottom.
In pseudo-XML:
<ConstraintLayout>
<RecyclerView
width=0dp
height=0dp
start/end = parent
TopToTop=parent
BottomToTopOf=BottomContainer
>
<BottomContainer>
width=0dp
height=wrap_content
TopToBottomOf=RecyclerView
BottomToBottomOf=parent
start/end = parent>
</ConstraintLayout>
Now this needs one more thing, because the RV would take all the space, you want to ensure the BottomContainer has more information about where it wants to be placed.
So you add:
app:layout_constraintVertical_bias="1.0"
to the Bottom Container.
This means, vertically, as "bottom" as you can. (0.0 would be the opposite).
The end result is:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recylerview"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="#android:layout/simple_list_item_2" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
app:layout_constraintVertical_bias="1.0"
android:layout_height="wrap_content"
android:id="#+id/bottomContainer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/recylerview"
app:layout_constraintBottom_toBottomOf="parent">
<EditText
android:id="#+id/editTextContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/editTextContainer"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Which looks like this:
UPDATE
If you add both
app:stackFromEnd="true"
app:reverseLayout="true"
It works the same way, except the item "0" is at the bottom, and the "last" item is at the top. Adding another item would add it at the top but the BottomContainer has no participation (or influence) over this:
I want some different sized ImageViews in ConstraintLayout to have the same bottom line.
The smaller picture has the size: 100x140:
The larger picture has the size: 206x316:
With the xml layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#8E8392">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/jbean"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/p2"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/p1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/jellybig"
app:layout_constraintStart_toEndOf="#id/p1"
app:layout_constraintEnd_toStartOf="#+id/p3"
app:layout_constraintBottom_toBottomOf="#id/p1"
android:id="#+id/p2"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/jellybig"
app:layout_constraintStart_toEndOf="#id/p2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/p2"
android:id="#+id/p3"
/>
</android.support.constraint.ConstraintLayout>
However it looks weird, as follows:
Update:
According to Tamir Abutbul's answer, I've updated the layout to:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#8E8392">
<ImageView
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.3"
app:layout_constraintHeight_percent="0.99"
android:layout_height="0dp"
android:src="#drawable/jbean"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/p2"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/p1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.3"
app:layout_constraintHeight_percent="0.99"
android:src="#drawable/jellybig"
app:layout_constraintStart_toEndOf="#id/p1"
app:layout_constraintEnd_toStartOf="#+id/p3"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/p2"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.3"
app:layout_constraintHeight_percent="0.99"
android:src="#drawable/jellybig"
app:layout_constraintStart_toEndOf="#id/p2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/p3"
/>
</android.support.constraint.ConstraintLayout>
Which I think it couldn't work as expected.
hey unable to add this xml as comment, this is the xml for above image
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#ffffff">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/small"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/p2"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/p1"
app:layout_constraintHorizontal_bias="1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/big"
app:layout_constraintStart_toEndOf="#id/p1"
app:layout_constraintEnd_toStartOf="#+id/p3"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/p2"
app:layout_constraintHorizontal_bias="1"
/>
<ImageView
android:id="#+id/p3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/big"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#id/p2" />
</android.support.constraint.ConstraintLayout>
Try 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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#8E8392">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/jbean"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/p2"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/p1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/jellybig"
app:layout_constraintStart_toEndOf="#id/p1"
app:layout_constraintEnd_toStartOf="#+id/p3"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/p2"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/jellybig"
app:layout_constraintStart_toEndOf="#id/p2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/p3"
/>
</android.support.constraint.ConstraintLayout>
Let me know if not working
Your code will work for images with the same height and look like this:
But Different phones got different screen size, your images have fixed size 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).
In ConstraintLayout you can work with percent on your views like this:
<Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.6" //line 1
app:layout_constraintWidth_percent="0.5" //line 2
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
So what I did - I told my button to be equal to 60% of its parent in height (see line 1)
and also I told my button to be equal to 50% of its parent Width(see line 2).
You can implement this logic into your imageView to show different image size and keep a responsive layout.
do you want something like this??
I had a similar problem with an imageview that was constrained to the parents bottom but still showed some kind of margin. The solution was to add android:adjustViewBounds="true"
I'm trying to create view with button and fragemtn with list under this button. The problem is that the list starts from top of button not from bottom and it's look like this:
Layout code:
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.BluetoothActivity">
<Button
android:text="#string/scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/BluetoothScanButton"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
app:layout_constraintTop_toTopOf="parent"/>
<fragment
android:id="#+id/BluetoothDevicesFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.tatara.taffico.DeviceListFragment"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/BluetoothScanButton"/>
</android.support.constraint.ConstraintLayout>
Could anyone help me to fix it ?
You should add android:layout_height="0dp" fragment section.
<fragment
android:id="#+id/BluetoothDevicesFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
ConstraintLayout
You can also define one dimension of a widget as a ratio of the other
one. In order to do that, you need to have at least one constrained
dimension be set to 0dp (i.e., MATCH_CONSTRAINT).
I believe you're missing app:layout_constraintBottom_toTopOf="#id/BluetoothDevicesFragment" in the Button.
I'm facing issues with constraintlayout when placing ImageView or FrameLayout on top of a Button.
When i try to inflate a fragment on FrameLayout, Buttons that are part of activity are visible on top of fragment UI.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"/>
<FrameLayout
android:background="#color/blue"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
To place any view above another view you have to give proper constraint like below.
Give top and bottom constraint proper and also as I give all constraint(start,end,top,bottom) to FrameLayout it's height and width give to 0dp(you can't use height to match_parent otherwise it's cover whole screen and overlap button).
>
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<FrameLayout
android:background="#color/colorPrimary"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button"/>
</android.support.constraint.ConstraintLayout>
To set constraints of button and FrameLayout to,
Button:
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
FrameLayout :
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"
Your code looks ok but if you want to tell 1 view to be above another view in ConstraintLayout you can go to the design tab and move the higher above the lower view:
Example:
In the image, you can see that the button is placed below the frameLayout so he will be lower than the frameLayout (the frameLayout will be above the button)
Also, you were missing some constraints on your button :
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/frameLayout2" />
<FrameLayout
android:id="#+id/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
And if all that didn't help you check this thread, as #Xavier Rubio Jansana said, it may be because of elevation.
Try the code below
<?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/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="638dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#color/appGrey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
Hello guys, I need to add 2 fixed width and height imageview in to center of screen using constraint layout how we can achieve something like this.
xml layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.activity.profile.view.UserDetailsActivity">
<TextView
android:id="#+id/tv_label"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="#string/you_are"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".25" />
<CircularImageView
android:id="#+id/iv_farmer"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="#+id/iv_prof"
app:layout_constraintTop_toBottomOf="#+id/tv_label" />
<CircularImageView
android:id="#+id/iv_prof"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintLeft_toRightOf="#+id/iv_farmer"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_label" />
</android.support.constraint.ConstraintLayout>
i am trying this but views are not centerd.
I have updated your xml code. Please try with 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="You are"
app:layout_constraintBottom_toTopOf="#+id/iv_farmer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".25" />
<CircularImageView
android:id="#+id/iv_farmer"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/iv_prof"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<CircularImageView
android:id="#+id/iv_prof"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/iv_farmer"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Hope it helps :)
In your first CircularImageView there's a problem with your right constraint:
app:layout_constraintRight_toRightOf="#+id/iv_prof"
This should be constrained to the left of iv_prof:
app:layout_constraintRight_toLeftOf="#id/iv_prof"
If you want the to be closer together in the center then change the style of the chain to packed by adding this attribute to the first CircularImageView:
app:layout_constraintHorizontal_chainStyle="packed"
To center the Views vertically in the parent you need to constraint the top and bottom of each View to the top and bottom of the parent respectively.
Also you're using left/right constraints for some Views and start/end for others. Try using just one set of them across the whole layout.
It worked for me using bias:
<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"
android:layout_gravity="center">
<ImageView
android:id="#+id/img_splash_logo"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#drawable/weather_logo"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>