I'm confused with a problem about ImageView alignment recently. We know that the width of ImageView is NOT exactly the width of the actual image (because sometimes the image is scaled). So how can I align a textview to the bound of the actual image, not the ImageView?
+----------------------------------------+
| +--------------+ |
| ImageView | Scaled Image | |
| +--------------+ |
+----------------------------------------+
| I want to align my textview to here
| Not here
The following code doesn't meet my requirement, it always align the textview to the right of the ImageView, not the actual image:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:id="#+id/mypic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mypic" />
<TextView
android:id="#+id/mytext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/mypic" />
</RelativeLayout>
Thanks a lot!
What I understood from your post is that you want to align the textview to the right of your imageview, you can do it like so:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:id="#+id/mypic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mypic" />
<TextView
android:id="#+id/mytext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/mypic" />
</RelativeLayout>
Related
I want to maintain the screen size in Layout when the keyboard appears, my idea is obtain the next in both cases (with or without keyboard):
|-----------------|
| image |
| |
|-----------------|
| |
| center lay |
| |
|-----------------|
| |
| image |
|-----------------|
But in the center layout I have some EditText and when the soft KeyBoard appear, the center layout reduce its height and is shorter, causing the first EditText sticking to the picture above. I tried several forms, for example with a RelativeLayout align the images at the top and bottom, but when the keyboard appears hide the center layout and causes a horrible effect.
This is my code by now,
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/login_iv_points_top"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_gravity="top"
android:src="#drawable/image" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical" >
<EditText
android:id="#+id/login_et_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/login_edit_margin_left"
android:layout_marginRight="#dimen/login_edit_margin_right"
android:ems="10"
android:hint="#string/login_et_email"
android:inputType="textEmailAddress" />
<EditText
android:id="#+id/login_et_pass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/login_edit_margin_left"
android:layout_marginRight="#dimen/login_edit_margin_right"
android:layout_marginTop="#dimen/login_edit_pass_margin_top"
android:ems="10"
android:hint="#string/login_et_pass"
android:inputType="textPassword" />
<Button
android:id="#+id/login_bt_login"
android:layout_width="match_parent"
android:layout_height="#dimen/login_button_height"
android:layout_marginLeft="#dimen/login_button_margin_left"
android:layout_marginRight="#dimen/login_button_margin_right"
android:layout_marginTop="#dimen/login_button_margin_top"
android:background="#drawable/bt_selectable_degraded_style"
android:text="#string/login_bt_access"
android:textColor="#color/bt_text_color" />
<TextView
android:id="#+id/login_tv_forgot_pass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/login_forgot_margin_top"
android:linksClickable="true"
android:onClick="registerForgotClick"
android:text="#string/login_tv_forgot_pass"
android:textColorLink="#color/company_color" />
</LinearLayout>
<ImageView
android:id="#+id/login_iv_points_bottom"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:src="#drawable/image" />
</LinearLayout>
</ScrollView>
Maybe you can try to put android:windowSoftInputMode="adjustNothing" on the activity node of your Android Manifest. The keyboard will then pop over the content.
Try to use this in activity inside manifest file:
android:configChanges="keyboardHidden|orientation"
android:windowSoftInputMode="adjustPan"
If you will remove windowSoftInputMode from manifest you will loss your scrolling so if you have a static image i mean from drawable resource than try this getWindow().setBackgroundDrawableResource(R.drawable.ic_launcher);
I'm trying to make layout like this:
|---------------------------| |---------------------------|
| Title of text goes there | | Title of text goes there |
|---------------------------| |---------------------------|
| Image goes there, height | | Image goes there, height |
| can be different | | can be different, very |
|---------------------------| | very, very different |
| Long, very long text goes | |---------------------------|
| here, and here, and here | | Long, very long text goes |
| that should fill space | | here, and here, and here |
| lef after title and ima.. | | that should fill space ...|
|---------------------------| |---------------------------|
Imagine now that I have 5 LinearLayout like this situated on the screen, 2 upper and 3 lower, all uniformly. The problem is that my #Long, very long text doesn't ellipsize and fill the space available at the same time. When I set android:maxLines, it works, but I don't have the constant maxLines, because image and title height changes.
<!-- item -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip"
android:layout_weight=".3">
<!-- item title -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:id="#+id/item_3_title"
android:textSize="22sp"
android:textStyle="bold"/>
<!-- item image -->
<RelativeLayout
android:id="#+id/item_3_image_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<ImageView
android:id="#+id/item_3_image"
android:layout_width="wrap_content"
android:layout_height="120dip"
android:scaleType="centerCrop"
android:padding="2dip" >
</ImageView>
<ProgressBar
android:id="#+id/item_3_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
</ProgressBar>
</RelativeLayout>
<!-- item text -->
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:id="#+id/item_3_text"
android:ellipsize="end"
android:textSize="18sp"/>
</LinearLayout>
Ok, finally found the answer here
ViewTreeObserver observer = textView.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int maxLines = (int) textView.getHeight()
/ textView.getLineHeight();
textView.setMaxLines(maxLines);
textView.getViewTreeObserver().removeGlobalOnLayoutListener(
this);
}
});
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dip"
>
<!-- item title -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:id="#+id/item_3_title"
android:textSize="22sp"
android:textStyle="bold"/>
<!-- item image -->
<RelativeLayout
android:id="#+id/item_3_image_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/item_3_title"
>
<ImageView
android:id="#+id/item_3_image"
android:layout_width="wrap_content"
android:layout_height="120dip"
android:scaleType="centerCrop"
android:padding="2dip" >
</ImageView>
<ProgressBar
android:id="#+id/item_3_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
</ProgressBar>
</RelativeLayout>
<!-- item text -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/item_3_text"
android:layout_below="#+id/item_3_image_holder"
android:ellipsize="end"
android:textSize="18sp"/>
</RelativeLayout>
you need such kind of structure I hope you are able to interpret it.
I'm trying to create the following layout:
|-----------------------------------------------------------|
| |
| |
| |
| |
| L-Email [___________]-R |
| L-Password [___________]-R |
| (Login)-R |
| |
| |
| |
|-----------------------------------------------------------|
So what I'm trying is that I created a linear layout, every e-mail, password and the login line is a linearlayout. But what i want is to place the whole thing into the center (vertically and horizontaly) and align the Email and password labels to the "L-" part of the screen ("L-" is just to indicate that i want to align to there) while i want to align the two text boxes and the login button to the "-R" sign (so I actually don't need the L- and -R signs, these are just indicates the align position here in this mockup)
Here is a more specific mockup:
So i want to align the whole thing to center and align the text labels to the left green line while the others to the right green line.
At this time i prefer to use the Graphical Editor in eclipse but any suggestion is welcome.
I've tried this one so far but have become stuck:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/sahbg"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="#+id/EditText01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
And it looks like this:
Using your existing code:
Change the height and width of the outer LinearLayout:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
(And you may need to change gravity="center" to layout_gravity="center", honestly I can't remember which is which at this moment.)
Switch the "password" LinearLayout's width to match_parent so both the "username" and "password" rows are the same width.
Remove the LinearLayout that holds the Button, since it is not necessary, and add:
android:layout_gravity="right"
To the Button to shift it over to the right. You can also use this on the EditTexts and give them a specific width to force them to be the same size.
I want to make a part of a bitmap clickable and my layout looks like this:
________________________________
| ##### |
| ##### |
| ___________________ |
| | | |
| | | |
| | image | |
| | | |
| | | |
| ___________________ |
________________________________
I thought the easiest way to this would be to place a button over the image with a relative layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
But I haven't figured out how to get the button to align with the upper left corner of the image (instead of the upper left corner of the relative layout, as it does now). Is this possible with a relative layout?
Suggestions for other approaches are also welcome, I considered this:
http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
But it seems a bit of an overkill for my simple rectangle area.
Try this:
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
You can also use
<Button
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/image1"
android:drawableLeft="#drawable/image2t"
android:drawableRight="#drawable/image3"
android:drawableTop="#drawable/image4"
android:drawableTop="#drawable/image4"
android:textColor="#ffffff"
/>
Okay, my google-fu improved and thanks to asenovm I figured it out! The imageview has a android:adjustViewBounds property, which is by default set to false. Setting it to true adjusts the imageviews bounds to the image, so that alignLeft and alignTop work correctly for the button.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/ImageView"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
I was trying to put a TextView dependent above the other TextView anchor inside a RelativeLayout, but I can't manage to make the dependent get displayed.
Situation:
The anchor would be aligned with the parent's top + some marginTop to make it more to the center of the parent (RelativeLayout), and the dependent will be aligned to be above of this anchor.
This doesn't work; when I assigned it to be above the anchor it seems that android assumes the top of the anchor is the parent's top and draws the dependent outside the screen (above it).
This should not be the case since I use margin instead of padding so the area between the top of the RelativeLayout and the anchor shouldn't be the part of the anchor itself (I checked the size with hierarchy viewer). Or maybe I get it wrong? :S
This is the simple layout code:
<?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"
>
<TextView android:id="#+id/anchor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="100px"
android:text="Anchor point."
/>
<TextView android:id="#+id/dependent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/anchor"
android:text="Dependent."
/>
</RelativeLayout>
Desired:
-------------
| |
|dependent |
|anchor |
| |
-------------
What happened:
dependent (out of screen display)
-------------
| |
| |
|anchor |
| |
-------------
Hope:
Could someone help me here? Or maybe help pointing out if I made a mistake. I need to use the RelativeLayout in my real implementation (above is just an example).
Thanks in advance.
I made an invisible button to align from - is this what you're looking for? If you change the margin or any location parameter of the anchorbutton it will change the location of the dependants.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:id="#+id/anchorbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="100dp"
android:visibility="invisible"
/>
<TextView android:id="#+id/anchor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/anchorbutton"
android:layout_alignLeft="#id/anchorbutton"
android:layout_margin="10dp"
android:text="Off Anchor button"
/>
<TextView android:id="#+id/dependent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/anchorbutton"
android:layout_below="#id/anchor"
android:layout_margin="50dp"
android:text="Dependent."
Can I ask why you don't make the anchor at the uppermost corner (top or bottom - doesn't matter) and then build your view from that? That's what I do and that's below: Sorry - I can't post pics yet.
<?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">
<TextView android:id="#+id/anchor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="100dp"
android:text="Anchor point."
/>
<TextView android:id="#+id/dependent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/anchor"
android:layout_alignLeft="#id/anchor"
android:text="Dependent."
/>
</RelativeLayout>
Alternatively, if you really want to keep things as they are, just change the alignment of dependent to android:layout_alignParentTop="true". You can have margin here as well to affect it's placement. Here's the code and pic.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:id="#+id/anchor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="100dp"
android:text="Anchor point."
/>
<TextView android:id="#+id/dependent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="150dp"
android:text="Dependent."
/>
</RelativeLayout>