I am trying to build a UI, where in I have a linear layout which has been defined in the XML.
As per the user's input, I need to add some TextViews to this linear layout. I am able to do this.
My actual problem is, when I have more text views, they are stacked next to each other and some of text views text are hidden or stretched vertically as shown in the image below.
I would like to use the whole width of the linear layout and if the text view can not fit in this row, it should be put in a new row or below the first text view.. I would like the display to be as below.
Following is my Linear layout configuration in XML:
<RelativeLayout
android:id="#+id/RL1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:paddingBottom="5dip"
android:paddingTop="5dip" >
<TextView
android:id="#+id/text1"
android:layout_width="85dip"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="left"
android:text="Lable 1"
android:textColor="#999999" />
<LinearLayout
android:id="#+id/LL1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/button1"
android:layout_toRightOf="#+id/text1"
android:gravity="left|center_vertical"
android:orientation="horizontal"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:paddingTop="3dip" >
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="30dip"
android:layout_height="30dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginTop="2dip"
android:background="#drawable/plus"
android:clickable="true"
android:focusable="true"
android:paddingTop="5dip" />
</RelativeLayout>
Can any one please help me in how to realign the same in java code.
I would Like to suggest you about how you can provide equal sizes to all your views in Linear Layout,you can do that by using weight property in the XML file i.e., android:weight for that particular View and when you use this property you should give width=0dp or 0dip.I think this will solve your problem easily.
Please I suggest you first you take full Knowledge of how to use this property in the following Link:-Weight property with an example
Please see:
How to wrap Image buttons in a horizontal linear layout?
How can I do something like a FlowLayout in Android?
You also might search github for FlowLayout.java.
An alternative approach is given in:
Android - multi-line linear layout
In addition, there's a class that adds images into a TextView:
https://stackoverflow.com/a/21250752/755804
which is not the same as wrapping views in the general case, but sometimes may do the job.
i'm korean.
so i don't speak English well, but i'll help you.
first, Create 'item.xml' with four text boxes.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/set_checkbox"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text2"
android:text="0"
android:layout_weight="1"
android:gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text3"
android:text="0"
android:layout_weight="4"
android:gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text4"
android:text="0"
android:layout_weight="4"
android:gravity="center"/>
</LinearLayout>
second, Create 'main.xml' where 'item.xml' will be dynamically generated.
'orientation' helps to create one line at a time.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
Finally, You can create four TextView per line using the code below.
LinearLayout layout = (LinearLayout)findViewById(R.id.mainxml);
LinearLayout item = (LinearLayout)layout.inflate(this.getContext(), R.layout.itemxml, null);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
item.setLayoutParams(params);
CheckBox cb = item.findViewById(R.id.set_checkbox);
TextView text2 = item.findViewById(R.id.text2);
TextView text3 = item.findViewById(R.id.text3);
TextView text4 = item.findViewById(R.id.text4);
cb.setChecked(true);
text2.setText("text2");
text3.setText("text3");
text4.setText("text3");
layout.addView(item);
The 10th loop is shown in the following picture.
enter image description here
Related
I have the following Android 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:paddingBottom="16dp"
android:orientation="vertical" >
<TextView
android:id="#+id/slideTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:padding="#dimen/px20"
android:text="#string/login_message"
android:textSize="#dimen/px25"
android:textStyle="bold" />
<TextView
android:id="#+id/slideDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/password"
android:drawablePadding="#dimen/px20"
android:drawableStart="#drawable/password"
android:padding="#dimen/px20"
android:text="#string/login_message_body"
android:textSize="#dimen/px20" />
<TextView
android:id="#+id/swipeMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="" />
</RelativeLayout>
But all the elements are positioned at the top of the screen one on top of the other, like if they didn't occupy any space.
That's not what what it seems to happen in the RelativeLayout documentation, where all elements are vertically positioned one below the other.
What's going on here?
So you need to use the id of the other components to align then properly.
For example the TextView with the id #+id/slideDescription should also have
android:layout_below="#+id/slideTitle" as one of the properties of the xml.
And the TextView with the id #+id/swipeMessage should also have
android:layout_below="#+id/slideDescription" as one of the properties of the xml.
In order to place one view below another in RelativeLayout you have to use layout_below property and set the ID of View you want to be above the specified one. But actually in order to place views vertically below each other it is more convenient to use LinearLayout with orientation set to vertical
layout_below is missed in the above xml code.I replaced the code with that please use that.
In Relative layout elemnets will be arranged relative to other elements in order to do this we should use id values of individual view elments
android:layout_below="#id/slideTitle" should be placed in description text view
android:layout_below="#id/slideDescription" should be placed in message text view
in order to get the output you desired please use the below code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="16dp" >
<TextView
android:id="#+id/slideTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:padding="#dimen/px20"
android:text="#string/login_message"
android:textSize="#dimen/px25"
android:textStyle="bold" />
<TextView
android:id="#+id/slideDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/slideTitle"
android:drawableLeft="#drawable/password"
android:drawablePadding="#dimen/px20"
android:drawableStart="#drawable/password"
android:padding="#dimen/px20"
android:text="#string/login_message_body"
android:textSize="#dimen/px20" />
<TextView
android:id="#+id/swipeMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/slideDescription"
android:text="" />
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 want to add a button on right of a textview and if textview grows,button would be still there.i used FrameLayout or RelativeLayout but they didn't work,please help me.
a layout like this image http://www.8pic.ir/images/97364937705465965477.png
Try with LinearLayout by giving orientation as horizontal.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:text="your text"
/>
<Button
android:id="#+id/button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:text="button" />
</LinearLayout>
It is not possible directly and it is not good practice also for Android development. Though if it is your requirement, then you can count lines and number of character in last line at run time and decide the position of your button by using either frame or relative layout.
In Android lay out how to create a TextView in leftside and two button on right side with same line.
Which layout is better to use for this layout Table Or Relative ?
You can use a LinearLayout to achieve this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_weight="1"
android:text="a text"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1">
</Button>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2">
</Button>
</LinearLayout>
Its is better to use Relative Layout for this kind of view. use android:layout_alignParentRight="true" to Align Right and android:layout_alignParentLeft="true" to Align Left. e.g
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp" >
<TextView
android:id="#+id/type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Large Text"
android:textColor="#76D4F7"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
The easiest would be to use a LinearLayout (orientation horizontal) as pointed out in the previous answer. You can also set the property under Layout Weight to 1 for each button and textview. Then set the layout width for all those object to 0. This will enable you to proportionally scale how much of the area is taken up horizontally by each object. So for example if you set the Layout Weight on the Textview to 2 and each button to 1, then the textview will take up 50% of the space horizontally (2/(2+1+1)). This makes it easier to scale the objects on different device and hopefully starts to address the question of which is the best layout to use in this case.
I have a RelativeLayout containing a pair of side-by-side buttons, which I want to be centered within the layout. I could just put the buttons in a LinearLayout and center that in the RelativeLayout, but I want to keep my xml as clean as possible.
Here's what I tried, this just puts the "apply" button in the center and the "undo" button to the left of it:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15sp">
<TextView
android:id="#+id/instructions"
android:text="#string/instructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15sp"
android:layout_centerHorizontal="true"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/apply"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/undo"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:gravity will align the content inside the view or layout it is used on.
android:layout_gravity will align the view or layout inside of his parent.
So adding
android:gravity="center"
to your RelativeLayout should do the trick...
Like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="15sp">
</RelativeLayout>
Here is an extension of BrainCrash's answer. It is a non nested option that groups and centers all three horizontally and vertically. In addition, it takes the top TextView and centers it horizontally across both buttons. If desired, you can then center the text within the TextView with android:gravity="center". I also removed the margins, added color, and set the RelativeLayout height to fill_parent to highlight the layout. Tested on API 11.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:background="#android:color/black"
>
<TextView
android:id="#+id/instructions"
android:text="TEST"
android:textSize="20sp"
android:background="#android:color/darker_gray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignLeft="#+id/undo"
android:layout_alignRight="#+id/apply"
android:gravity="center"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="APPLY"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="UNDO"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:layout_gravity="center"
will almost give what you're looking for.
Here is a combination of the above answer's that solved my specific situation:
Centering two separate labels within a layout that also includes a button in the left most position of the same layout (button, label, label, from left to right, where the labels are centered relative to the layout containing all three views - that is, the button doesn't push the labels off center).
I solved this by nesting two RelativeLayout's, where the outer most layout included the
Button and an Inner-RelativeLayout.
The Inner-RelativeLayout contained the two text labels (TextView's).
Here is a snippet that provides the details of how the centering and other layout stuff was done:
see: RelativeLayout Gravity not applied? and
Gravity and layout_gravity on Android
for the difference's between gravity and layout_gravity.
Tweak the paddingLeft on the btn_button1 Button to see that the TextView's do not move.
(My apologies to havexz for the downvotes. I was too hasty in thinking that just b/c your suggestions didn't solve the exact question being ask, that they do help to solve very similar situations (the answer here solves a very specific situation, and only the combination of all these answer's solved my problem. I tried upvoting, but it won't let me unless I edit the answer's, which I don't want to do.)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_outer"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:background="#FF0000FF">
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/btn_button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF00FF00"
android:text="<"
android:textSize="20sp"
android:paddingLeft="40dip"/>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FFFF00FF"
android:layout_centerInParent="true"
android:gravity="center">
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:text="Complaint #"
android:gravity="center"/>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:layout_toRightOf="#id/tv_text1"
android:gravity="center"/>
</RelativeLayout>
</RelativeLayout>
LinearLayout is a good option. Other than that there are options like create an invisible view and center that and then align left button to the left it and right on the right of it. BUT those are just work arounds.