Adjust my button slightly downward in Constraint Layout

Question

I got the following layout, as well you can see my "View More" button is aligned exactly vertically center/middle of the bottom edge line.

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

Now, what if I want to push my "View More" button slightly downward for about 2% of its height or 2dp for example.

I've tried android:layout_marginTop="50dp" makes no different

app:layout_constraintVertical_bias="0.8" makes no different either.

What else any "constraint solution" I can do, besides the old school method:

app:layout_constraintBottom_toBottomOf="parent" (apply on btn_view_more) and then hardcode the marginBottom and push upward

I know this is one of the solutions but, I'm interested to know if any constraint related solution available that I'm not aware of

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_content"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginHorizontal="@dimen/_20sdp"
        android:layout_marginVertical="@dimen/_50sdp"
        android:background="@drawable/background_transparent_round_corner"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/iv_close"
        android:layout_width="@dimen/_30sdp"
        android:layout_height="@dimen/_30sdp"
        android:background="@drawable/background_circle"
        android:src="@drawable/ic_close"
        app:layout_constraintBottom_toTopOf="@id/iv_content"
        app:layout_constraintEnd_toEndOf="@id/iv_content"
        app:layout_constraintStart_toEndOf="@id/iv_content"
        app:layout_constraintTop_toTopOf="@id/iv_content" />

    <air.com.my.companyname.util.font.InterRegularButton
        android:id="@+id/btn_view_more"
        style="@style/ButtonSolidBlue"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/_40sdp"
        android:layout_marginTop="50dp"
        android:text="View More"
        app:layout_constraintBottom_toBottomOf="@id/iv_content"
        app:layout_constraintEnd_toEndOf="@id/iv_content"
        app:layout_constraintStart_toStartOf="@id/iv_content"
        app:layout_constraintTop_toBottomOf="@id/iv_content" />
</androidx.constraintlayout.widget.ConstraintLayout>

There's a way but I don't know if it is what you want to achieve in the end. Instead of constraining your 'view more' button top to the bottom of image view, you can constraint it as top to the top of image view. This will make button centered to your imageview. now use vertical bias with fraction values more than 1 like '1.02' etc. — Jeel Vankhede, Dec 03 '20 at 07:45
i've tried this, but it seems that , 1 or 1.02 is contraint to bottom, or I'd say move downward, I've tried to put -0.2 , but it seems not possible, bias 0.0 will stick to top (bottom of `iv_content`) — elliotching, Dec 03 '20 at 09:02
value greater than 1 caused part of button move out of screen — elliotching, Dec 03 '20 at 09:08

score 1 · Answer 1 · answered Dec 03 '20 at 12:55

Add the following to the button XML:

android:translationY="2dp"

This will move the button down by 2dp. The drawback to this method is that any views constrained to the top or bottom of the button will not move with the 2dp shift since the shift occurs post layout. The button will still be 100% clickable and otherwise functional in its new position.

ConstraintLayout does not support negative margins which would be a nice solution. For other solutions look here.

MehranB · Answer 2 · 2020-12-03T13:17:45.850

1

Add this to your iv_content ImageView:

android:paddingBottom="2dp"

It will give you the look you want. If it messes with your image in the ImageView, you can take 2dp off of the bottom margin of the iv_content like so:

android:layout_marginBottom="48dp"

edited Dec 03 '20 at 13:17

answered Dec 03 '20 at 13:12

MehranB

1,460
2
7
17

Vishnu · Answer 3 · 2020-12-03T09:17:58.933

0

Try this in btn_view_more

        app:layout_constraintBottom_toBottomOf="@id/iv_content"
        app:layout_constraintEnd_toEndOf="@id/iv_content"
        app:layout_constraintStart_toStartOf="@id/iv_content"
        app:layout_constraintTop_toBottomOf="@id/iv_content"

Hope this helps. Feel free to ask for clarifications...

edited Dec 03 '20 at 09:17

answered Dec 03 '20 at 07:43

Vishnu

663
3
7
24

if i not mistaken this will make it lays somewhere inside of white area, and never touch on content area – elliotching Dec 03 '20 at 08:53
Where should be the button positioned actually? – Vishnu Dec 03 '20 at 08:57
same with the screenshot but slightly moving down (part of the button should be still overlaying the content) – elliotching Dec 03 '20 at 09:02

Adjust my button slightly downward in Constraint Layout

3 Answers3