Circular buttons in a grid layout 4*3 layout

Question

How to make a circular button in a 3*4 (l*b) layout?

I tried a code which is showing the circular button layout in Android Studio. But when it is Run on phone, the size gets compressed. How to solve this?

<?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="match_parent"
    android:orientation="vertical"
    android:weightSum="4"
    android:background="@drawable/bg">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:weightSum="3" >

        <Button
            android:id="@+id/loadmoney"
            android:text="Load\nMoney"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button"
            android:drawableTop="@android:drawable/ic_menu_edit"/>

        <Button
            android:id="@+id/requestmoney"
            android:text="Request\nMoney"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button" />

        <Button
            android:id="@+id/sendmoney"
            android:text="Send\nMoney"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:weightSum="3" >

        <Button
            android:id="@+id/recharge"
            android:text="Recharge"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button" />

        <Button
            android:id="@+id/paybill"
            android:text="Pay Bill"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button" />

        <Button
            android:id="@+id/checkbalance"
            android:text="Check\nBalance"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:weightSum="3" >

        <Button
            android:id="@+id/cashout"
            android:text="CAsh Out"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button" />

        <Button
            android:id="@+id/paymerchant"
            android:text="Pay\nMerchant"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button" />

        <Button
            android:id="@+id/viewtransaction"
            android:text="View\nTransaction"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:weightSum="3" >

        <Button
            android:id="@+id/loan"
            android:text="Loan"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button" />

        <Button
            android:id="@+id/insurance"
            android:text="Insurance"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button" />

        <Button
            android:id="@+id/kyc"
            android:text="Know Your\nCustomer"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/dashboard_button" />

    </LinearLayout>

</LinearLayout>

This code gives the exact circular view. But it gets compressed and the size of the circular buttons gets disturbed when viewed on a phone after running

try to create circular drawable https://stackoverflow.com/questions/10266595/how-to-make-a-round-button and instead of using miltiple buttons go with Grid view — Akshay, Oct 13 '17 at 07:11

score 0 · Accepted Answer · answered Oct 13 '17 at 07:04

0

According to your code,the button's width = screenWidth / 4,height = screenHeight / 4.

Unless your screenHeight is equal to screenHeight,otherwise it will be compressed without doubt;

answered Oct 13 '17 at 07:04

Deng

58
5

You can change the button's properties dynamic in your activity. – Deng Oct 13 '17 at 07:05
int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); int screenHeight =getWindowManager().getDefaultDisplay().getHeight(); screenWidth=screenWidth < screenHeight ? screenWidth :screenHeight; ViewGroup.LayoutParams params = button.getLayoutParams(); params.width = screenWidth / 4; params.height = screenWidth / 4; button.setLayoutParams(params); – Deng Oct 13 '17 at 07:08

Circular buttons in a grid layout 4*3 layout

1 Answers1