Android background image center

Using ImageView as background for an Android Layout

I want to take advantage of the scaleType property, which I cannot use if I set my image using the background property on the LinearLayout . I’ve tried using a LinearLayout with 2 children: the first is an ImageView (for the background image) and the second child is another LinearLayout containing TextViews , Buttons, etc. But the result is just the image followed by the other views.

Is it possible to float the nested LinearLayout over the ImageView somehow? I know that there’s lots of variations on this question around, but I haven’t found anything that’s helped me yet. If I’ve missed something, please point me in that direction. Also, I’d like to do this in XML if possible, and I’m flexible about what type of layout I can use (it doesn’t have to Linear).

2 Answers 2

I did it thusly using a RelativeLayout as the parent:

My Style for it:

I used a style, because the alpha setting doesn’t work on lower APIs (can’t remember what the limit is offhand).

I cannot use above because of I have adapter and images are set from their to display in GridView . So, in 2019 Im doing like below:

The key attribute for Stacking view here is android:layout_centerInParent=»true» .

Also note that I created android:background=»@drawable/shape_image_holder_text» to get some corner radius around my text view with some backdrop. Here is that xml:

To make my image adjust to height and width to same size in GridView. I created a custom class for SquareImageView (You can use default ImageView if you are not using GridView or if you don’t care about this).

Источник

Centering a background image in Android

I have a background image about 100 x 100 that I want to center in an Android app. Is there a way to do this?

I’m thinking it would greatly help with orientation changes for simple apps.

4 Answers 4

You can use BitmapDrawable for the case. Create centered.xml in res/drawable folder:

Then you can use centered drawable as background.

Or if you want to use your mipmap image, you should use item instead of bitmap :

Question is old and answer has one big weakness — we have no possibility to change image size, it means it fully depends from drawable we have.

While using newest Android design libraries the root of activity view will be CoordinatorLayout or DrawerLayout and those layouts has no default view showing hierarchy, it means that first child view will be overshadowed by any next one, and second by third and . to last one. So to have centered background We need to add as first child LinearLayout with centered image inside it. Some code snippet:

We can fully customize size of image which will be centered by LinearLayout gravity option. Important is also to have match_parent on width and height of LinearLayout , thanks that center will be center of parent view also.

The same thing can be done in RelativeLayout or any other layout which enable child views overlapping.

Источник

How to implement an android:background that doesn’t stretch?

I found this great thread describing how to «eat the cake and have it too», i.e. use image for a Button instead of ImageButton (which doesn’t allow SetText() , resizing, etc.).

This is achieved by using the View attribute:

The only problem with this is that it stretches the image to fit the button size.

Short of hard-coding a fixed button size (in pixels!), is there a way to tell Android not to stretch the background image at all and either crop or pad it?

11 Answers 11

You can create an xml bitmap and use it as background for the view. To prevent stretching you can specify android:gravity attribute.

There are a lot of options you can use to customize the rendering of the image

You should use ImageView if you don’t want it to stretch. Background images will always stretch to fit the view. You need to set it as a Drawable to force the image aspect to the object.

Otherwise, if you are sticking with the Button idea, then you will need to force the scaling in the button to prevent the image from stretching.

Simply using ImageButton instead of Button fixes the problem.

and you can set

to remove button background if you want.

I am using an ImageView in an RelativeLayout that overlays with my normal layout. No code required. It sizes the image to the full height of the screen (or any other layout you use) and then crops the picture left and right to fit the width. In my case, if the user turns the screen, the picture may be a tiny bit too small. Therefore I use match_parent, which will make the image stretch in width if too small.

I had the same problem: you should only use a 9-patch image (.9.png) instead of your original picture.

Use draw9patch. included within Android Studio’s SDK tools. You can define the stretchable areas of your image. Important parts are constrained and the image doesn’t look all warped. A good demo on dra9patch is HERE

Use draw9patch to change your existing splash.png into new_splash.9.png, drag new_splash.9.png into the drawable-hdpi project folder ensure the AndroidManifest and styles.xml are proper as below:

AndroidManifest.xml:

styles.xml:

I had a background image, not big in size, but with weird dimensions — therefore the stretching and bad performance. I made a method with parameters Context, a View and a drawable ID(int) that will match the device screen size. Use this in e.g a Fragments onCreateView to set the background.

Here’s a version of Santosh’s answer for programmatically-created buttons, without the need for a separate XML configuration:

I included the ColorFilter line since that works a little differently from buttons with a normal background image.

Источник

Android: Center an image

I’ve got a linear layout and an image.

How do I dynamically center my image so that it will appear in the center of the screen on all devices?

13 Answers 13

In LinearLayout , use: android:layout_gravity=»center» .

In RelativeLayout , use: android:layout_centerInParent=»true» .

If you are using a LinearLayout , use the gravity attribute :

If you are using a RelativeLayout , you can use android:layout_centerInParent as follows :

Technically both answers above are correct, but since you are setting your ImageView to fill_parent instead of wrap_content , the image within is not centered, but the ImageView itself is.

Give your ImageView the attributes:

The scaleType is really only necessary in this case if the image exceeds the size of the ImageView. You may also want different scaleTypes. In conclusion, android:gravity is what you’re looking for in this case, but if your ImageView is set to wrap_content , you should set the ImageView’s gravity ( android:layout_gravity ) to be centered within the parent.

Simply add this to your ImageView.

Here are 2 ways you can center an image (or images) both vertically and horizontally in LinearLayout.

(1) Use the android:layout_gravity=»center» attribute in ImageView

How this works: the android:layout_gravity=»center» attribute in ImageView centers itself (i.e. the image) vertically and horizontally relative to its parent (LinearLayout).

(2) Alternatively, you can use the android:gravity=»center» attribute in LinearLayout and omit the android:layout_gravity=»center» attribute in ImageView :

How this works: the android:gravity=»center» attribute in LinearLayout centers its child/children (in this case, it’s the image) vertically and horizontally.

Источник

Adding a background image to an Android Toolbar in the right way

At first glance it seems pretty easy to add a background drawable to your Android material design Toolbar. However, if your app bar consists of several views (e.g. an additional tab layout) or if you want a transparent status bar, it gets complicated.

The final result

In this tutorial I will show you how to overcome several difficulties in order to implement a layout similar to the following:

Getting started

We start with a new Tabbed Activity with Action Bar Tabs (with ViewPager). Android Studio generates a layout file and the activity which are the perfect start for this project. We just need to make a few optimizations here and there so that it looks like the end result above. The first step is to get rid of the floating action button in your activity_main.xml and in the MainActivity.java code and after that your app should look like this:

With this being your layout file:

Making the status bar transparent

First of all, you need to change your activity theme to have a transparent status bar. Therefore add a theme to your styles.xml:

And set this theme as your activity theme in the AndroidManifest.xml:

This makes almost no difference to the appearance of your app, only the status bar looks a bit darker. However, this is necessary for your background image to be visible below the status bar.

Adding a background image to the AppBarLayout

After that, you need to add your background drawable resource to your layout by adding the following attribute to your AppBarLayout in your activity_main.xml layout file:

You can download the background drawable I am using here as vector graphic which was created in Adobe Illustrator. Unfortunately, the result looks not as good as expected (your layout can differ based on the size of the background image you chose):

There are several issues with your layout:
1. The Toolbar is not transparent so there is a lot of blue (primary color)
2. The image is not visible under our status bar, even though we made it transparent before
3. You can scroll the Toolbar away
4. The app bar layout changed its size based on the background image

To fix the first issue we simply need to remove the android:background=»?attr/colorPrimary» attribute from our Toolbar to make it transparent instead of filled with the primary color.

Furthermore, to fix the second issue we need to add some android:fitsSystemWindows=»true» attributes to our layout since this attribute is not inherited. So add it to your AppBarLayout and to your Toolbar in order to make the AppBarLayout use the space below the status bar and to position your Toolbar just below the status bar. Additionally, remove the android:paddingTop=»@dimen/appbar_padding_top» attribute from your AppBarLayout.

Moreover, to change the third issue remove the app:layout_scrollFlags=»scroll|enterAlways» attribute from your Toolbar.

Last but not least, the Toolbar is way to big because the background drawable is part of the content of the view and the attribute android:layout_height=»wrap_content» is set for your AppBarLayout. Nevertheless, you can’t just change the height of the app bar layout to a fixed value, since the status bar height differs from phone to phone. Luckily, I can tell you the height of a TabLayout which is 48dp high and the height of a Toolbar which is 56dp high. Consequently, our AppBarLayout needs to have the height 48dp+56dp+StatusBarHeight. You need to set this height programmatically in the onCreate method of your MainActivity.java by using the following code:

Just call the method setAppBarHeight in your onCreate method and that’s it!
Finally, your app should now look like this:

Источник