there is such a code

<LinearLayout android:id="@+id/endLinearLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/restartButton" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:text="@string/restartButton" android:textSize="@dimen/joke_button_size" android:textStyle="bold" /> <ImageButton android:id="@+id/shareButton" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/ic_share_24dp"/> </LinearLayout>

we get such a thing

enter image description here

How to make the image on the button not distort?

  • In order not to be distorted, the ImageButton should become square - either above the button on the left or narrower in width (not to the end of the screen), or on a rectangular widget, the part without an image will be visually invisible. Which option do you need? - pavlofff

2 answers 2

ImageButton is a descendant of ImageView, so proportions are also preserved:

 android:adjustViewBounds="true" android:scaleType="fitCenter"

    To prevent image proportions from being distorted, the widget must be image-sized (for more complex cases there is a 9-patch )

    The most logical solution is to give the ImageButton image dimensions and ImageButton both widgets vertically:

     <LinearLayout android:id="@+id/endLinearLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/restartButton" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:layout_gravity="center_vertical" android:text="@string/restartButton" android:textSize="@dimen/joke_button_size" android:textStyle="bold" /> <ImageButton android:id="@+id/shareButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:background="@drawable/ic_share_24dp"/> </LinearLayout>

    There will be a button with an image on the left, the remaining space in the container will be occupied by a button labeled. Indents between widgets and from container borders are set by margin attributes