CODEWITHSUNDEEP
javaandroidxmluser-interface
Sam Wilson
Sam Wilson

Reputation: 71

In Android studio, all my icons are blurry and I can't figure out why

In Android Studio, my app icons are coming out blurry and I can not figure out why. I made all my icons in sketch. Does anyone have a step by step process they follow when uploading icons to make sure they are clear and nice looking for all phone sizes?

Here's a link to what my screen looks like: https://i.sstatic.net/CgoGV.jpg

Here's my code for my XML files:

<LinearLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="com.example.leoconnelly.connexus.MainActivity">

<LinearLayout
    android:id="@+id/ll_learn"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center_vertical"
    android:layout_weight="1">

    <ImageButton
        android:id="@+id/learn"
        android:layout_width="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/learn_tab_button"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:padding="0dp"
        android:layout_weight="1"
        android:text="@string/learn"
        android:textSize="22sp"
       />





</LinearLayout>

<LinearLayout
    android:id="@+id/ll_find_care"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_gravity="center_vertical">

    <ImageButton
        android:id="@+id/find_care_button"
        android:layout_width="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/find_care_layer_button"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:padding="0dp"
        android:layout_weight="1"
        android:text="@string/learn"
        android:textSize="22sp" />

</LinearLayout>

<LinearLayout
    android:id="@+id/ll_talk_to_doctor"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_gravity="center_vertical">

    <ImageButton
        android:id="@+id/TalkToADocButton"

        android:layout_width="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/talk_to_a_doctor_new_font_button"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:padding="0dp"
        android:layout_weight="1"
        android:textSize="22sp" />


</LinearLayout>

<LinearLayout
    android:id="@+id/ll_visit_website"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_gravity="center_vertical">

    <ImageButton
        android:id="@+id/VisitWeb"
        android:layout_width="match_parent"
        android:scaleType="centerCrop"

        android:src="@mipmap/visit_web_icon_new_font_button"

        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:padding="0dp"
        android:layout_weight="1"
        android:textSize="22sp" />

</LinearLayout>

Upvotes: 1

Views: 2596

Answers (3)

Touqeer Ahmed
Touqeer Ahmed

Reputation: 1

Try to use vector drawables in other words SVG icons and if you have to use PNG then don't forget to make it 9-patch and for your launcher icons you can use mipmaps

Upvotes: 0

K.vijaiarivalagan
K.vijaiarivalagan

Reputation: 199

I also have the same problem. I resolve it by using svg format icons. Use Icon in svg format rather png. PNG formats are not good for smaller icons. The density of icon is change device to device. So use SVG format will solution to this problem.

If you create icons as mipmap, It may not accessible in many places like drawableleft in edittext. so in this places svg formated icons are the best solution.

Upvotes: 0

SergeyBukarev
SergeyBukarev

Reputation: 1608

Possibly because your image resource density does not fit your screen density. Check that your image resource files have correctly located in folders (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi). The smallest image is located in the mdpi folder, and in the xxxhdpi folder is the biggest. Make sure that you have a division of same picture of different sizes into folders (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) by image size.

Image size ratios :

1) image in mdpi folder is 1dp == 1px

2) image in hdpi folder is 1dp == 1.5px

3) image in xhdpi folder is 1dp == 2px

4) image in xxhdpi folder is 1dp == 3px

Resize largest image by that ratios and place in correct folder

Upvotes: 3

Related Questions