简体   繁体   中英

Placement of ImageButtons in corners of LinearLayout in Android

I am trying to place two ImageButton in the corners of a LinearLayout as shown in figure below:

在此处输入图片说明

I have tried using the android:layout_gravity attribute with the value set to left and right for the two buttons. However, they show just next to each other as shown in image below:

在此处输入图片说明

How can I place the two image buttons in the corners of the LinearLayout ? I have looked up a lot of previous answers and tried them but nothing seems to work. How can this placement of image buttons be done?

The XML of the layout is in the snippet below:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|fill_horizontal"
    android:orientation="horizontal">

    <ImageButton
        android:id="@+id/prev_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:contentDescription="@string/prev_button"
        android:src="@drawable/arrow_left"/>

    <ImageButton
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:contentDescription="@string/next_button"
        android:src="@drawable/arrow_right"/>
</LinearLayout>

Use a RelativeLayout:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageButton
        android:id="@+id/prev_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:contentDescription="@string/prev_button"
        android:src="@drawable/arrow_left"/>

    <ImageButton
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:contentDescription="@string/next_button"
        android:src="@drawable/arrow_right"/>
</RelativeLayout>

A relativelayout is better for positioning views at the edges of the screen

there is another way to do this instead of using RelativeLayout by using a third View , layout xml code:

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

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <View
        android:layout_width="0dp"
        android:layout_weigth="1"
        android:layout_height="0.5dp"
        />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

this way is better than using RelativeLayout and makes your layout smoother

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM