I'm building layers in Android, for that I'm loading an background image into ImageView with a small mini black boxes drawn over it, like placeholders.
I was wonder how can I set some EditText over those small mini points on the image,you cant see them but suppose I have to black box'x over the bg image and I want to place over them my text1,text2. I tried using RelativeLayout and using fixed padding but when changing the screen size or orientation it get messy, I read that the best thing is to place them on run time by checking the screen resolution and calculating the right sizes for each EditText, but it is to much work I think.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/background_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/bg" />
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"/>
</RelativeLayout>
</RelativeLayout>
This is the Image, and I want to put some text on the black boxes of the result and the team.
What options do I have?
There is lot of device size variation in Android you can't get perfection by doing this, I would recommend you to use plain background of image and take that small mini boxes as different image and set it as a EditText background.
other wise you have to manually set the padding and margin for every devices in which you getting differences.
I hope this will help you.
Related
Newbie question here, but I'm struggling to find the answer.
When laying out components, clearly if android can fit all the components on the screen while respecting all the requested attributes (height, margin etc), then it will do that.
But what if there is not enough room on the screen for everything? I had thought that it would simply put what it could on the screen starting at 0,0, and then have horizontal or vertical scrollbars for the rest.
However, that's not what I'm seeing, but I can't figure out what I am seeing. For example, when I try to view the following layout on my phone, the text has disappeared off the top of the screen (I can get this by turning the phone to landscape mode where there is obviously less available height).
What gives? How is android determining how to lay out these components and where to place the centre of the screen?
Many thanks!
EDIT: It looks like the problem has to do with me using so many dp values that mean that there's no way for everything to fit on the screen. I've fixed my immediate problem by using layout 'weight' to scale my components proportionally to the screen rather than trying to specify absolute sizes. I'm still curious why the layout code would choose to push my text off the top though - perhaps it priortises dp values?
The layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
android:text="#string/TextView1Text2" />
<Button
android:id="#+id/button"
android:layout_width="200dp"
android:layout_height="150dp"
android:onClick="#string/Button1OnClick"
android:text="#string/Button1Text" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/bla"
app:srcCompat="#drawable/blank_1024_200" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
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 have overloaded the getView method of listview to populate custom style of list item.
This is what currently it looks like:!!
Red color is to just show the background of listview item
Here I have used 3 controls: Imageview for image, 2 text views (one top, one bottom).
Problem here is the height of listview item is getting increased. I want two textviews over the image not above or below. To someextent I know the root cause of this problem but don't know how to fix it.
Here is the layout of listview item:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" >
<ImageView android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:scaleType="fitCenter"/>
<TextView android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top"
android:textStyle="bold"
android:textSize="20sp"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:layout_alignLeft="#+id/imgIcon"
android:layout_alignTop="#+id/imgIcon"
android:layout_alignBottom="#+id/imgIcon"/>
<TextView android:id="#+id/txtTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dp"
android:layout_marginBottom="5dp"
android:layout_alignLeft="#+id/imgIcon"
android:layout_alignTop="#+id/imgIcon"
android:layout_alignBottom="#+id/imgIcon"/>
The problem is i'm using png image for Imageview and their size is getting increased in some aspect ratio. In case I hard code the height of listview item layout then, specifically on my phone screen size, things start appearing good but on some different screen size things get totally worse (which makes sense too).
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:padding="5dp" >
Would be great if someone can explain about how to do it. Main problem is to display text over an image (and image is not same). Thanks.
Update: My major problem is I don't have the bit vector of image instead a PNG and it tries to scale up the image. (setting scale type to center-fit could be an option but would it work on background resourcE?. Here is the output if I set image as a background for listview item and two texts over it.
Ok, when calling getView() in your CustomArrayAdaptor, rather than set the ImageView bitmap to the image you have (what you are currently doing, I believe), instead call View.setBackgroundResource(R.drawable.yourimage.png) on your view after you have infalted it. The equivalent in xml is below:
android:background="#drawable/yourimage".
If you need more information, let me know.
If you're using solid colors as the backgrounds, and you intend to support a variety of screen sizes, I would think it might be easier to use a background color fill on the text views, with the text views stacked and aligned such that there's no borders. Then it would not have any stacking issues (a simple Linear Layout would work) and it would be scalable with no processing of images.
I created a simple 9-patch image for Android. Poured into a folder drawable-mpdi. Everything works, but the upper frame is lost. It is not clear why. See screenshot:
This is my 9-patch file:
https://dl.dropbox.com/u/30086473/input_login_active2.9.png
My XML layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="#drawable/login_bg"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/auth_logo"/>
<EditText
android:layout_width="273dip"
android:id="#+id/login"
android:layout_marginTop="20dip"
android:layout_height="wrap_content"
android:background="#drawable/auth_edit_text"
android:hint="#string/auth_login"/>
<EditText
android:layout_width="273dip"
android:id="#+id/password"
android:layout_height="wrap_content"
android:background="#drawable/auth_edit_text_left"
android:hint="#string/auth_login_left"
android:layout_marginLeft="17dip"/>
</LinearLayout>
</LinearLayout>
What is the problem? How to recycle 9-patch, that there was a blue frame at the upper of element?
There is #drawable/auth_edit_text:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/t" />
</selector>
Your pixel borders seem to be incorrect (reversed maybe). Try this instead:
With your original, you'd be stretching the phone icon as well, not just the bubble. Also, you had the content area and stretch area reversed for the top and bottom (I've inverted them in the attachment). While I don't know that that would specifically cause the problem you've shown, I would give it a try and see what happens.
EDIT: Try this:
EDITED ANSWER FROM COMMENTS: I think that may be your issue is that it's looking for the ldpi image, not finding one, and falling back to the default and scaling it down. Since the border is only 1 px, it simply disappears when scaled down.
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 ;)