How to make image resize to fit buttons?

Question

My app right now

As you can see, the picture bloats up the first button out of proportion. How do I resize the picture so it fits into the button

I want it to look more like this

Where the circle will shrink and fit the button

Here is my code:

<?xml version="1.0" encoding="utf-8"?>
<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"

    tools:context="com.example.anthonypan.myapplication.MainActivity">


    <TableLayout

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true">

        <TableRow>

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/selector"
                android:textColor="@color/red" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/selector"
                android:textColor="@color/red" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/selector"
                android:textColor="@color/red" />
        </TableRow>
    </TableLayout>


</RelativeLayout>

Answer 1

Add it instead of the table.

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

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

    </LinearLayout>

Answer 2

You set your button size wrap content that mean's button size will depend on image size. Better you can fix your button size.

<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"
tools:context="com.example.anthonypan.myapplication.MainActivity">
<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true">

    <TableRow>

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@drawable/selector"
            android:textColor="@color/red" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@drawable/selector"
            android:textColor="@color/red" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@drawable/selector"
            android:textColor="@color/red" />
    </TableRow>
</TableLayout>

Answer 3

In your desired screenshot, it looks like you want all your buttons to take up 1/3 of the screen. You can easily do this by first getting the screen size, like this:

Display display = getWindowManager().getDefaultDisplay(); // Your screen
Point size = new Point();
display.getSize(size);
int screenWidth = size.x; // The width of your screen
int screenHeight = size.y; // The height of your screen

Next, retrieve the target size and width of the image:

int imageWidth = imageView.getWidth();
float width = screenWidth / 3;
float scaleFactor = width / imageWidth; // This gets the scale factor to get the height
float height = imageView.getHeight() * scaleFactor;

You can now set the dimensions of the ImageButton like so:

imageView.requestLayout();
imageView.getLayoutParams().height = height;
imageView.getLayoutParams().width = width;