简体   繁体   中英

Right Align button in horizontal LinearLayout

If you look at the attached image. I need my button to be right aligned but for some reason it's not working with 'gravity:right'...

取消 添加

Here's my code for that layout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="35dp">

    <TextView
        android:id="@+id/lblExpenseCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cancel"
        android:textColor="#404040"
        android:layout_marginLeft="10dp"
        android:textSize="20sp"
        android:layout_marginTop="9dp" />

    <Button
        android:id="@+id/btnAddExpense"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:background="@drawable/stitch_button"
        android:layout_marginLeft="10dp"
        android:text="@string/add"
        android:layout_gravity="right"
        android:layout_marginRight="15dp" />

</LinearLayout>

Why is no working?!

Single LinearLayout solution. Only adding a simple spacing view:
(No-one seemed to have mentioned this one, only more complicated multi-layout solutions.)

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="35dp">

    <TextView
        android:id="@+id/lblExpenseCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cancel"
        android:textColor="#404040"
        android:layout_marginLeft="10dp"
        android:textSize="20sp"
        android:layout_marginTop="9dp" />

    <!-------------------------  ADDED SPACER VIEW -------------------->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
    <!------------------------- /ADDED SPACER VIEW -------------------->

    <Button
        android:id="@+id/btnAddExpense"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:background="@drawable/stitch_button"
        android:layout_marginLeft="10dp"
        android:text="@string/add"
        android:layout_gravity="right"
        android:layout_marginRight="15dp" />

</LinearLayout>

Note the "highlighted" View, I didn't modify anything else. Height=0 makes sure it's not visible. Width=0 is because the width is determined by the LinearLayout based on weight=1. This means that the spacer view will stretch as much as possible in the direction (orientation) of the LinearLayout .

Note that you should use android.widget.Space or android.support.v4.widget.Space instead of View if your API level and/or dependencies allow it. Space achieves the job in a cheaper way, because it only measures and doesn't try to draw anything like View does; it's also more expressive conveying the intention.

Use below code for that

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="35dp"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/lblExpenseCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="9dp"
        android:text="@string/cancel"
        android:textColor="#404040"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btnAddExpense"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="15dp"
        android:background="@drawable/stitch_button"
        android:text="@string/add" />

</RelativeLayout>

Real solution for it case:

android:layout_weight="1" for TextView, and your button move to right!

I know this question was asked awhile ago, but I have done this before and it allows for more control when aligning items.If you look at it like web programming, it helps. You just nest another LinearLayout that will contain your button inside of it. You can then change the gravity of the button's layout and make it go to the right while the TextView is still on the left.

Try this code:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"             
android:orientation="horizontal" 
android:layout_marginTop="35dp">

<TextView
    android:id="@+id/lblExpenseCancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/cancel" 
    android:textColor="#404040"         
    android:layout_marginLeft="10dp" 
    android:textSize="20sp" 
    android:layout_marginTop="9dp"/>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="right"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/btnAddExpense"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:background="@drawable/stitch_button"
        android:layout_marginLeft="10dp"                    
        android:text="@string/add" 
        android:layout_gravity="right" 
        android:layout_marginRight="15dp"/>

</LinearLayout>

You may have to play with the padding on the nested layout so that it acts how you want it.

try this one

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_gravity="right" 
    android:layout_height="wrap_content"             
    android:orientation="horizontal"  >

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

<TextView
    android:id="@+id/lblExpenseCancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="9dp"
    android:text="cancel"
    android:textColor="#ffff0000"
    android:textSize="20sp" />

<Button
    android:id="@+id/btnAddExpense"
    android:layout_width="wrap_content"
    android:layout_height="45dp"
    android:layout_alignParentRight="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="15dp"
     android:textColor="#ff0000ff"
    android:text="add" />

 </RelativeLayout>
  </LinearLayout>

As mentioned a couple times before: To switch from LinearLayout to RelativeLayout works, but you can also solve the problem instead of avoiding it. Use the tools a LinearLayout provides: Give the TextView a weight=1 (see code below), the weight for your button should remain 0 or none. In this case the TextView will take all the remaining space, which is not used to display the content of your TextView or ButtonView and pushes your button to the right.

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="35dp">

        <TextView
            android:id="@+id/lblExpenseCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/cancel"
            android:textColor="#404040"
            android:layout_marginLeft="10dp"
            android:textSize="20sp"
            android:layout_marginTop="9dp"

            **android:layout_weight="1"**

            />

        <Button
            android:id="@+id/btnAddExpense"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:background="@drawable/stitch_button"
            android:layout_marginLeft="10dp"
            android:text="@string/add"
            android:layout_gravity="right"
            android:layout_marginRight="15dp" />

    </LinearLayout>

You need to add gravity to the layout not the Button, gravity in button settings is for Text inside the button

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_gravity="right" 
android:layout_height="wrap_content"             
android:orientation="horizontal" 
android:layout_marginTop="35dp">
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"             
    android:orientation="horizontal" 
    android:layout_marginTop="35dp">

    <TextView
        android:id="@+id/lblExpenseCancel"
        android:layout_width="0dp"
        android:layout_weight="0.5"
        android:layout_height="wrap_content"
        android:text="@string/cancel" 
        android:textColor="#404040"         
        android:layout_marginLeft="10dp" 
        android:textSize="20sp" 
        android:layout_marginTop="9dp"/>              

    <Button
        android:id="@+id/btnAddExpense"
        android:layout_width="0dp"
        android:layout_weight="0.5"
        android:layout_height="wrap_content"
        android:background="@drawable/stitch_button"
        android:layout_marginLeft="10dp"                    
        android:text="@string/add" 
        android:layout_gravity="right" 
        android:layout_marginRight="15dp"/>

</LinearLayout>

This will solve your problem

Just add android:gravity="right" this line parent layout this will work.

<LinearLayout
        android:id="@+id/withdrawbuttonContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        android:orientation="horizontal"
        **android:gravity="right"**
        android:weightSum="5"
        android:visibility="visible">

        <Button
            android:id="@+id/bt_withDraw"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/BTN_ADD"
            app:delay="1500" />

        <Button
            android:id="@+id/btn_orderdetail_amend"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/BTN_CANCEL"
            app:delay="1500" />
</LinearLayout>

If you don't want to, or can't, use RelativeLayout, you can wrap the button in a LinearLayout with orientation "vertical" and width "fill_parent".

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:layout_marginTop="35dp">

  <TextView
      android:id="@+id/lblExpenseCancel"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/cancel"
      android:textColor="#404040"
      android:layout_marginLeft="10dp"
      android:textSize="20sp"
      android:layout_marginTop="9dp" />

  <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical">
     <Button
        android:id="@+id/btnAddExpense"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:background="@drawable/stitch_button"
        android:layout_marginLeft="10dp"
        android:text="@string/add"
        android:layout_gravity="right"
        android:layout_marginRight="15dp" />
  </LinearLayout>
</LinearLayout> 

This is because if the LinearLayout's orientation is horizontal, gravity will only affect the views vertically. And if the orientation is 'vertical', gravity will only affect the views horizontally. See here for more details on the LinearLayout orientation/gravity explanation.

Joining the party very late, but the standard way is to use <Space>, which was literally created for this very purpose.

So in your code, just insert the following between the TextView and the Button:

<Space
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_weight="1" 
/>

Or from the palette, just select Layouts > Space. It will dump it just as it is in the code above, you'll just need to specify the weight.

在此处输入图像描述

I have used a similar layout with 4 TextView s. Two TextView s should be aligned to left and two TextView s should be aligned to right. So, here is my solution, if you want to use LinearLayouts alone.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:baselineAligned="false"
    android:padding="10dp" >

    <LinearLayout
        android:layout_width="0dip"
        android:layout_weight="0.50"
        android:layout_height="match_parent"
        android:gravity="left"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textview_fragment_mtfstatus_level"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/level"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textview_fragment_mtfstatus_level_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dip"
        android:layout_weight="0.50"
        android:layout_height="match_parent"
        android:gravity="right"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textview_fragment_mtfstatus_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/time"
            android:textAppearance="?android:attr/textAppearanceMedium"
             />

        <TextView
            android:id="@+id/textview_fragment_mtfstatus_time_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textAppearance="?android:attr/textAppearanceMedium" 
            />
    </LinearLayout>

</LinearLayout>

您可以在 Button 的父布局上使用 RelativeLayout 或设置gravity="right"。

I know this is old but here is another one in a Linear Layout would be:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="35dp">

<TextView
    android:id="@+id/lblExpenseCancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/cancel"
    android:textColor="#404040"
    android:layout_marginLeft="10dp"
    android:textSize="20sp"
    android:layout_marginTop="9dp" />

<Button
    android:id="@+id/btnAddExpense"
    android:layout_width="wrap_content"
    android:layout_height="45dp"
    android:background="@drawable/stitch_button"
    android:layout_marginLeft="10dp"
    android:text="@string/add"
    android:layout_gravity="center_vertical|bottom|right|top"
    android:layout_marginRight="15dp" />

Please note the layout_gravity as opposed to just gravity.

You should use the Relativelayout instead of Linearlayout as main layout. If you use Relativelayout as main then easily handle the button on right side because relative layout provide us alignParent right, left,top and bottom.

    Adding Spacing as View , makes the Last textview to right in 
    LinearLayout

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
     <!-- ADD SPACER VIEW -->
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"
            />
    <!-- /ADD SPACER VIEW -->
</LinearLayout>

This will work without adding any additional views. You need to set your linear-layout height to wrap-content so that it will occupy the maximum size of the contained widget s . Then we will allign it using gravity set to center_vertical .

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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="wrap_content"
    android:orientation="horizontal" 
    android:gravity="center_vertical"
    android:paddingHorizontal="8dp"
    tools:context=".MainActivity">

    <Button
        android:paddingVertical="40"
        android:id="@+id/startButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/start"
        />

    <Button
        android:id="@+id/pauseButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/pause"
        />

    <Button
        android:id="@+id/resetButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/reset"
        />

</androidx.appcompat.widget.LinearLayoutCompat>

在按钮中使用布局宽度,如 android:layout_width="75dp"

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