I need to make a heading with an ImageView and TextView that are centered together, like the following diagram.
--------------------------------
| |
| ----------- ---------- |
| -ImageView- -TextView- |
| ----------- ---------- |
| |
| -Other Content- |
| |
The ImageView must be scaled to the height of the TextView and together they must be centered as if they were one widget. Any ideas on how to accomplish this?
EDIT: you can use TableLayout for it, put the textview and Imagview in 2 columns of tablerow, then your imageview is adjust acccording to your textview's columns height.
use your textview's height as wrap_content and imageview's height fill_parent
If they must look as a single widget, then wrap them with a horizontal LinearLayout, and actually do treat it like a single widget. Centering this new 'widget' will do what you want.
Use RelativeLayout. Align ImageView's top and bottom with TextView's top and bottom. Set Top margins for textview. Set center horizontally to true in parent layout.
Related
I have three views that are intended to look as follows:
+-----++-------------------------+
| 1 || |
+-----+| 3 |
+-----+| |
| 2 || |
+-----++-------------------------+
So far, so good. However...
Sometimes (3) is very small, and I want it centred in the vertical space used for (1) and (2).
+-----+
| 1 |+-------------------------+
+-----+| 3 |
+-----+| |
| 2 |+-------------------------+
+-----+
Other times, (3) is large, and I want (1) to align with the top (3), and for (2) to align with the bottom of (3):
+-----++-------------------------+
| 1 || |
+-----+| |
| 3 |
| |
+-----+| |
| 2 || |
+-----++-------------------------+
I have tried:
an outer Relative layout: (1) and (2) overlap in the "small-3" case
a linear layout containing (1) and (2) (with and without weights): the alignment at top/bottom does not work in the "big-3".
an outer linear layout (with various height settings): I can not get case (2) and (3) to work with the same settings.
To give a little context, (1) and (2) are buttons and (3) is a text block of varying size.
At this point I assume I am missing some very basic setting (or widget) that will make this work as intended.
Note: I have not included source code because there have, literally, been over a dozen different configurations tried and none worked.
Just asking the question helped...pretty sure the answer is to use ConstraintLayout.
Use ConstraintLayout and use the design tab instead of writing the code yourself when using the ConstraintLayout, its pretty easy to achieve what you want. Dont use RelativeLayout or LinearLayout for this.
community.
The desired effect is to have TextView that:
has left-aligned text
is glued to the right to its right-aligned sibling control
adjusts to the available horizontal space e.g. wraps its text if needed
1/ More than the optimal TextView + ImageView width:
|---Empty-space---|---TextView---|--Image--|
| |1. Aa | |
| |2. Bbb cccc | [---] |
| |3. Ddd eeee ff| |
|-----------------|--------------|---------|
| | | |
. . . .
. . . .
. . . .
2/ Less than optimal TextView + ImageView width:
the TextView wraps its text
no empty space to the left of the TextView due to low available horizontal space
||-TextView-|--Image--|
||1. Aa | |
||2. Bbb | |
||cccc | [---] |
||3. Ddd | |
||eeee ff | |
||----------|---------|
|| | |
.. . .
.. . .
.. . .
Asking the question after trying numerous things with linear and constraint layouts.
Satisfying conditions #1 and #2 from above is easily achieved by setting the width of the TextView to wrap_content, its textAlignment="textStart" (by default) and the gravity (not layout_gravity) for the whole LinearLayout to end. The right alignment for both controls - TextView and ImageView, when using a ConstraintLayout, is achieved by gluing the ImageView to the right and then setting the constraintHorizontal_bias="1.0" for the TextView.
The problem comes when the last condition (#3) should be satisfied as well - make the TextView's text wrappable. This is achievable by setting the TextView's width="0dp" and layout_weight="1" (in case of LinearLayout) or just setting width="0dp" for the ConstraintLayout scenario.
Any suggestions are appreciated and welcome.
I have a LinearLayout that contains multiple ImageButtons and TextViews. Something like this:
+---------+-----------+-------------------+-------+ <- LinearLayout
| i | i | text here | i |
+---------+-----------+-------------------+-------+
These items are hard to tap. I want to increase their tappable area. It seems as if TouchDelegate is the proper way to do this.
However, view.getParent().setTouchDelegate(new TouchDelegate(r, child)) is a 1:1 mapping, not a 1:Many mapping. So how would one solve this problem when a View has multiple children that each need to be tappable beyond their bounds?
I have an Android TextView which I'm trying to display some multi-line text. I want the first line to be centered, and all of the other lines to be centered as well, but left-aligned with the first line. When wrapping the text, the TextView goes as wide as the view will allow, even though the actual text stopped a while ago. I would like to trim this extra padding space.
Here's a rudimentary ASCII thing that kinda shows what I'm talking about.
| FirstLineOfText |
| SecondLine |
| |
| |
But what I'm getting is more like
| FirstLineOfText |
| SecondLine |
| |
Try using two textviews. One for the first line and the second for the others in relative layout. Then align the second one to left using android:layout_alignLeft = "idOfFirstTextView".
I have a UI Design from my designer, and it exists of a background map with several buttons on it, positioned non-linear all over the map. Currently I position them in a RelativeLayout that is as large as the map, and use margin-left and margin-top etc in dip.
This works ok, but I also need to account for users with very small screens, that cause the map to scale down. My relative layout scales with it, but the margin values ofcourse not.
So I am wondering, how should I do this? I would prefer to layout these buttons using percentages like
left="30%"
top="50%"
Is there anything in Android that makes such a thing possible? Otherwise I have to come up with a custom layout class for that.
Visual Representation: (Ofcourse they don't actually are on 6 lines, and partially overlap in x or y position). It's actually a real (abstract) map of a building with location markers that you can press as buttons.
-------------------------
| x x |
| x |
| |
| x |
| x |
| x x|
-------------------------
Here is a complicated way that does not require a custom ViewGroup. Suppose you want a button at left 30%, top 40%
FrameLayout
View with background, match parent
LinearLayout orientation=horizontal, match parent
View layout_width=0dp, layout_weight=30, height=match_parent
LinearLayout orientation=vertical, width=0dp, weight=70, hieght=match
View layout_height=0dp, layout_weight=40, width=match_parent
FrameLayout layout_height=0dp, layout_weight=60
Button
I use Dimension resource files put in the relevant layout- buckets so I can change margins/paddings/sizes depending on device size.
(http://developer.android.com/guide/topics/resources/more-resources.html#Dimension)
(Storing dimensions in xml file in Android)