Java – Even though I used the correct dimensions (hdpi, mdpi, xxhdpi…), the image icons on the tab appear small

Even though I used the correct dimensions (hdpi, mdpi, xxhdpi…), the image icons on the tab appear small… here is a solution to the problem.

Even though I used the correct dimensions (hdpi, mdpi, xxhdpi…), the image icons on the tab appear small

I created these 5 folders following the guide on the Google developer page and filled them with the correct sized icons:

enter image description here

I created my tab using TabHost as follows:

TabHost tabHost = (TabHost) findViewById(R.id.tabHost);
    tabHost.setup();

TabHost.TabSpec spec1 = tabHost.newTabSpec("tab1");
    spec1.setContent(R.id.tab1);
    spec1.setIndicator("", getResources().getDrawable(R.drawable.homeicon));
    TabHost.TabSpec spec2 = tabHost.newTabSpec("tab2");
    spec2.setContent(R.id.tab2);
    spec2.setIndicator("", getResources().getDrawable(R.drawable.startachainwhite48dp));
    TabHost.TabSpec spec3 = tabHost.newTabSpec("tab3");
    spec3.setContent(R.id.tab3);
    spec3.setIndicator("", getResources().getDrawable(R.drawable.joinachainwhite48dp));
    TabHost.TabSpec spec4 = tabHost.newTabSpec("tab4");
    spec4.setContent(R.id.tab4);
    spec4.setIndicator("", getResources().getDrawable(R.drawable.viewchainswhite48dp));
    TabHost.TabSpec spec5 = tabHost.newTabSpec("tab5");
    spec5.setContent(R.id.tab5);
    spec5.setIndicator("", getResources().getDrawable(R.drawable.profilewhite48dp));

tabHost.addTab(spec1);
    tabHost.addTab(spec2);
    tabHost.addTab(spec3);
    tabHost.addTab(spec4);
    tabHost.addTab(spec5);

But for some reason, the icons on my tab (bottom) appear small

enter image description here

Does anyone have an explanation/solution for this? I feel like I’m making a stupid mistake somewhere – publishing the xml layout if needed. Thanks in advance.

EDIT: It might be worth mentioning that the getDrawable() method I used in the above code is deprecated (API 22).

EDIT2: The complete XML layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tool_bar_test"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#FF86B39A"
    android:fitsSystemWindows="true"
    android:gravity="top"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp">

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

<TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            android:text="Test"
            android:textColor="#ffffff"
            android:textSize="25sp"
            android:textStyle="bold" />
    </LinearLayout>
</android.support.v7.widget.Toolbar>

<android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.sv_laptop03.myapp.Profile">

<TabHost
            android:id="@+id/tabHost"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

<RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

<TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"></TabWidget>

<FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

<RelativeLayout
                        android:id="@+id/tab1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"></RelativeLayout>

<RelativeLayout
                        android:id="@+id/tab2"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">
                    </RelativeLayout>

<RelativeLayout
                        android:id="@+id/tab3"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"></RelativeLayout>

<RelativeLayout
                        android:id="@+id/tab4"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"></RelativeLayout>

<RelativeLayout
                        android:id="@+id/tab5"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"></RelativeLayout>
                </FrameLayout>
            </RelativeLayout>
        </TabHost>
    </RelativeLayout>

<android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/headerview"
        app:menu="@menu/drawer" />

</android.support.v4.widget.DrawerLayout>

Solution

To make sure

everything is as you wish, simply add the images to the xxxhdpi folder and make sure they are 192×192 pixels.

With this approach, you can have OpenGL convert the image to the device on which the application is running, which also allows you to resize the image without losing any detail.

Hope this helps.
Quote here:
https://developer.android.com/guide/practices/screens_support.html

Related Problems and Solutions