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" />
Related
Good evening,
I am developing an Android app and I am currently doing the Login interface in XML.
I am trying to create buttons with icon and text, like in the picture below :
http://i.imgur.com/J5Cj1w4.png
And here is my actual result :
http://i.imgur.com/VPALdDD.png
With this code :
<Button
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/sign_up_facebook"
android:text="#string/signup_with_facebook"
android:textColor="#color/primaryTextLight"
android:drawableLeft="#drawable/ic_facebook_box_white_24dp"
android:layout_weight="0"
android:background="#drawable/button_shape_login"/>
<Button
style="?android:textAppearanceSmall"
android:layout_marginTop="20sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/sign_up_google"
android:text="#string/signup_with_google"
android:textColor="#color/primaryTextLight"
android:drawableLeft="#drawable/ic_google_plus_box_white_24dp"
android:layout_weight="0"
android:background="#drawable/button_shape_login"/>
I am stuck at this step.
How can I get the final needed result with XML code ?
Thank you!
You can give padding to drawable like this : android:drawablePadding="50dip"
Also this question answered in this post.
Use android:drawablePadding attribute
You only need to specify android:paddingLeft attribute.
Try specifying a value of 36dp for example
The better option is to actually make the button a Relative/Linear layout with the layout set inside, the drawablePadding will not work so well with different lengths of text and buttons.
Essentially, RelativeLayout which is your button with a nested ImageView and TextView and you'll have good control of the layout, with consistent paddings around images and text within the button.
I haven't tested the following, this is essentially what you need
<LinearLayout
android:id="#+id/facebookButton"
android:layout_width="250dp"
android:layout_height="80dp"
android:orientation="horizontal">
<ImageView
android:src="#drawable/your_drawable"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="50dp"/>
<TextView
android:text="Sign up with Facebook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"/>
</LinearLayout>
android:gravity="center_vertical"
//use in both textView
<Button
android:paddingLeft="50dp"
android:textAlignment="textStart"
android:drawableLeft="#drawable/"
/>
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.
I'm posting here in order to know if it was possible to make this design in Android :
If yes, could you help me how to do it (Just Guidelines).
Thank you
EDIT :
if I use only one Relative Layout I have this xml file :
<?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="wrap_content"
android:background="#drawable/background_cross"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="F1\n" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="300dp"
android:layout_marginLeft="50dp"
android:text="Left\nbutton" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right\nbutton"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="300dp"
android:layout_marginRight="50dp"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="380dp"
android:text="Bottom\nbutton" />
</RelativeLayout>
But declaring static dp is very bad and it isn't good to apply on all devices..
My xml code is shit ?
Do I have to get width and height screen of the device programmatically and set my buttons positions programmatically too ?
May be I could use this picture in Background and bind buttons on it ? (But how ?)
You can do this using a RelativeLayout and add the four buttons in it. Android supports adding custom fonts to your app and you will be able to set the button's font as well, you just need the font file. See here or here an example.
You will need the buttons background just as a white/red ring with transparent background.
You can place the buttons inside the RelativeLayout using margin properties (layout_marginLeft/Right/Top/Bottom) see here other properties.
The buttons text should have two lines (see android:lines xml property for a Button).
Good luck! I hope it helps ;).
I have a layout in which two TextViews are to be displayed on the same line such that
If TextView1 is a short text, TextView2 should be immediately right to TextView1(IMAGE1) and if the TextView1 is a long text, TextView2 should be at right corner of the Layout on the same line(IMAGE2)
How can I achieve this ?
i use simple horizontal LinearLayout with android:layout_weight attribute and it worked like you want.
Example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/text1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="teeeeeeeext1"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text2"/>
</LinearLayout>
Use a layout like this..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/editText2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="38dp"
android:layout_toRightOf="#+id/editText1" />
</RelativeLayout>
edittext 1 will push edittext2 to its right...depending on text in it..
You can set android:maxWidth property for first text view. So your layout would look like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:text="sdfksdofsdfsdfsdfsadfgwagrswargweqrgeqrgqwergeqrgeqrg"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/textView1"
android:text="text2"
/>
Edit:
I apparently misread (or did not read fully) your question. Just don't mind my answer - I vote for mxy's :)
The last time I had the same problem, I wasn't able to find or hack away a straightforward solution. Counting pixels was not an option (at least not for me). But I found a workaround that eventually led to the same display concept, and that was to use SpannableStringBuilder.
As I'm assuming you want two different TextViews because you want them to have different colors (or size, or style, or typeface).
The idea is to use a single TextView for the whole thing, and prepare a SpannableString before doing setText on your view.
By using combinations of ForegroundColorSpan, TextAppearanceSpan, etc, you can make your single TextView look like different TextViews with different styles, sitting side by side, wrapping to the next line as necessary.
Links:
Setting font color at runtime
TextAppearanceSpan sample
I do not want to use the framework provided Preferences, rather I would like to create a ListView that looks similar. In particular, I would like it to use the same font size and style for the TextViews.
This is not about the ListView itself, but rather the child views that appear inside the ListView. They are created by the getView method of your adapter.
To create views similar to Android, you can use the Android source code, specifically the relevant XML file layouts. For example, preference.xml looks like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:gravity="center_vertical"
android:paddingRight="?android:attr/scrollbarSize">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"
android:layout_marginRight="6dip"
android:layout_marginTop="6dip"
android:layout_marginBottom="6dip"
android:layout_weight="1">
<TextView android:id="#+android:id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:ellipsize="marquee"
android:fadingEdge="horizontal" />
<TextView android:id="#+android:id/summary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/title"
android:layout_alignLeft="#android:id/title"
android:textAppearance="?android:attr/textAppearanceSmall"
android:maxLines="4" />
</RelativeLayout>
<!-- Preference should place its actual preference widget here. -->
<LinearLayout android:id="#+android:id/widget_frame"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical" />
</LinearLayout>
You will not be able to use this content directly, as some of the constants used are private to Android, and you'll have to further dig down through other xml's.
Anyhow, you should take into account that Android preferences look different on different versions of Android, and on different themes, so make sure you use the constants provided by Android, and not your own hard-coded values, to make sure your list-view items resemble the actual preferences provided by Android.
Add this attribute to the activity tag in your AndroidManifest.xml
android:theme="#android:style/Preference.PreferenceScreen"
Try this http://android-journey.blogspot.com/2010/01/for-almost-any-application-we-need-to.html