How to use same technique of css "negative margin" in a layout?

Question

I would like to create this kind of layout you see in the picture and I'm thinking like negative margin in CSS and no result. Please help me achieve it.

<?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=".HomeActivity">
    <TextView
    android:id="@+id/txt_home_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/box"
    android:elegantTextHeight="true"
    android:padding="30dp"
    android:text="Welcome!"
    android:textColor="#ffffff"
    android:textSize="28sp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp">
    <ImageView
        android:id="@+id/home_logo"
        android:layout_width="90dp"
        android:layout_height="80dp"
        android:scaleType="fitCenter"
        android:src="@drawable/mylogo" />
</FrameLayout>
</android.support.constraint.ConstraintLayout>

Here is the box:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#2d3669"></solid>
            <corners android:radius="50dp"></corners>
            <gradient android:angle="90"
                android:startColor="#392800"
                android:endColor="#faae03"/>
        </shape>
    </item>
</selector>

I know in ConstraintLayout how to have items near each other, but I can't figure it out how to put a log on a TextView so that half of it remains outside! I can't find a keyword that leads to such examples on Google.

You want to use a CoordinatorLayout. It's the layout element that allows you to place elements over each other. — Luís Henriques, Jul 06 '18 at 14:17

Vikasdeep Singh · Accepted Answer · 2020-08-21T06:00:48.750

Here you go:

<?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"
    tools:layout_editor_absoluteY="81dp">

<TextView
    android:id="@+id/txt_home_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/box"
    android:elegantTextHeight="true"
    android:padding="30dp"
    android:text="Welcome!"
    android:textColor="#ffffff"
    android:textSize="28sp"
    tools:layout_editor_absoluteX="129dp"
    tools:layout_editor_absoluteY="0dp" />

<android.support.v4.widget.Space
    android:id="@+id/space"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="32dp"
    app:layout_constraintBottom_toBottomOf="@+id/txt_home_title"
    app:layout_constraintLeft_toLeftOf="@id/txt_home_title"
    app:layout_constraintRight_toRightOf="@id/txt_home_title" />

<ImageView
    android:id="@+id/home_logo"
    android:layout_width="98dp"
    android:layout_height="84dp"
    android:scaleType="fitCenter"
    android:src="@mipmap/ic_launcher"
    app:layout_constraintHorizontal_bias="0.687"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/space" />

</android.support.constraint.ConstraintLayout>

Output:

Explanation:

We can not use negative margin in ConstraintLayout as it is not officially supported so we need to use a workaround. Add an empty view i.e. Space between ImageView and TextView and set android:layout_marginBottom="32dp" to Space view and you are done.

I followed this answer of CommonsWare.

score 1 · Answer 2 · answered Jul 06 '18 at 14:30

There are at least 2 different ways to achieve this.

1. Anchor

If you want the logo's center to be exactly on the bottom edge of the TextView, use a CoordinatorLayout as the direct parent view of the logo and the TextView, and use the app:layout_anchor and app:layout_anchorGravity XML properties on the logo. For your example, the value of app:layout_anchor would be the ID of the TextView, and the value of app:layout_anchorGravity would be "bottom|end".

Note that you should be able to achieve any positioning that you want by encapsulating the logo within a parent layout, anchoring the parent to the TextView, and then setting margins on the logo to move it around within its transparent parent.

2. Negative margins (yep)

Android actually supports negative margins, although probably not with a ConstraintLayout. It definitely works with a RelativeLayout though! Considering that you want your ImageView to overlap the TextView, it would look like this:

<RelativeLayout
    ...

    <TextView
        android:id="@+id/myTextView"
        ... />

    <ImageView
        android:layout_below="@+id/myTextView"
        android:layout_marginTop="-30dp"
        ... />
 </RelativeLayout>

Keep in mind the Z ordering when doing this as well. In my example above the ImageView would be drawn on top of the TextView because it's declared after the TextView within its parent. If the ImageView would have been declared first, the TextView would be drawn on top of it.

How to use same technique of css "negative margin" in a layout?

2 Answers2