How to keep fixed aspect ratio for button in android

Question

I have a set of buttons in a horizontal layout. I set the image as the background for each of these buttons. But when I make a linear layout the width of the screen, the buttons lose their aspect ratio. I want to keep its aspect ratio as it is. I mean, I have to keep it square in the application, no matter what screen resolution is. How can i do this. Any suggestions are welcome.

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> 

thanks

Answer 1

I am improving your XML. I have not tested it, but it should work. Recommended changes: instead of setting the image as the background, set it as src for ImageButtons. In addition, if you insist on a button, you can wrap each of the buttons with a different 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 works.

Answer 2

If you need a precise square shape, you need to set the width and height for the same value.

If you want to place all 3 buttons with the same shape in a horizontal arrangement, regardless of screen resolution, use layout_weight = 1 . As far as I know about layouts, only this solution.

Answer 3

Here I use the weight for the layout, which you can try, for example this.Set weightsum for the linear layout, and then set the button width to 0dp and the weight to suit your needs.

 <?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>