I have a ListView with elements like this:
ListView item
This is my component tree:
Component Tree
I will change those two buttons with images, but how I could make that TextView would fill whole width? Because now it has a width specified in dp.
No need to use extra LinearLayout.
Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:background="#e0e0e0">
<Button
android:id="#+id/deleteEexerciseBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Delete"/>
<Button
android:id="#+id/editEexerciseBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/deleteEexerciseBtn"
android:text="Edit"/>
<TextView
android:id="#+id/exerciseName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/editEexerciseBtn"
android:layout_marginRight="8dp"
android:layout_centerVertical="true"
android:ellipsize="end"
android:maxLines="1"
android:text="This is a Large text with fill width"
android:textSize="14sp"
android:textColor="#000000"/>
</RelativeLayout>
OUTPUT
You have to set android:width="match_parent" for your TextView.
However, you could also solve this with setting layout_weight attribute for each LinearLayout and it will split your views evenly according to your weight value.
Read here more: Layout weight
Another option is to use RelativeLayout only, where you have free-hands on designing and placing your views within one single Layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_centerVertical="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Text view"
android:textSize="20sp" />
<Button
android:id="#+id/deleteBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="DELETE" />
<Button
android:id="#+id/editBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/deleteBtn"
android:text="EDIT" />
</RelativeLayout>
Related
I have a ListView with TextView and Button each row this is my layout content
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/desc"
android:layout_marginTop="10dp"
android:layout_marginLeft="15dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right">
<Button
android:id="#+id/button"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="15dp" />
</LinearLayout>
</FrameLayout>
This is a screenshot which describe the error: http://it.tinypic.com/r/a47ho9/9
I would not use a FrameLayout for the ListView row because it is difficult to position items in a FrameLayout. Just use one LinearLayout with android:orientation="horizontal" and put your TextView and Button inside that.
It's easier to use a RelativeLayout to place your widgets correctly I would say. And I would also recommend to try flattening your layout. It means that you should not nest so many layouts. It is a pretty simple thing to do in this case. You want to have as little nested layouts as possible when you build your ui to optimisee performance.
Try something like this instead, might not be exactly what you want but maybe helps you.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background=""
android:padding="8dp">
<TextView
android:id="#+id/desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Medium text"
android:layout_centerVertical="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_toLeftOf="#+id/button"/>
<Button
android:id="#+id/button"
android:layout_width="70dp"
android:text="button"
android:layout_centerVertical="true"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
You can read more about optimising your layout here https://developer.android.com/training/improving-layouts/optimizing-layout.html
I am trying to align a TextView to be centered in a relative layout but also to the right of an ImageView. I would like it to look like this.
[-(image)-----some text here------------]
I'm able to do this with the code below, but if the text becomes too long it overlaps the image.
<?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="wrap_content"
android:orientation="horizontal"
android:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White">
<ImageView
android:id="#+id/navMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon"
android:layout_marginEnd="#dimen/small_padding"
android:contentDescription="#string/abc_search_hint"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/actionBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:layout_centerInParent="true" />
</RelativeLayout>
I have tried aligning the TextView to the right of the ImageView but it stops centering in parent if I do that. Any help is appreciated
You could try something like this. I used a radio group instead of a linear layout for this but it should still work. Have a the linear layout horizontal as you already do and then make the layout gravity center then just put the image first then the text view
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:paddingTop="20dp">
<RadioButton
android:id="#+id/radio_student"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/checkbox_student"
android:onClick="onRadioButtonClicked"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"/>
<RadioButton
android:id="#+id/radio_teacher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/checkbox_teacher"
android:onClick="onRadioButtonClicked"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"/>
</RadioGroup>
EDIT:
I don't know if the margin attributes for the buttons I have work on text views but padding left on the text might work
try this:
<?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="wrap_content"
android:orientation="horizontal"
android:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White">
<ImageView
android:id="#+id/navMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon"
android:layout_marginEnd="#dimen/small_padding"
android:contentDescription="#string/abc_search_hint"
android:layout_alignParentStart="`enter code here`true" />
<TextView
android:id="#+id/actionBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:layout_toRightOf="#+id/navMenu"
android:alignParentRight="true"
android:gravity="center" />
</RelativeLayout>
You could (and should, for performance sake), use a compound drawable for the TextView (and get rid of the ImageView)
You want the image to stay on the Left part of the TextView, so use android:drawableLeft:
<?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="wrap_content"
android:paddingTop="#dimen/small_padding"
android:paddingBottom="#dimen/small_padding"
android:background="#color/White"
>
<TextView
android:id="#+id/actionBarTitle"
android:drawableLeft="#drawable/home_icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/profile"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#color/Black"
android:maxLines="1"
android:ellipsize="end"
android:contentDescription="#string/title_activity_connect"
android:centerInParent="true"
android:gravity="center"
/>
</RelativeLayout>
Is it possible to align a view in XML in a RelativeLayout centered horizontal or vertical according another already existing view.
For example: lets say there is something like this:
The second text view should be displayed centered below the first text view:
<?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" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="72dp"
android:text="dynamic text" />
<TextView
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView"
android:layout_marginLeft="43dp" <!-- Is there a rule to center it? -->
android:text="centered below text 1" />
</RelativeLayout>
Is is possible to implement something like that in XML? Is there a rule that i have missed yet? I do not want to calculate the position programmatically
I have a much better solution than the accepted one. NO EXTRA NESTING! You can do this by combining two attributes on the smaller view. if you are centering horizontally you can use both align_start & align_end to the bigger view. Make sure the text gravity is centered btw "android:gravity="center". For Vertical alignment use both align_top & align_bottom. below is the modified implementation of your layout.
<?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:paddingLeft="43dp" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/second"
android:layout_alignEnd="#+id/second"
android:gravity="center"
android:text="dynamic text" />
<TextView
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView"
android:gravity="center"
android:text="centered below text 1" />
</RelativeLayout>
No need for unnecessary nesting like the accepted answer.
Use a separate parent layout for those views and add it in your main layout(can contain other things if you have)
<?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" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_marginLeft = "30dp">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dynamic text" />
<TextView
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="centered below text 1" />
</LinearLayout>
...
...
other veiws go here
...
</RelativeLayout>
Use the followings which suits you
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
Correct solution is to use ConstraintLayout
I tried to align a textview horizontally below a button in a RelativeLayout but it was not possible as align_bottom and layout_below didn't play well together. Finally i picked up constraintLayout and tried the same logic and it worked like a charm. here is the code below.
<android.support.constraint.ConstraintLayout
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:clipChildren="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/episode_recording_header_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.399" />
<TextView
android:id="#+id/button_selected_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="12sp"
android:text="text which is exactly center aligned w.r.t the Button above"
app:layout_constraintEnd_toEndOf="#+id/episode_recording_header_stop"
app:layout_constraintStart_toStartOf="#+id/episode_recording_header_stop"
app:layout_constraintTop_toBottomOf="#+id/episode_recording_header_stop"
/>
</android.support.constraint.ConstraintLayout>
The final output is attached below
Do this->
<?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" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="dynamic text" />
<TextView
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true" <!-- Is there a rule to center it? -->
android:text="centered below text 1" />
</RelativeLayout>
I found the solution:
Wrap the content into another RelativeLayout and then you can place this LayoutWrapper wherever you want:
<?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" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="58dp"
android:layout_marginTop="58dp" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:text="dynamic text" />
<TextView
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_centerInParent="true"
android:text="centered below text 1" />
</RelativeLayout>
</RelativeLayout>
If you need to use RelativeLayout please don't use the nested layouts as far as possible. Today we have many other efficient cases to solve your task. But with use of the old faithful RelativeLayout the better way is to use attributes android:layout_alignTop, android:layout_alignBottom and android:gravity. For example, you would like to align TextView according to EditText vertically.
<RelativeLayout ...>
...
<TextView
android:id="#+id/tv1"
...
android:gravity="center"
android:layout_alignTop="#+id/edt1"
android:layout_alignBottom="#id/edt1"/>
<EditText
android:id="#+id/edt1"
...
android:layout_toRightOf="#id/tv1"/>
</RelativeLayout>
In the same way you can use android:layout_alignLeft, android:layout_alignRight and android:gravity or android:layout_alignStart, android:layout_alignEnd and android:gravity horizontally.
Why my TextView doesn't go right?
Update: Well, now I don't just need to set TextView to the right. Now it is very interesting why layout_gravity doesn't work as expected, namely - set the View to the position inside it parent container.
<?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:minHeight="?android:attr/listPreferredItemHeight"
style="#style/activated_item"
android:orientation="horizontal">
<CheckBox
android:id="#+id/star"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="8dp"
style="?android:attr/starStyle"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginLeft="8dp"
android:layout_gravity="right" //////// HERE I AM
android:textStyle="bold"
android:textColor="#color/item_text_color"/>
</LinearLayout>
Try to use gravity instead of layout_gravity.
I have found 2 solutions to that:
Set android:orientation="vertical".
Use FrameLayout instead of LinearLayout as the parent for your text/checkbox widgets. It is not primary usage of FrameLayout but that advice is also noted in Android documentation:
... You can, however, add multiple children to a
FrameLayout and control their position within the FrameLayout by
assigning gravity to each child, using the android:layout_gravity
attribute.
Because you set orientation to horizontal, which means you cannot manually change horizontal position of your child views.
try this...
<?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="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
style="#style/activated_item"
android:orientation="horizontal">
<CheckBox
android:id="#+id/star"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="8dp"
style="?android:attr/starStyle"/>
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginLeft="40dp"
android:gravity="right" //////// HERE I AM
android:textStyle="bold"
android:textColor="#color/item_text_color"/>
you could use weight also try this one
<?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:minHeight="?android:attr/listPreferredItemHeight"
android:orientation="horizontal" >
<CheckBox
android:id="#+id/star"
style="?android:attr/starStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="8dp"
android:layout_weight="1" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="8dp"
android:text="TEST"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
</LinearLayout>
the gravity is just to center the text ,what makes it go right is the weight
I need my view to be placed in the center and it's width is not a match parent or wrap content but a size of particular percentage of a screen the app is running on. To have a more flexible layout I didn't set its size using dimensions, but defined weights for the elements to have a required size of the main one. In order to do so I've inserted two additional LinearLayouts and defined weights for them. I don't think this is the best solution to increase Views amount within the XML. Can you guys let me know the more efficient way of doing that?
<?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:background="#drawable/right_back"
android:orientation="horizontal"
android:gravity="center">
<!-- The first one I think which is redundant -->
<LinearLayout
android:layout_weight="25"
android:layout_width="0dip"
android:layout_height="wrap_content"/>
<!-- Main view I need to be of a required size on each screen size -->
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:background="#drawable/layout_round_corners"
android:orientation="vertical"
android:layout_weight="50"
android:padding="20dip">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/welcome_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/text_color"
android:layout_gravity="center_horizontal"/>
<EditText
android:id="#+id/edt_firsttimeactivity_first_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/password"
android:password="true"
android:singleLine="true"/>
<EditText
android:id="#+id/edt_firsttimeactivity_second_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/repeat_new_password_again"
android:password="true"
android:singleLine="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="onButtonClick"
android:text="#string/create_account_for_me"/>
</LinearLayout>
<!-- The second one I think which is redundant -->
<LinearLayout
android:layout_weight="25"
android:layout_width="0dip"
android:layout_height="wrap_content"></LinearLayout>
</LinearLayout>
This is how you should write the 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="horizontal"
android:background="#drawable/right_back"
android:weightSum="1"
android:gravity="center">
<!-- Main view I need to be of a required size on each screen size -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/layout_round_corners"
android:layout_weight=".5"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/welcome_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/text_color"
android:layout_gravity="center_horizontal"/>
<EditText
android:id="#+id/edt_firsttimeactivity_first_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/password"
android:password="true"
android:singleLine="true"/>
<EditText
android:id="#+id/edt_firsttimeactivity_second_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/repeat_new_password_again"
android:password="true"
android:singleLine="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="onButtonClick"
android:text="#string/create_account_for_me"/>
</LinearLayout>
</LinearLayout>
Try this. You can change the layout_weight of the 2nd LinearLayout to make it look big or small as you like.
I believe the problem is that you haven't defined a weightSum. You should add android:weightSum="100" (for example) to your outermost LinearLayout, and then divide that sum however you want into your inner layouts.
Edit: If I understood the issue correctly, I think you should be able to solve the problem by simply using android:paddingLeft and android:paddingRight for your "main view". You could also try android:layout_marginLeft and android:layout_marginRight. Of course, leaving the height as fill_parent in this case. Hope that helps.