Android ListView Item Layout getting screwed up

Android ListView Item Layout getting screwed up - android

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>

Related

ImageButtons overlap in GridLayout, but don't want this

I am having problems with a GridLayout. In the layout below, phone_image and voip_image overlap and I don't want them to. phone_image is in column 0 and voip_image is in column 2.
SSCCE on Github
https://github.com/emnrd-ito/LayoutDemo
<HorizontalScrollView
android:id="#+id/container_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<GridLayout xmlns:mapbox="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/individual_gridlayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:alignmentMode="alignBounds"
android:columnCount="4"
android:columnOrderPreserved="false"
android:rowCount="7">
<ImageView
android:id="#+id/division_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_margin="10dp"
android:layout_row="0"
android:layout_rowSpan="3"
android:background="#null"
android:layout_gravity="center_horizontal"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/employee_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="0"
android:text="Nobody Lastname"
tools:text="name" />
<TextView
android:id="#+id/division"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="1"
android:text="My Division"
tools:text="division" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="2"
android:text="My Title"
tools:text="position" />
<TextView
android:id="#+id/address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="3"
android:text="123 Sesame St."
tools:text="address" />
<TextView
android:id="#+id/city_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="4"
android:text="mycity, mystate"
tools:text="city,state" />
<TextView
android:id="#+id/phone_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="5"
android:text="(555) 555-5555"
tools:text="phone" />
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnSpan="3"
android:layout_margin="10dp"
android:layout_row="6"
android:text="someone#somewhere.com"
tools:text="email" />
<ImageButton
android:id="#+id/directions_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="4"
android:background="#null"
android:src="#drawable/ic_directions_enabled" />
<ImageButton
android:id="#+id/phone_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_phone_enabled" />
<ImageButton
android:id="#+id/voip_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_voip_enabled" />
<ImageButton
android:id="#+id/email_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="6"
android:background="#null"
android:src="#drawable/ic_email_enabled" />
</GridLayout>
</HorizontalScrollView>
Edit:
I tried using Space like so:
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_column="1"
android:layout_row="5"/>
It seems to insert about 1/2 column, whereas using the blank image inserts a whole column. There may be parameters to play within the Space component though.

You can try to give android:maxWidth property to both voipImage and phoneImage ImageButtons, like this:
<ImageButton
android:id="#+id/phone_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="5"
android:maxWidth="96dp"
android:background="#null"
android:src="#drawable/ic_phone_enabled" />
<ImageButton
android:id="#+id/voip_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="5"
android:maxWidth="96dp"
android:background="#null"
android:src="#drawable/ic_voip_enabled" />
Update
The above changes are not necessary. I think that to solve your problem you can simply change the layout_column property of voip_image like this:
android:layout_column="1"
Hope this can help

One solution is to create a blank image and put it in the drawable folder.
Then use it to take up space in the layout like so:
<ImageButton
android:id="#+id/phone_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_phone_enabled" />
<ImageButton
android:id="#+id/blank_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_blank" />
<ImageButton
android:id="#+id/voip_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_voip_enabled" />

Changing button sizes for screen sizes Android Studio

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.andrewfinlay.vectorcalculator.MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="0"
android:password="false"
android:phoneNumber="false"
android:textAlignment="center"
android:id="#+id/resultOutput"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:textSize="30dp"
android:clickable="true"
android:textIsSelectable="true"/>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/gridLayout"
android:layout_below="#+id/resultOutput"
android:layout_alignParentEnd="true"
android:layout_marginBottom="50dp"
>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/x1"
android:layout_row="0"
android:layout_column="0"
android:hint="x1"
android:focusable="true"
android:nextFocusDown="#+id/x2"/>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/x2"
android:layout_row="0"
android:layout_column="1"
android:hint="x2"
android:focusable="true"
android:nextFocusDown="#+id/x3"/>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/x3"
android:layout_row="0"
android:layout_column="2"
android:hint="x3"
android:focusable="true"
android:nextFocusDown="#+id/y1"/>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/y1"
android:layout_row="1"
android:layout_column="0"
android:hint="y1"
android:focusable="true"
android:nextFocusDown="#+id/y2"/>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/y2"
android:layout_row="1"
android:layout_column="1"
android:hint="y2"
android:focusable="true"
android:nextFocusDown="#+id/y3"/>
<EditText
android:layout_width="110dp"
android:layout_height="wrap_content"
android:inputType="number|numberDecimal"
android:ems="10"
android:id="#+id/y3"
android:layout_row="1"
android:layout_column="2"
android:hint="y3"
android:focusable="true"/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Add"
android:id="#+id/addButton"
android:layout_row="2"
android:layout_column="0"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25sp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Sub"
android:id="#+id/subButton"
android:layout_row="2"
android:layout_column="1"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginRight="3dp"/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Unit"
android:id="#+id/unitButton"
android:layout_row="2"
android:layout_column="2"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Cross"
android:id="#+id/crossButton"
android:layout_row="3"
android:layout_column="0"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Dot"
android:id="#+id/dotButton"
android:layout_row="3"
android:layout_column="1"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginRight="3dp"/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Mag"
android:id="#+id/magButton"
android:layout_row="3"
android:layout_column="2"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
/>
<Button
android:layout_width="100dp"
android:layout_height="35dp"
android:text="Reset"
android:id="#+id/resetButton"
android:layout_row="4"
android:layout_column="1"
android:background="#3F51B5"
android:textColor="#ffffff"
android:textSize="25dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center|top"
android:layout_marginTop="10dp"
android:layout_marginRight="3dp"/>
</GridLayout>
</RelativeLayout>
At the minute the buttons/edit texts and output are all relative to the screen size because of dpi.
How would I go about adjusting this so it scales to different screen sizes? As this is what happens currently:
This is ideal: Nexus 5
This isn't: Nexus S

Since API 21 you can use android:layout_columnWeight="1" to distribute excess of space for each element column.
You'll want to asign the same column weight in order to fill each column space equally
Check GridLayout android reference http://developer.android.com/reference/android/widget/GridLayout.html
Section Excess Space Distribution

Try this layout instead:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/resultOutput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:clickable="true"
android:password="false"
android:phoneNumber="false"
android:text="0"
android:textAlignment="center"
android:textIsSelectable="true"
android:textSize="30dp" />
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#+id/resultOutput"
android:layout_marginBottom="50dp">
<EditText
android:id="#+id/x1"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
android:ems="10"
android:focusable="true"
android:hint="x1"
android:inputType="number|numberDecimal"
android:nextFocusDown="#+id/x2" />
<EditText
android:id="#+id/x2"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
android:ems="10"
android:focusable="true"
android:hint="x2"
android:inputType="number|numberDecimal"
android:nextFocusDown="#+id/x3" />
<EditText
android:id="#+id/x3"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="0"
android:ems="10"
android:focusable="true"
android:hint="x3"
android:inputType="number|numberDecimal"
android:nextFocusDown="#+id/y1" />
<EditText
android:id="#+id/y1"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
android:ems="10"
android:focusable="true"
android:hint="y1"
android:inputType="number|numberDecimal"
android:nextFocusDown="#+id/y2" />
<EditText
android:id="#+id/y2"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:ems="10"
android:focusable="true"
android:hint="y2"
android:inputType="number|numberDecimal"
android:nextFocusDown="#+id/y3" />
<EditText
android:id="#+id/y3"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="1"
android:ems="10"
android:focusable="true"
android:hint="y3"
android:inputType="number|numberDecimal" />
</GridLayout>
<LinearLayout
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/gridLayout"
android:orientation="horizontal">
<Button
android:id="#+id/addButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_weight="1"
android:layout_margin="8dp"
android:background="#3F51B5"
android:text="Add"
android:textColor="#ffffff"
android:textSize="25sp" />
<Button
android:id="#+id/subButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_margin="8dp"
android:layout_weight="1"
android:background="#3F51B5"
android:text="Sub"
android:textColor="#ffffff"
android:textSize="25sp" />
<Button
android:id="#+id/unitButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_margin="8dp"
android:layout_weight="1"
android:background="#3F51B5"
android:text="Unit"
android:textColor="#ffffff"
android:textSize="25sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/row2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/row1"
android:orientation="horizontal">
<Button
android:id="#+id/crossButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_weight="1"
android:layout_margin="8dp"
android:background="#3F51B5"
android:text="Cross"
android:textColor="#ffffff"
android:textSize="25sp" />
<Button
android:id="#+id/dotButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_margin="8dp"
android:layout_weight="1"
android:background="#3F51B5"
android:text="Dot"
android:textColor="#ffffff"
android:textSize="25sp" />
<Button
android:id="#+id/magButton"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_margin="8dp"
android:layout_weight="1"
android:background="#3F51B5"
android:text="Mag"
android:textColor="#ffffff"
android:textSize="25sp" />
</LinearLayout>
<Button
android:id="#+id/resetButton"
android:layout_below="#id/row2"
android:layout_width="100dp"
android:layout_height="35dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center|top"
android:layout_marginTop="10dp"
android:background="#3F51B5"
android:text="Reset"
android:textColor="#ffffff"
android:textSize="25sp" />
</RelativeLayout>

you would use hdpi, xhdpi, etc folders (http://developer.android.com/guide/practices/screens_support.html)
cheers

This is usually a very long process:
You must make separate directories for every layout in order to remain consistent to the user:
http://developer.android.com/guide/practices/screens_support.html
You have to make different layouts for each screen size, and android automatically sets the layout based on the name of the directory with the contents of your XML file:
IN ANDROID STUIDO:
Now, select the size:
Do this for every single layout you have:
(Small is considered pretty obsolete now)
Then, just render your layout in each directory. You don't have to make the directories like that, if you want you can just go into project view and create them and copy the xml files, but this way is much more easy.
Let me know if it helped,
Ruchir

Android: GridLayout rows are all bunched together

Im making using a Grid Layout on an app. The Columns work fine but the rows are giving me a problem.
I want 4 rows spread evenly on the image I am using. But for some reason the rows are all bunched up with only the last row ahead of the others. Its my first time using a GridLayout and i cant see what im doing wrong.
<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="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:src="#drawable/pitch"/>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:rowCount="4"
android:numColumns="5"
android:id="#+id/formation"
android:layout_alignBottom="#+id/imageView">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gk"
android:layout_row="0"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/gk"
android:layout_columnSpan="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DL"
android:layout_row="1"
android:layout_column="0"
android:layout_gravity="center"
android:id="#+id/dl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DC"
android:layout_row="1"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/dcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DC"
android:layout_row="1"
android:layout_column="3"
android:layout_gravity="center"
android:id="#+id/dcr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DR"
android:layout_row="1"
android:layout_column="4"
android:layout_gravity="center"
android:id="#+id/dr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ML"
android:layout_row="2"
android:layout_column="0"
android:layout_gravity="center"
android:id="#+id/ml" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MC"
android:layout_row="2"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/mcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MC"
android:layout_row="2"
android:layout_column="3"
android:layout_gravity="center"
android:id="#+id/mcr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MR"
android:layout_row="2"
android:layout_column="4"
android:layout_gravity="center"
android:id="#+id/mr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FC"
android:layout_row="3"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/fcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FC"
android:layout_row="3"
android:layout_column="3"
android:layout_gravity="center"
android:id="#+id/fcr" />
</GridLayout>

Suggest you to use linearlayout instead of gridlayout, to set image in background you need to use FrameLayout as in below code,
<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="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/next"
android:scaleType="centerCrop" />
</FrameLayout>
<LinearLayout
android:id="#+id/formation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4">
<LinearLayout
android:id="#+id/formation1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/gk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Gk" />
</LinearLayout>
<LinearLayout
android:id="#+id/formation2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/dl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="DL" />
<Button
android:id="#+id/dcl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="DC" />
<Button
android:id="#+id/dcr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="DC" />
<Button
android:id="#+id/dr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="DR" />
</LinearLayout>
<LinearLayout
android:id="#+id/formation3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/ml"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="ML" />
<Button
android:id="#+id/mcl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="MC" />
<Button
android:id="#+id/mcr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="MC" />
<Button
android:id="#+id/mr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="MR" />
</LinearLayout>
<LinearLayout
android:id="#+id/formation4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/fcl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="FC" />
<Button
android:id="#+id/fcr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="FC" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
hope this is usefull.

Consider instead using a vertical LinearLayout containing horizontal LinearLayouts (or more GridLayouts) for each row. Then each row view can have a layout_weight set to the same value so they are all allocated the same amount of space. In that case also set their layout_height to 0.

You can add:
android:layout_columnWeight="1"
android:layout_rowWeight="1"
in each Button. Like this:
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:rowCount="4"
android:numColumns="5"
android:id="#+id/formation"
android:layout_alignBottom="#+id/imageView">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gk"
android:layout_row="0"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/gk"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_columnSpan="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DL"
android:layout_row="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="center"
android:id="#+id/dl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DC"
android:layout_row="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="center"
android:id="#+id/dcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DC"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_gravity="centerl"
android:id="#+id/dcr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DR"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="4"
android:layout_gravity="center"
android:id="#+id/dr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ML"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_gravity="center"
android:id="#+id/ml" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MC"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/mcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MC"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_gravity="center"
android:id="#+id/mcr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MR"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="4"
android:layout_gravity="center"
android:id="#+id/mr" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FC"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_gravity="center"
android:id="#+id/fcl" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FC"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_gravity="center"
android:id="#+id/fcr" />
</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>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Android ListView Item Layout getting screwed up - android

Related

ImageButtons overlap in GridLayout, but don't want this

Changing button sizes for screen sizes Android Studio

Android: GridLayout rows are all bunched together

seekbar in gridLayout out of margin

How to wrap text in a TexView?

Categories

Resources