Is it possible to contain a button with respect to the bottom, rather than the top element?

Question

So I am currently using constraint layout for my signup screen. However, the signup button is supposed to be like 100dp from parent bottom, rather than 200 dp from the top element. Whenever I try to remove the top margin and try to make it relative to the parent bottom, it ends up in almost the middle of the screen instead of the bottom. I was wondering if there's a way I can make it such that it aligns to the bottom of the screen? Here's my code :

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    android:fitsSystemWindows="true">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:foreground="@drawable/image_gradient"
        android:scaleType="centerCrop"
        android:src="@drawable/hero_image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:contentDescription="@null" />

    <ImageView
        android:id="@+id/logo"
        android:layout_width="207dp"
        android:layout_height="77dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="180dp"
        android:contentDescription="@string/my_logo"
        android:src="@drawable/ic_my_white_logo"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginTop="200dp"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:background="@color/white"
        android:fontFamily="sans-serif-medium"
        android:letterSpacing="0.07"
        android:lineSpacingExtra="0sp"
        android:text="@string/sign_in"
        android:textColor="@color/reddish"
        android:textSize="16sp"
        android:textStyle="normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintBottom_toTopOf="@id/link_sign_up"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/logo"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/link_sign_up"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginTop="15dp"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:fontFamily="sans-serif-medium"
        android:gravity="center_horizontal"
        android:letterSpacing="0.07"
        android:lineSpacingExtra="0sp"
        android:text="@string/no_account"
        android:textColor="@color/white"
        android:textSize="16sp"
        android:textStyle="normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_login" />

</android.support.constraint.ConstraintLayout>

From the above XML, button login_in and sign_up link are supposed to be together (which works as expected), login button, below that signup link. But I am manually setting "android:layout_marginTop="200dp" from the logo on top of it, which is not a good practice, as for some devices, it does not end up aligning to the bottom as expected (and is hardcoded). Rather I would like it to say 100dp from the margin with no alliance to the top, so for any device, it's 100dp from the bottom. Any ideas on how to fix this to achieve the goal?

Thanks in advance!

If you use `ConstraintLayout` Maybe you would like to use [Guidlines](https://constraintlayout.com/basics/guidelines.html) to replace your fixed size margins and make your screen responsive to all screen sizes. — Tamir Abutbul, May 01 '19 at 14:53

score 0 · Accepted Answer · answered Apr 30 '19 at 19:52

You can achieve the same behaviour using a RelativeLayout like the following.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@android:drawable/btn_default" />

    <ImageView
        android:id="@+id/logo"
        android:layout_width="207dp"
        android:layout_height="77dp"
        android:layout_centerInParent="true"
        android:layout_marginTop="180dp"
        android:src="@drawable/ic_launcher_background" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="100dp"
        android:orientation="vertical">

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="200dp"
            android:layout_marginRight="16dp"
            android:background="@android:color/white"
            android:fontFamily="sans-serif-medium"
            android:letterSpacing="0.07"
            android:lineSpacingExtra="0sp"
            android:text="Sign in"
            android:textColor="@android:color/holo_red_dark"
            android:textSize="16sp"
            android:textStyle="normal" />

        <TextView
            android:id="@+id/link_sign_up"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginRight="16dp"
            android:fontFamily="sans-serif-medium"
            android:gravity="center_horizontal"
            android:letterSpacing="0.07"
            android:lineSpacingExtra="0sp"
            android:text="No Account"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:textStyle="normal" />
    </LinearLayout>
</RelativeLayout>

Please note that I have omitted some drawables and colors to test it in my IDE. Please modify as necessary.

Surely it is. However, I prefer `RelativeLayout` in this case for cleaner implementation. — Reaz Murshed, Apr 30 '19 at 20:02
thanks, I will test it out. Also, I am using this throughout my app, do you know of what i am missing in my code that can help me align it to the bottom ? would be really helpful instead of changing the code throughout my app! thanks! i appreciate your help! — , Apr 30 '19 at 20:04
Reaz any idea about this issue : https://stackoverflow.com/questions/55937736/how-do-i-set-my-status-bar-transparent-but-keep-by-navigation-bar-black ? — , May 01 '19 at 14:38
Thanks. I will look into the question whenever I can manage some time. :) — Reaz Murshed, May 01 '19 at 14:53

score 0 · Answer 2 · answered May 02 '19 at 04:02

Using Constraintlayout it's possible and better to use constraintlayout.Just give your constraint proper. Also show your design which ever you want to do. Here I do approx design

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:fitsSystemWindows="true">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_back"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/logo"
        android:layout_width="207dp"
        android:layout_height="77dp"
        android:layout_gravity="center_horizontal"
        android:contentDescription="my_logo"
        android:src="@drawable/ic_pass"
        app:layout_constraintBottom_toTopOf="@+id/btn_login"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/_10sdp"
        android:layout_marginEnd="@dimen/_10sdp"
        android:background="@color/colorPrimary"
        android:fontFamily="sans-serif-medium"
        android:letterSpacing="0.07"
        android:lineSpacingExtra="0sp"
        android:text="sign_in"
        android:textColor="@color/colorAccent"
        android:textSize="16sp"
        android:textStyle="normal"
        app:layout_constraintBottom_toTopOf="@id/link_sign_up"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/link_sign_up"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/_10sdp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="@dimen/_10sdp"
        android:layout_marginBottom="100dp"
        android:fontFamily="sans-serif-medium"
        android:gravity="center_horizontal"
        android:letterSpacing="0.07"
        android:lineSpacingExtra="0sp"
        android:text="no_account"
        android:textColor="@color/colorAccent"
        android:textSize="16sp"
        android:textStyle="normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Is it possible to contain a button with respect to the bottom, rather than the top element?

2 Answers2