I'm trying to get something like this: http://img202.imageshack.us/img202/552/layoutoy.png. I'm using this as a list item (technically as the group view of an ExpandableListView).
Here's the XML file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight">
<TextView
android:id="#+id/list_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end" />
<Button
android:id="#+id/list_item_button"
android:text="Click me!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/list_item_text" />
</RelativeLayout>
But this doesn't work. The Button doesn't wrap its contents, instead it uses all available horizontal space. The TextView does wrap its contents, but what I want it to do is to cut off when it overlaps the Button.
In other words, I want all the buttons to be of the same width, regardless of the amount of text in the textviews. Is this at all possible?
I think you should try it the other way round.
Make the TextView be to the left of the button. This way the Textview won't overlap the Button. If you want it to be cut of at the end of the line you have to constrain it to one line. At the moment it would just move the rest of the text to the next line.
This should do the trick:
<Button
android:id="#+id/list_item_button"
android:text="Click me!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<TextView
android:id="#+id/list_item_text"
android:text="veryveryveryveryveryveryveryveryveryverylong"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/list_item_button"
android:ellipsize="end" />
</RelativeLayout>
Before anyone tries the method shown above (with the RelativeLayout), you should use LinearLayout for this. The weights should be set correctly: the element that needs to take up the empty space has to have a weight of 1 and a width set to fill_parent, and the element that needs to keep its minimal size has to have a weight of 0 with a width of wrap_content.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight">
<TextView
android:id="#+id/list_item_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=1
android:ellipsize="end" />
<Button
android:id="#+id/list_item_button"
android:text="Click me!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=0/>
</LinearLayout>
Related
I apologize for this question may have been asked somewhere, but I'm not sure how to phrase it.
I have a ListView in my Android app and I want to align the content in each row so that each TextView is aligned with corresponding TextViews in rows below it (left, right, and center).
This picture is what I'm going for listview:
So, the left TextView is aligned all the way to the left and the right TextView is aligned all the way to the right. The center TextView is aligned such that it always "begins" at the same place (ie. it's position is not affected by the length of the left TextView).
How can I achieve this? Thanks a lot
use bellow like.. I have used first textview left, second center & third is right. You can change as your wish...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3">
<TextView
android:id="#+id/tv_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left|center_vertical|center_horizontal"
android:text="AAP 500" />
<TextView
android:id="#+id/tv_textview2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|center_vertical|center_horizontal"
android:text="85.65" />
<TextView
android:id="#+id/tv_textview3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right|center_vertical|center_horizontal"
android:text="-3.75(-3.34 %)" />
</LinearLayout>
You'll want to use a LinearLayout with horizontal orientation then apply a weight to each of the textviews inside of it. this will cause them to each take a certain fraction of the layout. You can start by giving them each a weight of 1 and adjusting from there. The right-most textview will also need a right justification on the text to match the picture.
You have to create custom listView in that your item_row_view.xml will look like 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"
android:orientation="vertical">
<TextView
android:id="#+id/tv_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:text="AAP 500"
android:textAlignment="center" />
<TextView
android:id="#+id/tv_textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="85.65"
android:textAlignment="center" />
<TextView
android:id="#+id/tv_textview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="-3.75(-3.34 %)"
android:textAlignment="center" />
</RelativeLayout>
this .xml will be the layout of the item in the RecycleView list, but the last two Buttons are overlaying
<?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:background="#Ffffff"
android:baselineAligned="false"
android:weightSum="1">
<LinearLayout android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:background="#drawable/favorite"
android:layout_marginRight="5dip">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="25dip"
android:layout_height="25dip"
android:background="#null"
android:src="#drawable/nofavorite"/>
</LinearLayout>
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/thumbnail"
android:layout_toRightOf="#+id/thumbnail"
android:text="Rihanna Love the way lie"
android:textColor="#040404"
android:typeface="sans"
android:textSize="15dip"
android:textStyle="bold"/>
<TextView
android:id="#+id/artist"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#343434"
android:textSize="10dip"
android:layout_toRightOf="#+id/thumbnail"
android:text="Just gona stand there and ..."
android:layout_below="#+id/text_view" />
<ImageButton android:layout_width="wrap_content"
android:id="#+id/update"
android:layout_height="wrap_content"
android:src="#drawable/nofavorite"
android:background="#null"
android:layout_alignRight="#+id/artist" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:id="#+id/delete"
android:src="#drawable/favorite"
android:layout_alignRight="#+id/artist"
/>
</RelativeLayout>
they should be in the end of the right, in the end the DELETE button and in the left of this button but in the right end of the screen the UPDATE button, i will bind something to this buttons later
and another question, how can i make a divider btw the items?
thank you =)
It is because you use layout_alignRight="#+id/artist" on both images which essentially align right edges of the 2 images with the right edge of the View with id artist. To achieve what you want, use layout_alignParentRight="true" on the DELETE button and layout_toLeftOf="#+id/delete" on the UPDATE button. By the way, why do you need layout_weightSum on the parent. It only works with LinearLayout.
For making divider between items, you can either use a background with the left (right) border on one of the items or put a view between them.
Your buttons need to have attributes setting their position relatively to each other. At the moment, the only indication regarding their position is:
android:layout_alignRight="#+id/artist"
That is not enough to place your components since you are using a RelativeLayout (which is good). I suggest you play around with the parameters using the visual editor in you IDE.
One thing to keep in mind is that the component described last in your XML file is the one which should have the position attributes relativ to the other component. So in your case, your DELETE button.
I am trying to have a button that has a small icon and text inside the button, the icon is sitting way to the left of the button, how can I move it closer to the text which is centered?
This is my XML for the button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/home_icon"
android:text="BACK"
android:id="#+id/button"
android:width="160dp"
android:height="70dp"
android:textStyle="bold" />
Unfortunately it is not possible to do with drawableLeft attribute. This attribute positions the image to the far left position (no matter where your text is).
You need to create your own button for this:
<LinearLayout
android:id="#+id/button"
style="?android:attr/buttonStyle"
android:layout_width="160dip"
android:layout_height="70dip"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BACK"
android:textColor="#android:color/black" />
</LinearLayout>
You can't move it closer. Your only option if you want to have them closer together is building your own button:
<RelativeLayout
android:id="#+id/rlButton"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_text"/>
<ImageView
android:id="#+id/ivLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/home_icon"
android:layout_toLeftOf="#id/tvText"/>
</RelativeLayout>
You can use a margin to control the distance between the TextView and ImageView. You can use it pretty much the same as a button:
RelativeLayour rlButton = (RelativeLayout) view.findViewById(R.id.rlButton);
rlButton.setOnClickListener(new OnClickListener() {
....
});
But of course you have to apply your button style to the RelativeLayout so it looks the same as a button.
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#android:drawable/btn_star_big_on"
android:text="Drawable left"/>
I have some FrameLayout to display overlapping images. Under this FrameLayout I want to display a standard button for some click-action.
To make my work easier, I thought, I can put a new Linear, or Relative, Layout under the FrameLayout - surely all in one LinearLayout.
But this method isn't working for me.
What is the best way to show my button under a whole FrameLayout without putting it in the Layout and managing his position programmaticaly?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/framelayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|left" >
<ImageView
android:id="#+id/coverimg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:maxHeight="100dp"
android:minHeight="130dp"
android:minWidth="130dp"
android:src="#drawable/cover_img" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:src="#android:drawable/ic_media_play" />
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Button" />
</LinearLayout>
</LinearLayout>
first to say:
your orientation of the first LinearLayout is wrong. You should use vertical instead of horizontel, cause it would show the button right of your images and not below.
second:
no nead to wrap the button into another LinearLayout, cause it's a sinlge item and attached to your first LinearLayout.
third:
to set the button on another 'place', give your top LinearLayout an ID like 'android:id="#+id/myLinear"' and then use following code:
LinearLayout myLinear = (LinearLayout)this.findViewById(R.id.myLinear);
LayoutParams lp = new LinearLayout.LayoutParams(Gravity.CENTER);
myLinear.setLayoutParams(lp);
maybe this will work to:
LinearLayout myLinear = (LinearLayout)this.findViewById(R.id.myLinear);
myLinear.setLayoutParams(new LinearLayout.LayoutParams(Gravity.CENTER));
Hope i could help you?
First you change Linear layout orientation to vertical, and second no need to use another
layout u can put button directly
Ex: android:orientation="vertical"
I have a multiLine EditText field that I'm defining within my layout for the row like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="320dp" android:layout_height="wrap_content"
android:background="#color/lightblue" android:focusable="false">
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginLeft="14dp"
android:layout_marginTop="4dp" android:layout_marginRight="14dp" android:focusable="false">
<TextView android:textSize="12dp" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:id="#+id/tvLabel"
android:width="80dp" android:textColor="#color/lbl_color_alt"
android:text="LABEL:" android:layout_marginRight="18dp"></TextView>
<EditText android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/etValue"
android:layout_toRightOf="#+id/tvLabel"
android:singleLine="false" android:gravity="top|left"
android:minLines="3"
android:inputType="textAutoCorrect|textCapSentences|textMultiLine"
android:imeOptions="normal" android:textSize="12dp"
/>
</RelativeLayout>
I can adjust the minLines attribute and the EditText will grow and shrink in size just fine. However, I want the field to adjust it's size based on it's pre-populated content. So that if the content contains 6 lines, it will adjust the height accordingly. Is there something I need to do in the code to allow for this? Ultimately, I want to handle readjusting the height in an onTextChanged listener as well (similar to iPhone).
I was programmatically hard setting the line height within the code with setLines() which was preventing the EditText from adjusting based on content. I had done this MUCH earlier in the project and had forgotten all about it.