This is my aim:
I have a linearlayout where everything is centered both vertically and horizontally
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<EditText
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/top_edittext_form_bg"
android:hint="Email or Username"
android:layout_gravity="center_horizontal"
android:layout_margin="5pt"/>
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bottom_edittext_form_bg"
android:inputType="textPassword"
android:hint="Password"
android:layout_gravity="center_horizontal"
android:layout_margin="5pt" />
...
I have been messing around trying to take out the layout_margin, but this affects all elements (even the ones underneath these two).
Is there any way for me to simply combine these two edittexts like in the picture without affecting my linearlayout?
Try this:
...
<EditText
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/top_edittext_form_bg"
android:hint="Email or Username"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5pt"
android:layout_marginLeft="5pt"
android:layout_marginRight="5pt"
/>
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bottom_edittext_form_bg"
android:inputType="textPassword"
android:hint="Password"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="5pt"
android:layout_marginLeft="5pt"
android:layout_marginRight="5pt"
/>
...
Tell me if it works. :)
Related
i have 2 items in a relative layout that i want to put side by side,the User icon and the username, at the moment i have the user icon where i want but the username is always right at the side with no margin, i need some margin left so i can have a litle space between each other, and i tried with margin left but it didn't work.
here is the xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="142dp"
android:layout_gravity="center"
android:layout_margin="#dimen/card_margin"
android:elevation="3dp"
card_view:cardCornerRadius="#dimen/card_specie_radius">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/Avaliation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/plantName"
android:layout_marginStart="92dp"
android:layout_marginTop="15dp"
android:layout_toEndOf="#+id/dateTxt"
android:text="Avalie a fotografia" />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/dateTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="29dp"
android:text="TextView" />
<ImageView
android:id="#+id/reportImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/color_cursor_white" />
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp" />
<ImageView
android:id="#+id/userIcon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/plantPhoto"
android:src="#drawable/ic_user"
/>
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/plantPhoto"
android:textColor="#color/nephritis"
android:textSize="20sp" />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/plantPhoto"
android:textColor="#color/base"
android:layout_marginEnd="29dp"
android:layout_toEndOf="#+id/userIcon"
android:layout_toLeftOf="#+id/userIcon"
android:layout_marginLeft="20dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
I have found too issues with your code:
You have both android:layout_toEndOf="#+id/userIcon" and android:layout_toLeftOf="#+id/userIcon" attributes set in your username view, which makes no sense. You should replace android:layout_toLeftOf with android:layout_toRightOf if you want it to be to the right of the userIcon view.
You are setting the left position of the username view with the android:layout_toEndOf="#+id/userIcon" attribute, that's why android:layout_marginLeft="20dp" has no effect. You can use android:paddingLeft="20dp" instead.
Let me know if it helps.
I have this XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:hint="enter your name"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:id="#+id/button"
android:layout_below="#+id/editText"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="name"
android:id="#+id/textView8"
android:layout_below="#+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="20dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2"
android:text="copy"
android:layout_alignBottom="#+id/textView8"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
In AVD, it looks like this:
And in mobile, it looks like this:
How can I make them look the same?
This discrepancy occurs because you're using the RelativeLayout quite carelessly. Relative Layout positions items relatively to one another, so it might look different across different devices.
I'd suggest that you use one vertical LinearLayout and to have it have 2 horizontal LinearLayouts as its children, as the rows in which you put these fields. I will provide some modified code of yours below, but keep in mind that this will look the same on each device, and you need to make it look prettier, as this is just an example. Something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wawdsd"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="name"
android:id="#+id/textView8" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:hint="enter your name" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:id="#+id/button"
android:layout_marginTop="20dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2"
android:text="copy"/>
</LinearLayout>
So im trying to make a simple sign up activity but my Views are aligned not as expected.
XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.mylifeinformationsharedsocial.SignUpActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/username_id"
android:text="#string/username_text"
android:textSize="20sp"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/username_edit_text_id"
android:hint="#string/username_hint_texts"
android:layout_toRightOf="#id/username_id"
android:layout_toEndOf="#id/username_id"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/password_id"
android:text="#string/password_text"
android:textSize="20sp"
android:layout_below="#id/username_edit_text_id"
/>
<EditText
android:id="#+id/password_edit_text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="#string/passworde_hint_texts"
android:layout_toRightOf="#id/password_id"
android:layout_toEndOf="#id/password_id"
android:layout_below="#id/username_edit_text_id"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/email_id"
android:text="#string/email_text"
android:textSize="20sp"
android:layout_below="#id/password_id"
/>
<EditText
android:id="#+id/email_edit_text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="#string/email_hint_text"
android:layout_toRightOf="#id/email_id"
android:layout_toEndOf="#id/email_id"
android:layout_below="#id/password_edit_text_id"
/>
<Button
android:id="#+id/sign_up_button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sign_up_button_text"
android:layout_below="#id/email_id"
/>
Graphical Layout:
I cant seem to find whats wrong with it. Any help will be very appreciated.
The problem is with the Email downwards as seen in the pic.
Its pretty strait forward but apparently not.
Your password_text is declared as being below username_edit_text_id, whereas it wants to be below username_id.
Android takes all the specs that you give it and it does its best to do what you asked but if the specs are inconsistent or impossible to satisfy then it'll come out wrong.
Maybe you could try it this way:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/username_id"
android:text="#string/username_text"
android:textSize="20sp"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/username_edit_text_id"
android:hint="#string/username_hint_texts"
android:layout_toRightOf="#id/username_id"
android:layout_toEndOf="#id/username_id"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/password_id"
android:text="#string/password_text"
android:textSize="20sp"
android:layout_below="#id/username_edit_text_id"
/>
<EditText
android:id="#+id/password_edit_text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="#string/passworde_hint_texts"
android:alignRight = "#id/username_edit_text_id"
android:layout_below="#id/username_edit_text_id"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/email_id"
android:text="#string/email_text"
android:textSize="20sp"
android:layout_below="#id/password_id"
/>
<EditText
android:id="#+id/email_edit_text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="#string/email_hint_text"
android:alignRight = "#id/password_edit_text_id"
android:layout_below="#id/password_edit_text_id"
/>
<Button
android:id="#+id/sign_up_button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sign_up_button_text"
android:layout_below="#id/email_id"
/>
Instead of using toRightOf I used alignRight so all EditText would be right aligned.
This will work well for your case (if you have only these rows), otherwise you should align all EditText to the right most one.
I'm working on developing a basic Android app for school and am having some issues with the layout. I am using a table layout with several rows.
The problem I'm having is with the width of items. When I add buttons to the top or bottom of the page, the text views in the other rows seem to inherit the button width. I need these text views to be narrow, about the size of a single character. It seems that the items width is set to the widest item in the table. I've tried several properties but have had no luck.
Any guidance would be appreciated.
Here's a screenshot -
Here's my code -
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="fill"
android:padding="20dp"
android:shrinkColumns="1" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:height="50dp"
android:width="50dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:width="50dp"
android:height="50dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:width="50dp"
android:height="50dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:width="50dp"
android:height="50dp" />
</TableRow>
Just add layout_span to your views according to how many columns you want the particular view to span.
For example, in your code:
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:layout_span="2" />
</TableRow>
Then for each TextView give a layout_span of 1.
Im trying to align a bunch of objects in eclipse with the android plugin. They all link to each other, which is problematic when I change the text inside the boxes. What can I do to change how it automatically aligns? Set all the android: layout ...="" to "false"? here is the xml file.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<CheckBox
android:id="#+id/chckBxContd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#+string/RunContd"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/lblUke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/chckBxContd"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="#+string/lblUke"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/btnCUke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblUke"
android:layout_marginLeft="27dp"
android:layout_toRightOf="#+id/lblUke"
android:text="#+string/btnCUke" />
<Button
android:id="#+id/btnGUke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btnCUke"
android:layout_alignBottom="#+id/btnCUke"
android:layout_marginRight="20dp"
android:layout_toLeftOf="#+id/lblUke"
android:text="#+string/btnGUke" />
<Button
android:id="#+id/btnEUke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnGUke"
android:layout_below="#+id/btnGUke"
android:layout_marginTop="32dp"
android:text="#+string/btnEUke" />
<Button
android:id="#+id/btnAUke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btnEUke"
android:layout_alignBottom="#+id/btnEUke"
android:layout_alignLeft="#+id/btnCUke"
android:text="#+string/btnAUke" />
<TextView
android:id="#+id/lblGuitar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#+string/lblGuitar"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/btnDGuitar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnAUke"
android:layout_below="#+id/lblGuitar"
android:layout_marginTop="19dp"
android:text="#+string/btnDGuitar" />
<Button
android:id="#+id/btnAGuitar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btnDGuitar"
android:layout_alignBottom="#+id/btnDGuitar"
android:layout_toRightOf="#+id/btnGUke"
android:text="#+string/btnAGuitar" />
<Button
android:id="#+id/btnLowEGuitar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btnAGuitar"
android:layout_alignBottom="#+id/btnAGuitar"
android:layout_alignRight="#+id/btnEUke"
android:text="#+string/btnLowEGuitar" />
<Button
android:id="#+id/btnGGuitar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnLowEGuitar"
android:layout_below="#+id/btnLowEGuitar"
android:layout_marginTop="24dp"
android:text="#+string/btnGGuitar" />
<Button
android:id="#+id/btnBGuitar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btnGGuitar"
android:layout_alignBottom="#+id/btnGGuitar"
android:layout_centerHorizontal="true"
android:text="#+string/btnBGuitar" />
<Button
android:id="#+id/btnHighEGuitar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btnBGuitar"
android:layout_alignRight="#+id/btnDGuitar"
android:text="#+string/btnHighEGuitar" />
This is what I'd Like it to look like, the text being objects...
and here is the picture of what the program is looking like, it also has some buttons that say false, when they should say a letter, not sure what that's about..
This issue is the layouts are resizing widths when the text changes.
A possible solution would be to use a TableLayout in conjunction with TableRows instead. TableLayouts will align everything together in the same with. When the text inside changes, the row sizes will remain static.
Or you can use LinearLayout with each row. Set the weightSum attribute to some arbitrary number. Set each TextView (or whatever direct child is in the LinearLayout) weight attribute to half of the weightSum. The LinearLayout will keep the containers the same size regardless of what the text is.
In fact, TableLayout extends LinearLayout and this is the underlying mechanics behind it.