How to keep fixed aspect ratio for a button in android

问题

I have a set of buttons in a horizontal layout. I have set an image drawable as the background for each of these buttons. But when I make the linear layout to span the width of the screen, the buttons lose their aspect ratio. I want to keep its aspect ratio as is. I mean I have to keep it square shaped through out the application what ever the screen resolution is. How can I do this. Any suggestions is appreciated.

Here is my XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/main_background"
    android:baselineAligned="false"
    android:orientation="vertical" >
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/answer_bg"
        android:padding="10dip" >
            <Button
                android:id="@+id/b2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" />
            <Button
                android:id="@+id/b3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" />
            <Button
                android:id="@+id/b4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

Thank you

回答1:

I'm giving an improvement to your XML. I have not tested it, but it should work. The suggested changes are, instead of setting the image as background, set it as src for ImageButtons. Also, if you insists the Button, you can wrap each of the buttons with another layout and set its gravity property to "center". Take a look at the following XML.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/main_background"
    android:baselineAligned="false"
    android:orientation="vertical" >
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/answer_bg"
        android:padding="10dip" >
<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center" >
            <Button
                android:id="@+id/b2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" /></LinearLayout>
<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center" >
            <Button
                android:id="@+id/b3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" /></LinearLayout>
<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center" >
            <Button
                android:id="@+id/b4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" /></LinearLayout>
    </LinearLayout>
</LinearLayout>

Feel free to ask if it doesn't work.

回答2:

If you want exact square shape means you have to set width and height for same value.

If you want to fit all 3 buttons with equal shape in horizontal layout irrespective of screen resolutions, use layout_weight = 1. To my knowledge about layouts, only this is the solution.

回答3:

Here i am using weight for layout you can try like this.Set weightsum for linear layout and then set the width of button as 0dp and weight according to your need.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/main_background"
    android:baselineAligned="false"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/answer_bg"
        android:padding="10dip"
        android:weightSum="1" >

        <Button
            android:id="@+id/b2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".33"
            android:background="@drawable/img_background"
            android:text="@string/x"
            android:textStyle="bold" />

        <Button
            android:id="@+id/b3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".33"
            android:background="@drawable/img_background"
            android:height="50dip"
            android:text="@string/x"
            android:textStyle="bold" />

        <Button
            android:id="@+id/b4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".33"
            android:background="@drawable/img_background"
            android:text="@string/x"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>

来源：https://stackoverflow.com/questions/9081747/how-to-keep-fixed-aspect-ratio-for-a-button-in-android