Develop Reference

Add text below the clickable ImageView

I want to add text below the clickable ImageView. It's like i want to name the ImageView but i couldn't place the text like i want. The clickable ImageView inside ScrollView. When i tried to add TextView right below the Image, it messed up my ScrollView
This is the example image like what i want to make
and this is my xml
<?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="wrap_content"
tools:context=".Huruf">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:weightSum="10"
android:background="#00bedc"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_gravity="center"
android:background="#fe8f2f"
android:padding="20dp"
android:layout_height="match_parent">
<ImageView
android:id="#+id/huruf_close"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/back_white"
android:layout_gravity="left" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="30dp"
android:text="#string/huruf"
android:textColor="#FFFFFF" />
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_marginBottom="15dp"
android:layout_height="wrap_content">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4sp"
android:layout_weight="8"
android:alignmentMode="alignBounds"
android:columnCount="3"
android:columnOrderPreserved="false"
android:useDefaultMargins="true"
>
<ImageView
android:id="#+id/a"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/aa"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/b"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/bb"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/c"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/cc"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/d"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/dd"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/e"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ee"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/f"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ff"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/g"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/gg"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/h"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/hh"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/i"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ii"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/j"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/jj"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/k"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/kk"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/l"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ll"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/m"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/mm"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/n"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/nn"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/o"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/oo"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/p"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/pp"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/q"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/qq"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/r"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/rr"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/s"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ss"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/t"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/tt"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/u"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/uu"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/v"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/vv"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/w"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/ww"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/x"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/xx"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/y"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/yy"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="#+id/z"
android:layout_height="100dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
android:src="#drawable/zz"
android:layout_marginBottom="15dp"
/>
</GridLayout>
</ScrollView>
</LinearLayout>
</RelativeLayout>
P.S.
I'm really sorry if the explanation is not very clear, it's little bit hard write down my problem

I think you should make your own layout.
To make it like here :
How it's look like
Just create your own layout containing textView and imageView:
public class ImageWithText extends LinearLayout {
String description;
Drawable image;
public ImageWithText(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.image_with_text, this);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ImageWithText, 0, 0);
ImageView imageImageView = findViewById(R.id.image);
image = a.getDrawable(R.styleable.ImageWithText_image);
imageImageView.setImageDrawable(image);
TextView descriptionTextView = findViewById(R.id.description);
description = a.getString(R.styleable.ImageWithText_description);
descriptionTextView.setText(description);
}
Next you need to add attributes in values/attrs.xml:
<resources>
<declare-styleable name="ImageWithText">
<attr name="image" format="reference"/>
<attr name="description" format="string" />
</declare-styleable>
Create your new layout of the item:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/image_with_text"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_margin="10dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textAlignment="center" />
And use it like this:
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:columnCount="3">
<com.example.empty.myapplication.Layout.ImageWithText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:gravity="center"
app:description="google"
app:image="#drawable/common_google_signin_btn_icon_dark" />
<com.example.empty.myapplication.Layout.ImageWithText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:gravity="center"
app:description="google"
app:image="#drawable/common_google_signin_btn_icon_dark" />
<com.example.empty.myapplication.Layout.ImageWithText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:gravity="center"
app:description="google"
app:image="#drawable/common_google_signin_btn_icon_dark" />
</GridLayout>

Use the below code to get your actual layout.
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="8"
android:alignmentMode="alignBounds"
android:columnCount="3"
android:columnOrderPreserved="false"
android:padding="4sp"
android:useDefaultMargins="true">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:orientation="vertical">
<ImageView
android:id="#+id/a"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="fill_horizontal"
android:layout_marginBottom="15dp"
app:srcCompat="#drawable/ic_size_plus" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:textStyle="bold"
android:gravity="center"
android:text="AA" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:orientation="vertical">
<ImageView
android:id="#+id/b"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="fill_horizontal"
android:layout_marginBottom="15dp"
app:srcCompat="#drawable/ic_size_plus" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:textStyle="bold"
android:gravity="center"
android:text="BB" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:orientation="vertical">
<ImageView
android:id="#+id/c"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="fill_horizontal"
android:layout_marginBottom="15dp"
app:srcCompat="#drawable/ic_size_plus" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:textStyle="bold"
android:gravity="center"
android:text="CC" />
</LinearLayout>
</GridLayout>

You should use grid view, check out this tutorial : https://www.viralandroid.com/2016/04/android-gridview-with-image-and-text.html

Android Studio gridlayout. Preview and emulator show different outcomes

I am trying to create a simple grid layout buttons of 2 columns and 4 rows. I want those button to fill their space like it shows in the preview. But the emulator shows different output.
The Preview shows exactly 8 filled buttons saying hello but emulator output shows the buttons on the left size of each box.
Preview
Emulator Results
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnOrderPreserved="false"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:rowCount="4">
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</GridLayout>

I couldn't figure the issue in that case but i just used the regular grid layout with column and row indication for each button. That did the trick.
Notice that I have layout_column and layout_row to specify where they should stand.
[Solution][1]: https://i.stack.imgur.com/K5MAx.png
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnOrderPreserved="false">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>

Cannot display two buttons with one button as twice the width of other in GridLayout

I need to use GridLayout to display two buttons. One and second one with twice the width of other button. I want the NEXT button be twice the width of BACK button and I need a GridLayout.
My source code is as below:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/Calculator.Grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="3"
app:rowCount="1">
<Button
android:id="#+id/button_back"
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:layout_gravity="left|top"
android:background="#drawable/bg_back_button"
android:text="#string/back"
android:textColor="?attr/colorTextSecondary"
android:textSize="16sp" />
<Button
android:id="#+id/button_next"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_columnWeight="2"
android:layout_gravity="fill"
android:background="#drawable/bg_next_button"
android:text="#string/next"
android:textColor="?attr/colorTextPrimary"
android:textSize="16sp" />
</GridLayout>
Desired display (NEXT Button should be double the width of BACK button) :
But the result is (Problem) :

If you don't have any problem with Linear Layout as inner container then use this
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/Calculator.Grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="3"
app:rowCount="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_back"
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:layout_gravity="left|top"
android:background="#drawable/bg_back_button"
android:text="#string/back"
android:textColor="?attr/colorTextSecondary"
android:textSize="16sp"
android:layout_weight="2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_next"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_columnWeight="2"
android:layout_gravity="fill"
android:background="#drawable/bg_next_button"
android:text="#string/next"
android:textColor="?attr/colorTextPrimary"
android:textSize="16sp"
android:layout_weight="1"/>
</LinearLayout>
</GridLayout>

This is work my bro try this
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnCount="3"
android:rowCount="3">
<Button
android:id="#+id/textViewNW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:layout_gravity="center|fill"
android:layout_rowSpan="1"
android:layout_rowWeight="1"
android:background="#fe4141"
android:text="#string/app_name"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/textViewNE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="2"
android:layout_columnWeight="2"
android:layout_gravity="center|fill"
android:layout_rowSpan="2"
android:layout_rowWeight="2"
android:background="#51f328"
android:text="#string/app_name"
android:textAppearance="?android:attr/textAppearanceLarge" />
</GridLayout>

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/Calculator.Grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="3"
app:rowCount="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:id="#+id/button_back"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:layout_gravity="left|top"
android:layout_weight="2"
android:background="#drawable/bg_back_button"
android:text="#string/back"
android:textColor="?attr/colorTextSecondary"
android:textSize="16sp" />
<Button
android:id="#+id/button_next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_columnWeight="2"
android:layout_gravity="fill"
android:layout_weight="1"
android:background="#drawable/bg_next_button"
android:text="#string/next"
android:textColor="?attr/colorTextPrimary"
android:textSize="16sp" />
</LinearLayout>
</GridLayout>

Drag and Drop on a grid

I am currently developing an Android APP and I have ran into a bit of a snag. I am using the drag and drop feature to drag different items around and place them into a different layout. I want the layout where I drop the items to be setup in a grid. Where I can drop an item in the general area and it would snap into that location on the grid.
I have done this, but I feel like it is really clunky and there must be a much easier way to get this accomplished. This is how I have it now..
<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="com.example.david.seniorproject.Controller_LayoutFragment"
tools:showIn="#layout/activity_controller__layout">
<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=".8"
android:id="#+id/linear_layout">
<GridLayout
android:id="#+id/frame_layout"
android:layout_width="0dp"
android:layout_weight=".75"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="0"
android:id="#+id/relative1"
android:layout_column="0"></RelativeLayout>
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="0"
android:id="#+id/relative2"
android:layout_column="1" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="0"
android:id="#+id/relative3"
android:layout_column="2" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="0"
android:id="#+id/relative4"
android:layout_column="3" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="0"
android:id="#+id/relative5"
android:layout_column="4" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="0"
android:id="#+id/relative6"
android:layout_column="5" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="1"
android:id="#+id/relative7"
android:layout_column="0" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="1"
android:id="#+id/relative8"
android:layout_column="1" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="1"
android:id="#+id/relative9"
android:layout_column="2" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="1"
android:id="#+id/relative10"
android:layout_column="3" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="1"
android:id="#+id/relative11"
android:layout_column="4" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="1"
android:id="#+id/relative12"
android:layout_column="5" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="2"
android:id="#+id/relative13"
android:layout_column="0" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="2"
android:id="#+id/relative14"
android:layout_column="1" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="2"
android:id="#+id/relative15"
android:layout_column="2" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="2"
android:id="#+id/relative16"
android:layout_column="3" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="75dp"
android:layout_row="2"
android:id="#+id/relative17"
android:layout_column="4" />
<RelativeLayout
android:layout_width="74dp"
android:layout_height="wrap_content"
android:layout_row="2"
android:id="#+id/relative18"
android:layout_column="5" />
</GridLayout>
<ListView
android:layout_width="0dp"
android:layout_weight=".25"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:backgroundTint="#ff5500" />
</LinearLayout>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".3"
android:paddingRight="80dp"
android:id="#+id/horizontalScrollView"
android:layout_gravity="center_horizontal" >
<LinearLayout
android:id="#+id/input_items"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:layout_width="80dp"
android:text="Test"
android:layout_height="match_parent"
android:background="#drawable/red_circle"
android:id="#+id/button2" /></LinearLayout>
</HorizontalScrollView>
</LinearLayout>
</RelativeLayout>
As you can see, I placed a bunch of layouts evenly throughout the GridLayout. It works, but I feel like there is a better way. The button is just dummy data to test the drag and drop feature.
So my question is, is there a way to setup a gridLayout, or a different Layout to do the same as my setup, without all the extra layouts, or would it be better to just create a custom ViewGroup.

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>