How to make perfect square shaped image/button
Solution 1
Change the wrap_contents to a default size:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
to
android:layout_width="@dimen/box_size"
android:layout_height="@dimen/box_size"
(and then set the box_size in the res/values/dimen.xml
like: <dimen name="box_size">50dp</dimen>
)
OR, use wrap_content for the width, and then in code use myBox.setHeight(myBox.getMeasuredWidth);
so the width and height match. Just make sure the view is completely loaded though, otherwise getMeasuredWidth returns 0.
EDIT:
To change the height to match the wrap_content width after the View is loaded, you can use a ViewTreeObserver:
if(yourActivityLayout.getViewTreeObserver().isAlive()){
yourActivityLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout(){
// The view is completely loaded now, so getMeasuredWidth() won't return 0
yourButton1.setLayoutParams(new TableLayout.LayoutParams(yourButton1.getMeasuredWidth(), yourButton1.getMeasuredWidth()));
... // Do this for all buttons (preferably in a for-loop to prevent repetition)
// Destroy the onGlobalLayout afterwards, otherwise it keeps changing
// the sizes non-stop, even though it's already done
yourActivityLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
});
}
Solution 2
Button code in XML
<Button
android:id="@+id/btn"
android:layout_width="64dp"
android:layout_height="64dp"
android:background="@drawable/buttonshape"/>
buttonshape.xml code
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:topLeftRadius="0dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"/>
<solid
android:color="#0000ff"/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"/>
<size
android:width="64dp"
android:height="64dp"/>
</shape>
Maveňツ
Hi all, I'm currently working as Android developer ,interested in a wide-range of technology topics, including programming languages, opensource and any other cool technology that catches my eye. I love developing apps for Android(native), designing and coding.Learning Cordova just for improving skills. . Got Assist Person badge from HappyMan and naruto. Got good badge from TheLittleNaruto man kami farsi baladam FreeTime work. :D هنگامی که من در پایان زندگیام در مقابل خدا میایستم، من امیدوارم حتی یک بیت از استعدادم را باقی نگذاشته باشم و بتوانم بگویم، من هر چیزی را که تو به من عطا کردی، مورد استفاده قرار دادم... Loving more than 3 years to inVINSIBLE 'ANDROID' <3 Loving them too: Java Android Swings Html5 CSS3 Jquery C++ JSF XML ASP.NET दखल ना दो जिंदगी में उनकी,अगर समझते होंगे कुछ तुम्हे तो खुद चले आयेंगे। Interest: List item New Technologies New Android Libraries 9gag stuffs especially the NSFW Mobile & Computer Games Boobies number of Android apps in the market: 1170543 & total downloads 50 billion and Percentage of low quality apps: 21% till 18 jan 2014
Updated on July 15, 2022Comments
-
Maveňツ almost 2 years
I am designing a basic sudoko GAME for android. I want a 4x4 table with all cells as squares in it.
I am trying this with the 16 Buttons in a
TableLayout
.My way looks like this
they are rectange in shape :(
my xml
<TableLayout android:id="@+id/tl" android:layout_width="match_parent" android:layout_height="fill_parent" android:gravity="center" > <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center" > <Button android:id="@+id/button1" style="@style/box_sky_blue" android:layout_weight="1" android:text="1" /> <Button android:id="@+id/button2" style="@style/box_sky_blue" android:layout_weight="1" android:text="2" /> <Button android:id="@+id/button3" style="@style/box_sky_blue" android:layout_weight="1" android:text="3" /> <Button android:id="@+id/button4" style="@style/box_sky_blue" android:layout_weight="1" android:text="4" /> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <Button android:id="@+id/button5" style="@style/box_sky_blue" android:layout_weight="1" android:text="5" /> <Button android:id="@+id/button6" style="@style/box_sky_blue" android:layout_weight="1" android:text="6" /> <Button android:id="@+id/button7" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> <Button android:id="@+id/button8" style="@style/box_sky_blue" android:layout_weight="1" android:text="8" /> </TableRow> <TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <Button android:id="@+id/button9" style="@style/box_sky_blue" android:layout_weight="1" android:text="9" /> <Button android:id="@+id/button10" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> <Button android:id="@+id/button11" style="@style/box_sky_blue" android:layout_weight="1" android:text="8" /> <Button android:id="@+id/button12" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> </TableRow> <TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <Button android:id="@+id/button13" style="@style/box_sky_blue" android:layout_weight="1" android:text="9" /> <Button android:id="@+id/button14" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> <Button android:id="@+id/button15" style="@style/box_sky_blue" android:layout_weight="1" android:text="8" /> <Button android:id="@+id/button16" style="@style/box_sky_blue" android:layout_weight="1" android:text="7" /> </TableRow> </TableLayout>
here is box sky blue
<style name="box_sky_blue"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">@color/box_color_sky_blue</item> <item name="android:layout_margin">5dp</item> <item name="android:padding">5dp</item> <item name="android:textSize">20sp</item> <item name="android:gravity">center</item> <item name="android:textColor">#ffffff</item> </style>
How to make them sqaure since I have square of 4x4,5x5 & 6x6
-
Yash Jain over 3 yearsthis is hardcoded. You have to provide a solution that is not hardcoded.