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 (RelativeLayout, FrameLayout, LinearLayout oO ).

I tried a View with height of 0dp aligned to the bottom of the black view and alignBaseline of red view to it, but it doesn't work...

Thanks for your help !

Answers


Android now supports layout anchors with the CoordinatorLayout:

<android.support.design.widget.CoordinatorLayout 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">

    <View android:id="@+id/black_view"
        android:layout_width="match_parent" android:layout_height="@dimen/black_height"/>

    <View android: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.


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.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">

    <View
        android: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" />

    <View
        android: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>


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

Here the solution :

The layout :

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <View
                android:id="@+id/black"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"/>

            <View
                android: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
                public void onGlobalLayout() {
                    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 !


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 :)


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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true" />

Here I am using two different View as black and red.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="match_parent"
        android:layout_height="300dp" 
        android:background="@android:color/black"
        android:id="@+id/blackContainer" />

    <View
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/holo_red_light"
        android:layout_below="@+id/blackContainer"
        android:layout_marginTop="-50dp"/>

</RelativeLayout>

The trick is I have put the red container below the black container and set its marginTop to negative half of its height. So the center of red container is at the bottom of black container.


Try doing the opposite. Anchor the smaller view first and place the other view accordingly. Something like this:

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<View
    android:layout_width="100dp"
    android:layout_height="200dp"
    android:layout_centerHorizontal="true"
    android:layout_alignBottom="@+id/anchor"
    android:background="@color/black" />

<View
    android:layout_width="80dp"
    android:layout_height="50dp"
    android:layout_centerInParent="true"
    android:background="@color/light_grey"/>

<View
    android:id="@+id/anchor"
    android:layout_centerInParent="true"
    android:layout_width="0dp"
    android:layout_height="0dp"/>

</RelativeLayout>

Need Your Help

Best Way for Conditional Variable Assignment

javascript

Just want to Check which is better way for conditional Variable Assignement

How to make a cross browser, W3C valid, semantic, non-javascript ROUND corner?

html css

I want to make a cross-browser (FF3, IE6, Safari, Opera), W3C valid (HTML and CSS both), stretchable (horizontally vertically), without JavaScript and with Semantic and lesser HTML markup Round COR...