I have a ImageView, the image is loaded from the net and can vary in width.
Below I have a TextView with a description of the image. I want the TextView to be exactly as wide as the ImageView.
My try was this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="#+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<TextView
android:id="#+id/imagedescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textAppearance="#style/SmallTextGray" />
</LinearLayout>
which somehow works as the TextView's width is set accoring to that of the ImageView, but the TextView end after 2 lines:
I know I could set the TextView's width programmatically after I know the image's width, but is there also a way to do it in the XML layout?
I don't know if it will work, but try doing in your code, after load the image:
textView.setWidth(imageView.getDrawable().getIntrinsicWidth());
With a small change of layout: replace LinearLayout with a RelativeLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/imagedescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/iv"
android:layout_alignRight="#+id/iv"
android:layout_below="#+id/iv"
android:layout_marginTop="8dp"
android:gravity="center_horizontal"
android:textAppearance="#style/SmallTextGray" />
</RelativeLayout>
This way the TextView is always below imageView and its bounds are aligned to imageViews
You can use weight like this:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
You can use the wight property in xml and give equal weight to both imageview and textview. then both size will be equal
In your case do this:
<ImageView
android:id="#+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_horizontal" />
<TextView
android:id="#+id/imagedescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:textAppearance="#style/SmallTextGray" />
</LinearLayout>
Try This.This will work
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="#+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/imagedescription"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:typeface="monospace" />
</LinearLayout>
</LinearLayout>
This works for me:
<?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:layout_gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="#+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/controller"
android:layout_gravity="center_horizontal"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:text="asdasdasasasdasdasdasdasdasdasdadasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdsadasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdsdasdasdasdsadsadsadasdasdsadsadsadasdasdasdasdasdasddasdasdasdasdasdasdasdsadasdasdasdasdasdasdsadasdasdsa..."/>
</TableRow>
</TableLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Related
What I am trying to do is wrap the textview around the imageview so that way the text isn't just on the left or right side of the image. Is it possible to do this through XML? As it is a popup dialog with a picture, so doing it through code will be a pain as it is multiple images depending on what they click. See picture for example.
<?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="fill_parent"
android:orientation="vertical"
android:background="#android:color/background_light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="1dp"
android:background="#android:color/darker_gray">
>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="20dp">
<Button
android:id="#+id/dismiss"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Close" />
<ImageView
android:id="#+id/IV1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/IV1"
android:layout_below="#+id/dismiss"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/TV15"
android:id="#+id/TV15"
android:layout_below="#+id/dismiss"
android:layout_toRightOf="#+id/IV1"
android:layout_toEndOf="#+id/IV1"
android:paddingLeft="5dp"
android:paddingTop="5dp"/>
</RelativeLayout>
</ScrollView>
</LinearLayout>
Use FrameLayout. Change the order of ImageView and TextView to set what should come top of the other.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/menu_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/menu_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:lines="1"
android:text="this is my sample" />
</FrameLayout>
I'm trying to get the LinearLayout to be aligned at the bottom of this RelativeLayout. I tried setting alignParentBottom="true", but then I can't even see the contents of the LinearLayout. Is there another way to accomplish what I need?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="90dp"
android:layout_height="200dp"
android:minHeight="200dp"
android:background="#color/colorPrimaryDark"
android:elevation="2dp"
android:gravity="center">
<TextView
android:id="#+id/textView_bookName"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:padding="10dp"
android:textSize="20dp"
android:textColor="#color/white"
/>
<TextView
android:id="#+id/textView_bookAuthor"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="1dp"
android:text="Author"
android:textSize="10dp"
android:textColor="#color/white"
android:layout_below="#+id/textView_bookName"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#+id/textView_bookAuthor"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_download_book"
android:text="#string/download"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_read_book"
android:text="Read"
android:visibility="gone"/>
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/progressbar_book_download"
style="#android:style/Widget.ProgressBar.Horizontal"
android:progress="0"
android:visibility="gone"
/>
</LinearLayout>
</RelativeLayout>
Add to LinearLayout: android:layout_alignParentBottom="true"
eg.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_below="#+id/textView_bookAuthor">
[...]
<LinearLayout
android:layout_alignParentBottom="true"
android:layout_height="100dp"
android:layout_width="wrap_content">
</LineaLayout>
Try using a LinearLayout that contains both layouts and setting them an android:layout_weight and android:layout_height="0dp".
Don't forget to set the ratio between the weights to one you'd like and setting the container's android:orientation to vertical.
BTW, for textSize you better use sp and not dp...
Please try below xml which I have modified. It will solve the issue. I have removed the android:layout_below="#+id/textView_bookAuthor" and added android:layout_alignParentBottom="true".
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="90dp"
android:layout_height="200dp"
android:minHeight="200dp"
android:background="#color/colorPrimaryDark"
android:elevation="2dp"
android:gravity="center">
<TextView
android:id="#+id/textView_bookName"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:padding="10dp"
android:textSize="20dp"
/>
<TextView
android:id="#+id/textView_bookAuthor"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="1dp"
android:text="Author"
android:textSize="10dp"
android:layout_below="#+id/textView_bookName"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_download_book"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_read_book"
android:text="Read"
android:visibility="gone"/>
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/progressbar_book_download"
style="#android:style/Widget.ProgressBar.Horizontal"
android:progress="0"
android:visibility="gone"
/>
</LinearLayout>
</RelativeLayout>
i have weird problem, in my listview row i have textview and imageview, with weights 2 and 1 respectively, but if the textview text is single line or has less characters the imageview is not aligned to the right, please find my listview row layout code.
<?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="150dp"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/cat_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center"
android:text="fruits"
android:textColor="#80000000"
android:textSize="25dp" />
<ImageView
android:id="#+id/cat_pic"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:src="#drawable/image1" />
</LinearLayout>
Please find the image below
I think is not appropriate to use weight in textview and edittext, I modified your code like this below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="150dp"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fruits"
android:textColor="#80000000"
android:textSize="25dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/cat_pic"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_weight="1"
android:src="#drawable/image1" />
</LinearLayout>
Try this.
<?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="150dp"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="6">
<TextView
android:id="#+id/cat_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="left"
android:text="Vegetables and Fruits"
android:textColor="#80000000"
android:textSize="25dp" />
<ImageView
android:id="#+id/cat_pic"
android:layout_width="0dp"
android:layout_gravity="right"
android:layout_height="100dp"
android:layout_weight="2"
android:src="#drawable/guest_user_button_pressed" />
</LinearLayout>
To get view like this image just remove android:gravity="center"
But i suggest you create xml file 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="wrap_content" >
<TextView
android:id="#+id/cat_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/cat_pic"
android:text="abcdefghijklmnopqrstuvwxvzabcdefghijk"
android:textColor="#80000000"
android:textSize="25dp" />
<ImageView
android:id="#+id/cat_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/gray"
android:gravity="fill_vertical"
tools:context=".TwitterHomeActivity" >
<RelativeLayout
android:id="#+id/top_line"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/settin_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:src="#drawable/settin_img" />
<ImageView
android:id="#+id/sonow_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/sonow" />
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="#+id/myviewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/Checkbox"
android:layout_below="#+id/top_line"
android:background="#drawable/bg"
android:overScrollMode="never" >
</android.support.v4.view.ViewPager>
<RelativeLayout
android:id="#+id/Checkbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<CheckBox
android:id="#+id/unlike"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/unlie_chkbox"
android:layout_alignParentLeft="true" />
<CheckBox
android:id="#+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/like_chk_box_drable"
android:layout_alignParentRight="true" />
</RelativeLayout>
</RelativeLayout>
I want like and dislike image fill copletely.I have added image.
here is some gap between them.
how remove it.
i am also want to show this in landscpe mode.it also fit in landscpe mode also.
please help me`
You should use a LinearLayout with weighted child views instead of a RelativeLayout.
The solution would look something like this:
...
<LinearLayout
android:id="#+id/Checkbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<CheckBox
android:id="#+id/unlike"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:weight="1"
android:button="#drawable/unlie_chkbox" />
<CheckBox
android:id="#+id/like"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="#drawable/like_chk_box_drable" />
</LinearLayout>
...
(By the way, RelativeLayout doesn't have an android:orientation attribute.)
I am trying to have textviews overlay over imageviews. Something like this
Can someone help me with the code.
Wrap a TextView and ImageView into FrameLayout, put the TextView in FrameLayout after ImageView. Then, wrap the FrameLayout into RelativeLayout OR LinearLayout. Make some position setup (as per the needs).
<RelativeLayout>
<FrameLayout>
<ImageView />
<TextView />
</FrameLayout>
</RelativeLayout>
You can create a frame layout and within the frame layout keep an imageview and a linearlayout(with a translucent background and a textview).
The translucent color can be placed in the colors file as : #80000000
Here is a snippet :)
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:foregroundGravity="bottom"
android:orientation="vertical" >
<ImageView
android:id="#+id/ivFullScreenAd"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="8dp"
android:src="#drawable/home_page_ad" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/translucent"
android:orientation="vertical" >
<TextView
android:id="#+id/detailTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dip"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Please swipe up"
android:textColor="#color/white"
android:textIsSelectable="true"
android:textSize="20sp" />
</LinearLayout>
</FrameLayout>
I had the same problem and solved it using a custom gridView. You must apply this in getView.
Custom gridView XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_practitioner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/item_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:contentDescription="#string/contentDescriptionContent"
/>
<LinearLayout
android:id="#+id/layout_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:background="#CC515116"
android:visibility="gone"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:text="#string/text_enter_pass_password"
android:paddingBottom="7dp"
android:textSize="20sp"
/>
<EditText
android:id="#+id/edit_practitioner_pin"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="center"
android:background="#drawable/edittext_shape"
android:ems="6"
android:gravity="center"
android:inputType="numberPassword"
android:maxLength="4"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:visibility="visible"
/>
<Button
android:id="#+id/pract_button"
android:layout_width="70dp"
android:layout_height="30dp"
android:background="#drawable/buton_shape"
android:layout_marginBottom="35dp"
android:text="#string/btn_ok"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom"
android:background="#bbffffff"
android:focusable="false"
android:focusableInTouchMode="false" >
<TextView android:id="#+id/item_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:textColor="#color/text_black"
android:gravity="bottom|center"
android:textSize="20sp"
android:textAllCaps="true"
android:paddingBottom="0dp"
/>
<TextView
android:id="#+id/text_pratiotioner_group_name"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/sub_title_color"
android:visibility="visible"
android:gravity="bottom|center"
android:textAllCaps="true"
/>
</LinearLayout>
</FrameLayout>
Though an old question but should incase anyone is interested in the card view version of this question here you go...
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="5dp"
app:cardElevation="5dp"
android:layout_weight="0.5"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
android:clickable="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical"
android:layout_centerInParent="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:background="#89969F">
<ImageView
android:id="#+id/iv_overlay"
android:layout_width="196dp"
android:layout_height="196dp"
android:clickable="true"
android:src="#drawable/your_image"
android:layout_centerInParent="true" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#80000000"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textSize="22sp"
android:textStyle="bold"
android:gravity="center_vertical"
android:text="Settings"
android:textColor="#color/white"
android:layout_gravity="center"
android:layout_alignParentTop="false"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:padding="8dp" />
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.CardView>
Please modify the layout accordingly, If you want to accommodate the images on an imageview only, then you can drop the below layout in a relative one including an imageview too.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/your_image"
android:orientation="vertical" >
<TextView
android:id="#+id/bottom_textview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
<!-- layout_gravity="supply accordingly" -->
android:gravity="center"/>
</LinearLayout>