Paskan Gambar di ImageButton di Android

Saya memiliki 6 ImageButton dalam aktivitas saya, saya mengatur gambar melalui kode saya di dalamnya (tidak menggunakan xml).

Saya ingin mereka menutupi 75% area tombol. Tetapi ketika beberapa gambar menutupi area yang lebih sedikit, beberapa terlalu besar untuk masuk ke dalam imageButton. Bagaimana mengubah ukuran dan menunjukkan secara terprogram? Di bawah ini adalah cuplikan layar

di bawah ini adalah file xml

<?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:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"     >
   <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">
        <ImageButton          

            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_topleft"
        android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"
            />
        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_topright"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_repeat"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"     
             />

              <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_next"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"     
             />

    </LinearLayout>    
   <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_bottomleft"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"                                 
             />
        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_bottomright"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"                  
            />        
    </LinearLayout>        

</LinearLayout>

dan cuplikan myClass.java:

public void addImageButtons()
    {
        iB_topleft = (ImageButton) findViewById(R.id.button_topleft);
        iB_topright = (ImageButton) findViewById(R.id.button_topright);
        iB_bottomleft = (ImageButton) findViewById(R.id.button_bottomleft);
        iB_bottomright = (ImageButton) findViewById(R.id.button_bottomright);
        iB_next = (ImageButton) findViewById(R.id.button_next);
        iB_repeat = (ImageButton) findViewById(R.id.button_repeat);
    }

    public void setImageNextAndRepeat()
    {

    iB_topleft .setImageResource(R.drawable.aa);
        iB_topright.setImageResource(R.drawable.bb);   

    iB_bottomleft.setImageResource(R.drawable.cc);
        iB_bottomright.setImageResource(R.drawable.dd);   

        iB_next.setImageResource(R.drawable.next);
        iB_repeat.setImageResource(R.drawable.repeat);      
    }

Saya ingin mereka menutupi 75% area tombol.

Gunakan android:padding="20dp"(sesuaikan bantalan sesuai kebutuhan) untuk mengontrol seberapa banyak gambar diambil pada tombol.

tetapi ketika beberapa gambar menutupi area yang lebih sedikit, beberapa terlalu besar untuk masuk ke dalam imageButton. Bagaimana mengubah ukuran dan menunjukkan secara terprogram?

Gunakan android:scaleType="fitCenter"untuk memiliki skala Android gambar, danandroid:adjustViewBounds="true" untuk menyesuaikan batas mereka karena penskalaan.

Semua atribut ini dapat diatur dalam kode masing-masing ImageButton saat runtime. Namun, lebih mudah untuk mengatur dan mempratinjau dalam xml menurut saya.

Selain itu, jangan gunakan spuntuk apa pun selain ukuran teks, itu diskalakan tergantung pada preferensi ukuran teks yang ditetapkan pengguna, sehingga spdimensi Anda akan lebih besar dari yang Anda inginkan jika pengguna memiliki pengaturan teks "besar". Gunakan dpsebagai gantinya, karena tidak diskalakan oleh preferensi ukuran teks pengguna.

Berikut cuplikan tampilan setiap tombol:

    <ImageButton
        android:id="@+id/button_topleft"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="0dp"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:padding="20dp"
        android:scaleType="fitCenter" />

Saya menggunakan kode berikut di xml

android:adjustViewBounds="true"
android:scaleType="centerInside"

Coba gunakan android:scaleType="fitXY"di i-Imagebutton xml

Saya menggunakan android:scaleType="fitCenter"dengan kepuasan.

Lihat tautan di bawah ini dan cobalah untuk menemukan apa yang Anda inginkan:

ImageView.ScaleType CENTER Pusatkan gambar dalam tampilan, tetapi tidak melakukan penskalaan.

ImageView.ScaleType CENTER_CROP Skala gambar secara seragam (pertahankan rasio aspek gambar) sehingga kedua dimensi (lebar dan tinggi) gambar akan sama atau lebih besar dari dimensi tampilan yang sesuai (minus padding).

ImageView.ScaleType CENTER_INSIDE Skala gambar secara seragam (pertahankan rasio aspek gambar) sehingga kedua dimensi (lebar dan tinggi) gambar akan sama dengan atau kurang dari dimensi tampilan yang sesuai (minus padding).

ImageView.ScaleType FIT_CENTER Skala gambar menggunakan CENTER.

ImageView.ScaleType FIT_END Skala gambar menggunakan END.

ImageView.ScaleType FIT_START Skala gambar menggunakan START.

ImageView.ScaleType FIT_XY Skala gambar menggunakan FILL.

ImageView.ScaleType MATRIX Scale menggunakan matriks gambar saat menggambar.

https://developer.android.com/reference/android/widget/ImageView.ScaleType.html

Baru-baru ini saya mengetahui secara tidak sengaja bahwa karena Anda memiliki kontrol lebih besar pada ImageView sehingga Anda dapat mengatur onclicklistener untuk gambar di sini adalah contoh tombol gambar yang dibuat secara dinamis

private int id;
private bitmap bmp;
    LinearLayout.LayoutParams familyimagelayout = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT );

    final ImageView familyimage = new ImageView(this);
            familyimage.setBackground(null);
            familyimage.setImageBitmap(bmp);
            familyimage.setScaleType(ImageView.ScaleType.FIT_START);
            familyimage.setAdjustViewBounds(true);
            familyimage.setId(id);
            familyimage.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //what you want to do put here
                }
            });

Ini bekerja dengan baik dalam kasus saya. Pertama, Anda mengunduh gambar dan mengganti namanya menjadi iconimage, menempatkannya di folder yang dapat digambar. Anda dapat mengubah ukuran dengan mengatur android:layout_widthatau android:layout_height. Akhirnya, kita punya

 <ImageButton
        android:id="@+id/answercall"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:src="@drawable/iconimage"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:scaleType="fitCenter" />

Anda dapat membuat widget ImageButton Anda seperti yang saya lakukan. Dalam kasus saya, saya membutuhkan widget dengan ukuran ikon tetap. Mari kita mulai dari atribut khusus:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ImageButtonFixedIconSize">
        <attr name="imageButton_icon" format="reference" />
        <attr name="imageButton_iconWidth" format="dimension" />
        <attr name="imageButton_iconHeight" format="dimension" />
    </declare-styleable>
</resources>

Kelas widget cukup sederhana (intinya adalah perhitungan padding dalam metode onLayout ):

class ImageButtonFixedIconSize
@JvmOverloads
constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = android.R.attr.imageButtonStyle
) : ImageButton(context, attrs, defStyleAttr) {

    private lateinit var icon: Drawable

    @Px
    private var iconWidth: Int = 0
    @Px
    private var iconHeight: Int = 0

    init {
        scaleType = ScaleType.FIT_XY
        attrs?.let { retrieveAttributes(it) }
    }

    /**
     *
     */
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        val width = right - left
        val height = bottom - top

        val horizontalPadding = if(width > iconWidth) (width - iconWidth) / 2 else 0
        val verticalPadding = if(height > iconHeight) (height - iconHeight) / 2 else 0

        setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)

        setImageDrawable(icon)

        super.onLayout(changed, left, top, right, bottom)
    }

    /**
     *
     */
    private fun retrieveAttributes(attrs: AttributeSet) {
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ImageButtonFixedIconSize)

        icon = typedArray.getDrawable(R.styleable.ImageButtonFixedIconSize_imageButton_icon)!!

        iconWidth = typedArray.getDimension(R.styleable.ImageButtonFixedIconSize_imageButton_iconWidth, 0f).toInt()
        iconHeight = typedArray.getDimension(R.styleable.ImageButtonFixedIconSize_imageButton_iconHeight, 0f).toInt()

        typedArray.recycle()
    }
}

Dan akhirnya Anda harus menggunakan widget Anda seperti ini:

<com.syleiman.gingermoney.ui.common.controls.ImageButtonFixedIconSize
    android:layout_width="90dp"
    android:layout_height="63dp"

    app:imageButton_icon="@drawable/ic_backspace"
    app:imageButton_iconWidth="20dp"
    app:imageButton_iconHeight="15dp"

    android:id="@+id/backspaceButton"
    tools:ignore="ContentDescription"
    />