CODEWITHSUNDEEP
androidandroid-xml
Stephen
Stephen

Reputation: 10079

Image Button have to place right and left corner

I have to place the image to left and right corner with two arrows.But it is placing near to the centre.

I used linearlayout for both arrows and set the orientation to horizontal.I have posted the codes and screenshot below:

activity_arrow.xml:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <RelativeLayout
        android:id="@+id/relative"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/linear"
        android:layout_alignParentTop="true">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true" />

    </RelativeLayout>

    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"

        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/rightArrow"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:layout_weight=".01"
            android:background="@null"
            android:paddingLeft="50dp"
            android:padding="5dp"
            android:src="@drawable/left_arrow"
            />


        <ImageButton
            android:id="@+id/leftArrow"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:layout_weight=".01"
            android:background="@null"
            android:padding="5dp"
            android:src="@drawable/right_arrow" />

    </LinearLayout>

</RelativeLayout>

Screenshot:

enter image description here

Upvotes: 0

Views: 3709

Answers (6)

Gaurav Vashisth
Gaurav Vashisth

Reputation: 7737

Do not use Relative layout at the top of view hiearchy. Its expensive as it is a two phase layout. Android UI framework engineers have many times discouraged its use. Here is a recent post by Chet Hasse https://medium.com/google-developers/developing-for-android-iii-2efc140167fd

As he writes

it is important to understand that RelativeLayout is an expensive solution, because it requires two measurement passes to ensure that it has handled all of the layout relationships correctly.

LinearLayout with weight is also a two phase layout. We should use RelativeLayout and LinearLayout with weight only if there is no better way.

Instead of using RelativeLayout in the root use Framelayout similar to this

<?xml version="1.0" encoding="utf-8"?>


<FrameLayout
    android:id="@+id/imageViewContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="48dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

</FrameLayout>

<LinearLayout
    android:id="@+id/linear"
    android:layout_width="fill_parent"
    android:layout_height="48dp"
    android:layout_gravity="bottom"
    android:orientation="horizontal">

    <Button
        android:id="@+id/rightArrow"
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:layout_weight=".01"
        android:background="@null"
        android:drawableLeft="@drawable/left_arrow"
        android:padding="4dp"
        android:paddingLeft="48dp"
        />


    <Button
        android:id="@+id/leftArrow"
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:layout_weight=".01"
        android:background="@null"
        android:drawableRight="@drawable/right_arrow"
        android:padding="4dp"/>

</LinearLayout>

Upvotes: 0

RaMeSh
RaMeSh

Reputation: 3424

try like this:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/imageView"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_above="@+id/filter_check2"/>

        <ImageView
            android:id="@+id/filter_check2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/right_arrow"
            android:layout_gravity="bottom"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"/>

        <ImageView
            android:id="@+id/filter_check"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/left_arrow"
            android:layout_gravity="right"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"/>

</RelativeLayout>

Output:-

enter image description here

Upvotes: 1

sahu
sahu

Reputation: 1238

Try this it will perfect as per your requirment,

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <RelativeLayout
        android:id="@+id/relative"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/linear"
        android:layout_alignParentTop="true">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true" />

    </RelativeLayout>

    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"

        android:orientation="horizontal">

        <Button
            android:id="@+id/rightArrow"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:layout_weight=".01"
            android:background="@null"
            android:paddingLeft="50dp"
            android:padding="5dp"
            android:drawableLeft="@drawable/left_arrow"
            />


        <Button
            android:id="@+id/leftArrow"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:layout_weight=".01"
            android:background="@null"
            android:padding="5dp"
             android:drawableRight="@drawable/right_arrow" />

    </LinearLayout>

</RelativeLayout>

Screenshot:

enter image description here Hope this will be helpful...thanks

Upvotes: 3

RogerParis
RogerParis

Reputation: 1559

How about 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="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/abc_btn_check_material"/>

    <ImageButton
        android:id="@+id/leftArrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="@null"
        android:src="@drawable/left_arrow"
        />

    <ImageButton
        android:id="@+id/rightArrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@null"
        android:src="@drawable/right_arrow"/>

</RelativeLayout>

Upvotes: 0

Naveen Rao
Naveen Rao

Reputation: 742

You can try this

`

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:gravity="bottom"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/rightArrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <View
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <ImageButton
        android:id="@+id/leftArrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

`

I hope this helps

Upvotes: 0

Anoop M Maddasseri
Anoop M Maddasseri

Reputation: 10559

You should use RelativeLayout

android:layout_alignParentBottom to move the layout to the bottom of the screen.after that align images inside RelativeLayout by using align right and align left.use marging left and marging right for spacing.

Upvotes: 1

Related Questions