CODEWITHSUNDEEP
androidandroid-layoutandroid-relativelayout
Martin
Martin

Reputation: 2914

How to fill layout between two views in RelativeLayout?

I have this simple layout with 2 icons and SearchView between them. I want SearchView to be between those two icons (same as match_constraint in ConstraintLayout). I want to use RelativeLayout, because negative margins doesn't work in ConstraintLayout (you have to use spacers which is not effective in my case).

This solution doesn't work. It will push second icon off the view and SearchView will match_parent in that case. Reason for negative margin: Gap between Icon and SearchView in app is big even without margin. So I want to use negative margin for icons to bring them closer to the edge of SearchView(EditText inside)

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginBottom="16dp"
        android:layout_marginTop="32dp">

        <ImageButton
            android:id="@+id/icon_1"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:adjustViewBounds="true"
            android:background="@android:color/transparent"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/ico_1" />

        <android.support.v7.widget.SearchView
            android:id="@+id/action_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toEndOf="@id/icon_1"
            android:background="@color/colorTransparent"
            android:backgroundTint="@color/colorTransparent"
            android:focusedByDefault="false"
            app:closeIcon="@null"
            app:iconifiedByDefault="false"
            app:searchHintIcon="@null"
            app:searchIcon="@null">

        </android.support.v7.widget.SearchView>

        <ImageButton
            android:id="@+id/icon_2"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_toEndOf="@id/action_search"
            android:layout_centerVertical="true"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="15dp"
            android:adjustViewBounds="true"
            android:background="@android:color/transparent"
            android:scaleType="fitCenter"
            android:src="@drawable/ico_2" />
    </RelativeLayout>

Image:

enter image description here

Upvotes: 3

Views: 862

Answers (3)

Sana
Sana

Reputation: 456

This one will work for you, just try this 

    <?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="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginBottom="16dp"
    android:layout_marginTop="32dp"
    android:orientation="horizontal">

    <ImageButton
    android:id="@+id/icon_1"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_alignParentStart="true"
    android:layout_centerVertical="true"
    android:layout_gravity="center_horizontal"
    android:adjustViewBounds="true"
    android:background="@android:color/transparent"
    android:src="@drawable/ico_1"
    android:layout_alignParentLeft="true" />

    <android.support.v7.widget.SearchView
    android:id="@+id/action_search"
    app:closeIcon="@null"
    app:iconifiedByDefault="false"
    app:searchHintIcon="@null"
    app:searchIcon="@null"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@id/icon_1"
    android:background="@android:color/transparent"
    android:backgroundTint="@android:color/transparent"
    android:focusedByDefault="false"
    android:layout_toRightOf="@id/icon_1">

    </android.support.v7.widget.SearchView>

    <ImageButton
    android:id="@+id/icon_2"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    android:layout_marginEnd="15dp"
    android:layout_toEndOf="@id/action_search"
    android:adjustViewBounds="true"
    android:background="@android:color/transparent"
    android:scaleType="fitCenter"
    android:src="@drawable/ico_2"
    android:layout_alignParentRight="true"
    android:layout_marginRight="15dp"
    android:layout_toRightOf="@id/action_search" />
    </RelativeLayout>

Upvotes: 0

AskNilesh
AskNilesh

Reputation: 69709

Try this

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginBottom="16dp"
    android:layout_marginTop="32dp">

    <ImageButton
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:adjustViewBounds="true"
        android:layout_gravity="center_vertical"
        android:background="@android:color/transparent"
        android:src="@drawable/ic_menu_send" />


    <android.support.v7.widget.SearchView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        app:closeIcon="@null"
        android:layout_gravity="center"
        app:iconifiedByDefault="false"
        app:searchHintIcon="@null"
        app:searchIcon="@null"/>

    <ImageButton
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:adjustViewBounds="true"
        android:layout_gravity="center_vertical"
        android:background="@android:color/transparent"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_menu_send" />


</LinearLayout>

Upvotes: 1

Daniel Andujar
Daniel Andujar

Reputation: 1192

The idea is that you have to make a view that fills all the available space, that is made with match_parent in layout_width.

then you tell the view that it will start where the first icon ends, and end where the second icon end, that is made with layout_toEndOf and layout_toStartOf (you were missing this last one)

lastly, as you´re referencing a name that hasn't been declared yet at this scope, you should call the second name as "@+id/icon_2", and in your view declaration set the name without creating a new id "@id/icon_2", at the end, your code would look like this:

<android.support.v7.widget.SearchView
        android:id="@+id/action_search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/icon_1"
        android:layout_toStartOf="@+id/icon_2"
        android:background="@color/colorTransparent"
        android:backgroundTint="@color/colorTransparent"
        android:focusedByDefault="false"
        app:closeIcon="@null"
        app:iconifiedByDefault="false"
        app:searchHintIcon="@null"
        app:searchIcon="@null">
</android.support.v7.widget.SearchView>

<ImageButton
        android:id="@id/icon_2"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_toEndOf="@id/action_search"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="15dp"
        android:adjustViewBounds="true"
        android:background="@android:color/transparent"
        android:scaleType="fitCenter"
        android:src="@drawable/ico_2" />

Upvotes: 0

Related Questions