Develop Reference

How to anchor a Button on a View in the center

I'm trying to accomplish the following:
enter image description here
The gray part is the background of the activity and the white part is a horizontal LinearLayout. I want to create the spinner overlapping the top border of the LinearLayout but everything I can do is put it inside the layout or on top of it. Is there a way to accomplish this? or a workaround?

We can use ConstraintLayout for this. We need to use combinations of two properties
layout_constraintTop_toBottomOf
layout_constraintBottom_toBottomOf
This will center the Button or any other View
Example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/topView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_orange_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:orientation="horizontal" />
<View
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintTop_toBottomOf="#id/topView"
android:background="#android:color/holo_green_light"
android:orientation="horizontal" />
<com.google.android.material.button.MaterialButton
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/topView" // this
app:layout_constraintBottom_toBottomOf="#id/topView" // and this is important, it aligns the view to the top view
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Result:

RecyclerView card items not centering, when RecyclerView parent is ConstraintLayout?

I have a list of card views which has the flag of the country and name of it. The CardView has a ConstraintLayout as a child for aligning the views inside, and has a LinearLayout as parent.
The RecyclerView in MainActivity has a ConstraintLayout as Parent(which is the parent view by default created by AndroidStudio when doing a new project)
<?xml version="1.0" encoding="utf-8"?> <!-- MAIN ACTIVITY XML-->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="#dimen/card_view_item_main_width"
android:layout_height="#dimen/card_view_item_main_height">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/countryCardImage"
android:layout_width="match_parent"
android:layout_height="128dp"
android:contentDescription="#string/imagen_pais"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<TextView
android:id="#+id/countryCardText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintVertical_bias="1"
/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <!-- ITEMMAIN.XML -->
<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=".main.ui.main.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/listMain"
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_weight="0"
/>
</android.support.constraint.ConstraintLayout>

In your item root view, the layout_gravity="center" is not going to work on LinearLayout with layout_width="wrap_content: on a RecyclerView, so you could try changing its width to match_parent, and either change the gravity to android:gravity="center" or move android:layout_gravity="center" to its child view:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginTop="10dp"
android:layout_width=“match_parent”
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="#dimen/card_view_item_main_width"
android:layout_height="#dimen/card_view_item_main_height"
android:layout_gravity="center">

The problem is in layout item, you set the layout_width="wrap_content" in LinearLayout, and in main layout, layout_width in Recyclerview is 0dp (must be match_parent) so it's not center in main layout because the main layout depend on item layout => wrong with this case.
In your layout item, change like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">

Constraint Layout does'nt constraint nested elements of other layouts

I'm trying to create a layout of a list which starts on the bottom of a button and it's 3/4 of screen's width.
Just like this:
First, I used nested Linear layouts a horizonal and a vertical one, but then I read here that Constraint layouts are more responsive and I was impressed and gave it a try.
So, I tried to replace the outer layout to a constraint layout but now, I can't constraint the list to start at the bottom of the button and it starts at top of the screen.
I tried to see what would happen if I replaced the whole linear layout with a button just to see that the attributes are correctly implemented and it worked, so I understood that the Constraint layout does'nt effect the sons of the Linear layout although it should be effecting the whole layout (as I see it).
my code is the following:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageButton
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#FFFFFF"
android:src="#drawable/ic_menu_black_32dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/list_linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/settings_button"
app:layout_constraintTop_toBottomOf="#+id/settings_button">
<ListView
android:id="#+id/listview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
My current layout looks like this:
I really appriciate the helpers!

You need to change layout height of linear layout to 0dp, I will put here the layout for you. Also consider migrating to androidx :)
<?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">
<ImageButton
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#FFFFFF"
android:src="#drawable/ic_menu_black_32dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/list_linear_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:weightSum="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/settings_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/settings_button">
<ListView
android:id="#+id/listview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

I think, that using match_parent as width or height of child and adding any constraint is wrong here.
Edited xml (change margins if you want):
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageButton
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginTop="24dp"
android:backgroundTint="#FFFFFF"
android:src="#drawable/ic_menu_black_32dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/list_linear_layout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="24dp"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/settings_button"
app:layout_constraintTop_toBottomOf="#+id/settings_button"
app:layout_constraintWidth_percent="0.75">
<ListView
android:id="#+id/listview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"/>
</LinearLayout>

Center items in RecyclerView grid

I have main layout which includes my View which have RecyclerView and have grid applied on it. Now items have default width because of drawable i apply, and now they are aligned to left instead to center what i want to achieve.
My main layout:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/main_view"
xmlns:app="http://schemas.android.com/apk/res-auto">
<include android:id="#+id/constraint_more"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:visibility="gone"
layout="#layout/list_more_view"/>
</android.support.constraint.ConstraintLayout>
More layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/list_more_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/list_more_bg">
<TextView
android:id="#+id/textview_title_more"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:shadowRadius="2"
android:text="#string/title"
android:textColor="#color/list_text_color"
android:textSize="25dp"/>
<ImageView
android:id="#+id/button_closemore"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:contentDescription="#string/close_button"
android:src="#drawable/btn_close"
app:layout_constraintBottom_toBottomOf="#id/textview_title_more"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview_morelist"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/textview_title_more" />
</android.support.constraint.ConstraintLayout>
And the item layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/constraintlayout_item_view"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#drawable/plate_basic">
<TextView
android:id="#+id/textview_unit_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:maxLines="2"
app:autoSizeTextType="uniform"
android:textColor="#color/item_text_color"
android:paddingTop="#dimen/tile_title_padding"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
So the thing is items in this more view are all aligned to left but i want the whole view of items centred, i tried with setting the width to wrap content and than centring with gravity but no success.

Change constraintlayout_item_view to have:
android:layout_width="match_parent"
Then set textview_unit_title to have:
android:layout_width="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
That should place the TextView centered inside its row.
In addition, your main layout's width and height are a little strange:
android:layout_width="0dp"
android:layout_height="0dp"
They should probably both be match_parent

CardView goes on top of FrameLayout, but declared first

I have simple FrameLayout with support CardView as first item, and TextView as second, so TextView must be on top of inflated view. This works on pre-Lolipop but on 21+ card takes toppest place in layout, why that's so and how to fix this? Same thing with RelativeLayout.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>

In case someone gets here and the solution for setting elevation doesn't work for them (like in my case, where I needed to draw an image above the CardView and having a shadow on it was not acceptable), you can solve the issue by wrapping the CardView inside another FrameLayout. In the example provided, it would look something like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<!-- This is the added FrameLayout -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>

I might be joining the discussion a bit late, but if you can afford giving up the CardView's elevation, you can just set the cardElevation property of the CardView in your XML layout to 0dp.
Like so:
app:cardElevation="0dp"

Just add your text view inside the card view, far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last.
This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop.

This worked for me!
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<!-- Add this layout as parent of CardView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false" />
</LinearLayout>
<!--Close parent layout-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#0000ff"
android:gravity="center"
android:text="i am top view!"
android:textAllCaps="true"
android:textColor="#00ff00"
android:textSize="30sp" />
</FrameLayout>