Android - Align View Center To Bottom Of Other View

A picture tells more than a lengthy speech : I want to align vertically the center of the red part with the middle of the black part. I have no constraint of container (RelativeLa

Solution 1:

This is also possible using the ConstraintLayout. Similar to how aligning the start/end of a view to the parent centers it within the parent, we can use that concept to center along the edge of a View.

The key to this layout is two constraints on our bottom view:

app:layout_constraintTop_toBottomOf="@id/top_view"
app:layout_constraintBottom_toBottomOf="@id/top_view"

By constraining both the top/bottom of the lower view to the bottom of the upper view, the layout will adjust to center it along that bottom. Here is the full code and screenshot of the blueprint:

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayoutxmlns: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"><Viewandroid:id="@+id/top_view"android:layout_width="0dp"android:layout_height="0dp"android:background="@color/green"app:layout_constraintDimensionRatio="1:1"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><Viewandroid:id="@+id/bottom_view"android:layout_width="58dp"android:layout_height="58dp"android:background="@color/red"app:layout_constraintBottom_toBottomOf="@id/top_view"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@id/top_view" /></android.support.constraint.ConstraintLayout>

Solution 2:

Android now supports layout anchors with the CoordinatorLayout:

<android.support.design.widget.CoordinatorLayoutxmlns: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"><Viewandroid:id="@+id/black_view"android:layout_width="match_parent"android:layout_height="@dimen/black_height"/><Viewandroid:id="@+id/red_view"android:layout_width="@dimen/red_width"android:layout_height="@dimen/red_height"app:layout_anchor="@id/black_view"app:layout_anchorGravity="bottom|center"/></android.support.design.widget.CoordinatorLayout>

If you change the size of the views in your Java code, the anchor will persist as well.

Solution 3:

Finally, I use a more programmatic way to solve this problem, because the size of Views are not fixed.

Here the solution :

The layout :

<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" ><Viewandroid:id="@+id/black"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"/><Viewandroid:id="@+id/red"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"></RelativeLayout>

The code :

            red.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                publicvoidonGlobalLayout() {
                    red.getViewTreeObserver().removeOnGlobalLayoutListener(this);

                    LayoutParams params = new LayoutParams(
                            LayoutParams.MATCH_PARENT,      
                            LayoutParams.WRAP_CONTENT
                            );
                    params.setMargins(0, 0, 0, red.getHeight()/2);
                    black.setLayoutParams(params);
                }
            });

Thanks for your help ! It helps me found this !

Solution 4:

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginBottom="25dp"android:background="#EEFFFFFF"android:orientation="vertical"></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_alignParentBottom="true" />

Solution 5:

try 2 views in a relative laytout. put 1 below other (using below property). also make them both layout_centerHorizontal=true.

u can make a negative padding to the bottom one to lift it over the upper one.

good luck :)