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);
Related
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>
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'm trying to create a button-like component, with a left-aligned ImageView and then 2 TextViews to the right of the ImageView, stacked one above the other and formatted differently, like the following example:.
__________________________
| |
| |-----| Bold Main Text |
| |Image| |
| |-----| Small Sub Text |
|__________________________|
I also want the ImageView to change depending on the click state of the outer container, much like a standard button would do with a selectable resource associated with it. So that when I click anywhere in the outer box the image selectable state is changed.
I know I can use a Button, setting the 'drawableLeft' property to create a single line of text associated with an Image as a button, but it seems I can only have a single item of text using this strategy.
Has anyone implemented any UI components like this in the past?
Thanks!
You can add android:duplicateParentState="true" to the ImageView widget. Also you need to make the ImageView's parent clickable and focusable.
The RelativeLayout in the following code will act as a Button:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout:height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:duplicateParentState="true"
android:src="#drawable/icon" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image"
android:layout_alignTop="#+id/image"
android:layout_alignWithParentIfMissing="true"
android:duplicateParentState="true" />
<TextView
android:id="#+id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image"
android:layout_below="#+id/text1"
android:layout_alignWithParentIfMissing="true"
android:duplicateParentState="true" />
</RelativeLayout>
</LinearLayout>
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>
the UI i want is like below:
------------------------------+
head|btn1|btn2|btn2 |
-------------------------------
Content |
Content |
|
|
|
|
|
|
|
|
|
|
------------------------------|
foot|btn3|btn4|btn5 |
------------------------------|
Anyone know how to design xml for this ui?
This is the type of XML layout you'll be looking for:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="horizontal"
>
<View android:id="#+id/head" />
<Button android:id="#+id/btn1" />
<Button android:id="#+id/btn2" />
<Button android:id="#+id/btn3" />
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
>
<View android:id="#+id/foot" />
<Button android:id="#+id/btn4" />
<Button android:id="#+id/btn5" />
<Button android:id="#+id/btn6" />
</LinearLayout>
<ListView
android:id="#+id/body"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
/>
</RelativeLayout>
Obviously you'll need to expand on the contents of the header and footer, but that's the basic structure. You set the header and footer to wrap_content, align them to the top and bottom, respectively, then the ListView is set below and above the header and footer, respectively, and fills the remaining space left by the header and footer.
Hey that sounds quite simple.
The easiest way to get started with something like this would be to use something like
http://www.droiddraw.org/ it"s a visual editor for Android UIs.
Once you have the basic Layout you can export it to you app and then tweak it to your needs.
Hope this helps
-Andreas
Just saw your Edit. You Basically want a vertical linear layout with a horizontal linear layout on top then a list view and another linear horizontal layout on the bottom.