Strange layout bug - android

I have the following in for my layout.xml. The e_btn_fretboard does not register clicks at all. Even when I press on it it does not change to pressed state color. All the other buttons do work. I moved the button to another grid cell and left that one empty. And here is the thing when I moved the button it now registers click and changes to pressed state color.
<?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.support.constraint.ConstraintLayout 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">
<ImageView
android:id="#+id/board_img"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/fretboard_12" />
<ImageView
android:id="#+id/fretmarker"
android:layout_width="14dp"
android:layout_height="14dp"
android:src="#drawable/fretmarker" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="30dp"
android:clipToPadding="false"
android:fillViewport="false"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/board_img"
app:layout_constraintVertical_bias="0.0">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:columnCount="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/noteImage"
>
<Button
android:id="#+id/c_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_column="0"
android:layout_row="0"
android:text="C"
/>
<Button
android:id="#+id/csharp_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="0"
android:text="C#/Db"
android:textAllCaps="false"
/>
<Button
android:id="#+id/d_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="0"
android:text="D"
/>
<Button
android:id="#+id/dsharp_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="D#/Eb"
android:textAllCaps="false" />
<Button
android:id="#+id/e_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="E" />
<Button
android:id="#+id/f_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="F" />
<Button
android:id="#+id/fsharp_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="F#/Gb"
android:textAllCaps="false" />
<Button
android:id="#+id/g_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="G" />
<Button
android:id="#+id/gsharp_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="G#/Ab"
android:textAllCaps="false" />
<Button
android:id="#+id/a_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="A"
android:textAllCaps="false" />
<Button
android:id="#+id/asharp_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="A#/Bb"
android:textAllCaps="false"/>
<Button
android:id="#+id/b_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="B" />
</GridLayout>
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
</RelativeLayout>


Try to simplify your layout first. There are not required containers like main RelativeLayout and LinearLayout inside ScrollView. Simplifying that things will improve performance, readability and can reduce a possibility to make a mistake.

Related

Grid Not Taking Full Width

I recently got a new computer and installed android studio on it. Now my grid is not taking the full width of the screen. I am almost certain it was taking the full width on my other install of android studio. I do not have a device to test on but on the emulators it is not working.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context="io.musicschool.app.NoteTrainerActivity">
<ImageView
android:id="#+id/intervalNoteImage"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/c4" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="30dp"
android:clipToPadding="false"
android:fillViewport="false"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/intervalNoteImage"
app:layout_constraintVertical_bias="0.0">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:columnCount="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/noteImage"
>
<Button
android:id="#+id/unison_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:text="Unison"
android:textAllCaps="false"
/>
<Button
android:id="#+id/min2nd_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="0"
android:text="Min 2nd"
android:textAllCaps="false"/>
<Button
android:id="#+id/maj2nd_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="0"
android:text="Maj 2nd"
android:textAllCaps="false" />
<Button
android:id="#+id/min3rd_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="Min 3rd"
android:textAllCaps="false"
/>
<Button
android:id="#+id/maj3rd_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="Maj 3rd"
android:textAllCaps="false" />
<Button
android:id="#+id/per4th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="Per 4th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/aug4th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="Aug 4th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/dim5th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="Dim 5th"
android:textAllCaps="false" />
<Button
android:id="#+id/per5th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="Per 5th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/min6th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="Min 6th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/maj6th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="Maj 6th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/min7th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="Min 7th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/maj7th_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="4"
android:text="Maj 7th"
android:textAllCaps="false"
/>
<Button
android:id="#+id/oct_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="4"
android:text="Octave"
android:textAllCaps="false"
/>
</GridLayout>
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>

Fill whole screen with four buttons by two rows in Android

I want to fill the whole screen with four buttons that has the same width and height so I thought a grid layout would be a great idea:
<GridLayout
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_columnWeight="1"
android:layout_rowWeight="0"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_columnWeight="1"
android:layout_rowWeight="0"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
/>
</GridLayout>
Unfortunatly my result looks like this:
I don't understand why the height of the second row is so big?
I thought every cell in a grid layout got the same width and height!

This can also be done with ConstraintLayout, which will give you a flat hierarchy and more flexibility for future changes.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintBottom_toTopOf="#id/button3"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button4" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button4"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintTop_toBottomOf="#id/button2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button3"/>
</android.support.constraint.ConstraintLayout>

if you want to do that with Gridlayout :
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:orientation="vertical"
android:rowCount="2">
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="0"
android:layout_rowWeight="1" />
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="1"
android:layout_rowWeight="1" />
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="1"
android:layout_rowWeight="1" />
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="0"
android:layout_rowWeight="1" />
</GridLayout>
you can do this with linearlayout like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>

Android On Screen Buttons overlap with Tabs Application

I am building the layout of my App. It uses the default Tabs layout and the fragment is a Relative Layout with a GridLayout and a TableLayout in it.
At the bottom of the Screen I have a View, which should be fixed to the bottom of the screen with android:layout_alignParentBottom="true" and the Preview shows the layout I intend.
When I run the App in the Simulator the Android On Screen Buttons overlap and cover the lower Part of my App.
Preview:
Simulator:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="0dp"
android:paddingRight="0dp" >
<View
android:layout_width="fill_parent"
android:layout_height="4dp"
android:background="#android:color/white"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_above="#+id/bottomView"
android:id="#+id/spacer"/>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="65dp"
android:columnCount="3"
android:rowCount="2"
android:orientation="vertical"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:fitsSystemWindows="true"
android:background="#android:color/white"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
android:id="#+id/bottomView"
>
<TextView
android:text="Punkte ø"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:textSize="18sp" />
<TextView
android:text="15.0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:textSize="24sp" />
N<TextView
android:text="Noten ø"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:textSize="18sp" />
<TextView
android:text="1.0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:textSize="24sp" />
<TextView
android:text="Anzahl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:textSize="18sp" />
<TextView
android:text="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:textSize="24sp" />
</GridLayout>
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_red_dark"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/textView"
android:layout_above="#id/spacer"
android:id="#+id/red"
>
<GridLayout
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="3"
android:layout_below="#+id/textView"
android:layout_above="#id/spacer"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="13"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="14"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="15"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="11"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AC"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DEL"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:textColor="#android:color/white"
/>
</GridLayout>
</TableLayout>
<TextView
android:text="15 15 15 15 15"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:id="#+id/textView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
android:textAlignment="center"
android:gravity="center"
android:background="#android:color/darker_gray" />
How can I make the white bottom view stick to the botttom without being overlaped by the naviugation buttons?

Please replace with this code you can see perfect layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="0dp"
android:paddingRight="0dp">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="15 15 15 15 15"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Display1" />
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottomView"
android:layout_width="fill_parent"
android:layout_height="65dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#android:color/white"
android:columnCount="3"
android:fitsSystemWindows="true"
android:horizontalSpacing="0dp"
android:orientation="vertical"
android:rowCount="2"
android:verticalSpacing="0dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:text="Punkte ø"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:text="15.0"
android:textSize="24sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:text="Noten ø"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:text="1.0"
android:textSize="24sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:text="Anzahl"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center"
android:text="5"
android:textSize="24sp" />
</GridLayout>
<View
android:id="#+id/spacer"
android:layout_width="fill_parent"
android:layout_height="4dp"
android:layout_above="#id/bottomView"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:background="#android:color/white" />
<TableLayout
android:id="#+id/red"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#id/textView"
android:layout_above="#id/spacer"
android:background="#android:color/holo_red_dark">
<GridLayout
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/spacer"
android:layout_below="#id/textView"
android:columnCount="3">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="13"
android:textColor="#android:color/white" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="14"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="15"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="10"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="11"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="12"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="7"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="8"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="9"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="4"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="5"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="6"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="1"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="2"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="3"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="AC"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="0"
android:textColor="#android:color/white"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="#color/colorAccent"
android:text="DEL"
android:textColor="#android:color/white"
/>
</GridLayout>
</TableLayout>

Why the grid view appear different in the emulator?

Why does the emulator have different sizes of buttons other than the designed ones here is the XML? This is a serious problem with the grid views and I've encountered it many times but I can't find the answer.
Where is the problem?
<?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="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"
tools:context="com.example.life.braintrainer.MainActivity">
<Button
android:id="#+id/startButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#26eb47"
android:onClick="start"
android:padding="40dp"
android:text="Go!"
android:textSize="70sp"
android:visibility="invisible" />
<TextView
android:id="#+id/timerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#e6ff26"
android:padding="10dp"
android:text="30s"
android:textSize="30sp" />
<TextView
android:id="#+id/pointsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/timerTextView"
android:background="#fe8a0e"
android:padding="10dp"
android:text="0/0"
android:textSize="30sp" />
<TextView
android:id="#+id/sumTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/pointsTextView"
android:layout_centerHorizontal="true"
android:padding="15dp"
android:text="30 + 12"
android:textColor="#312e2e"
android:textSize="25sp" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/sumTextView"
android:layout_alignParentStart="true"
android:columnCount="2"
android:rowCount="2">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="1"
android:background="#27f13f"
android:onClick="chooseAnswer"
android:tag="0"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="1"
android:background="#0a2ef9"
android:onClick="chooseAnswer"
android:tag="1"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_rowWeight="1"
android:background="#f43ffb"
android:onClick="chooseAnswer"
android:tag="2"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_rowWeight="1"
android:background="#2cdefe"
android:onClick="chooseAnswer"
android:tag="3"
android:text="3"
android:textSize="80sp" />
</GridLayout>
<TextView
android:id="#+id/resultTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/startButton"
android:layout_centerHorizontal="true"
android:text="Correct!"
android:textSize="40sp" />
</RelativeLayout>

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>

Categories

Resources