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.
Related
I have a linear layout with two child items, an edittext fied and button. I set the background color of the linear layout to a shade of blue. On android api 8 the the edittext field has a white background which is how i want it to be, however on android api 17+ the edittext background is the same as the linear layout and thus makes the text input a little difficult to read since it is black.
When i change the edittext background to white (#ffffff) from the default value "?android:attr/editTextBackground", the height of the edittext becomes smaller and doesn't maintain its previous look. My question is how can i maintain the edittext's background as white without altering other attributes that are effected by "?android:attr/editTextBackground" throughout all api levels?
And also i failed to figure out which file the attribute "?android:attr/editTextBackground" points to so i could perhaps look there and edit. Thanks in advance.
The code:
<LinearLayout
android:id="#+id/llSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/search_layout_color"
android:orientation="horizontal"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingTop="6dp"
android:shadowColor="#77000000"
android:shadowDx="-2.4"
android:shadowDy="2.4"
android:shadowRadius="1.2" >
<EditText
android:id="#+id/etSearch"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/hint_search"
android:scrollHorizontally="true"
android:singleLine="true"
android:textSize="#dimen/tv_textSize" >
<requestFocus />
</EditText>
<ImageButton
android:id="#+id/bSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/search"
android:src="#drawable/ic_action_search" />
</LinearLayout>
Id like to achieve the effect seen in the image ive provided below.....possible?
I know how to do a gradient and I know how to set a imagebuttons src/bg to a drawable but i have nooooooo idea where to even start with pulling off both at the same time.
It's actually incredibly simple. To avoid overdraw by layering a bunch of views, just add a ColorFilter to your ImageView:
imageView.setColorFilter(Color.parseColor("#994dace3"), PorterDuff.Mode.SRC_OVER);
No added overdraw, and you can set whatever color you want, and experiment with different PorterDuff blending modes.
Example:
I know how to do a gradient and I know how to set a imagebuttons
src/bg to a drawable but i have nooooooo idea where to even start with
pulling off both at the same time
I think what you are referring to as being a gradient is actually a color with transparency value set. From what I can tell, you are looking for something like this:
You can achieve this using the following layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/the_picture"
android:src="#color/transparent_color" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Message!" />
</RelativeLayout>
The RelativeLayout is used to position the TextView over the ImageButton. The Picture is set as the background. The src is set to a color(any color) with a transparency value between 00(completely transparent) and ff (completely opaque). In the image above, I have used a transparency of 70. So, say you pick Green(#00ff00), add transparent value to it: #7000ff00 and add it to res/values/colors.xml. You can also use it directly as I have done below.
Here's the complete xml code for the activity in the pic above:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/original" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/original"
android:src="#7000ff00" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="Optional Message!"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
You can set a custom font to the TextView(as in the picture you've provided) in code.
I'm making chatting application for my school's assignment.
In my opinion, the default EditText in Android does not looks good. I want to make it looks like the URL box in Android's Chrome:
I have seen this design used in other applications such as Catch Notes (which looks beautiful).
So, is there any built-in option to change the EditText or we must draw it from scratch? Can anyone give link? I tried googling it, but I don't know the correct term
Thanks
you can achieving this by doing edittext background transparent.
so put your image in background of your layout and take a edittext inside this. and make edittext transpernt..
or
try this
<EditText
android:id="#+id/tracknumbertxt"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_toLeftOf="#+id/info"
android:background="#drawable/enter_tracking_no"
android:ems="10"
android:hint="Enter Tracking No."
android:paddingLeft="30dp"
android:inputType="text"
android:imeOptions="actionGo"
android:singleLine="true" >
</EditText>
here i have assign padding left..
so as per your design you have to set paddingRight property instead of paddingLeft..
Blindly use below layout style..
You will have your layout ready. Just replace the button backgrounds and your are done.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#android:color/darker_gray"
android:padding="5dip"
android:gravity="center">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1"
android:background="#android:color/white"
android:gravity="center"
android:padding="5dip">
<EditText android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Type URL"
android:layout_weight="1"
android:background="#android:color/transparent"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Refresh"/>
</LinearLayout>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn1"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn2"/>
</LinearLayout>
There is nothing native to the SDK that can make it look like that. (maybe if you restrict use to only a certain version of the OS, then you can use that version's default styling, but isn't really a viable solution)
You will need to create an image to use as a background for the EditText to make it look how you want. The best options for text boxes and things like that are to either use a 9-patch image, or to create a layer-list XML file and describe your design that way. Either way, the file would go in the res/drawable folder in the project and you would set it as the background like so:
<EditText android:id="#+id/et_whatever"
android:layout_width="match_parent"
android:layout_height="wrap_content"
background="#drawable/YOUR_FILE_NAME" />
Below is how I have designed my xml. Now what I am trying to fit a textview inside the white box shown below. But am being restricted by FrameLayout (at least I think so) that I need to hard code values to make the text view fit in the middle or some where inside the white box. I cannot use Relative or other layouts for this purpose as I have understood by my trials as this whole is a single image.
Here is my layout,
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:visibility="visible" android:layout_marginTop="60dip"
android:layout_gravity="center" android:id="#+id/xxx">
<ImageView android:id="#+id/calloutquizImage"
android:background="#drawable/callout" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:scaleType="fitCenter" />
<ImageView android:id="#+id/triviaImage"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignTop="#+id/calloutquizImage" android:layout_gravity="left"
android:src="#drawable/trivia" android:background="#drawable/trivia"
android:layout_marginTop="50dip" android:layout_marginLeft="85dip"></ImageView>
<TextView android:text="TextView" android:id="#+id/triviAnswerText"
android:layout_marginTop="125dip" android:layout_marginLeft="85dip"
android:layout_gravity="left" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textColor="#000000"
android:typeface="sans"></TextView>
<ImageButton android:id="#+id/triviaanswercloseButton"
android:src="#drawable/closebtn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:background="#drawable/closebtn"
android:layout_marginRight="8dip" android:layout_marginTop="43dip"
android:layout_gravity="right" android:onClick="triviaanswerClose"></ImageButton>
<ImageView android:id="#+id/buttontoclose"
android:layout_gravity="left"
android:visibility="visible" android:onClick="triviaanswerClose"
android:layout_marginTop="50dip" android:layout_marginLeft="75dip"
android:layout_width="230dip" android:layout_height="170dip"></ImageView>
</FrameLayout>
Because of this the text view looks in different positions in various handsets.
Any guesses what can be done for this instead?
Below is my image :
I think you are not doing the right thing. If you want a text to appear inside a white box (or even resize it, if there is to many text to fit to it) - you can still avoid any layouts ad do it with only one TextView.
Please have a look what is NinePatch image in Android:
http://developer.android.com/reference/android/graphics/NinePatch.html
http://developer.android.com/tools/help/draw9patch.html - drawing tools
So basically you will need only 1 textView and your image, properly converted to 9-patch with 2nd link. (Basically - just add a few black pixels on image border).
No just set this 9-patch as a background of textView. It will place text right where you need, and will shrink white box if you'll define so in 9-patch.
UPD:
Please find the resulting screenshot:
As you can see, textView not handles
WhiteBox" itself, filling it with text and resizing the box if necessary.
Here is how to make it work:
<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">
<TextView
android:id="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text" />
<TextView
android:layout_below="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Not so many text" />
</RelativeLayout>
And here is your image, converted to 9patch. Just place it to "drawable/" folder. Note: it MUST have "back.9.png" name.
For details of how 9patch works you can check links above. The main idea: by making black dots on left and top border - you specify which part of the image will be stretched when image must be upscaled. By making dots on right/bottom side you tell the View where to place the content. In our case content is a text of the TextView.
Hope it helps, good luck
I think you can use a RelativeLayout within the FrameLayout for the ImageView and the TextView, and by using the parameters, you can navigate the TextView to the white box. Refer to the LayoutParams documentation for details.
for eg. you can add the ImageView block first and then the TextView, so that the TextView will lay over the ImageView, and by using align bottom, and specifying top margin with a negative value, you can make the TextView go over the image. Or rather, if you are using eclipse, you can directly move the text view in the graphic layout.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/xxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="0dp"
android:visibility="visible" >
<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:layout_margintop="0dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/user2" />
<TextView
android:id="#+id/Textviewtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:layout_below="#+id/imageView1"
android:layout_marginTop="-10dp"
app:context=".TestActivity" />
</RelativeLayout>
</FrameLayout>
Similar to above, you can specify margin left and right to properly position your TextView as you want. Check with graphic layout for feedback to know the correct position.
Please reply if this helped.
Use your images and values for the height and width. I just tried for testing.
I have the below layout which contains a button, I'm trying to reduce the size, mainly height, of button, but button height allows stays the same
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right"
android:orientation="horizontal"
android:background="#FFDBE2ED"
android:paddingBottom="0dp"
android:paddingTop="0dp" >
<!--Button
android:id="#+id/btnSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2px"
android:layout_marginLeft="10px"
android:layout_marginRight="10px"
android:layout_marginTop="2px"
android:height="15dp"
android:text="Save"
android:textSize="15sp"
android:width="70dp" >
</Button -->
<Button
android:id="#+id/btnClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0px"
android:layout_marginLeft="10px"
android:layout_marginRight="3px"
android:layout_marginTop="2px"
android:height="0dp"
android:text="Clear"
android:textSize="15sp"
android:width="70dp"
>
</Button>
</LinearLayout>
any idea?
You're using android:layout_height="wrap_content" which means it will always be as tall as the content inside it. Try playing around with that value to change the height.
Just tried your code and button looks fine. What do you want to look it like? Button as small(short) as it defined by current android theme. You have to change button style to custom one, to make spacing inside of the button different to make it shorter.
When you place standard android button android will use its theme style, including 9-patch image for button background. That image has internal paddings for the text. If you need a different look of the button then you need to create a custom Button control inherited from the Button and overwrite styles.
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Instead of using wrap_content you can specify a view's width or height using DP (Density Independant Pixels) Try changing wrap_content to 50dp or whatever value that suits your needs.