Android: How to set EditText and Button to same height? - android

I want to make the EditText and the OK button same height, but always got the EditText slightly shorter than the Button.
I googled and tried the following way without succeed, nothing changed:
set both the EditText and Button to same height in pixel
wrap EditText and Button into a RelativeLayout. Set the height of the RelativeLayout and set EditText and Button both to fillparent in height
set alignTop and alignBottom on the Button
The theme is: android:theme="#android:style/Theme.NoTitleBar.Fullscreen
Could someone please help me on this? Thanks!
Here is the xml:
<RelativeLayout android:id="#+id/login_layout_ipAddr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#CEE6F0"
android:visibility="invisible">
<RelativeLayout android:id="#+id/login_layout_inner_ipAddr"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText android:id="#+id/login_text_ipAddr"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:inputType="text"
android:textSize="5pt"
android:hint="#string/login_text_ipAddr" />
<Button android:id="#+id/login_btn_ipAddr"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#00ABDF"
android:textColor="#FFFFFF"
android:text="#string/login_btn_ipAddr"
android:onClick="updateIPaddr"/>
</RelativeLayout>
</RelativeLayout>

I have correct your code so try this one...
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/login_layout_ipAddr"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#CEE6F0"
android:visibility="invisible">
<LinearLayout
android:id="#+id/login_layout_inner_ipAddr"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal"
android:weightSum="2">
<EditText
android:id="#+id/login_text_ipAddr"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1.8"
android:inputType="text"
android:textSize="5pt"/>
<Button
android:id="#+id/login_btn_ipAddr"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.2"
android:background="#00ABDF"
android:textColor="#FFFFFF"/>
</LinearLayout>

you can put both the edit text and the button in a TableRow and control their space with weight, it would make this process easier

Set padding to the button.
<Button android:id="#+id/login_btn_ipAddr"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#00ABDF"
android:textColor="#FFFFFF"
android:text="#string/login_btn_ipAddr"
android:onClick="updateIPaddr"
android:paddingLeft="5dp"
android:paddingRight="5dp"/>

Try to use LinearLayout instead on RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_centerInParent="true">
<LinearLayout
android:id="#+id/login_layout_inner_ipAddr"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#CEE6F0"
android:weightSum="6" >
<EditText
android:id="#+id/login_text_ipAddr"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="5"
android:hint="#string/login_text_ipAddr"
android:inputType="text"
android:textSize="5pt" />
<Button
android:id="#+id/login_btn_ipAddr"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#00ABDF"
android:onClick="updateIPaddr"
android:text="#string/login_btn_ipAddr"
android:textColor="#FFFFFF" />
</LinearLayout>
</LinearLayout>

Finally, I solved the problem by adding "android:background="#FFFFFF"" to the EditText element. But I've no idea what is the causes of such a behavior. I'd really appreciate if someone could shed some light on this.
No background:
With background:

Use following code :
<RelativeLayout android:id="#+id/login_layout_ipAddr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#CEE6F0"
android:visibility="invisible">
<RelativeLayout android:id="#+id/login_layout_inner_ipAddr"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText android:id="#+id/login_text_ipAddr"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:inputType="text"
android:textSize="5pt"
android:drawableRight="#drawable/your_Button_image"
android:hint="#string/login_text_ipAddr" />
</RelativeLayout>
</RelativeLayout>

The default background of EditText has short padding. Buttons have these padding too! If you want to have an exact alignment, you can set your custom drawable background to each one. The most simple way is to set a solid color for the background.

To create a button with fixed height and width, you can give values in both px or in dp.
giving values in dp is more convenient , because android automatically scale the height and width in ldpi,mdpi and hdpi devices.
<Button
android:layout_width="100dp"
android:layout_height="50dp"
android:text="Click" />

Related

Android TextView Text wont wrap on Listview

hello i am trying to wrap a textview that has a long text. but when i test it, it just goes beyond the screen. What im trying to do is it will go to the next line if the text is long and it automatically adjust the layout. I am using this in a listview.
i am referring to this old question Android TextView Text not getting wrapped, it works on him so i tried to implement it but it wont effect on mine. thanks for answering.
here's my XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:background="#e6e6e6"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical" android:padding="4dip"
android:layout_weight="1">
<TextView
android:id="#+id/tv_reviewer_name"
android:textSize="16sp"
android:textAppearance="?android:textAppearanceLarge"
android:text="Reviewer Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_marginTop="5dp"
android:id="#+id/tv_review_details"
android:textSize="16sp"
android:textAppearance="?android:textAppearanceSmall"
android:text="Review"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:width="0dip"/>
</LinearLayout>
</LinearLayout>
UPDATE
here's my listview:
<ListView
android:divider="#android:color/transparent"
android:dividerHeight="2.0sp"
android:id="#+id/lv_reviews"
android:background="#f2f2f2"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
You can use the inputType to auto manage a multiline text.
<TextView
android:layout_marginTop="5dp"
android:id="#+id/tv_review_details"
android:textSize="16sp"
android:textAppearance="?android:textAppearanceSmall"
android:text="Review"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:width="0dip"
android:inputType="textMultiLine"
/>
if i use listView or recyclerView, i well put the layout width match parent as mentioned below:
<LinearLayout
<!--change to match_parent-->
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:padding="4dip"
android:layout_weight="1">
try it once, hope this will help you.
problem solved. it turns out android studio didnt update my changes when i ran my app. i uninstalled the app and then run it again and it works perfectly.
When you are using Gravity in vertical orientation, you have to use layout_height=0dp & when you are using Gravity in Horizontal orientation then you have to use layout_width=0dp for every child of Linear Layout so that it can resize the layout by itself
<LinearLayout
android:background="#e6e6e6"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical" android:padding="4dip"
android:layout_weight="1">
<TextView
android:id="#+id/tv_reviewer_name"
android:textSize="16sp"
android:textAppearance="?android:textAppearanceLarge"
android:text="Reviewer Name"
android:layout_width="wrap_content"
android:layout_height="0dp" />
<TextView
android:layout_marginTop="5dp"
android:id="#+id/tv_review_details"
android:textSize="16sp"
android:textAppearance="?android:textAppearanceSmall"
android:text="Review"
android:layout_height="0dp"
android:layout_width="match_parent"/>
</LinearLayout>
</LinearLayout>

Android textview not fit for all the screen

i developed one of application and now am facing problem that it show perfectly in my nexus7 but when i viewing other device screens the text view not fitting
i want all the screen as same as nexus7. its anyone can know the better solution for this please. unfortunately i don't have enough reputation so i cant post any screenshot here this my 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"
android:layout_gravity="center"
android:background="#color/white">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:paddingBottom="16dp"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:paddingTop="16dp" >
<ImageView
android:id="#+id/pointer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:src="#drawable/point" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:paddingBottom="16dp"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:paddingTop="16dp" >
<TextView
android:id="#+id/name2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="97dp"
android:text="#string/numberusers"
android:textColor="#color/no_users"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="19dp"
android:text="#string/number"
android:textColor="#color/no_users"
android:textSize="30sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="16dp"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:paddingTop="355dp" >
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:clickable="false" >
</ListView>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
I m Not Sure But Remove Relative Layout And Use Linear Layout Its More Better Than Relative
The two textViews that you have in your layout use android:layout_width="wrap_content".
Use android:layout_width="match_parent" in the one you want to fill the screen.
every children relative layout in your xml has height and width as match_parent. Do you need it? Because if first layout have height as match_arent than it will not leave space for others. Try using "wrap_content" as height for inner relative layouts.
If I got your question, you have to set the width of the textview as
android:layout_width="match_parent"
But in my opinion, the hole screen is wrong. Use a LinearLayout (vertical or horizontal) and place there your first two textviews. And if you want more accuracy use the gravity feature in each text view and of course set a layout_weight for each TextView and weightSum in the LinearLayout.

equal width for overlaying TextView and ImageView

I've got a TextView (text) overlaying my ImageView (image). My Problem ist that they do not have the same width. In other words - I want the red areas to appear white:
Here is my layout file so far:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF" >
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:padding="10dp"
android:textSize="25sp"
android:gravity="center"
android:background="#9988FF88"
android:textColor="#000000"/>
</RelativeLayout>
I am quite new to android and tried to add different tags to the textview like android:layout_alignLeft="#id/image" which couldn't fix it and also tried to configure the layout_width settings, but this didn't help me either. Also this solution couldn't solve it (I guess that is because of my android:layout_width="match_parent" in my ImageView). The solution was about adding these lines to the TextView:
android:layout_alignLeft="#+id/image"
android:layout_toRightOf="#+id/image"
I was also looking for programmatical solution, which also couldn't fix it:
image = (ImageView) findViewById(R.id.image);
text = (TextView) findViewById(R.id.text);
text.setWidth(image.getWidth());
Any ideas how to get rid of my red areas? Every idea will be appreciated and I would be happy about either an xml solution or a programmatical solution ! Thanks in advance :)
EDIT
I should specify that the image inside the ImageView does get replaced alot so that some images do fill the full horizontal screen in their width. So at some images there shall be a margin on the left and the right, but on others there shall not (in other words - the title shall always be as big as the image). (Btw: Thank you for your fast responses!)
UPDATE
I worked around this issue simply giving the header a white background color.
Try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="26dp"
android:background="#FFFFFF" >
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:padding="10dp"
android:textSize="25sp"
android:gravity="center"
android:background="#9988FF88"
android:textColor="#000000"/>
</RelativeLayout>
The best solution I can think of is:
Cut the white bourders out of your image (You will then set some Margins in yout ImageView, to simulate the borders)
Then, change your layout so:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:padding="10dp"
android:textSize="25sp"
android:gravity="center"
android:background="#9988FF88"
android:textColor="#000000"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
Your imageview is set to match_parent but there are still white areas around imageview. Are you sure your image doesn't have white areas around it?
Also, try using fill_parent instead of match_parent.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
<!--android:padding="10dp" -->
android:textSize="25sp"
android:gravity="center"
android:background="#9988FF88"
android:textColor="#000000"/>
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>

wrap content for numbers

I want to use wrap_content on TextView where I keep only numbers (and coma), but I have noticed that this takes more space than needed (as if reserved space for letters).
Shown here:
image link http://img802.imageshack.us/img802/3784/wrap.jpg
Current situation - blue lines, desired - gray lines.
If it's not possible to do this with numbers and coma, maybe it is possible only with numbers?
This is my layout:
<?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="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:paddingLeft="5dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="5dp" >
<LinearLayout
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sampleText" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/image" />
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:inputType="phone"
android:text="0,00"
android:textSize="50dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</LinearLayout>
For example, MyTextView works as I wrote. The thing is that I want to center vertical my image, but it's not properly centered due to fact MyTextView takes more space than needed.
Set android:includeFontPadding to false, it is true by default. It will reduce the padding significantly although it does not remove it completely. Be sure to test this on a real device, since it had no effect for me in the layout preview. Set a background color to see the difference.
<TextView
...
android:includeFontPadding="false" />
Try it using textView.setTextSize(15dp);
I am using numbers in textView. I didnt feel it as a big issue.
Set height and width of the textview as wrap_content.Like,
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
are you using a custom font? If so, one possibility is that the padding you see is built into the font.
You can add this to your TextView: android:inputType="phone"

Button in relative layout not affected by setting layout margins

A custom Dialog box with a RelativeLayout contains a Button widget that won't change its margins, regardless of direction. Here's the xml:
<?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"
android:orientation="horizontal" android:background="#99000000">
<TextView android:id="#+id/dialogtitle" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Some text" />
<TextView android:id="#+id/dialogtext" android:layout_width="300dp"
android:layout_height="wrap_content" android:textSize="15dp"
android:layout_alignParentLeft="true" android:layout_below="#id/dialogtitle"
android:paddingLeft="8dp" />
<Button android:id="#+id/dialogbuttoninfo" android:layout_width="80dp"
android:layout_height="wrap_content" android:text="Doesn't care about margins"
android:layout_alignParentRight="true" android:layout_marginLeft="128dp" />
</RelativeLayout>
Padding works but only moves the text inside the button. Any suggestions?
This seems crappy but have you tried putting it all in a LinearLayout instead? or perhaps removing android:orientation="horizontal". I dont think RelativeLayout cares about orientation from what I've seen. Also I think, but might be wrong, that if you do a LinearLayout then you won't need to have android:layout_alignParentLeft="true" in there either.
After cleaning it up a bit (sorry but its so hard to read when its compressed as it was in the question) you also didn't state where the last TextView , dialogbuttoninfo was supposed to be relative to everything else, I think you have to do that for Relative layouts to behave properly, I've had some squirrely things happen.
<?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="match_parent"
android:orientation="vertical"
android:background="#99000000">
<TextView
android:id="#+id/dialogtitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Some text" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/dialogtext"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:textSize="15dp"
android:layout_alignParentLeft="true"
android:paddingLeft="8dp" />
<Button
android:id="#+id/dialogbuttoninfo"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="Doesn't care about margins"
android:layout_alignParentRight="true"
android:layout_marginLeft="128dp" />
</LinearLayout>
</LinearLayout>
You may need to align the left of the button against something before the margin has real meaning.

Categories

Resources