CODEWITHSUNDEEP
androidandroid-layoutmaterial-components-androidandroid-imagebutton
user14678216
user14678216

Reputation: 3393

Does a MaterialComponents ImageButton exist?

I am converting my app from AppCompat to MaterialComponents.

I have come across an issue that there is no theme under Widget.MaterialComponents. that applies to ImageButton.

Here is an example of one of my ImageButtons:

<ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="4dp"
        android:scaleType="fitCenter"
        android:tint="@color/shape_orange"
        app:layout_constraintBottom_toTopOf="@+id/guideline7"
        app:layout_constraintEnd_toStartOf="@+id/guideline5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline6"
        app:srcCompat="@drawable/shape" />

How would I achieve the MaterialComponents look for an ImageButton? I would like to achieve the .OutlinedButton style for the ImageButton

Upvotes: 0

Views: 218

Answers (1)

Montresor
Montresor

Reputation: 846

Currently in v1.1.0, there's no MaterialImageView or MaterialImageButton.

But in v1.2.0, there's ShapeableImageView coming out which extends AppCompatImageView

About the ImageView you can use the ShapeableImageView which extends the AppCompatImageView.

You can use something like:

<com.google.android.material.imageview.ShapeableImageView
    android:scaleType="centerCrop"
    android:adjustViewBounds="true"
    app:shapeAppearanceOverlay="@style/customImageViewRounded"
    app:srcCompat="@drawable/...."

with:

 <style name="customImageViewRounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">32dp</item>

    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeBottomRight">50%</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

Upvotes: 1

Related Questions