Layout is beyond the right margin - android

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>

Related

LinearLayout inside gridlayout

I have a linearlayout with textview and a imageview inside the gridlayout. I want linearlayout in column1 with the textview and imageview fitting properly in that column of the row. But the image view comes below the textview.
Required result:
My output:
Here is my code:
<GridLayout
android:orientation="horizontal"
android:rowCount="4"
android:columnCount="3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/gridLayoutSuburb">
<LinearLayout
android:orientation="vertical"
android:id="#+id/linearLayout1"
android:layout_row="0"
android:layout_column="0"
android:layout_width="0dp"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:background="#color/blue">
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/edittext"
android:id="#+id/select"
android:textColor="#color/white"
android:textSize="#dimen/_16sdp"
android:textColorHint="#color/white"
android:editable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:hint="Select "
android:paddingLeft="#dimen/_5sdp"
android:layout_weight="1"
android:singleLine="true" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:id="#+id/selectImage"
android:src="#drawable/ic_menu_back" />
</LinearLayout>
</GridLayout>
What am I doing wrong?
change your Linearlayout orientation to android:orientation="horizontal" from android:orientation="vertical"
Use
android:orientation="horizontal"
Instead of
android:orientation="vertical"
CODE
<GridLayout
android:orientation="horizontal"
android:rowCount="4"
android:columnCount="3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/gridLayoutSuburb">
<LinearLayout
android:orientation="horizontal"
android:id="#+id/linearLayout1"
android:layout_row="0"
android:layout_column="0"
android:layout_width="0dp"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:background="#color/blue">
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/edittext"
android:id="#+id/select"
android:textColor="#color/white"
android:textSize="#dimen/_16sdp"
android:textColorHint="#color/white"
android:editable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:hint="Select "
android:paddingLeft="#dimen/_5sdp"
android:layout_weight="1"
android:singleLine="true" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:id="#+id/selectImage"
android:src="#drawable/ic_menu_back" />
</LinearLayout>
</GridLayout>
Replace this attribute value of LinearLayout:
android:orientation="vertical"
To:
android:orientation="horizontal"
Change linear layout orientation to
android:orientation="horizontal"
<GridLayout
android:orientation="horizontal"
android:rowCount="4"
android:columnCount="3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/gridLayoutSuburb">
<LinearLayout
android:orientation="horizontal"
android:id="#+id/linearLayout1"
android:layout_row="0"
android:layout_column="0"
android:layout_width="0dp"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:background="#color/blue">
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/edittext"
android:id="#+id/select"
android:textColor="#color/white"
android:textSize="#dimen/_16sdp"
android:textColorHint="#color/white"
android:editable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:hint="Select "
android:paddingLeft="#dimen/_5sdp"
android:layout_weight="1"
android:singleLine="true" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:id="#+id/selectImage"
android:src="#drawable/ic_menu_back" />
</LinearLayout>
Update Your code to this
<GridLayout
android:orientation="horizontal"
android:rowCount="4"
android:columnCount="3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/gridLayoutSuburb">
<LinearLayout
android:orientation="horizontal"
android:id="#+id/linearLayout1"
android:layout_row="0"
android:layout_column="0"
android:layout_width="0dp"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:background="#color/blue">
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/edittext"
android:id="#+id/select"
android:textColor="#color/white"
android:textSize="#dimen/_16sdp"
android:textColorHint="#color/white"
android:editable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:hint="Select "
android:paddingLeft="#dimen/_5sdp"
android:layout_weight="1"
android:singleLine="true" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:id="#+id/selectImage"
android:src="#drawable/ic_menu_back" />
</LinearLayout>
User android:orientation="horizontal" and give android:width="0dp" so that the text remains in one line and doesn't increase it's width.
<GridLayout
android:orientation="horizontal"
android:rowCount="4"
android:columnCount="3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/gridLayoutSuburb">
<LinearLayout
android:orientation="vertical"
android:id="#+id/linearLayout1"
android:layout_row="0"
android:layout_column="0"
android:layout_width="0dp"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:background="#color/blue">
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/edittext"
android:id="#+id/select"
android:textColor="#color/white"
android:textSize="#dimen/_16sdp"
android:textColorHint="#color/white"
android:editable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:hint="Select "
android:paddingLeft="#dimen/_5sdp"
android:layout_weight="1"
android:singleLine="true" />
<ImageView
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:id="#+id/selectImage"
android:src="#drawable/ic_menu_back" />
</LinearLayout>
</GridLayout>
Change linearLayout1 orientation vertical to horizontal and add some margin among them:
<GridLayout
android:orientation="horizontal"
android:rowCount="4"
android:columnCount="3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/gridLayoutSuburb">
<LinearLayout
android:orientation="horizontal"
android:id="#+id/linearLayout1"
android:layout_row="0"
android:layout_column="0"
android:layout_width="0dp"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:background="#color/blue">
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/edittext"
android:id="#+id/select"
android:textColor="#color/white"
android:textSize="#dimen/_16sdp"
android:textColorHint="#color/white"
android:editable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:hint="Select "
android:paddingLeft="#dimen/_5sdp"
android:layout_weight="1"
android:singleLine="true" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="20dp"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:id="#+id/selectImage"
android:src="#drawable/ic_menu_back" />
</LinearLayout>
</GridLayout>

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>

Android ListView Item Layout getting screwed up

I tried to customize the layout of my ListView so I made up the following layout file:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="100dp"
tools:context=".workout.WorkoutPlanFragment"
android:paddingRight="10dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/edit_view"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:layout_row="0"
android:visibility="gone">
<ImageView
android:layout_width="40dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_delete"
android:layout_column="0"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:layout_marginRight="15dp"
android:layout_marginLeft="15dp"
android:id="#+id/image_view_delete_workout_plan"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image_view_move_down"
android:src="#drawable/ic_down" android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image_view_move_up"
android:src="#drawable/ic_up" android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"/>
</LinearLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/workout_plan_fragment" android:layout_column="1" android:layout_row="0">
<ImageView
android:layout_width="93dp"
android:layout_height="match_parent"
android:src="#drawable/img_workout"
android:id="#+id/imageView5"
android:layout_column="0" android:layout_row="0" android:layout_rowSpan="3"
android:paddingBottom="4dp" android:paddingTop="4dp" android:layout_marginRight="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Someting"
android:alpha="1"
android:id="#+id/text_view_plan_name" android:layout_gravity="center_vertical"
android:layout_column="1" android:layout_row="0"
android:textColor="#5a70ff"
android:textSize="26dp" android:layout_marginTop="5dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="asdf"
android:id="#+id/text_view_anz_exercises" android:layout_row="1" android:layout_column="1"
android:layout_rowWeight="0.1" android:alpha="1" android:textSize="15dp"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall" android:text="blablablablablabla"
android:id="#+id/text_view_last_workout" android:layout_row="2" android:layout_column="1"
android:layout_marginBottom="5dp"/>
</GridLayout>
When I use this layout on a Fragment or just check it in the design tab it looks totally fine like this:
But as soon as I apply this layout to a ListView item it turns out looking like that:
I already tried replacing the GridLayout by a LinearLayout or something like that but it always looks like that...
How can I make the ListView item look like the designed Layout?
Try this code.
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingRight="10dp" />
<LinearLayout
android:id="#+id/edit_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:layout_row="0"
android:orientation="horizontal"
android:visibility="gone">
<ImageView
android:id="#+id/image_view_delete_workout_plan"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image_view_move_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image_view_move_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<GridLayout
android:id="#+id/workout_plan_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0">
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginRight="10dp"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/text_view_plan_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="center_vertical"
android:layout_marginTop="5dp"
android:layout_row="0"
android:alpha="1"
android:text="Someting"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#5a70ff"
android:textSize="26dp" />
<TextView
android:id="#+id/text_view_anz_exercises"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:layout_rowWeight="0.1"
android:alpha="1"
android:text="asdf"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="15dp" />
<TextView
android:id="#+id/text_view_last_workout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_marginBottom="5dp"
android:layout_row="2"
android:text="blablablablablabla"
android:textAppearance="?android:attr/textAppearanceSmall" />
</GridLayout>

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

How to wrap text in a TexView?

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>

Categories

Resources