Home » Android » xml – android how to change <item> width and height

xml – android how to change <item> width and height

Posted by: admin April 23, 2020 Leave a comment

Questions:

I’m making a <layer-list> for drawable.

I have my background image, and I want the second layer to be smaller,
but it seems that doesn’t matter what I’m writing inside my android:layer_width and android:layer_height.

The second layer size is still the same.

Here is my xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <item
        android:drawable="@drawable/picuser" 
        android:layout_width="50dp"
        android:layout_height="50dp" />

    <item
        android:drawable="@drawable/ic_launcher" 
        android:layout_width="10dp"
        android:layout_height="10dp" />
</layer-list>
How to&Answers:

I hope this put you on the right direction:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/picuser"/>

    <item>

        <bitmap
            android:src="@drawable/ic_launcher"
            android:gravity="center" />
    </item>
</layer-list>

As you can see here, <item> doesn’t have layout_width/layout_height attributes.

Answer:

This is kind of a workaround, but it worked for me.
You can use padding in order to make the second drawable smaller.

<item android:drawable="@drawable/circyle" />

<item
    android:drawable="@drawable/plus" 
    android:top="10dp"
    android:bottom="10dp"
    android:right="10dp"
    android:left="10dp" />

Answer:

Unlike someone said, there are width and height attributes for <item> as well. Thanks to @Entreco for posting a demonstration of that.
android:width and android:height for Drawables are similar to android:layout_width and android:layout_height for Views, unlike they can be set to neither match_parent nor wrap_content, but you can achieve the same behavior of match_parent by setting the attribute android:gravity to either left|right or start|end (for matching parent’s width), or top|bottom (for matching parent’s height).

Unfortunately, those attributes are available just since API 23.

However, considering the above method I suggested in place of match_parent and that android:width and android:height attributes are available for <size> element (which has to be put inside a <shape>) without any API restriction, you could use a simple workaround:

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

        <shape
            android:shape="rectangle">

            <size
                android:width="152dp"
                android:height="152dp"/>

            <solid
                android:color="#00FFFFFF"/>
        </shape>
    </item>

    <item>

        <bitmap
            android:gravity="left|right|top|bottom"
            android:src="@mipmap/ic_launcher"/>
    </item>
</layer-list>

The above solution takes advantage of having a sized <item> (with a transparent <shape>) and an unsized one (with a <bitmap>) that has android:gravity set to left|top|right|bottom for matching both parent’s dimensions. So, the real size of the <bitmap> will be determined by that of the unique sized <item> in the same parent.

EDIT:

Thanks to @Emil S, who noticed that the above solution won’t work as a window background. It only works properly as the background or the foreground of any view. I don’t know a particular reason for such strange behavior, but I can guess that at the time which system creates a window with the background specified on android:windowBackground attribute, no layout is performed as no process is started yet. So, Android will end up on rasterizing the drawable at the screen size and stretch it to fill the whole window, I think. This would explain how that could happen.

EDIT:

@João Carlos pointed out how my solution won’t work (because it would cause a cyclic inheritance) when using an adaptive icon (those icons made by a background and a foreground, which support vector drawables). However, his point is a nonsense, because adaptive icons require API 26: one could use directly android:width and android:height on the splash screen or something (They just require API 23).
So, in order to get anything to work in any version of Android, you’ll need to differentiate two drawables, the former for API < 23, using the solution I posted, and the latter for API >= 23, using the two attributes as I said at the beginning of my post.

Answer:

From API Level 23 and higher, you can actually set the width & height of an item

<item
    android:drawable="@drawable/splash_logo"
    android:height="100dp"
    android:width="100dp"/>

NOTE: Use android:width and android:height instead of android:layout_width and android:layout_height

Answer:

Try this:

<?xml version="1.0" encoding="utf-8"?>
<!-- The android:opacity=”opaque” line is critical in preventing a flash 
of black as your theme transitions. -->
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque">

    <!-- The background color, preferably the same as your normal theme -->
    <item android:drawable="@android:color/white" />

    <item
        android:height="100dp"
        android:width="100dp"
        android:gravity="center">

        <bitmap
            android:src="@drawable/ic_launcher_bc_512"/>
    </item>
</layer-list>

Answer:

I’ve tried a lot, but I couldn’t find a reliable way to center the logo within an XML layout.
Finally, I found the following workaround:

mToolbar.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            ImageView imageView = (ImageView)mToolbar.findViewById(R.id.logo);
            if (mToolbar == null)
                return;
            int toolbarWidth = mToolbar.getWidth();
            int imageWidth = imageView.getWidth();
            imageView.setX((toolbarWidth - imageWidth) / 2);
        }
    });

layout_toolbar.xml:

<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    style="@style/Toolbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/toolbar_height"                                                                   
    android:background="@drawable/toolbar_background"
    android:focusable="false"                                
    app:titleTextAppearance="@style/AppTheme.Toolbar.Title">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/toolbar_logo" />
</android.support.v7.widget.Toolbar>