I m having a Custom List for a chat application.
It has basically Two imageView in the either side and textView for the "chat message" in the middle.
Below all the three above there is textview for time at the bottom.
The screenshot below would better suffice.
The problem here is the time textView is overlapping over the imageView if the text of the "chat message" is only line.
This problem is better corrected with html-css as float clear:both.
I went through another answer for this with a nested RelativeLayout within LinearLayout here but i want to keep it clean with a single RelativeLayout.
The layout xml is as below -
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/icon1"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/msgText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:textSize="20sp"
android:layout_marginLeft="42dp"
android:layout_marginRight="42dp"
android:text="this is a test" />
<ImageView
android:id="#+id/icon2"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/timeText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="40px"
android:layout_marginTop="10dp"
android:layout_below="#+id/msgText"
android:layout_alignParentRight="true"
android:gravity="right"
/>
</RelativeLayout>
The screenshot for this as below -
You have this:
android:layout_below="#+id/msgText"
Change to this:
android:layout_below="#id/icon2"
EDIT
Put a minHeight on your message TextView which is equal to the image height and don't change as I told you above.
You should use LinearLayout instead
The layout example which avatar on the left side
<?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:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/avatar"
android:layout_width="50dp"
android:background="#ff0000"
android:layout_height="50dp" />
<TextView
android:id="#+id/content"
android:layout_width="0dp"
android:text="content here"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:text="date here"
android:layout_height="wrap_content" />
</LinearLayout>
The layout example which avatar on the right side
<?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:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/content"
android:layout_width="0dp"
android:text="content here"
android:gravity="right"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/avatar"
android:layout_width="50dp"
android:background="#ff0000"
android:layout_height="50dp" />
</LinearLayout>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:text="date here"
android:layout_height="wrap_content" />
</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>
This is code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
I want to practice a layout in android studio and I'm getting an error while implementing the code.
This is the text which goes outside the mobile screen:
Why does the blue box go outside the mobile screen?
You're not properly setting the layout. The childViews of your parentView(LinearLayout) was aligned horizontally without setting the layout weight. You should read the documentation on LinearLayout. However, to fix your layout, you can add another container to hold the first row of your layout to make the second row visible on the screen. Your current code contains all the childViews in a single row which makes the other views not visible. Try the code below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
You are setting the layout_width of each view yourself. You should know that there is a maximum width of screen that is available. Moreover, you are setting the width of button as match_parent that is not proper way when the neighbouring views have some fixed width. If your are using LinearLayout try layout_weight attribute. Play around and try to experiment.
For example:
<?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">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingLeft="0dp"
android:paddingTop="10dp"
android:text="Email:"
android:textSize="30dp" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="2"
android:singleLine="true" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingTop="10dp"
android:text="Login" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
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>
I am trying to make a layout with an image on the left side, then a text, and two images on the right side. I show you how it likes now:
I want to put the two right icons on the right side, next to the limit of the screen. Then, if you see, when the text has more than one line, the two icons disappear and when the text is too long the icons are very small. I want a static space for every one of the icons.
<?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="wrap_content"
android:orientation="horizontal"
android:padding="6dip">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_marginRight="6dip"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:focusable="false"
android:focusableInTouchMode="false"
android:contentDescription="#string/cdLogo" />
<LinearLayout
android:id="#+id/lista2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:paddingRight="20dip"
android:layout_toRightOf="#id/icon"
android:layout_marginRight="30dip">
<TextView
android:id="#+id/tituloevento"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="left"
android:textStyle="bold" />
<TextView
android:id="#+id/distritoevento"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="left"
android:textSize="12sp"/>
<TextView
android:id="#+id/coorp0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<TextView
android:id="#+id/coorp1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<TextView
android:id="#+id/esgratis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
</LinearLayout>
<LinearLayout
android:id="#+id/caracteristicas"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_toRightOf="#id/lista2"
android:layout_alignParentRight="true">
<ImageView
android:id="#+id/iconoMapa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/cdTieneCoor"
android:layout_weight="0.5"/>
<ImageView
android:id="#+id/iconoGratis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/cdGratisPago"
android:layout_weight="0.5"/>
</LinearLayout>
</RelativeLayout>
I suggest you to use a LinearLayout as the top container, and distribute the space of the child elements with weight attributes. When using weight, you must set layout_width to 0dp for horizontal layouts or layout_heigth to 0dp for vertical layouts.
For example:
<?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" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" >
</LinearLayout>
</LinearLayout>
I have this layout which is a row item of a ListView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:clickable="true"
android:gravity="center" >
<ToggleButton
android:id="#+id/taskActiveToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="ToggleButton" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/taskNameTextView"
android:layout_width="200dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/taskScheduleTextView"
android:layout_width="200dp"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:id="#+id/taskMenuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="..." /></LinearLayout>
I am having troubles adding another button to left of the (...) button.
I want to add the button so the row will keep its proportions (take all width of the line)
Any ideas?
As far as I can see, you are using horizontal LinearLayout as a root layout for your items. I would change it to RelativeLayout. Also if you need your layout occupy the whole width - you need to get rid of 200dip hardcoding and replace it with match_parent
Here is what I got using RelativeLayout:
<?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">
<ToggleButton
android:id="#+id/taskActiveToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_alignParentLeft="true"
android:text="ToggleButton" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/taskActiveToggleButton"
android:layout_toLeftOf="#+id/anotherButton"
android:layout_centerVertical="true"
android:orientation="vertical" >
<TextView
android:id="#+id/taskNameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text" />
<TextView
android:id="#+id/taskScheduleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sub Text"/>
</LinearLayout>
<Button
android:id="#+id/anotherButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_toLeftOf="#+id/taskMenuButton"
android:text="But2" />
<Button
android:id="#+id/taskMenuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:text="..." />
</RelativeLayout>