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 !
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>
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.
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 !
<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" />
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 :)
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>
