I'd like to have an EditText and an ImageView next to each other; the ImageView has a fixed width, the EditText should take the rest.
I try to do it via
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText android:id="#+id/edit_select_stop" android:layout_width="fill_parent" android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView android:layout_gravity="center_vertical"
android:layout_width="39dp" android:minWidth="39dp"
android:layout_height="wrap_content" android:src="#drawable/icon_time"
android:id="#+id/image_select_time"></ImageView>
</LinearLayout>
</LinearLayout>
But now, the EditText takes the whole width and covers the Image.
How can I achieve that EditText "ends" before the ImageView?
You can also use RelativeLayout to accomplish it. Simply assign the properties
android:layout_toLeftOf="#+id/id_of_your_imageview"
android:layout_width="fill_parent"
to the EditText and
android:layout_alignParentRight="true"
to your ImageView while keeping the fixed value of the width.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/widget32"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<EditText
android:id="#+id/edit_select_stop"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
>
</EditText>
<ImageView
android:id="#+id/image_select_time"
android:layout_width="39dp"
android:layout_height="wrap_content"
android:layout_weight="1"
>
</ImageView>
</LinearLayout>
Well I dont recommend to go for the relative layout..
for the code (2nd one) seems good but I'd like to add that you should set the gravity android:gravity="center_vertical"
This aligns the components and makes it look good for sure
Related
I'm new to android development and have some doubts with regards to layout design. I have the following codes but its not working as i wanted. I would like to have the image view display a photo i have taken and below it, a textbox for user to input data. However, at this moment, the image takes up the whole screen and I could not locate my textbox. Please kindly advice. Thanks!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/linear">
<ImageView android:id="#+id/imageView1"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:contentDescription="#string/desc"/>
<EditText
android:id="#+id/editTextSimple1"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<requestFocus />
</EditText>
</LinearLayout>
Use RelativeLayout instead of LinearLayout and USe below xml code instead of your xml code, it will solve your problem.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linear"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/editTextSimple1"
android:contentDescription="desc" />
<EditText
android:id="#+id/editTextSimple1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<requestFocus />
</EditText>
</RelativeLayout>
Change ImageView layout height to layout_height="wrap_content"
With layout_height="fill_parent", the image will take all the space.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/linear">
<ImageView android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/desc"/>
<EditText
android:id="#+id/editTextSimple1"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<requestFocus />
</EditText>
</LinearLayout>
The problem is
android:layout_height ="fill _parent"
This makes it occupy the whole parent space I.e. The whole screen
Either set the height to a specific value of dp,px etc. Or use
android:layout_height="wrap_content"
If view is small enough to fit on screen
<ImageView android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/desc"/>
Add weight to your ImageView like this. It will work.
I have two edittext views. One of them has only one line, its the title. But the other one should fill the linearlayout to the end, but it doesn't.
I updated the code so this is my whole xml for this app. I hope someone can find what's wrong. The part that i want to form like this is the part inside the LinearLayout named addView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#ffffff">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<Button
android:id="#+id/addButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/addbuttonstyle"
android:layout_weight="20"/>
<ImageView
android:id="#+id/titleView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/titleview"
android:layout_weight="60"/>
<Button
android:id="#+id/orderButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/orderbuttonstyle"
android:layout_weight="20"/>
</LinearLayout>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/addView"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<EditText
android:id="#+id/textBoxTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="note title"
android:singleLine="true"
/>
<EditText
android:id="#+id/textBoxContent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:hint="content"
/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/backgroundLayout"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background"
/>
</FrameLayout>
I changed textBoxTitle's height to wrap_content and I see this:
Is this what you were hoping for? Also if you want content to appear in the upper-left corner use this attribute:
<EditText
...
android:gravity="top"
/>
So i found what was wrong.
I needed to set layout_height (of the textBoxContent view) to 0dp and layout_weight (of the textBoxContent view) to 1.
The first view should have android:layout_width="wrap_content"
I'm trying to center an edittext vertically and horizontally in a linear layout, but it is not working. Very simple problem really.
<?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:background="#drawable/login">
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#drawable/loginbutton"
android:text="Username"
android:layout_gravity="center"
android:textSize="25dp"
android:gravity="center_horizontal|center_vertical"
android:textColor="#000000"
android:layout_margin="10dp"
android:id="#+id/username">
</EditText>
I'll try changing to a relativelayout in the mean time.
LinearLayout do not support centering in the direction it stacks items as far as I know. Unless the LinearLayout is crucial (which in your case it shouldn't be, as you also need the centering), I would recommend you switch to a RelativeLayout.
With a RelativeLayout, you can set the attribute android:layout_centerInParent="true" on the EditText to get it centred.
Using gravity affects the gravity of the contents of said UI item, this means (in this case) that the text inside the EditText would be centered. In order to center the UI item itself you need to define layout_gravity as this is the gravity a UI item holds within his parent. The code posted by the OP will do the horizontal center but not the vertical center.
As an alternative you can use RelativeLayout
<?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="fill_parent"
android:background="#drawable/login"
android:orientation="vertical" >
<EditText
android:id="#+id/username"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/loginbutton"
android:layout_centerInParent="true"
android:text="Username"
android:textColor="#000000"
android:textSize="25dp" >
</EditText>
</RelativeLayout>
It is very simple. Add android:gravity="center" with the linear layout.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
>
Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/login"
android:layout_centerVertical="true"
android:layout_centerInParent="true">
I want to make my TextView vertically scrollable. I have read "Making TextView Scrollable in Android" but since I don't know the size of the screen of the final device, I can't know which value should be set for maximum lines.
Is there any other way, so it gets the scrolling for any screen size?
My XML looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:layout_weight="1.0">
<TextView
android:id="#+id/consola"
android:layout_width="fill_parent"
android:layout_height="match_parent"/>
</ScrollView>
<EditText
android:id="#+id/comando"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.0"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.0">
<Button
android:text="Conectar"
android:id="#+id/boton_conectar"
android:layout_width="wrap_content"
android:layout_weight="0.5"
android:layout_height="wrap_content">
</Button>
<Button
android:text="Enviar"
android:id="#+id/boton_enviar"
android:layout_width="wrap_content"
android:layout_weight="0.5"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</LinearLayout>
Look, here the structure of my XML layout with scroll:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertical"
android:visibility="visible">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
.....
//your sub-widgets
.....
</LinearLayout>
</ScrollView>
As for me, works fine.
If you do not know number of lines (moreover, it could vary if soft input method are shown or not), you should use RelativeLayout to place you widget like TextView. And then connect both (it's critical, not one but both) top and bottom edges of it to parent withandroid:layout_alignParentTop and android:layout_alignParentBottom attibutes, or neighbors with android:layout_above and android:layout_below attributes.
After both sides are connected to other widgets, android will recalculate size of TextView and scroller properly, even if you change orientation or show/hide soft keyboard.
ScrollView is only allowed to have one sub widget.
You should put the linearlayout inside of the scroll view. and set the textview inside of the linear layout.
Put the TextView inside ScrollView with height = MATCH_PARENT
try:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fillViewport="true"
android:layout_weight="1.0">
<TextView
android:id="#+id/consola"
android:layout_width="fill_parent"
android:layout_height="match_parent"/>
</ScrollView>
<EditText
android:id="#+id/comando"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:text="Conectar"
android:id="#+id/boton_conectar"
android:layout_width="wrap_content"
android:layout_weight="0.5"
android:layout_height="wrap_content">
</Button>
<Button
android:text="Enviar"
android:id="#+id/boton_enviar"
android:layout_width="wrap_content"
android:layout_weight="0.5"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</LinearLayout>
I want something like this:
But I don't know how to resize the TextView so it gets all the available space on screen which is not ocuppied by the EditText or the Buttons. May I do it in the code, or in the xml?
At XML I tried putting the TextView into a FrameLayout, but it makes no difference. Currently looks like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/consola"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars = "vertical"
android:text="#string/hello"/>
</FrameLayout>
<EditText
android:id="#+id/comando"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:text="Conectar"
android:id="#+id/boton_conectar"
android:layout_width="wrap_content"
android:layout_weight="0.5"
android:layout_height="wrap_content">
</Button>
<Button
android:text="Enviar"
android:id="#+id/boton_enviar"
android:layout_width="wrap_content"
android:layout_weight="0.5"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</LinearLayout>
At the code I'm just checking if the Buttons are pushed with Listeners. One of them, when pushed, gets the text at the EditText, and appends it to the TextView. It works, and TextView gets higher, while EditText and Buttons downs one line. If I go on appending lines, finaly EditText and Buttons get out of the screen. I want to avoid this behaviour, and accomplish to get this 3 widgets sticked to the bottom of the screen.
Use the android:layout_weight=1 attribute, like the buttons on the bottom of the form. That will assign most of the space to it and anything that's left to the rest of the elements.
It's all about the weight. This should give you what you want:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:text="TextView"
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</TextView>
<EditText android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<requestFocus></requestFocus>
</EditText>
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:text="Button"
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_width="0dp">
</Button>
<Button android:text="Button"
android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
</Button>
</LinearLayout>
</LinearLayout>
(Side note: When using weight, setting the corresponding height/width to 0dp sometimes gets around some weird behavior.)
Try android:fillViewport="true".