Question 261499 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Placing Two elements at the left of and at the right of parent relative layout in android xml

i want to two elements at the left side of relative layout and two elements at the right side of the same relative layout in android xml. i tried like below. it doesn’t work.

My Xml

<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="match_parent"
android:background="@color/primary_color"
android:id="@+id/linear_parentPl"
tools:context=".PlayList">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:orientation="vertical"
    android:background="@drawable/top_bar">

    <ImageView
        android:id="@+id/back_iconPl"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:src="@drawable/baseline_arrow_back_ios_24"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/play_list"
        android:layout_toRightOf="@+id/back_iconPl"
        android:textColor="@color/light_orange"
        android:textStyle="bold"
        android:textSize="24sp"
        android:layout_marginTop="10dp"/>

    <TextView
        android:id="@+id/logout_text"
        android:layout_toLeftOf="@+id/logout_iconPl"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/logout_text"
        android:textColor="@color/white"
        android:textStyle="bold"
        android:textSize="14sp"
        android:layout_marginTop="10dp"/>

    <ImageView
        android:id="@+id/logout_iconPl"
        android:layout_alignParentRight="true"
        android:layout_width="26dp"
        android:layout_height="26dp"
        android:src="@drawable/logoutrounded"/>
</RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

could any body help me to achieve this?

my output is

enter image description here

Tags:

2

Answers


  1. 0

    I would suggest you to drop the Relative-Layout and directly use the constraint layout.
    Giving some constraints should do the trick to place an object on the right end.

                app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/xxx"
            app:layout_constraintTop_toBottomOf="parent"

    where "@id/xxx" is the id of the left-side object.
    If you have more than one left-sided objects, wrap them into another constraint-layout and give the constraint-layout an id to reference it.

    Additionally there may also be a 0dp on witdh or height necessary, like:

                android:layout_width="0dp"
            android:layout_height="match_parent"

    This will fill up the empty space in either width or height (not usable on both).
    Details at What does layout_height="0dp" mean?

    Login or Signup to reply.
  2. 0

    I’m a little bit confused about your problem. Your problem is not clear to me. But according to my understanding, the below image exactly matches your requirement as you want.

    Playlist Screen

    If it matches the requirements then I write the code below.

    <?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.activity.PlayList">

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="?android:actionBarSize"
    android:background="@color/top_bar"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/back_iconPl"
            android:layout_width="34dp"
            android:layout_height="34dp"
            android:layout_marginLeft="16dp"
            android:src="@drawable/baseline_arrow_back_ios_24" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/back_iconPl"
            android:text="@string/play_list"
            android:textColor="@color/light_orange"
            android:textSize="24sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|center_vertical"
        android:gravity="center_vertical">

        <TextView
            android:id="@+id/logout_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="6dp"
            android:text="@string/logout_text"
            android:textColor="@color/white"
            android:textSize="14sp"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/logout_iconPl"
            android:layout_width="26dp"
            android:layout_height="26dp"
            android:layout_marginEnd="6dp"
            android:src="@drawable/logoutrounded" />
    </LinearLayout>
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

    Nothing you have to do it. Just copy the whole code and paste it to your .xml file.

    Add this line to your color.xml file.

    <color name="top_bar">#395856</color>

    And click on the run. That’s it.

    Happy Coding 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search