CODEWITHSUNDEEP
androidxml
Asaf Nevo
Asaf Nevo

Reputation: 11688

android how to change <item> width and height

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>

Upvotes: 42

Views: 86537

Answers (8)

Dominik Teroerde
Dominik Teroerde

Reputation: 284

For API level < 23, instead of using the defined height and width, you might want to use the following padding to make item smaller or bigger:

<item
    android:state_enabled="true"
    android:drawable="@drawable/your_drawable"
    android:gravity="center"
    android:top="8dp"
    android:left="8dp"
    android:right="8dp"
    android:bottom="8dp">
</item>

Upvotes: 0

Davide Cannizzo
Davide Cannizzo

Reputation: 3134

TL;DR: Refer to my newer, more concise answer.

Actually, unlike it's been 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 (to match the parent's width), or top|bottom (to match the parent's height).

Unfortunately, those attributes are only available starting from API level 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 the need of a newer API level, 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 for noticing that the above solution won't work when used as a window background. I can guess that at the time when the system creates a window with the background specified by the android:windowBackground attribute, no layout is performed as no process is started yet. So, Android will end up rasterizing the drawable at the screen size and stretch it to fill the whole window, I think. This would explain how that could happen. Indeed, a possible solution that I thought of, but I haven't tested yet, which unfortunately would be supported only starting from API level 24, is to use a custom drawable as a window background. It is possible by referencing an XML resource that uses a custom drawable, like this. This way, the issue should be solved since Android is forced to start the app process before showing the window, and so the drawable should be correctly laid out since it's aware of the window dimensions. This would lead, however, to an almost unnoticeable yet existing delay at the startup.

EDIT:

@João Carlos pointed out that my solution won't work (as 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 makes no sense, because adaptive icons require API 26: android:width and android:height attributes may be used on the splash screen or something, as they 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 this post.

Upvotes: 26

Davide Cannizzo
Davide Cannizzo

Reputation: 3134

Backward–compatible solution:

<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>

Caveats and solutions:

  1. As a window background, that won't ever work

    • API level ≥ 24
      For use in a window background, it may be worth experimenting with custom drawables. It is possible to reference them in the styles like this.
    • API level < 24
      I haven't found any solution yet.

  2. Nor will that work for adaptive icons

    • Refer to Entreco's answer
      Since adaptive icons require API level 26, it is possible to use android:width and android:height attributes, which are available starting from API level 23.
For more information,

Upvotes: 1

Entreco
Entreco

Reputation: 12900

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

Upvotes: 13

D&#224;Ch&#250;n
D&#224;Ch&#250;n

Reputation: 5146

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>

Upvotes: 1

Jupiter
Jupiter

Reputation: 665

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>

Upvotes: 3

oznus
oznus

Reputation: 2486

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" />

Upvotes: 38

amp
amp

Reputation: 12352

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.

Upvotes: 15

Related Questions