Search code examples
androidandroid-layoutlayout

How to align two buttons and views left to center, center to right with

How do I create a layout with two buttons that can fill half of the layout from left and the second button on the right with also a view below as a border?

enter image description here

My layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="@color/colorPrimary"
    tools:context=".Login">

    <RelativeLayout
        android:gravity="center_horizontal"
        android:layout_marginTop="70dp"
        android:layout_marginBottom="70dp"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        android:background="@color/white"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/_45sdp"
            android:background="@color/white"
            android:orientation="horizontal">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            <Button
                android:id="@+id/btn_chat"
                android:layout_alignParentLeft="true"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@color/white"
                android:textColor="@color/colorPrimary"
                android:textStyle="bold"
                android:text="LOGIN" />

            <Button
                android:id="@+id/btn_cart"
                android:layout_alignParentRight="true"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@color/white"
                android:textColor="@color/lightDark"
                android:textStyle="bold"
                android:text="REGISTER" />
            </RelativeLayout>
            <View
                android:id="@+id/active_border"
                android:layout_alignParentLeft="true"
                android:layout_alignParentBottom="true"
                android:background="@color/colorPrimary"
                android:layout_width="wrap_content"
                android:layout_height="1dp"/>
            <View
                android:id="@+id/inactive_border"
                android:layout_alignParentRight="true"
                android:layout_alignParentBottom="true"
                android:background="@color/lightDark"
                android:layout_width="wrap_content"
                android:layout_height="1dp"/>
        </RelativeLayout>

    </RelativeLayout>
</RelativeLayout>
Solution

  • You could use the ConstraintLayout as the parent and set app:layout_constraintWidth_percent="0.5" in the child to make sure it takes the half of the width. Also use the constrain to make sure the buttons are on top of the border view.

    For example the following code uses ConstraintLayout to achieve something similar:

    <androidx.constraintlayout.widget.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="wrap_content">

    <Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/borderView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/borderView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5" />

    <View
        android:id="@+id/borderView"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/black"
        app:layout_constraintBottom_toBottomOf="parent" />