stackoom
  简体   繁体   中英

How to align buttons in Android

 原文  2015-01-26 20:44:46  9   3    android/ android-layout

Question

I want to create buttons for each "letter" A to Z. Whatever I do I can't align some of them abreast. I cant add more than 2 rows and 6 buttons for each row even though there is space on the right. How can I create buttons A to Z?

http://postimg.org/image/5h4wyfuj5/ 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kelimeoyunu.Kelime" >

    <TextView
        android:id="@+id/kelime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="26dp"
        android:layout_toRightOf="@+id/button1"
        android:text="test" />

    <Button
        android:id="@+id/button2"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/kelime"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="81dp"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="A"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/button4"
        style="?android:attr/buttonStyleSmall"
         android:gravity="center"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_toRightOf="@+id/button2"
        android:background="@layout/mybutton"
        android:text="B"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/button3"
        style="?android:attr/buttonStyleSmall"
         android:gravity="center"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignBaseline="@+id/button4"
        android:layout_alignBottom="@+id/button4"
        android:layout_toRightOf="@+id/button4"
        android:background="@layout/mybutton"
        android:text="C"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/Button01"
        style="?android:attr/buttonStyleSmall"
         android:gravity="center"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignBaseline="@+id/button3"
        android:layout_alignBottom="@+id/button3"
        android:layout_toRightOf="@+id/button3"
        android:background="@layout/mybutton"
        android:text="Ç"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/Button02"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignBaseline="@+id/Button01"
        android:layout_alignBottom="@+id/Button01"
        android:layout_toRightOf="@+id/Button01"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="D"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/Button03"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignBaseline="@+id/Button02"
        android:layout_alignBottom="@+id/Button02"
        android:layout_toRightOf="@+id/Button02"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="E"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/Button06"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_below="@+id/button4"
        android:layout_toLeftOf="@+id/button3"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="Ç"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/Button04"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_below="@+id/button2"
        android:layout_toLeftOf="@+id/button4"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="Ç"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/Button05"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_below="@+id/button4"
        android:layout_toRightOf="@+id/button4"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="Ç"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/Button07"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_below="@+id/Button01"
        android:layout_toLeftOf="@+id/Button02"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="Ç"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/Button07"
        android:layout_alignBottom="@+id/Button07"
        android:layout_toRightOf="@+id/Button01"
        android:text="Button" />

    <Button
        android:id="@+id/Button09"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_below="@+id/Button02"
        android:layout_toRightOf="@+id/Button02"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="Ç"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/Button08"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_below="@+id/Button01"
        android:layout_toRightOf="@+id/Button01"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="Ç"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/Button10"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignBaseline="@+id/Button11"
        android:layout_alignBottom="@+id/Button11"
        android:layout_toRightOf="@+id/Button11"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="E"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/Button12"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="E"
        android:textColor="#ffffff"
        android:textSize="17sp" />

    <Button
        android:id="@+id/Button11"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignLeft="@+id/Button04"
        android:layout_below="@+id/Button04"
        android:background="@layout/mybutton"
        android:gravity="center"
        android:text="E"
        android:textColor="#ffffff"
        android:textSize="17sp" />

</RelativeLayout>

3 answers

solution1
 0 ACCPTED  2015-01-26 22:22:15

I'm not exactly sure what is the problem. The way i see it, i would have tried with two horizontal LinearLayouts inside a vertical LinearLayout. Something like this, you just have to give it a proper margin: 

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

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"/>
        </LinearLayout>

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

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

EDIT WITH PIC: 在此处输入图片说明

solution2
 0  2015-01-26 23:19:19

I would put the buttons in a grid layout, thats what its for. As far as I know, for centering it you have to wrap it all in a relativelayout, so in the end its like 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/holder"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

<GridLayout
    android:id="@+id/grid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:columnCount="6"
    android:rowCount="2" >

    <Button
        android:id="@+id/button0"
        android:layout_column="0"
        android:layout_row="0"
        android:text="Button" />

    <Button
        android:id="@+id/button1"
        android:layout_column="1"
        android:layout_row="0"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_column="2"
        android:layout_row="0"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_column="3"
        android:layout_row="0"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_column="4"
        android:layout_row="0"
        android:text="Button" />

    <Button
        android:id="@+id/button5"
        android:layout_column="5"
        android:layout_row="0"
        android:text="Button" />

    <Button
        android:id="@+id/button6"
        android:layout_column="0"
        android:layout_row="1"
        android:text="Button" />

    <Button
        android:id="@+id/button7"
        android:layout_column="1"
        android:layout_row="1"
        android:text="Button" />

    <Button
        android:id="@+id/button8"
        android:layout_column="2"
        android:layout_row="1"
        android:text="Button" />

    <Button
        android:id="@+id/button9"
        android:layout_column="3"
        android:layout_row="1"
        android:text="Button" />

    <Button
        android:id="@+id/button10"
        android:layout_column="4"
        android:layout_row="1"
        android:text="Button" />

    <Button
        android:id="@+id/button11"
        android:layout_column="5"
        android:layout_row="1"
        android:text="Button" />
</GridLayout>
</RelativeLayout>

solution3
 0  2015-01-26 23:25:51

You should use gridlayout to get the same space between them.

Example: 

<GridLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="24dp"
    android:columnCount="4"
    android:rowCount="5">

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_row="1"
        android:clickable="true"
        android:foreground="?selectableItemBackground"
        android:stateListAnimator="@anim/raise"
        card_view:cardBackgroundColor="@color/md_red_400"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="80dp"
            android:layout_height="48dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="Red"
            android:textColor="@color/md_text_white" />
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="2"
        android:layout_marginLeft="24dp"
        android:layout_row="1"
        android:clickable="true"
        android:foreground="?selectableItemBackground"
        android:stateListAnimator="@anim/raise"
        card_view:cardBackgroundColor="@color/md_blue_400"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="80dp"
            android:layout_height="48dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="Blue"
            android:textColor="@color/md_text_white" />
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_marginTop="24dp"
        android:layout_row="2"
        android:clickable="true"
        android:foreground="?selectableItemBackground"
        android:stateListAnimator="@anim/raise"
        card_view:cardBackgroundColor="@color/md_green_400"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="80dp"
            android:layout_height="48dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="Green"
            android:textColor="@color/md_text_white" />
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="2"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="24dp"
        android:layout_row="2"
        android:clickable="true"
        android:foreground="?selectableItemBackground"
        android:stateListAnimator="@anim/raise"
        card_view:cardBackgroundColor="@color/md_orange_400"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/textView4"
            android:layout_width="80dp"
            android:layout_height="48dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="Orange"
            android:textColor="@color/md_text_white" />
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_marginTop="24dp"
        android:layout_row="3"
        android:clickable="true"
        android:foreground="?selectableItemBackground"
        android:stateListAnimator="@anim/raise"
        card_view:cardBackgroundColor="@color/md_pink_400"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/textView5"
            android:layout_width="80dp"
            android:layout_height="48dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="Pink"
            android:textColor="@color/md_text_white" />
    </android.support.v7.widget.CardView>


    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="2"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="24dp"
        android:layout_row="3"
        android:clickable="true"
        android:foreground="?selectableItemBackground"
        android:stateListAnimator="@anim/raise"
        card_view:cardBackgroundColor="@color/md_indigo_400"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/textView6"
            android:layout_width="80dp"
            android:layout_height="48dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="Indigo"
            android:textColor="@color/md_text_white" />
    </android.support.v7.widget.CardView>

    <Space
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_column="1"
        android:layout_row="4" />

    <Space
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_column="3"
        android:layout_row="1" />

</GridLayout>

Six color cards:

网格布局

暂无
暂无

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.

Related Question android how to align buttons? How to Align 3 buttons in a line, android? How to align buttons in Android Studio how to make buttons align at the middle? android studio How to align android buttons like a triangle How to align the buttons at the center of the screen in android How to align the buttons on correct position in android How do I align these buttons in Android? How to Align Buttons to Background Image in Android Android align two buttons
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM