I have a Button with a custom android:background and an EditText above it (in a LinearLayout). I want the Button to take up about 30% of the available screen, with the EditText taking up the rest. I'm using layoutHowever, my custom image for my button needs the width to scaled at the same ratio as it's height, so it doesn't get stretched. How do I do that?
So far I have:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/woodbackground">
<EditText
android:id="#+id/editText1"
android:layout_height="0dip"
android:layout_weight="2"
android:layout_width="fill_parent"
android:layout_margin="10dip">
</EditText>
<Button
android:layout_height="0dip"
android:background="#drawable/sayit_button"
android:layout_width="wrap_content"
android:id="#+id/button1"
android:layout_weight="1"
android:layout_gravity="center">
</Button>
</LinearLayout>
Thanks for any help,
Phil.
A very similar question was asked, where the accepted solution was basically to layer the background behind your view with a FrameLayout. Less than ideal, but might be your only option: Android: Scale a Drawable or background image?
And this may be of no help at all- but you might explore what you can do with 9 patch drawable. A 9 patch drawable is basically a drawable (such as your background graphic) that has a special invisible border specifying if/where it will stretch. More info on 9 patch and the 9 patch tool.
Related
I've got a linear layout with layout_height set to wrap_content, so that the layout height is depending of the number of text lines in it.
The problem (that has driven me crazy all morning) is that I want to set an image as background of the layout, but to be sure the image can be used whatever the layout size, I've made the image quite big in height. The goal is for the image to be cropped in height if the layout is small. But I can't manage to do that: whatever I try, the layout is resizing according to the image height.
So, how can I set an image as background of something, but cropping itself so that it doesn't reisze parent layout (of course, I don't know the parent layout size because it depends on the text inside).
As english is not my first language, hope my question is clear...
Thank you in advance.
Edit: some code sample and screenshots:
This is the original card, without the image in background.
This is the code with the image view added:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/drill_background_img" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout
... and the result is my card is stretched to the height of my image. But I don't want that. I want the card the same size. But I cannot reduce image height, because, the card can have more text and be more tall, and so my image will have to be taller.
This is code for a Linear Layout that will be in center and adapt the size of text inside.
I have tested it .
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvInfo"
android:textColor="#ffffff"
android:background="#drawable/toast_frame"
android:gravity="center" />
</LinearLayout>
Give it a try it should work. Here I am using an Image that is small enough to fit the smallest size. Android will automatically strech it. I use 9patch Images for such cases. To know more about 9patch visit this Link from developer.android.com
Simple online tool to generate 9patch
Also check this SO Answer
I have uploded toast_frame.9.png file here so that you can test it with the code I have given above
**EDIT **
change
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/drill_background_img" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout>
to
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/drill_background_img">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
... [Card Content Here]
</LinearLayout>
</FrameLayout>
I hope this will work.
I don't think you can crop the image when using it as "background" attribute for any view.
Image will always be stretched to fill the whole background. Normally for background you should use Nine Patches. Get familiar with it and maybe you can change your functionality or UI spec to use them instead of normal images.
The only way I know of cropping the image is in the ImageView and it's image set by "src", not "background".
I would generally avoid using fixed size images in the components that can change size. You also have to remember that in Android almost everything change size when you think about different orientations, screen sizes, screen densities.
I think that background is always resized to fit container size. But you can use FrameLayout or RelativeLayout and ImageView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
...your content here...
</LinearLayout>
</RelativeLayout>
I should like to have an android app which has its background image on the bottom of the view.
Hopefully this could be achieved by only using XML.
My background image (bg.png) is located at the folder "res/drawable-mdpi".
The XML code is now:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:layout_alignParentBottom="true"
android:layout_marginBottom="0dip" />
</LinearLayout>
But this is stretching the whole image over the whole page. I only want it stretched in horizontal direction.
The height has to be in proportion with the (stretched) width.
And this image has to be the background of a view/layout, I want to keep using the layout and add items/objects to it.
I hope someone could help me with this, I've been looking on the internet for it for a few hours and I couldn't find anything more helpful then I have now.
Thanks in advance,
Dennis
Firstly Change your LinearLayout to a RelativeLayout (android:layout_alignParentBottom only works with RelativeLayout).
Secondly use android:src="#drawable/bg" on your ImageView (not background)
if you really want to use the LinearLayout, you can try adding this attribute to your imageview android:layout_gravity="bottom"
I want to draw ImageView with text over a relative layout with 9patch background.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_last" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/appnameimg" >
</ImageView>
</RelativeLayout>
In editor i have this:
On the phone :
It seems that I have just 3 character from string.
Where is my mistake?
UPD
there background and text image. Can it be because of "bad" 9patch?
link to images
I am able to reproduce the issue. It looks like the way you are trying to define the 9 patch is the issue. You want one corner to be un-stretchable which is not possible. According to this doc, the area to be stretched is intersection of left and top one pixel black lines. Using that definition it is not possible to define corner as un-stretchable. If I remove the 9 patch the both images looks fine.
You need to define how your image will scale inside of the ImageView container.
Set android:scaleType="fitCenter" in your XML to center the image in the list view and fit it inside of the container.
Ex.
<ImageView
android:id="#+id/imageView2"
android:scaleType="fitCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/appnameimg" >
</ImageView>
or one of the other options that might suit you better from here
ImageView.ScaleType
Could someone please explain how android uses image button sizes? I seem to be getting odd behavior with my buttons.
I have the following code as an example. I have two buttons that sit at the bottom of my layout. These buttons share 50% of the total width as they sit side-by-side.
Within Abode PS, the two images (used for these two buttons) are actually 2" x 38" or 495x94 pixels. This size is of course larger than the available space in the layout.
I am using edge effects on my buttons to give them definition. Android is cutting the edges off my buttons in order to center then in the available layout space.
This particular layout that I am working on will only allow vertical orientation, in case that helps.
Thank you.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<ImageButton
android:id="#+id/ImageButton1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_marginLeft="1dip"
android:layout_marginRight="1dip"
android:layout_weight="1"
android:background="#FF000000"
android:src="#drawable/map4" >
</ImageButton>
<ImageButton
android:id="#+id/ImageButton3"
android:layout_width="0dip"
android:layout_marginRight="1dip"
android:layout_weight="1"
android:background="#FF000000"
android:src="#drawable/buy"
android:layout_height="wrap_content"
android:layout_marginLeft="1dip">
</ImageButton>
</LinearLayout>
</RelativeLayout>
Try using an ImageView and android:scaleType:
http://developer.android.com/reference/android/widget/ImageView.html#attr_android:scaleType
Experiment the values available to see what is the best combination!
Then add a listener to behave like a button...
try use the button and make it with empty text after this set the background .
or :
use the image button and put the source and the background the same image to get button exactly like the image
**you can use the selector to make some beauty for application buttons
Google it it's easy to use ;)
I've got a 4-item start screen in my app, which looks like the following:
What's important to me there:
- All items do have the same width (not regarding how much text is actually in it)
- Look the same on all devices (small-screen, mdpi, large-screen, etc.)
Im just wondering if there is a easy solution about this problem?
I've tried using 3 LinearLayouts but thats really awkward..
(1 presenting the layout root[vertical] and two which do each contain 2 buttons[horizonal]).
Making this layout ready for multiple screens would require a lot of fixed-width and fixed-margin hacking. Just like "button margin = 30dp on xlarge, 20 on large, 15 on normal,...".
My layout-xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:id="#+id/main_root"
android:orientation="vertical"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center" >
<Button
android:id="#+id/btn_learn"
android:text="#string/mainBtn_learn"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
<Button
android:id="#+id/btn_quiz"
android:text="#string/mainBtn_quiz"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center" >
<Button
android:id="#+id/btn_search"
android:text="#string/mainBtn_search"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
<Button
android:id="#+id/btn_more"
android:text="#string/mainBtn_more"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
</LinearLayout>
Is there a view which "auto-scales" these Buttons or still any other easier solution?
Edit:
So, in special, you need something like
button:
android:layout_width="15%" // 15% of screen width / height depending on the orientation
android:layout_marginBottom="10%" // see above
I'm pretty new to Android development but I can show you what worked for me in a similar case. I defined my layout as follows:
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/outputText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:editable="false" />
<Spinner
android:id="#+id/outputSpinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/OutputBaseOptionsPrompt" />
</LinearLayout>
I have a horizontal layout with two items. The LinearLayout has a width of "match_parent" so that it is as wide as the screen. Both items in the layout have the following:
android:layout_width="0dp"
android:layout_weight="1"
Since both items have a layout_weight of 1, they will be drawn at the same width. In this case, each item takes up half of the available space. If you change the weight of one of these items to "2" then it will be twice as wide as the item with a weight of "1".
Do you already have xml that makes it work on one screen size? If so post what you have so far.
I would suggest using a RelativeLayout for your root though. You can use the alignCenter attributes to float your children towards the middle. Then you just have to hard code the inner margins (how far apart you want the buttons) rather than the margin from yourself to the wall.
You could also avoid having to hard code the inner margin by making your own button 9 patch images. You can just add a border of transparent pixels in your image to represent the margin. You'll probably still want to supply an image for each density you wish to support though.
The solution is you dont use hardcoded values any where
Put three images with same name in hdpi mdpi and ldpi folders in drawables
an run the code