How to wrap text in a TexView? - android

Here is my layout:
<GridLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnCount="2"
android:orientation="horizontal"
android:rowCount="2" >
<ImageView
android:id="#+id/img"
android:layout_width="150dp"
android:layout_height="225dp"
android:layout_gravity="left|top"
android:layout_column="0"
android:layout_rowSpan="2"
android:contentDescription="#string/imgdesc" />
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_column="1"
android:layout_marginLeft="20dp"
android:layout_row="0"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/tvDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="fill_horizontal"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_row="1"/>
</GridLayout>
And here is the result:
As you can see, a part of the text is out the screen and I don't really know how to fix it.

Try to use LinearLayout for your design instead of GridLayout :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img"
android:layout_width="150dp"
android:layout_height="225dp"
android:contentDescription="#string/imgdesc"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="5dp"
android:orientation="vertical">
<TextView
android:id="#+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/tvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"/>
</LinearLayout>
</LinearLayout>

just replace below code with your current code, hope this work for you.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnCount="2"
android:orientation="horizontal"
android:rowCount="2" >
<ImageView
android:id="#+id/img"
android:layout_width="100dp"
android:layout_height="225dp"
android:layout_column="0"
android:layout_gravity="left|top"
android:layout_rowSpan="2"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content" // this line change
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="left"
android:layout_marginLeft="20dp"
android:layout_row="0"
android:ems="5" //this line added
android:layout_marginRight="10dp"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/tvDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:ems="5"
android:layout_gravity="fill_horizontal"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_row="1" />
</GridLayout>
Note: there can be a many ways to do the same.

try below code, it will work
<?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="vertical" >
<ImageView
android:id="#+id/img"
android:layout_width="150dp"
android:layout_height="225dp"
android:layout_gravity="left|top"
android:layout_column="0"
android:layout_rowSpan="2"
android:scaleType="fitXY"
android:contentDescription="test" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_column="1"
android:layout_marginLeft="20dp"
android:layout_row="0"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/tvDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="fill_horizontal"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_row="1"/>
</LinearLayout>
</LinearLayout>

Related

Cannot right align a checkbox in android studio

I am trying to design as per the above image. I tried with Grid Layout and also tried with nested Linear Layout. In both ways checkbox is not right aligned. It is displaying just after the text1
Can someone help on this.
The code is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:padding="2dp"
tools:context="com.example.user.recycleview.MainActivity">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="3">
<ImageView
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:layout_row="0"
android:layout_column="0"
android:layout_rowSpan="2"
android:src="#drawable/cappuccino"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="1"
android:layout_margin="8dp"
android:maxLines="3"
android:text="#string/cappuccino"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-5dp"
android:layout_row="1"
android:layout_column="1"
android:layout_margin="8dp"
android:maxLines="1"
android:text="#string/price"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:layout_row="0"
android:layout_column="2"
android:layout_rowSpan="2" />
</GridLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:background="#color/colorPrimary"/>
</LinearLayout>
With the above code it is displaying as in the below:
If the Text1 part is too long, the checkbox is going out of the screen, as in the below image
You can achieve this by using a single RelativeLayout.
Try this:
<?xml version="1.0" encoding="utf-8"?>
<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="80dp"
android:padding="2dp"
tools:context="com.example.user.recycleview.MainActivity">
<ImageView
android:id="#+id/image"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:scaleType="centerCrop"
android:src="#drawable/somepngfile"/>
<CheckBox
android:id="#+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="8dp"/>
<TextView
android:id="#+id/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image"
android:layout_toLeftOf="#id/checkbox"
android:layout_margin="8dp"
android:maxLines="2"
android:ellipsize="end"
android:text="This is two line text for your large title This is two line text for your large title"/>
<TextView
android:id="#+id/text_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/text_title"
android:layout_alignLeft="#id/text_title"
android:layout_alignRight="#id/text_title"
android:maxLines="1"
android:text="Price: 150.00"/>
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimary"/>
</RelativeLayout>
OUTPUT:
You can use layout_weight to align checkbox right,
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<TextView
android:id="#+id/itemTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<CheckBox
android:id="#+id/checkItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content" /></LinearLayout>
You can use relative layout for you list item . Try below code
<ImageView
android:id="#+id/imageView"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_gravity="center_vertical"/>
<CheckBox
android:id="#+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:gravity="end" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/checkbox"
android:layout_toRightOf="#id/imageView"
android:layout_weight=".8"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_margin="8dp"
android:layout_row="0"
android:maxLines="3"
android:text="#string/cappuccino" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_margin="8dp"
android:layout_marginTop="-5dp"
android:layout_row="1"
android:maxLines="1"
android:text="#string/price" />
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_marginBottom="3dp"
android:layout_marginTop="3dp"
android:background="#color/colorPrimary" />
This is may helpful to you.
<?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"
android:padding="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<ImageView
android:id="#+id/imageView"
android:layout_width="120dp"
android:layout_height="70dp"
android:scaleType="fitXY"
android:src="#drawable/ic_image" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/imageView"
android:layout_toStartOf="#+id/checkBox"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_margin="8dp"
android:layout_row="0"
android:maxLines="3"
android:text="Sample Header" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_margin="8dp"
android:layout_row="1"
android:maxLines="1"
android:text="Sample Desc" />
</LinearLayout>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center" />
</RelativeLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_marginBottom="3dp"
android:layout_marginTop="3dp"
android:background="#color/colorPrimary" />
</LinearLayout>

How to achieve this xml?

I want to achieve like the image below
And I tried, but it is not my desired result.
Below is my xml
<?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="5dip">
<LinearLayout android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip">
<ImageView
android:id="#+id/photo"
android:layout_width="70dp"
android:layout_height="70dp"
android:scaleType="centerCrop"
android:layout_gravity="center"/>
</LinearLayout>
<TextView
android:id="#+id/ListDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/input_register"
android:text="Date"
android:layout_marginLeft="150dp"
android:layout_alignTop="#+id/thumbnail"
android:layout_toRightOf="#+id/thumbnail" />
<TextView
android:id="#+id/ListDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:textSize="20sp"
android:text="Description"
android:ellipsize="end"
android:textStyle="bold"
android:layout_below="#id/ListDate"
android:layout_toRightOf="#+id/thumbnail" />
<TextView
android:id="#+id/ListAmount"
android:text="Amount"
android:layout_marginTop="40dp"
android:layout_marginLeft="166dp"
android:textSize="20sp"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_toRightOf="#+id/thumbnail"
android:textColor="#color/violetred" />
</RelativeLayout>
How can I write the ... beside the Amount TextView same like the first image I post ? Any help is much appreciated.
You can have only one layout which will solve your problem nesting is not a good idea.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#000"
android:layout_gravity="center"
android:textSize="?android:actionBarItemBackground"
android:textStyle="bold"
android:text="8 hours # $80.00/hour"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="2014-05-08"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:textStyle="bold"
android:layout_gravity="end"
android:textColor="#000"
android:textSize="?android:actionBarItemBackground"
android:text="$640.00"/>
</FrameLayout>
you can achieve your requirement with this xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#d8d8d8" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="85dp"
android:layout_height="85dp"
android:background="#c8c8c8"
android:src="#drawable/ic_launcher" >
</ImageView>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/imageView1"
android:text="TextView"
android:textColor="#000000" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="6dp"
android:layout_marginTop="20dp"
android:padding="2dp"
android:text="2014-05-08"
android:textColor="#000000" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/textView2"
android:layout_marginRight="6dp"
android:layout_marginTop="20dp"
android:padding="2dp"
android:text="$600"
android:textColor="#000000"
android:textStyle="bold" />
</RelativeLayout>
hope this helps you.exact xml of you want to achieve.
<?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="5dip">
<ImageView
android:id="#+id/photo"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_margin="5dp"
android:padding="3dp"
android:scaleType="centerCrop"
android:layout_gravity="center"/>
<TextView
android:id="#+id/ListDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/right_container"
android:singleLine="true"
android:textSize="20sp"
android:text="Description"
android:ellipsize="end"
android:textStyle="bold"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/photo" />
<LinearLayout
android:id="#+id/right_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="vertical">
<TextView
android:id="#+id/ListDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/input_register"
android:text="12-11-2017"
android:layout_marginRight="10dp"/>
<TextView
android:id="#+id/ListAmount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="777$"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:textSize="20sp"
android:textColor="#color/violetred" />
</LinearLayout>
Use constraint layout for best performance. If not, use horizontal linear layout, with weight on the center one.
<?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="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="5dip">
<ImageView
android:id="#+id/photo"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#color/black"
android:scaleType="centerCrop" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:ellipsize="end"
android:gravity="center_vertical"
android:lines="1"
android:text="Buy drinks fvbfvfvfvasdasdasdfvfvvfvf" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="1014-05-08" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="$6969"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1.5"
android:ellipsize="end"
android:maxLines="1"
android:text="ASASJHGHHBHHJHJNKMKIKMKMKMKMKKNIKNIJ" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="2016-01-11" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="$640"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
try this
<?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="wrap_content"
android:orientation="horizontal"
android:layout_weight="1"
android:padding="5dip">
<LinearLayout android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:weightSum=".20"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip">
<ImageView
android:id="#+id/photo"
android:layout_width="70dp"
android:layout_height="70dp"
android:scaleType="centerCrop"
android:layout_gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum=".80"
android:layout_alignRight="#+id/thumbnail"
android:layout_alignParentRight="true"
android:orientation="vertical">
<TextView
android:id="#+id/ListDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginRight="10dp"
android:textColor="#color/input_register"
android:text="Date"
/>
<TextView
android:id="#+id/ListDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:layout_marginRight="10dp"
android:textSize="20sp"
android:text="DescriptionDescriptionDescriptionDescription"
android:ellipsize="end"
android:textStyle="bold"
/>
<TextView
android:id="#+id/ListAmount"
android:text="Amount"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="end"
android:layout_marginRight="10dp"
android:layout_toRightOf="#+id/thumbnail"
android:textColor="#color/violetred" />
</LinearLayout>
</LinearLayout>

wrong displaying Textview in ListVIew

I'm new in Android developing and I developping search apk.Search results displaying in custom listview. The layout for list view have this code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="match_parent">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Title"
android:id="#+id/Title"
android:layout_row="0"
android:layout_column="1"
android:layout_columnSpan="3"
android:layout_gravity="fill_horizontal"
android:layout_columnWeight="1"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
<RelativeLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Price"
android:id="#+id/Price"
android:layout_row="1"
android:layout_column="1"
android:layout_gravity="left"
android:textColor="#ff5f59ff"
android:layout_alignParentLeft="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Stock"
android:id="#+id/InStock"
android:layout_gravity="right"
android:textColor="#ff00c000"
android:layout_alignParentRight="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Stock"
android:id="#+id/OutOfStock"
android:textColor="#ffff0f03"
android:layout_alignParentRight="true" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="ItemId"
android:id="#+id/ItemId"
android:visibility="invisible"
android:layout_columnSpan="4" />
</LinearLayout>
I'm excepting result sa at img1 , but instead of this I have result like at img2. Can somebody explain what's wrong?
Try this,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/Title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Title"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/Price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:text="Price"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ff5f59ff" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/InStock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:text="Stock"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ff00c000" />
<TextView
android:id="#+id/OutOfStock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Stock"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffff0f03"
android:visibility="invisible" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/ItemId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ItemId"
android:textAppearance="?android:attr/textAppearanceSmall"
android:visibility="invisible" />
</LinearLayout>

seekbar in gridLayout out of margin

I'm developing an android app in which I have a UI with some controls on a tts. I defined the layout in a xml file like this:
<GridLayout
android:id="#+id/vlmPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/btnPanel"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true">
<TextView
android:id="#+id/volumeLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="center_vertical"
android:layout_row="0"
android:text="Volume:" />
<SeekBar
android:id="#+id/volume"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="center_vertical"
android:layout_row="0"/>
<TextView
android:id="#+id/pitchLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_column="0"
android:layout_gravity="center_vertical"
android:layout_row="2"
android:text="Pitch:" />
<SeekBar
android:id="#+id/pitch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="center_vertical"
android:layout_row="2" />
<TextView
android:id="#+id/rateLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_column="0"
android:layout_gravity="center_vertical"
android:layout_row="3"
android:text="Rate:" />
<SeekBar
android:id="#+id/rate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="center_vertical"
android:layout_row="3" />
</GridLayout>
The problem is that the seekbar goes out of the margin and I'm not able to fix this problem.
Try this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/volumeLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
android:text="Volume:" />
<SeekBar
android:id="#+id/volume"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="center_vertical"
android:layout_row="0"
android:layout_weight="1"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/pitchLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_column="0"
android:layout_gravity="center_vertical"
android:layout_row="2"
android:text="Pitch:" />
<SeekBar
android:id="#+id/pitch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="center_vertical"
android:layout_row="2"
android:layout_weight="1"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/rateLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_column="0"
android:layout_gravity="center_vertical"
android:layout_row="3"
android:text="Rate:" />
<SeekBar
android:id="#+id/rate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="center_vertical"
android:layout_row="3"
android:layout_weight="1"/>
</TableRow>
</TableLayout>
</LinearLayout>
I have changed your layout into my way try to use this its solve your problem.
Thank you

Layout is beyond the right margin

I have a ListView in my Activity.
Each ListView item use (in a array adapter) this layout:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="top"
android:background="#ffffff"
android:columnCount="2"
android:rowCount="1" >
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="left|top"
android:layout_margin="5dp"
android:layout_row="0"
android:rowCount="3" >
<TextView
android:id="#+id/settingsHeader"
android:layout_column="0"
android:layout_gravity="left|top"
android:layout_row="0"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/settingsContent"
android:layout_column="0"
android:layout_gravity="left|top"
android:layout_row="2"
android:layout_width="match_parent"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</GridLayout>
<Switch
android:id="#+id/settingsToggle"
android:layout_column="1"
android:layout_marginRight="5dp"
android:layout_gravity="center_vertical|right"
android:layout_row="0"/>
</GridLayout>
But my problem is, that the layout is beyond the right margin. I think it's because the TextView settingsContent is not wrap the text. How can i solve this problem?
Add these piece of code to your TextView settingsContent.
android:ellipsize="end"
android:ems="9"
android:lines="1"
android:singleLine="true"
Set the width of your 1st GridLayout to 'fill_parent'.
XML will be like this:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top"
android:background="#ffffff"
android:columnCount="2"
android:rowCount="1" >
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="left|top"
android:layout_margin="5dp"
android:layout_row="0"
android:rowCount="3" >
<TextView
android:id="#+id/settingsHeader"
android:layout_column="0"
android:layout_gravity="left|top"
android:layout_row="0"
android:ellipsize="end"
android:ems="9"
android:lines="1"
android:singleLine="true"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/settingsContent"
android:layout_column="0"
android:layout_gravity="left|top"
android:layout_row="2"
android:layout_width="match_parent"
android:ellipsize="end"
android:ems="9"
android:lines="1"
android:singleLine="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</GridLayout>
<Switch
android:id="#+id/settingsToggle"
android:layout_column="1"
android:layout_marginRight="5dp"
android:layout_gravity="center_vertical|right"
android:layout_row="0"/>
This will might help you.
Try this..
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:background="#ffffff"
android:columnCount="2"
android:rowCount="1" >
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="left|top"
android:layout_margin="5dp"
android:layout_row="0"
android:rowCount="3" >
<TextView
android:id="#+id/settingsHeader"
android:layout_column="0"
android:layout_gravity="left|top"
android:layout_row="0"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/settingsContent"
android:layout_column="0"
android:layout_gravity="left|top"
android:layout_row="2"
android:layout_width="match_parent"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</GridLayout>
<Switch
android:id="#+id/settingsToggle"
android:layout_column="1"
android:layout_marginRight="5dp"
android:layout_gravity="center_vertical|right"
android:layout_row="0"/>
You might try the following code which will give you the same look..
<?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"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal"
android:layout_margin="5dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:gravity="center"
android:orientation="vertical"
android:layout_margin="2dp">
<TextView
android:id="#+id/settingsHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:textStyle="bold"
android:textColor="#696969"
android:layout_gravity="center"
android:text="hello how are you guys"/>
<TextView
android:id="#+id/settingsContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:textColor="#9C9A9A"
android:layout_gravity="center"
android:text="I am fine wat abt u"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:gravity="center|right"
android:orientation="vertical"
android:layout_margin="5dp">
<Switch
android:id="#+id/settingsToggle"
android:layout_width="60dp"
android:layout_height="25dp"
android:layout_margin="3dp"
android:textColor="#FFFFFF"
android:gravity="center"
android:text="Error"
android:background="#942B2A"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Categories

Resources