How to use icons in ImageButton without it getting pixelated?

Question

I am using ImageButton in my custom bottom navigation. And I have set icons of 32*32 size as src to them.

here is xml

 <ImageButton
        android:id="@+id/bottom_nav_profile"
        android:layout_width="match_parent"
        android:layout_height="50sp"
        android:layout_weight="1"
        android:src="@drawable/btm_nav_user_act"
        android:text="Profile"
        android:adjustViewBounds="true"
        android:scaleType="center"
        android:background="@drawable/bottom_nav_bg"
        android:textColor="#000"/>

When I view it on my phone they look pixelated. I'm fine them being smaller but I dont want them to be pixelated. How can I make adujustment so that they look sharper.

Here are the icons

You will need higher resolution images if you want to have them a reasonable size on high density screens. — Henry, Oct 01 '17 at 09:30
@Henry where can I find icons higher resolution of that width and height? — vikas devde, Oct 01 '17 at 09:51
https://developer.android.com/studio/write/vector-asset-studio.html - in this link everything about vectordrawables should be explained in detail — migos, Oct 01 '17 at 09:56
@Henry I do not have designer. And I am not a designer. I am learning — vikas devde, Oct 01 '17 at 09:56

score 0 · Answer 1 · answered Oct 01 '17 at 09:46

It seems that your image is very small to begin with, you have 2 options:

Remove the hardcoded height (50dp), your original image may be smaller than this, forcing its height may be reducing its quality on certain devices.
Have the same drawable you're using but for different phone densities. I'm guessing you only have one version of your drawable image in the drawable folder, on certain phones with certain densities, this image may display badly (just as it may be displayed just fine on certain other phones).

score 0 · Answer 2 · answered Oct 01 '17 at 09:56

Lets make custom Image Button with linear layout and imageview

<LinearLayout
            android:id="@+id/id"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                 android:src="@drawable/btm_nav_user_act"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Profile"
                android:textColor="#000"/>


        </LinearLayout>

Now use linear layout as a button.

How to use icons in ImageButton without it getting pixelated?

2 Answers2