I'm creating a custom list item in and android list view. it's very simple, it has a textview on the left and an image on the right. the image should align all the way right, and the text view should take up all the space on the left. problem is, i can get the image to show up, but it pushes left. if i set the textview width to fill_parent, the image disappears. here's my layout:
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="50px" android:layout_gravity="center_vertical">
<!-- item -->
<TextView android:id="#+id/txtItem" android:gravity="center_vertical" android:textSize="20px" android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<!-- disclosure image -->
<ImageView android:layout_gravity="right|center_vertical" android:src="#drawable/common_icon_arrow_disclosure"
android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</LinearLayout>
i've also tried a relative layout, but the same thing happens. what am i doing wrong?
EDIT: for clarification, this is what i'm trying to accomplish:
i want the text field to take up the whole left area, and the image to be on the right, unscaled, vertically centered.
You can also just add the drawable to the textview directly like this.
<TextView
android:id="#+id/txtItem"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawableRight="#drawable/common_icon_arrow_disclosure"
android:gravity="center_vertical"
android:textSize="20px" />
You can use bitmap drawable like this (this also adds rounded corners):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#android:color/white" />
<stroke
android:width="2dp"
android:color="#adadad"
/>
<corners android:radius="5dp" />
</shape>
</item>
<item android:right="5dp"
android:top="2dp"
android:bottom="2dp">
<bitmap
android:src="#drawable/image"
android:gravity="right"
/>
</item>
</layer-list>
and put this drawable in background property of your TextView:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/right_image"
android:text="some text"
/>
Left-align your text with the parent, and set the gravity of the image to right:
<?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="48dp">
<TextView
android:id="#+id/team_member_name"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:singleLine="true"/>
<ImageView
android:id="#+id/team_member_icon"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:src="#drawable/circle_green"/>
</RelativeLayout>
Relative layout is what you want. In your case the fill_parent attribute was causing the text view to push the image off of the screen. If you use Relative layout and set the text view to use the layout_toLeftOf it should work.
Here is a quick example that I think will work (I haven't tested it out and it's from memory but the idea is there)...
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="50px"
android:layout_gravity="center_vertical">
<ImageView android:id="#+id/img"
android:layout_gravity="right|center_vertical"
android:src="#drawable/common_icon_arrow_disclosure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/txtItem"
android:gravity="center_vertical"
android:textSize="20px"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toLeftOf="#id/img" />
</RelativeLayout>
This worked for me:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:padding="10dp"
android:layout_marginRight="10dp"
android:textSize="16sp"
android:textColor="#color/text_color"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"/>
<ImageView android:id="#+id/imageBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:padding="10dp"
android:contentDescription="#string/delete"
android:src="#drawable/delete_minus_png"
android:layout_alignParentRight="true" />
</RelativeLayout>
Line android:layout_marginRight="10dp" did the trick.
Hope it helps!
Looks like there is some layout bug or so. If the TextView has fill_parent flag, the ImageView will be pushed away from the layout, even if the TextView contents are small enough.
Related
I need to set border to linearLayout without modifying it's size, I try setting in the background of linearLayout some drawable with border and padding but this one is set inside of the linearLayout and modifies size, image and textView. Do you have a way of setting border outside of view or superpose views?
My Code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemCarouselContainer"
android:layout_width="#dimen/carousel_item_width"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginRight="#dimen/carousel_item_margin_right"
android:orientation="vertical">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/imageCarousel"
android:layout_width="match_parent"
android:layout_height="#dimen/carousel_image_poster_height"
/>
<TextView
android:id="#+id/live"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="#dimen/carouse_item_live_margin_left"
android:layout_marginTop="#dimen/carousel_item_live_margin_top"
android:padding="#dimen/carousel_item_live_padding"
android:textColor="#color/carousel_live_text"
android:textSize="#dimen/carousel_item_live_text_size"
android:textStyle="bold" />
</RelativeLayout>
<TextView
android:id="#+id/titleCarousel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/carousel_content_title_background"
android:gravity="center"
android:padding="7dp"
android:singleLine="true"
android:textColor="#color/carousel_content_title_text"
android:textSize="#dimen/carousel_title_size" />
</LinearLayout>
Create this as a drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/miniBlack"
android:dashGap="10px"
android:dashWidth="10px"/>
</shape>
Set it as background of your layout giving it a 2dp padding so the stroke won't override the content
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemCarouselContainer"
android:layout_width="#dimen/carousel_item_width"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginRight="#dimen/carousel_item_margin_right"
android:orientation="vertical"
android:background="#drawable/myfile"
android:paddings="2dp"
>...
I am planning to achieve something like this:
---------------Text---------------
where "-----" is actually a line ,(view line perhaps? or a divider) .
more accurately, this is an example of what i am trying to achieve:
I was wondering how do I achieve that in my textview. here's my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/mydate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp"/>
</RelativeLayout>
You can do this by creating a single, full-width line, and then putting the TextView on top of it. If you give the TextView the same background color as the parent's background, and give the TextView some left and right padding, it will look like you example.
You can use this for the line (line.xml in your res/drawable directory) :
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line"
>
<stroke
android:color="#android:color/darker_gray"
android:width="1dp"
/>
</shape>
and then use this layout:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="10dp"
android:src="#drawable/line"
android:layout_gravity="center"
/>
<TextView
android:id="#+id/mydate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#android:color/white"
android:textColor="#android:color/darker_gray"
/>
</FrameLayout>
I already have a vertical divider between my two buttons like this :
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:divider="?android:dividerVertical"
android:showDividers="middle"
>
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/flat_selector"
android:textColor="#android:color/white"
android:text="Connexion"
android:textStyle="bold"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/flat_selector"
android:textColor="#android:color/white"
android:text="Inscription"
android:textStyle="bold"
android:layout_weight="1"/>
</LinearLayout>
but I'd like to have one which doesn't take all the available height, but just half for example, starting at the middle of the layout.
I already tried to create a custom divider :
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:width="0.5dp"/>
<solid android:color="#ffffff"/>
</shape>
and then to play with android:height, but it does nothing good. Any other ideas ?
I use this code for making this 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:layout_margin="20dp"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_centerInParent="true"
android:background="#drawable/rounded_white_bg">
<EditText
android:id="#+id/login"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/dialog_edittex"
android:layout_margin="10dp"/>
<EditText
android:id="#+id/password"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:background="#drawable/dialog_edittex"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#android:color/black"
android:text="AAAAAAAAAAAA"
android:layout_gravity="center"
android:textSize="20sp"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:src="#drawable/dialog_button_bg"/>
</LinearLayout>
</RelativeLayout>
rouded_whiite.bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<corners
android:radius="20dp"/>
</shape>
But when I do this I have see this result. As you can see there is some margin below of red button. I didn't set any margin or something but there is some space there. What should I do here for getting exact result as in fist image.
Remove the margin from your RelativeLayout and make your LinearLayout gravity android:layout_centerHorizontal="true"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:background="#drawable/rounded_white_bg">
Use :
android:layout_centerHorizontal="true"
instead of
android:layout_centerInParent="true"
and remove margin from bottom...
<LinearLayout
android:layout_height="wrap_content"
it is because of this. remove the imageview from the linear layout and set in the relative layout and give property as alignparent bottom and for the linear layout give alignparent top and above the image view property,
Try This
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#drawable/rounded_white_bg">
<EditText
android:id="#+id/login"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/dialog_edittex"
android:layout_margin="10dp"/>
<EditText
android:id="#+id/password"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:background="#drawable/dialog_edittex"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#android:color/black"
android:text="AAAAAAAAAAAA"
android:layout_gravity="center"
android:textSize="20sp"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:src="#drawable/dialog_button_bg"/>
</LinearLayout>
</RelativeLayout>
If your using drawable for imageview as .png or .jpg use the following drawable for your image may be it would help. save this as backgroung_bg.xml or anything else as you wish
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape >
<corners android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp"/>
<solid android:color="#CF4647"/>
<padding android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"/>
</shape>
</item>
when you apply this you would get following warning just ignore and run it. if you need gradient type of color ask me
The graphics preview in the layout editor may not be accurate:
Different corner sizes are not supported in Path.addRoundRect. (Ignore for this session)
When I created a button view, Android always create some extra space between this button and other views below it.
In this example below, there is a button above the second button. You can see the gap between these two buttons. How can I get rid of this gap? 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="wrap_content">
<Button android:id="#+id/up"
android:layout_width="fill_parent" android:layout_height="28dip"
android:textSize="9sp" android:gravity="center" android:text="Hide sth"
android:layout_marginBottom="0" android:paddingBottom="0" />
<Button android:id="#+id/down"
android:layout_width="fill_parent" android:layout_height="28dip"
android:textSize="9sp" android:gravity="center" android:text="Show sth" />
</LinearLayout>
Create your own button background nine-patch PNG that eliminates the space. You can find the existing background files in your SDK.
CommonsWare pretty much pointed you in the right direction but here's a sample layout example. Just replace the android:background="COLOR" to a reference of a 9 patch png
<?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="wrap_content">
<Button
android:id="#+id/btn1"
android:text="btn1"
android:padding="0dip"
android:layout_margin="0dip"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:background="#FFF"
/>
<Button
android:id="#+id/btn2"
android:text="btn2"
android:padding="0dip"
android:layout_margin="0dip"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:background="#FF0000"
/>
</LinearLayout>
Hope that helps!
I just figured out the most simple way. We have to simply add background to Buttons and it will automatically reduce spaces.
Notice example
<Button
android:id="#+id/button1"
android:text="Button 1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#000000" />
<Button
android:id="#+id/button2"
android:text="Button 2"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#000000" />
Obviously we would have to split Buttons with border line. There are few ways for that.
1. android:layout_marginTop="1dp" to second Button. The small piece of background will separate it.
2. Add style for Button :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#000000"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="1px" android:color="#FFFFFF" />
</shape>
and set it with :
android:background="#drawable/your_button_border"
3. To add View with background of a different color and place it between Buttons.
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#AAA" />
Just pick the most convenient for you way.