Relativelayout property issue

Question

I want to create my Toolbar layout like below image.

I written below code for create this view. Please see my xml Code.

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/_40sdp"
        android:background="@color/black"
        android:padding="@dimen/_5sdp">

        <ImageView
            android:id="@+id/toolbar_default_img_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:padding="@dimen/_5sdp"
            android:src="@drawable/icon_menu" />

        <TextView
            android:id="@+id/toolbar_default_textview_title"
            style="@style/textview_normal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@+id/toolbar_default_img_menu"
            android:layout_toStartOf="@+id/toolbar_default_img_search"
            android:text="@string/app_name"
            android:textColor="@color/white"
            android:textSize="@dimen/_15ssp" />

        <ImageView
            android:id="@+id/toolbar_default_img_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toStartOf="@+id/toolbar_default_img_filter_tag"
            android:padding="@dimen/_5sdp"
            android:src="@drawable/icon_search" />

        <ImageView
            android:id="@+id/toolbar_default_img_filter_tag"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toStartOf="@+id/toolbar_default_img_filter"
            android:padding="@dimen/_5sdp"
            android:src="@drawable/icon_filter" />

        <ImageView
            android:id="@+id/toolbar_default_img_filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:padding="@dimen/_5sdp"
            android:src="@drawable/icon_filter" />

    </RelativeLayout>

After written this code i can see my view is correct in android studio preview but when i run my project it look like below image.

only left and right imageview on correct position but my textview and other two imageview is not set on correct position after run this code.

May be problem with android:layout_toEndOf and android:layout_toStartOf property of RelativeLayout.

I don't know why this problem create.Thank you for help.

This is not the write way to do this .Checkout this : https://stackoverflow.com/questions/6439085/android-how-to-create-option-menu , How to create an options menu — Anonymous, Apr 10 '18 at 10:21
android:layout_alignParentEnd="true" add this line for another 2 ImageViews — srinu, Apr 10 '18 at 10:23
This is not the best way to do this, but when I use your xml, it seems to work fine (in the preview) — Dennis van Opstal, Apr 10 '18 at 10:25
@DennisvanOpstal i already told in question it work fine in preview but after run it's not working — Nikunj Patel, Apr 10 '18 at 10:25
@DennisvanOpstal it's ok but u have any solution about this issue — Nikunj Patel, Apr 10 '18 at 10:26
You have applied circular relationship inside textview please remove it. — Sameer Jani, Apr 10 '18 at 10:28
And to resolve above issue you can use linearlayout for right side view of your layout. Where Linearlayout would be horizontal aligned. and linearlayout should be alignparent end/right true,Are you getting my point? — Sameer Jani, Apr 10 '18 at 10:30
When I run the app it seems to work fine, I think you should check out the answer from Tarak or Tomin (add toLeftOf and toRightOf) — Dennis van Opstal, Apr 10 '18 at 10:31

Sameer Jani · Accepted Answer · 2018-04-10T11:17:08.067

Replace this code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_40sdp"
    android:background="@color/black"
    android:padding="@dimen/_5sdp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:gravity="center_vertical"
        android:layout_centerVertical="true"
        android:orientation="horizontal"
        >
        <ImageView
            android:id="@+id/toolbar_default_img_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="@dimen/_5sdp"
            android:src="@drawable/ic_launcher_background" />

        <TextView
            android:id="@+id/toolbar_default_textview_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:maxEms="50"
            android:text="@string/app_name" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/toolbar_default_img_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:padding="@dimen/_5sdp"
            android:src="@drawable/icon_search" />

        <ImageView
            android:id="@+id/toolbar_default_img_filter_tag"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:padding="@dimen/_5sdp"
            android:src="@drawable/icon_filter" />

        <ImageView
            android:id="@+id/toolbar_default_img_filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="@dimen/_5sdp"
            android:src="@drawable/icon_filter" />
    </LinearLayout>

</RelativeLayout>

Do changes as per your requirement by padding and margin to make a proper design.

with your answer all three image set on right side but text is overlapping on left image icon — Nikunj Patel, Apr 10 '18 at 10:40
Ohhh sorry @nikunj I did silly mistake there let me update my answer — Sameer Jani, Apr 10 '18 at 10:53
Please check above updated answer. I did just toLeftof instead of toRightOf for textview — Sameer Jani, Apr 10 '18 at 10:54
Ohh...can you please tell me what the issue you are facing now? — Sameer Jani, Apr 10 '18 at 10:59
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168636/discussion-between-sameer-jani-and-nikunj-patel). — Sameer Jani, Apr 10 '18 at 11:13
Ohh why this occure could not understand because here it's working proper. No issue please check my above updated code again. — Sameer Jani, Apr 10 '18 at 11:16

Tomin B Azhakathu · Answer 2 · 2018-04-10T10:40:27.297

Try using layout_alignParentRight , layout_toLeftOf , layout_toRightOf ,layout_alignParentLeft instead of layout_alignParentEnd , layout_toStartOf , layout_toEndOf and layout_alignParentStart or use Both in the Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/black"
        android:padding="5dp">

        <ImageView
            android:id="@+id/toolbar_default_img_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:padding="5dp"
            android:src="@drawable/add_btn" />

        <TextView
            android:id="@+id/toolbar_default_textview_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/toolbar_default_img_menu"
            android:layout_toLeftOf="@+id/toolbar_default_img_search"
            android:text="@string/app_name"
            android:textColor="@color/white"
            android:textSize="15sp" />

        <ImageView
            android:id="@+id/toolbar_default_img_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/toolbar_default_img_filter_tag"
            android:padding="5dp"
            android:src="@drawable/add_btn" />

        <ImageView
            android:id="@+id/toolbar_default_img_filter_tag"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/toolbar_default_img_filter"
            android:padding="5dp"
            android:src="@drawable/add_btn" />

        <ImageView
            android:id="@+id/toolbar_default_img_filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:padding="5dp"
            android:src="@drawable/add_btn" />

    </RelativeLayout>
</RelativeLayout>

@NikunjPatel : Try the Complete Code. I had Just Updated the Complete Code — Tomin B Azhakathu, Apr 10 '18 at 10:33
Sorry, Bro. Check your code correctly. I'm Getting the result correctly. Check the Screen Shot. Which Device are you using for Testing? API 16 and Below Requires Start and End Values. Where 17 and Later Require Right and Left attribute Values — Tomin B Azhakathu, Apr 10 '18 at 10:43

score 0 · Answer 3 · answered Apr 10 '18 at 10:22

0

you need to add them as action button on the appbar

https://developer.android.com/training/appbar/actions.html

answered Apr 10 '18 at 10:22

user3277530

351
6
14

score 0 · Answer 4 · answered Apr 10 '18 at 10:28

0

You need to add

android:layout_toLeftOf

along with

android:layout_toStartOf

and

android:layout_toRightOf

with

android:layout_toEndOf

answered Apr 10 '18 at 10:28

Tarak Bhawalkar

19
3

score 0 · Answer 5 · answered Apr 10 '18 at 10:59

0

Add

android:layout_toLeftOf:

along with

android:layout_toStartOf:

and

 android:layout_toRightOf:

with

 android:layout_toEndOf:

because you need to support lower API versions.

answered Apr 10 '18 at 10:59

glagarto

913
8
20

Relativelayout property issue

5 Answers5