Layout with particular position of elements - android

I have this layout.xml :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:paddingLeft="10dp">
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dip"
android:background="#color/white"
android:layout_marginLeft="17dp"
android:layout_marginRight="17dp">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/list_linearLayout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- titre food -->
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:id="#+id/souscarte_element_titleT"
android:textColor="#color/black"
android:paddingLeft="5dp"/>
<!-- description food -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:id="#+id/souscarte_element_descT"
android:paddingLeft="5dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<!-- promo food -->
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:id="#+id/souscarte_element_promoT"
android:gravity="right"
android:textColor="#color/black"
android:layout_alignParentRight="true"
android:layout_toLeftOf="#+id/souscarte_element_prixT"
android:paddingRight="5dp"/>
<!-- price food -->
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:id="#+id/souscarte_element_prixT"
android:gravity="right"
android:textColor="#color/black"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:paddingRight="5dp"/>
</RelativeLayout>
</FrameLayout>
The render of this is here :
The problem is on the red frame (on the picture): when I have a big content (a lot of words) the second price (in bottom) put himself to the bottom and the text comes between the 1st price and the 2nd..
I would like to know how make it just stay in bottom of 1st price, thank you!

Please check this.
hope this will helpful for you.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="17dp"
android:layout_marginRight="17dp"
android:background="#FFFFFF"
android:orientation="horizontal"
android:padding="5dip" >
<LinearLayout
android:id="#+id/list_linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:orientation="vertical" >
<TextView
android:id="#+id/souscarte_element_titleT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="#+id/souscarte_element_descT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:textColor="#000000" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:orientation="vertical" >
<TextView
android:id="#+id/souscarte_element_promoT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="5dp"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="#+id/souscarte_element_prixT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="5dp"
android:textColor="#000000"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</FrameLayout>

You have set layout_align_parent_bottom="true" for the second price, that is why it stays fixed to the bottom. Change this to layout_below="#+id/souscarte_element_promoT".
Note that RelativeLayout allows its children to overlap, so it will draw children on top of other children if you aren't careful abotu how you arrange the children.

You could nest two layouts inside the main layout...
One for the texts, and the other one for the prices
Something like this:
<LinearLayout
android:orientation="horizontal" >
<LinearLayout <!--For the texts-->
android:layout_weight="1"
android:orientation="vertical" >
<TextView >
<TextView >
</LinearLayout>
<LinearLayout <!--For the prices-->
android:orientation="vertical" >
<TextView >
<TextView >
</LinearLayout>
</LinearLayout>

This is a rather hard thing to achieve as TextView doesn't provide this feature.
However, it's still possible.
You can extend TextView and when it's supposed to show the text (not sure in which method), you can measure the last 2 lines of text (maybe using Paint.measureText), in order to know where to place the price textView.
I say 2 because the first one would give you the Y coordinate, and the last one would tell you if it would wrap in case you put the textview, so that you will need to add extra to the Y coordinate.
Another possible solution is to put the price as a text inside the description TextView. In this solution you would also need to check the last line so that you could know if you need to create a new line or use the current one, and you need to know how many spaces to put.
Anyway, as others have mentioned, an easy way would be to simply always put the price below the text.

Related

How to place EditText over a button when in LinearLayout?

This is what it looks like right now:
What I want it to look like:
I want to have a text box that is inside of the button (where the time goes) that is editable. How do I do this?
Code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
// NAME 1
<Button
android:id="#+id/name1"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#drawable/button_border"
android:text="Name"
android:onClick="changeName"/>
// NAME 2
<Button
android:id="#+id/name2"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#drawable/button_border"
android:text="NAME"
android:onClick="changeName"/>
</LinearLayout>
Thanks, and sorry for the simplicity of the question. I'm just an amateur trying to learn more.
Try this way it will help you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#f0f8f0"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center"
android:background="#4472C4"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Liam Ten"
android:textStyle="bold"
android:textColor="#android:color/white"
android:textSize="16dp"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="01:03:66"
android:textSize="16dp"
android:textColorHint="#android:color/white"
/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Neil C"
android:textSize="16dp"
android:gravity="center"
android:background="#4472C4"
android:textColor="#android:color/white"
android:layout_weight="1"
android:textStyle="bold"
/>
</LinearLayout>
</LinearLayout>
OUPUT
I guess you are showing timer's time which is going to change frequently. Better use this approach.
String myValue = String.format("%s \n %s", "Liam Tan" , String.valueOf(yourTimingValue));
myButton.setText(myValue);
There are two ways to achieve this.
name1.setText("Liam Taen" + "\n" + dateTimeString);
and in xml add multiline=true to Button name1
Secondly, use
<LinearLayout root layout with orientation horizontal
<LinearLayout width weight 1 where orientation vertical
<Button for name >
<TextView for showing time>
</LinearLayout end linearLayout>
<LinearLayout width weight 1 where orientation vertical>
<Button name2 to center by layout_gravity= center or gravity= center from parent
</LinearLayout end second linearlayout>
</LinearLayout end root linearlayout>

How to set textView as right as possible and set textView show only a part of text?

I have the xml code shown below. Everything is working as it should except the final textView( id locationTextView) which won't stay right. I want it to stay as right as possible, but I can't do that(it still appears straight after the linear Layout).Should I set a left margin?. And for the textView1 how can I make it to show only a certain part of the whole text, because I have texts of different lengths and they ruin the layout.
<?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:background="#color/product_list_item_bg"
android:descendantFocusability="blocksDescendants">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/icon"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_margin="3dip"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#33CC33" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="TextView" />
</LinearLayout>
<TextView
android:gravity="right"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_marginTop="0dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/locationTextView"
android:layout_gravity="right" />
</LinearLayout>
</RelativeLayout>
Try android:layout_weight="1" or some other value for your locationTextView. You can also try out android:weightSum="3" (or that is appropriate instead of 3) on your root LinearLayout. Assign proper weights to your different child views. You can get help here
For showing text in a presentable way, you could use android:ellipsize="marquee" or other options available.

My text is getting cut at the edge while trying to display it in a listview

When I try to display TextView inside my Listview. The text that are long in length or width are getting cut at the edge. So how do I prevent it. Please help like some parts of the textviews don't show and are cut off by the edge of the screen.
I have already tried the android's ellipsize attribute, but not working and also the maxlines attribute trying to show the edges which are getting cut to be shown on the next line
XML
<?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" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:fontFamily="OpenSans-Regular">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Brand: "
android:textAppearance="?android:attr/textAppearanceMedium" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/brand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="16dp"
android:ellipsize="marquee" />
</TableRow>
Try this
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="horizontal" >
<TextView
android:id="#+id/txtView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
Hope it help.
If still getting problem please comment below.
Thanks :)

ListView displaying problems

I have a listview that consists three columns. The first one is an ImageView, the second and third one are textviews (see code blow).
I want the list to be aligned like this:
the icon and the date should always been shown completely !!
the text in the middle should show as much chars as possible
the date should always be on the right of the right side
With the XML below it looks ok on my Nexus 4. But on the asus tablet the date should be more on the right and the coloumn in the middle should show more text (screenshot 1). On the AVD (screenshot 2) the coloumn in the middle should be smaller and the date should be shown completely.
Can anyone tell me how to change the XML? Thanks!
<?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:padding="5dp" >
<ImageView
android:id="#+id/logo"
android:layout_width="50px"
android:layout_height="50px"
android:layout_marginLeft="5px"
android:layout_marginRight="20px"
android:layout_marginTop="5px"
android:src="#drawable/social_chat"
android:layout_weight="0"
>
</ImageView>
<TextView
android:id="#+id/label"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_marginTop="0px"
android:text="#+id/label"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_weight="50"
android:maxLines="1"
android:singleLine="true"
>
</TextView>
<TextView
android:id="#+id/last_changed"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_marginTop="15px"
android:layout_marginLeft="5px"
android:text="#+id/last_changed"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="50"
android:maxLines="1"
android:singleLine="true"
>
</TextView>
Off the top of my head your layout would look something like 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="match_parent"
android:padding="5dp" >
<ImageView
android:id="#+id/logo"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="20dp"
android:layout_marginTop="5dp"
android:src="#drawable/social_chat" />
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#+id/label"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_weight="1"
android:singleLine="true" />
<TextView
android:id="#+id/last_changed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginLeft="5dp"
android:text="#+id/last_changed"
android:textAppearance="?android:attr/textAppearanceSmall"
android:singleLine="true" />
</LinearLayout>
The key here is to use wrap_content for the views that just need to keep their size, and set a weight for the middle view, which you want to fill the rest of the row.
Some useful tips.-
fill_parent is deprecated, use match_parent instead
When a view has no children, you can just close it with />
singleLine="true" is enough to have a singleLined TextView
You'll usually want to use dp units instead of px
This should do your job. I have put the imageview on the parents left, the date on the parents right and the label to the rightof image and to the left of date.It should work fine for you. Margins , padding please put yourself
<?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" >
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/social_chat" />
<TextView
android:id="#+id/last_changed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:singleLine="true" />
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_toLeftOf="#id/last_changed"
android:layout_toRightOf="#id/logo"
android:singleLine="true" />
</RelativeLayout>

how to separate textviews in android?

It is a simple question but I don't know how to do it because I'm new in android.
I have two TextViews in a relative layout and when the first TextView getting bigger it writes on the other TextView which I want to avoid it. How can I do it ?
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
android:gravity="left"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
android:layout_alignParentRight="true"/>
</RelativeLayout>
but when the text = firstfirstfirst.... it overrides the second textview.
You need to give you TextViews ids. Since you're using a RelativeLayout you can use layout_toLeftOf and layout_toRightOf, but you only need to use one of them.
<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/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_toLeftOf="#+id/textView2"
android:gravity="left"
android:text="firstfirstfirstfirstfirstfirsitseirodsifjdsoijfoisddsefdfadafdafad" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:text="second" />
give some advice:
first you can set the left textview's max width using android:maxWidth="" to control the left size, but if the size bigger than the size the text will become like this:text...
or you need make the left and right area cleanly, for example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2" >
<TextView
android:id="#+id/left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:text="firstdasssssssssssssssssssssssssssssssssssssssssssssssssssssssss" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="left"
android:text="secondsdasdasdarerewrwcxcadasdasdsadsdasdasdadadsd" />
it make the left and right half area, also you can change the android:weightSum size.

Categories

Resources