Develop Reference

Android: Layout Help Create as in Image

I need to create a sign-in screen like this, am using Android studio.
Screen design.
How do I do this?
The lock and user icon is available here: http://www.fileconvoy.com/dfl.php?id=g36a32a9fc3a1ae3a99959004714c5d27f473d16f6
This is as far as I've created. I need to know how to give the colors as in the picture. I'm trying it, but it isn't working as expected. Also I need the background color not to merge with the EditText.
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".Login"
android:id="#+id/">
<RelativeLayout
android:layout_width="500dp"
android:layout_height="300dp"
android:layout_marginTop="210dp"
android:layout_marginBottom="110dp"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/nameET"
android:hint="Username"
android:textColorHint="#000000"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="#+id/passwordET"
android:hint="Password"
android:textColorHint="#000000"
android:layout_below="#+id/nameET"
android:layout_alignLeft="#+id/nameET"
android:layout_alignStart="#+id/nameET"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LOGIN >"
android:id="#+id/button2"
android:layout_below="#+id/passwordET"
android:layout_alignLeft="#+id/passwordET"
android:layout_alignStart="#+id/passwordET"
android:layout_alignRight="#+id/passwordET"
android:layout_alignEnd="#+id/passwordET"
android:textColor="#android:color/white"
android:background="#android:color/holo_blue_dark"
android:ellipsize="end" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forgot Password"
android:id="#+id/textView3"
android:layout_below="#+id/button2"
android:layout_centerHorizontal="true"
android:textStyle="italic" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxWidth="35dp"
android:maxHeight="36dp"
android:id="#+id/imageView4"
android:src="#drawable/useri"
android:background="#ff4066ff"
android:layout_toLeftOf="#id/nameET"
android:layout_marginTop="220dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxWidth="35dp"
android:maxHeight="36dp"
android:id="#+id/imageView3"
android:src="#drawable/locki"
android:background="#ff4066ff"
android:layout_toLeftOf="#id/passwordET"
android:layout_marginTop="260dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="EGO >"
android:id="#+id/egoTV"
android:layout_marginBottom="60dp"
android:layout_marginLeft="100dp"
android:layout_marginTop="15dp"
android:layout_above="#+id/nameET"
android:gravity="center"
android:textSize="40dp"/>

This layout is rather complex and if you create too many views, it might be very inefficient. Here is my take on this. For the "Ego" logo, create a single TextView and set the android:drawableRight to the arrow drawable you wanna use, also if you want some space between the "EGO" text and the arrow drawable, set the android:drawablePadding to the value you prefer. For the container of the 3 form controls, group them in a LinearLayout and create a 9-patch drawable and don't specify the stretchable area for the pointing-upwards arrow because when the drawable stretches, the arrow will stay the same which is what you want, you don't want it to stretch to look ugly, use padding to offset those views the way you want, and set the android:background to the stretchable 9-patch image you created. For the username and password fields, you could use the EditText view and also set the android:drawableLeft to the icons you have, you may also create custom background using the ShapeDrawable in XML. For the login button, it is the simplest to implement, create a button of course, but you need to create a new ShapeDrawable resource and use the radius element as a child of the shape root element to make the rounded corner like that, the arrow in the button you could use the greater sign on your keyboard or create an image using Inkscape which is free, very powerful application you should check out if you haven't yet, and also use the android:drawableRight attribute. Alright, last piece is just a TextView with the attribute android:textStyle set to italic. That is how I would do it, it is lots of work, but it is a little work, but you will end up with a layout that is a little more efficient (you could eliminate the use of ImageView if you followed my suggestion). Hope you find this helpful.
You use these attributes to create a shadow effect android:shadowDx android:shadowDy android:shadowColor android:shadowRadius. Dx and Dy are for the horizontal and vertical offset, positive values offset the shadows to right and down respectively, you could even use negative values in which case the shadows go the opposite directions. The radius attribute is for how blurred you want the shadow to be, and color is self-explanatory, but my favorite colors are #d9d9d9 and #550(or #555500) and, but use the #xxx is more memory efficient if any color components have the same value like #55 55 00, I just use #550.

The best way start from here.
Try to understand how work android UI.
In your project find res folder.
In that folder you can find main_activity.xml file or something like this
You can create your own UI in editor or using XML.

How to android text alignment in a button when gravity:center is not working

I have the following :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:gravity="left|center_vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:gravity="left|center_vertical" />
</LinearLayout
I want to get my button's text to align left. Right now its aligned in the center. The textview's text is aligned left without any problems. Is there something else I need to add? I don't really have to close and reopen my IDE because I use maven to build. Any suggestions?
ANSWER
Figured it out : set android:paddingLeft="0dp" . Done. No need for gravity there.

Instead of wrap_content give some value. Actually its working but you can't see because your width is set as wrap_content
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Button"
android:gravity="left|center_vertical" />

When you set an object's gravity property, you're telling that object where you want its contents to be aligned. In your code, you're trying to align the text in a box that only as big as the text itself, which does nothing.
There are 2 ways to solve this problem.
A) You can set the button's width to be not wrap the content.
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Button"
android:gravity="left|center_vertical" />
B) You can set the width of the text-view to not be wrap content.
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Text"
android:gravity="left|center_vertical" />
Otherwise, what you're doing right now should have some text in a button where there is no space between the edge of the text and the outside of the button. If there is space there, make sure you're not setting padding or margins in the button or text.

Button layout_height=wrap_content inside linear layout has height much bigger then wrap_content

I have LinearLayout with TextView and Button. I set layout_height attribute to wrap_content but layout_height has much bigger size. If I remove this button then all is alright. I try to decrease button text size but frame of the button still the same. I don't want hardcode button size. What can be the reason this strange result?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="#dimen/left_margin"
android:layout_marginTop="#dimen/top_margin"
android:layout_weight=".3"
android:text="#string/contact" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_marginLeft="#dimen/left_margin"
android:layout_marginTop="#dimen/top_margin"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:id="#+id/contact"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/contact" android:textSize="#dimen/button_font_size"/>
</LinearLayout>

Button has background and other layout properties and does not seem possible to reduce its height. An option would be to use a TextView with custom style and handle click event so that it behaves like a Button.
Example:
<TextView
android:layout_height="wrap_content"
android:background="#ddd"
android:padding="6dp"
android:layout_width="wrap_content"
android:text="Contact" />
It requires some work and time spent to style the TextView properly, but if you have no other choice, it may do the trick for you.

I had this issue as well when using a button, you can manually set the height and width, but I also have not found a set way to reduce the wrap_content size.
android:layout_width="40dp"
android:layout_height="30dp"

This is because of minimum height of a button. Set android:minHeight="1dp" or any other size to make it happen.

To align all buttons equally in relative layout

Below is a simple code where i am trying to align all the button views
How to make sure all the button acquire equal space , as in the figure we can see location and photos button are are not clearly
spaced
I also tried with random textsize its not working :(
Any ideas
What I have tried::
<TableRow
android:id="#+id/tableRow5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2sp" >
<RelativeLayout
android:id="#+id/BottomNavigationBarCopperChimneyDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/CopperChimneyDescriptionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Description"
android:textSize="14dp" />
<Button
android:id="#+id/CopperChimneyLocationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/CopperChimneyDescriptionButton"
android:text="Location"
android:textSize="14dp" />
<Button
android:id="#+id/CopperChimneyPhotosButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/CopperChimneyFriendsButton"
android:text="Photos"
android:textSize="14dp" />
<Button
android:id="#+id/CopperChimneyFriendsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Friends"
android:textSize="15dp" />
</RelativeLayout>
</TableRow>

Alternative approach, maybe could be useful sometimes. Solution with LinearLayout and weights works fine, but I don't like extra layout inflates that could be avoided easily, because of performance issues.
1. Define button width in dimens.xml. Android phones have screen width 320 or 360dp:
values/dimen.xml
<dimen name="button_width">80dp</dimen>
values-sw360dp/dimen.xml (these resources will be used for screens 360dp width and more)
<dimen name="button_width">90dp</dimen>
Of course, you should define extra dimens.xml if tablet support needed.
2. Use this value for buttons:
android:layout_width="#dimen/button_width"

You need to use a LineaLayout if you want equal sizes. You can just put it inside of your RelativeLayout. You also need to give the buttons equal weight. Like here: Equal buttons

Right-align button with dynamic text

In my user interface, I have a fragment with a RelativeLayout. At the bottom of this RelativeLayout, I have two buttons: one should be on the left, the other on the right, with empty space between them. The left one has static text (but because the app will be translated, I don't know what width it will be). The text in the right one can change arbitrarily.
Since I already have a RelativeLayout, I started out trying to lay them out inside the RelativeLayout like this:
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/right" />
But this has the problem that if the text in the right-hand button is too long, it will overlap the left-hand button.
I next tried to constrain the left-hand edge of the right-hand button by adding android:layout_toRightOf="#+id/button_left", but with this, the right-hand button would always fill the available width. When the text in the right-hand button is short, I want it to shrink to leave a gap between it and the left-hand button.
I next tried to use a LinearLayout, so I could set layout_gravity on the buttons, like this:
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/left" />
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:drawableLeft="#drawable/pass"
android:text="#string/right" />
</LinearLayout>
Still no joy. I expected this to work, but the right-hand button stays just to the right of the left-hand button, instead of sticking to the right edge of the screen. I can see in the layout editor that the LinearLayout correctly fills the width of the screen, but the button stubbornly stays next to its friend.
I tried adding android:layout_weight="1" to the right-hand button too, but again, that made it always expand to fill the available space.
Next, I tried to add an empty View between the buttons, to expand and force the right button to the right, like this:
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/left" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/right" />
</LinearLayout>
This works fine when the text is short, just like my original RelativeLayout did, but now when the text on the right-hand button is long, its width is limited by the width of the screen, not the available space, so it extends off the right-hand edge of the screen. Again, I can see in the layout editor that the LinearLayout has the correct width, but the button is extending ourside its parent's bounds. This happens even if the button has android:layout_width="match_parent". Oddly enough, increasing the layout_gravity on the right-hand button makes it smaller until it fits inside the available space, but of course that also makes it fill the space when the text is small.
I can't believe it's this hard to get this right. I've seen half a dozen similar questions on SO, but they all have easy workarounds. If the button text is fixed, you can set the margin to a fixed width by hand. If the expanding widget is a TextView instead of a Button, you can just let it expand and use android:gravity to move the text inside the widget, but you can't do that with a button because the background and borders are visible on the screen.

It turns out that adding the LinearLayout was the wrong approach. Using android:layout_toRightOf="#+id/button_left" android:layout_alignParentRight="true" works fine with a TextView, because that can soak up the available space without changing its appearance. Instead of trying to change the layout, I just need to use something that can expand to fill the available space and contain the Button: a FrameLayout. Here's the working code, which still goes inside my root RelativeLayout:
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/button_left" >
<Button
android:id="#+id/Turn_button_pass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/right" />
</FrameLayout>
Now, the FrameLayout always takes up all the space to the right of the left-hand button, and lays out the right-hand button inside that space using android:layout_gravity="right".
This answer only adds one extra layout, but if someone has a way to do it only using the existing RelativeLayout, to minimise the number of ViewGroups in the layout, I'll accept that as a solution.

IF you can live with the constraint, that the right button only can take up to up half of the available space, this could be a solution for you:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A short text" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="A very long text which is limited to one half of the available space" />
</RelativeLayout>
</LinearLayout>

You could just use a TextView and make it look like a button. Create a dummy button, extract the background and set that background to the textfield programmatically.
(Not tested but should give it the apperance of a button)
Drawable d = button1.getBackground();
textView1.setBackground(d);
then you just set the onClickListener and that should yield what you're looking for. The TextView would take the place of the "button_right" in your first layout.
**Edit
Your xml would look something like this
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<TextView
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:maxEms="10"
android:text="TextView" />