Предлагаю следующее решение (здесь на шесть ячеек, но вы можете добавить любое нужное количество):
Отказаться от RelativeLayout
так как это довольно ресурсоемкий контейнер, который здесь не нужен, в пользу наиболее подходящего для данной разметки TableLayout
с автовыравниванием столбцов (android:stretchColumns="*"
). Вместо ImageButton
использовать ImageView
, так он не имеет дефолтного бэкграунда. Здесь для всех ImageView
в качестве изображения задан один ресурс-селектор selectable_image1.xml, вы естественно для каждой ячейки сделаете свой, с разными картинками:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true"
android:stretchColumns="*">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="30dp">
<ImageView
android:id="@+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:clickable="true"
android:src="@drawable/selectable_image1" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:clickable="true"
android:src="@drawable/selectable_image1" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="30dp">
<ImageView
android:id="@+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:clickable="true"
android:src="@drawable/selectable_image1" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:clickable="true"
android:src="@drawable/selectable_image1" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="30dp">
<ImageView
android:id="@+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:clickable="true"
android:src="@drawable/selectable_image1" />
<ImageView
android:id="@+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:clickable="true"
android:src="@drawable/selectable_image1" />
</TableRow>
</TableLayout>
</ScrollView>
параметр android:paddingTop="30dp"
в элементах tableRow
задает расстояние между рядами.
Сами изображения. В данном случае, думаю, будет уместно использовать изображение одного размера под все плотности экрана (hdpi, xhdpi и тд), собственным размером в пикселях достаточным для качественного отображения на экранах xhdpi, на остальных экранах оно будет отмасштабировано через параметр android:adjustViewBounds="true"
для ImageView
. Ставим для ImageView
параметр android:clickable="true"
, чтобы он реагировал на нажатия.
Чтобы сделать реакцию на нажатие, я предлагаю не делать еще один комплект изображений, а просто добавить рамку к уже существующим изображениям, это позволит сократить размер приложения.
Делаем ресурс для нажатого состояния. На изображение накладываем рамку (прямоугольник) толщиной 5dp с скруглениями в 10dp (вы можете подобрать свои значения). Фоном заливки всего прямоугольника указываем прозрачный - #0000, чтобы изображение было видно и отображалась только рамка. Назовем его press_image1.xml. Помещаем в папку res/drawable/:
press_image1.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="@mipmap/image1" />
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid
android:color="#0000"/>
<stroke
android:width="5dip"
android:color="#3dbc24" />
</shape>
</item>
</layer-list>
Где image1 - изображение в ячейке.
Делаем селектор, чтобы реагировал на нажатия, назовем его selectable_image1.xml, помещаем в папку /res/drawable// Этот селектор будет в качестве источника изображения в ImageView
, который мы указываем через параметр android:src
:
selectable_image1.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/press_image1" />
<item android:drawable="@mipmap/image1" />
</selector>
Ну вот и все. Вам нужно будет проделать аналогичную работу для каждой картинки.
android:src
, если надо чтобы именно иконка была другой при нажатии или назначте ваш селектор дляandroid:src
, а не для бэкграунда, бэкграунд не указывайте - в зависимости от того, какой результат вам надо получитьImageView
параметрandroid:src="@mipmap/ic_wok_ovosh_7na8"
, что получится?