I'm trying to stick some ImageButtons on specific positions on ImageView.
the problem is that i have to use absolute layout for the ImageButtons, and when I change the screen resolution all the ImageButtons moving from their places.
I've looking for an answer in all the web and just can't find anything.
Thank you.
I recommand you to not use absolute position in your layout. Use containers and some margins if you can to put your buttons at the right position.
If you really need absolute position depending on device, you can use specific dimensions for each kind of resolution. See here:
http://developer.android.com/training/basics/supporting-devices/screens.html
Just use relative layout instead of absolute layout. if you dont like relative layout, you may use absolute layout, there is nothing wrong with it, its just not practical in most situations. You may use absolute layout and scale the views on the screen with something like this: Scale a view and its layered subviews relatively
Dianne Hackborn (works at google) says:
I'll say again: we are not going to remove AbsoluteLayout from a future release, but we strongly discourage people from using it.
If you choose to not believe me, you are welcome to, but I am not responsible for you making that decision.
This is how to overlay buttons:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/image" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="34dp"
android:layout_marginRight="40dp"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/button2"
android:layout_below="#+id/button1"
android:layout_marginRight="37dp"
android:layout_marginTop="108dp"
android:text="Button" />
</RelativeLayout>
Related
I have the following code snippet:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/collected_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/card_text_color"
android:textSize="#dimen/card_headline_textsize"
android:layout_marginBottom="#dimen/card_headline_marginBottom"
android:text="Foo" />
<ImageView
android:id="#+id/collected_item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxHeight="140dp"
android:background="#android:color/holo_red_dark"
android:adjustViewBounds="true"
android:layout_below="#id/collected_item_title"
android:layout_marginEnd="8dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/collected_item_image"
android:layout_below="#id/collected_item_title"
android:text="Foo"
android:textColor="#color/card_text_color" />
</RelativeLayout>
I like to have the ImageView on the left and the second TextView either on the right of this image or unter the image, dependent on the size of the image.
The image should grow, until it reaches a maximum height of 140dp.
How can I automatically wrap the text if the image get's too width?
Unfortunately I have no idea at the moment how to do it.
Yes I can do it programmatically, but I like to reach the goal only with xml.
The wrapping RelativeLayout doesn't have to be a RelativeLayout, if this behaviour is possible with an other layout.
It sounds like you need a FlowLayout. Android does not provide one out-of-the-box, but check out this answer. How can I do something like a FlowLayout in Android?
Thanks to the answer of chessdork, I found the flexbox layout of google.
It gets provided by the following git repository.
https://github.com/google/flexbox-layout
I'm trying to create the following design
I sort of did it by using PercentRelativeLayout for layouts and AutoResizeTextView for those TextViews, but I ended up with over 10 layouts and I can see that the layout is very slow being rendered. The main problem were the images because I could get them to do what I want only by doing this sort of things:
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/buttonright1layout"
android:layout_centerVertical="true"
app:layout_heightPercent="40%">
<name.company.newapp.PostForm.SelectPhoto.SquareRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/btnright2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/me" />
</name.company.newapp.PostForm.SelectPhoto.SquareRelativeLayout>
</android.support.percent.PercentRelativeLayout>
Could anyone suggest a better approach?
Update:
The loading was caused by a large drawable that I had as a background. I removed it and now it's working fine.Since this thread is here I have a few questions about this design:
Will there be any problems if I don't set the size of the TextViews/set it in sp ?(textSize)
<TextView
android:id="#+id/date_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Text4"
android:textColor="#fff" />
Will there be any problems if I set the size of the ImageViews in dp ?
<ImageView
android:id="#+id/img_5"
android:layout_width="#dimen/img_size"
android:layout_height="#dimen/img_size"
android:layout_centerInParent="true"
android:background="#drawable/nexticn" />
There's no problem if you don't specify textSize for TextView. Default value is used.
You can set ImageView width and height in dp without problems. In such case it would be useful to specify a value for scaleType attribute for preventing images to be rendered in a bad way.
I think android:layout_weight is what you're after
I'm novice in android development and still can't understand fully how sizing works with different layouts. I want to place a preview of the book into this template:
I've tried to implement it using FrameLayout. The idea is that the center of preview image will be exactly where the center of the png background is. Here is the code:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
</FrameLayout>
The result in layout builder look exactly like I want it to be:
On real phone it is different:
I think on other resolutions it will also differ from both variants. So my question is how to synchronize these images so after any resizing and distortions the preview will fit the cover correctly?
Possible solution would be to remove border from image and place it on previewImage instead. But there are several similar usecases in application where the border can't be removed, so I'd like to find out a universal solution for all of them.
You have your answer in your question.
What happening in your case image size matter for different screen resolution.
Hard-coded things always gives weird result in your case
android:layout_width="83dp"
android:layout_height="83dp" this piece of code.
Check this link this will guide you to manage drawables for different screens.
and here is another link
So the suitable solution for me was to separate border of inner image into its own ImageView, insert it into layout over the photo and add 1dp padding to the photo.
The layout become like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/bookFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
<ImageView
android:id="#+id/previewBorder"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/preview_border" />
</FrameLayout>
I don't know why, but layout is shown well on device with Api 11+, isn't for older.
This is xml:
<LinearLayout
android:id="#+id/workers_linearlayout"
android:layout_width="50dp"
android:layout_height="70dp"
android:layout_weight="1" >
<RelativeLayout
android:id="#+id/workers_relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/workers_small" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleX="0.5"
android:scaleY="0.5"
android:src="#drawable/ic_cerchio_rosso"
android:translationX="25dp"
android:translationY="-20dp" />
<TextView
android:id="#+id/workers_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="9"
android:textAppearance="?android:attr/textAppearanceMedium"
android:translationX="25dp"
android:translationY="-20dp" />
</RelativeLayout>
</LinearLayout>
This is result on API 11+:
This on API 10-:
I tried to fix it playing with layouts and I can obtain a quite good result, but never like the first one.
Can someone help me?
EDIT:
Photo on devices:
EDIT2
Triangle warning are:
String "9" should use string resource
ImageView1 and 3: missing content description attribute
RelativeLayout or it's parent possibly useless
Nested weights are bad for performance
By the way, nothing of these fixed solving my problem i think
Ok. I fixed it. Playing with the layout and following NikkyD's suggestion about "center in parent" feature, I followed this policy:
It's not possible to use scale and translation properties because older Apis (maybe) don't recognize them. So, I deleted translation and scaling options and scaled image by setting a fixed height and width for IV3 (30dpx30dp). Now dimension is right, but if I call "align parent Top" with "align parent Right" for IV3 and TextView, their position is good, but TextView is not positioned at the center of IV3. Exactly like this:
For fixing it, I added a new relative layout inside "workersRelativeLayout" and I put inside it IV3 and TextView and set, for each one, "center in the parent" to TRUE. Then, I set for a new relative layout "align parent Top" and "align parent Right". This is the final result:
This is new xml layout:
<LinearLayout
android:id="#+id/workers_linearlayout"
android:layout_width="50dp"
android:layout_height="70dp"
android:layout_weight="1" >
<RelativeLayout
android:id="#+id/workers_relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/workers_small" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerInParent="true"
android:src="#drawable/ic_cerchio_rosso" />
<TextView
android:id="#+id/workers_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="9"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
Hope this helps someone :)
EDIT
Pay attention to parent width size. If you set weight's parent to 1, naturally size is dynamic according to display size. The image is positioned always at the center parent and relative Layout of IV3 and TextView will be always top|right. So if parent width size grows, the distance between image centered and new relative layout grows too, and can happen something like this:
The first LinearLayout has a weight. If it has a weight, then it needs to have one dimension set to 0dp, that would be the dimension in which it is scaled by its weight.
All 3 elements of the Relative Layout have "centeredinparent" true. The parent is the RelLayout.
IV3 has a height of match_parent, so it will be stretched to the height of the rel-layout. I am pretty sure that this overrides your scale 0.5 options.
Im not that sure but id guess the rel-layout centeredinparent overrides the translation as well.
Layouts are VERY ugly with options. Some are considered superior to others and they dont take effect. I played around a fair bit of time with relative layouts and found out, that in my case i could only arrange them with "below" but never "above" because for some reason the above positioning would not work (not even in the eclipse preview!!) but there was absolutely nothing wrong with the xml.
So im guessing some of your options overrule the others and this comes to bear on more modern APIs as they might be even more restrictive (or more broken, its still android ;) )
I'm trying to horizontally place views inside a linear layout such that I can align these views horizontally but not next to each other. I tried giving margin,padding values etc. but nothing worked for me. All the views remain placed next to each other.
I want the digital clock in the extreme right and the WiFi image in the center.
Please suggest what should I use to align views with separation within them using minimum hard code.
<LinearLayout
android:id="#+id/top_bar_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/top_bar"
android:orientation="horizontal" >
<ImageView
android:id="#+id/signal_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/signal1" />
<ImageView
android:id="#+id/nosim_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/wifi_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/wifi1" />
<ImageView
android:id="#+id/battery_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/battery1"
/>
<DigitalClock
android:id="#+id/digClock_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
If you want to align things more Relatively, so that something is always at the left edge, and so on, you should use a RelativeLayout. It gives you more flexibility to work on things like that.
You should use Relative Layout. Its much more easier to make layouts with that. In your case they remain next to each, because I guess you have set the android:layout_width="wrap_content" try changing it to android:layout_width="match_parent" and try.