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.
Related
I am making the layout for my activity and got puzzelled , I am thinking about making the flexible layout in which my views get width and height according to screen. Please read the case below
What I want:
This is the trickiest and hardest part for me.
I need to put the 37 buttons on the screen , such that the each row
gets the 3 button and then shift to new row. nevertheless the last row get the single button or two buttons. Well in the case of 3
button in each row yields only single button in last row but that's
okay
Each button in each row should have different id , having different
picture on background and opening different activity with different
intent extras.
Buttons in row must have same sizes so that it should look good.
So these three points are giving me tough time. Also the 2nd point in these point is much much more important.
Please tell me How Can I achieve this I have read about grid layout , Grid view , list view , table layout and also I have used them many time. but I do not know how to use them for this specific purpose.
Note: The buttons in the row should get the same width and height according to screen and the layout should get fit on all devices so we should avoid hard coded values.
Simply use grid view. Set Max column to 3 and
Use a custom adapter extending Base adapter to set backgrounds and return different ids on item click listener.
Set layout param for inflated item view dynamically using screen size.
I think you should see these links , link 1 and link2. The gridview is best option is for you as these layouts adjust the size and you can easily Handle them in their adapter.
Use a Linear layout instead..with Nested concept.that is like
<LinearLayout>
<LinearLayout>
.
.
And So on..
.
.
.
</LinearLayout>
</LinearLayout>
For example
----Outer (Horizontal) layout-----
| |
| ---Inner (Vertical) layout- |
| | [Textview] | |
| | [Button] | |
| | [Button] | |
| | [Button] | |
| --------------------------- |
----------------------------------
Also try the example below
<LinearLayout android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="One,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="One,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="One,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="One,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="Two,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Two,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="Two,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Two,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="Three,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Three,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="Three,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Three,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="Four,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Four,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="Four,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Four,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
</LinearLayout>
Output
Reference Links:
Nested Linear Layout,
Nested Example
Update 1
As you said, 37 buttons have to implement on the application with different id,intent extras etc.it is simple job i think. set each buttons with different id and write a onClickListener for the buttons.Use a switch/If case t\o distinguish each buttons.
Example:
public void buttonOnClick(View view)
{
switch(view.getId())
{
case R.id.button1:
// Code for button 1 click
break;
case R.id.button2:
// Code for button 2 click
break;
case R.id.button3:
// Code for button 3 click
break;
}
}
Refer this link for more info:
OnClickevent for buttons
Thanks
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 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>