I am trying to align a TextInputLayout and 2 imageViews in a Linear layout with horizontal orientation. For some reason, I am having difficulties positioning them in a horizontal layout. This is what I have tried so far.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3.0">
<android.support.design.widget.TextInputLayout
android:id="#+id/longDescriptionTextInputLayout"
style="#style/textfieldbox"
app:hintTextAppearance="#style/TextAppearence.App.TextInputLayout"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/longDescriptionTextInputEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#null"
android:layout_weight="1"
android:drawablePadding="15dp"
android:textColor="#color/textInputEditTextColor"
android:drawableStart="#drawable/ic_attach_file_black_24dp"
android:drawableTint="#color/Gallery"
android:hint="#string/longDesc"
android:inputType="textEmailAddress"
tools:ignore="MissingPrefix,UnusedAttribute" />
</android.support.design.widget.TextInputLayout>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:src="#drawable/ic_mic_black_24dp" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:src="#drawable/ic_volume_up_black_48dp"/>
</LinearLayout>
I am unable to figure out what I am doing wrong. Any help is appreciated. Attaching an image of the output. The white space in the front is the TextInputEditText.
There are two problems in your layout.
The first is that your TextInputEditText includes these two attributes:
android:layout_width="0dp"
android:layout_weight="1"
This is the generally-accepted pattern for using layout_weight, but weight only makes sense on direct children of the LinearLayout, and since this view is wrapped in a TextInputLayout they are not appropriate here. Change those to:
android:layout_width="match_parent"
The second problem is that you are specifying android:weightSum="3.0" on your LinearLayout, but its direct children only have weights that add up to 2.0. Either change the value of that attribute to 2.0 or delete the weightSum attr altogether (it really only causes problems).
Related
If I have two textviews vertically aligned where either the one OR the other could contain the longer text, how can I vertically align these so their background image LOOKS like it is one complete background for both TextViews (so one big box no matter which of those views contains the longer text)
Reason is that I use the textviews on top of a picture but need to shadow them in case the picture has the same color as the textview
UPDATE:
As the comments suggested I now used a linear layout like this, but now there is a very small gap between the textviews that wasn't there with ConstraintLayout. Any idea how to fix?
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginEnd="10dp">
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_overlay_top"
android:paddingStart="6dp"
android:paddingTop="6dp"
android:paddingEnd="6dp"
android:text="TextView1"
android:textColor="?colorOnPrimary"
android:textSize="13sp"/>
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:background="#drawable/bg_overlay_bottom"
android:paddingStart="6dp"
android:paddingEnd="6dp"
android:paddingBottom="6dp"
android:text="TextVie2 long"
android:textColor="?attr/colorOnPrimary"
android:textSize="16sp"
android:textStyle="bold"/>
</androidx.appcompat.widget.LinearLayoutCompat>
UPDATE 2
I now used a complete image as background of the linear layout, but sadly this solution does not work either, the linear layout only constraints to the lower text view, which means if the lower is shorter then the upper, the upper one gets truncated
Here is how you can get the two TextViews to have the same width regardless of which view has the longer text.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:text="Here is some long, long text."
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/barrierEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_min="wrap" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="Bottom"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="#id/barrierEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintWidth_min="wrap" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrierEnd"
android:layout_width="0dp"
android:layout_height="0dp"
app:barrierDirection="end"
app:constraint_referenced_ids="textView1,textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
This solution was borrowed from here. I took a stab at explaining why it works here.
For one big blue background as you said, you can use a vertical LinearLayout as a container of both TextViews and set its background color to blue.
If you are using a vertical LinearLayout, you could set android:layout_width (of the TextViews) to "match_parent" instead of "wrap_content".
Edit: Into the outer vertical LinearLayout put an another vertical LinearLayout with android:layout_width="wrap_content" and the 2 TextViews inside with android:layout_width="match_parent"
If you're using constraint layout then
app:layout_constraintStart_toStartOf
would be working for you , also using baseline would be very useful too.
i want to set text alignment to right when my TextView is set to layout_weight
my application must be support old versions of android such as Android 2.2. this below layout does not set correctly alignment to right TextView:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:id="#+id/loading"
>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".42"/>
<TextView
android:id="#+id/response_text"
android:layout_width="0dp"
android:layout_height="43dp"
android:layout_weight="6"
android:textSize="18sp"
android:layout_gravity="right"
android:text="#string/please_wait_to_response_from_server"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".42"/>
</LinearLayout>
and i'm checking this ways: set layout_width to fill_parent, match_parent, wrap_contect
Using "weight" and "layout_gravity" won't work 'cause you are telling the layout 2 different things. If you want your text to be right aligned, you can use "gravity" instead of "layout_gravity".
android:gravity="right"
Hope it helps.
I have two TextView in a LinearLayout, I want to align them one to the left (or center) and one to right in the same line. How to do this? I try to use gravity but they ignore it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="TextView" />
</LinearLayout>
The easiest way is to change your LinearLayout to a RelativeLayout.
You can use android:layout_alignParentRight="true" and android:layout_alignParentLeft="true". Or to center it use android:layout_centerInParent="true"
See here why gravity won't work
You are using gravity instead of layout_gravity which is what you would want. This post should help clarify the difference
The docs show you available properties.
android:gravity is used to set the gravity of content inside the view. However, in your case the width is wrap_content, hence the content has nowhere to go in the text views.
Use a RelativeLayout with layout_width as match_parent. Then use the android:layout_alignParentLeft="true" and android:layout_alignParentRight="true"with the textViews.
Use it with or without the android:gravity in the second textview and try .
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right"
android:layout_weight="1" />
</LinearLayout>
If LinearLayout is Vertical, you can put only an object per line.
You can use RelativeLayout, or else put in a line a LinearLayout Horizontal, that contains textviews
ex.
<LinearLayout vertical>
<LinearLayout horizontal>
<textview 1></>
<textview 2></>
</LinearLayout>
</LinearLayout>
I fixed all my issues with GridLayout...is the best thing bcos u don't need to align anithing to nothing...just put what u want into the matrix (row,column)...and this will allow you to visualize all the field in exactly wrap content of your datas also in landscape is perfect!
I have a LinearLayout that contains a lot of TextViews and ImageButtons, I want to align some of these elements to right, i had a look at this and this but i can't use their tips as i can't change the orientation and can't make android.gravity:right as i don't want to align all the elements to right, also i can't use nested layouts or but the desired elements into RelativeLayout because that shifts the rest of elements to the left and i want them at the center.
this is my code:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.15"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:gravity="center"
android:background="#drawable/media_mediabar"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/move_backward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:clickable="true"
android:scaleType="centerInside"
android:src="#drawable/media_button_rewind"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:tag="released"/>
<ImageButton
android:id="#+id/rmeote_mines"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:clickable="true"
android:scaleType="centerInside"
android:src="#drawable/remote_minus" />
<TextView
android:id="#+id/remote_plus_minus"
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp" />
.
.
.<!.. some other elements ..!>
</LinearLayout>
The desired result:
The simplest solution would be using empty views with weights as separators.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- Left button -->
<Button ...
... />
<View android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!-- Middle button -->
<Button ...
... />
<View android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!-- Right button -->
<Button ...
... />
</LinearLayout>
The separator views can be made invisible as an optimization, because they don't draw anything and are used only for layout. You can tweak the actual 'layout_weight' values to get the desired layout. Starting from API level 14 you can use instances of Space as separators which will improve performance and readability (there is also a version of Space in the support library).
For such a complex layout you'd be way better of using RelativeLayout instead.
i can't use nested layouts
Then you can't solve your problem.
Nested layout are the heart of Android layout, to create such complex view that you desire, I think you must use nested layouts.
#Ridcully suggested you to use RelativeLayout, this is a good idea. You can combine it with few linear layouts and you be fine.
I think that RelativeLayout should be your base layout.
I have 8 buttons inside a LinearLayout and I don't want any space betwen them. I have tried set all padding and margins to 0 and nothing.
Any solutions?
You could use negative margins but could be bad practice. Most 9-patch PNGs have transparent areas around the visible ones, that could be why it looks like you have margins. Try turning-on Show layout boundaries to investigate. It's under Settings > Developer Options.
Try this code. Use layout_weight=1 while, layout_width="0dp".
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:padding="3dp"
android:background="#color/green">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/green"
android:text="Submit"
android:textColor="#color/white"
android:layout_weight="1"
android:id="#+id/submitQuestionnaireButton"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/white"
android:text="Cancel"
android:textColor="#color/green"
android:layout_weight="1"
android:id="#+id/cancelQuestionnaireButton"/>
</LinearLayout>