Android TableLayout rows and columns evenly distributed - android

I have a problem with Table layout to get ImageButtons evenly distributed in grid 3x4. Below is used code to achieve this. There is fitXY (images get stretched unnaturally in horizontally or vertically). Where I have fitCenter images in last row has been not square and looks odd in comparison with other images (all images are square). This images in last row was horizontally narrowed.
* I also have question what about TableLayout and weight="1" + match_parent every where and if one image will have 100x100px and other 400x400px I noticed that this regular grid was totally messed up. What is the best practice to achieve such regular grid of buttons? *
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bigben"
android:id="#+id/moreappsSwipeLayout">
<TableLayout
android:id="#+id/MoreAppsActivityTable"
android:layout_above="#id/swipe_instruction"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginTop="80dp"
android:layout_marginBottom="80dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp">
<TableRow android:id="#+id/TableRow01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:id="#+id/downloadEnglishBtn"
android:contentDescription="#string/english_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/en_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/downloadSpanishBtn"
android:contentDescription="#string/spanish_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#+drawable/es_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/downloadGermanBtn"
android:contentDescription="#string/german_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#+drawable/de_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
</TableRow>
<TableRow android:id="#+id/TableRow02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:id="#+id/downloadFrenchBtn"
android:contentDescription="#string/french_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#+drawable/fr_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/downloadItalianBtn"
android:contentDescription="#string/italian_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#+drawable/it_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/downloadPolishBtn"
android:contentDescription="#string/polish_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#+drawable/pl_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
</TableRow>
<TableRow android:id="#+id/TableRow03"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:id="#+id/downloadPortugueseBtn"
android:contentDescription="#string/portuguese_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#+drawable/pt_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/downloadRussianBtn"
android:contentDescription="#string/russian_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#+drawable/ru_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/downloadDutchBtn"
android:contentDescription="#string/dutch_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#+drawable/nl_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
</TableRow>
<TableRow android:id="#+id/TableRow04"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:id="#+id/downloadRomanianBtn"
android:contentDescription="#string/romanian_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#+drawable/ro_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/downloadTurkishBtn"
android:contentDescription="#string/turkish_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#+drawable/tr_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/downloadArabicBtn"
android:contentDescription="#string/arabic_lang"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#+drawable/ar_favicon"
android:background="#null"
android:layout_margin="6dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
/>
</TableRow>
</TableLayout>
<TextView
android:id="#+id/swipe_instruction"
android:text="#string/swipe_instruction"
android:textColor="#000000"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginBottom="40dp"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>

Related

TableLayout with ImageView inside

I am new to android and learning yet. I am trying to make my activity layout something like below image.
I thought to use TableLayout for same like below
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:id="#+id/row_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:background="#ed8404">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:gravity="center"
android:scaleType="fitCenter"
android:src="#drawable/image1" />
</TableRow>
<TableRow
android:id="#+id/row_2"
android:weightSum="2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:gravity="center"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/image1"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/image1" />
</TableRow>
<TableRow
android:id="#+id/row_3"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_marginTop="4dp"
android:background="#ed8404">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/image1"/>
</TableRow>
<TableRow
android:layout_weight="1"
android:id="#+id/row_4"
android:weightSum="2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:gravity="center"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/image1"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/image1" />
</TableRow>
</TableLayout>
But I am not able to fix proper height on all images. Its looking something like this image.
Let me know if someone can help me for solve the issue. I want all images fit to view and with same height. Thanks a lot.

When you have more elements than can fit on the screen you have to use RecyclerView (with different ViewHolders).
If you have fixed number of elements you can use LinearLayout to reduce nesting level:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#F0F"
android:gravity="center"
android:scaleType="fitCenter" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#0FF"
android:gravity="center"
android:scaleType="fitCenter" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#FF0"
android:gravity="center"
android:scaleType="fitCenter" />
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#00F"
android:gravity="center"
android:scaleType="fitCenter" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#0F0"
android:gravity="center"
android:scaleType="fitCenter" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#F00"
android:gravity="center"
android:scaleType="fitCenter" />
</LinearLayout>
</LinearLayout>
For which you can expect output:

How to show multiple images inside Linear Layout?

I am developing an android video app where i will list screenshot images of every video atleast 10 pieces for each video.And i am using Linear Layout which is inside a nestedscrollview, to show those images but only works when i put 3 imageview but if i put more than 3 imageview then it doesn't work at all and the app doesn't respond.Here is my xml layout of the screenshot.xml file..
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="#drawable/alaep1b" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="#drawable/alaep1c" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="#drawable/alaep1j" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="#drawable/alaep1f" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="#drawable/alaep1g" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="#drawable/alaep1h" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="#drawable/alaep1m" />
</LinearLayout>
What is wrong with my code?

You should definitely think about using RecyclerView here.
Your app doesn't respond, beacause of memory issues.
Check the example: Recycler View

There are many ways to show the images. But for your simplicity.
Here is the code. but I would highly recommend going for either GridView or
ListView or RecyclerView.
This is neither of them. But still, you can show it in your activity.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:orientation="vertical"
tools:context="com.example.xxx.yyy.MainActivity">
<TableLayout
android:layout_width="match_parent"
android:layout_margin="10dp"
android:id="#+id/tableLayout"
android:layout_height="380dp"
android:layout_weight="1"
android:weightSum="2">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/imageOne"
android:scaleType="matrix"
android:layout_margin="5dp"
android:background="#drawable/view_background"/>
<ImageView
android:layout_weight="1"
android:layout_margin="5dp"
android:id="#+id/imageTwo"
android:scaleType="matrix"
android:background="#drawable/view_background"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/imageThree"
android:layout_margin="5dp"
android:scaleType="matrix"
android:background="#drawable/view_background"/>
<ImageView
android:layout_weight="1"
android:layout_margin="5dp"
android:id="#+id/imageFour"
android:scaleType="matrix"
android:background="#drawable/view_background"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/imageFive"
android:layout_margin="5dp"
android:scaleType="matrix"
android:background="#drawable/view_background"/>
<ImageView
android:layout_weight="1"
android:layout_margin="5dp"
android:id="#+id/imageSix"
android:scaleType="matrix"
android:background="#drawable/view_background"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/imageSeven"
android:layout_margin="5dp"
android:scaleType="matrix"
android:background="#drawable/view_background"/>
<ImageView
android:layout_weight="1"
android:layout_margin="5dp"
android:id="#+id/imageEight"
android:scaleType="matrix"
android:background="#drawable/view_background"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/imageNine"
android:layout_margin="5dp"
android:scaleType="matrix"
android:background="#drawable/view_background"/>
<ImageView
android:layout_weight="1"
android:layout_margin="5dp"
android:id="#+id/imageTen"
android:scaleType="matrix"
android:background="#drawable/view_background"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</TableRow>
</TableLayout>
</android.support.v4.widget.NestedScrollView>
And yeah as I told you earlier there are still many ways to approach to your solution.

Image alignment is not working properly when using layout_weight in Android

I am going to design a dashboard of my application where couple of menus/buttons are present. Menus are indicated using some images. The menus are placed in 4 columns. First there columns are containing two menus each and fourth is containing three. The design of the screen is in the below image:
Now to develop this I have tried with Linearlayout and layout_weight. But I am not able to place them and the images are getting stretched. I have used the below code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/mumbaibg"
android:orientation="vertical"
android:weightSum="3" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/newcar" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#android:color/white" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/usedcar" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/white" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/carloan" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#android:color/white" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/service" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/white" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/sos" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#android:color/white" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/learndrive" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/white" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/insurance" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#android:color/white" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/rtofinelist" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#android:color/white" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/newsoffer" />
</LinearLayout>
</LinearLayout>
Images are getting placed on the each column but they are getting stretched. I have tried with .9patch image as well as placing the images are in different drawable folders.
With the current code, the screen is looking like this:
Can any one give me a better and easy solution to achieve this.
Thanks,
Arindam.

In order for your scaling to work as expected, you need to set android:layout_width="0dp" for horizontal layouts and android:layout_height="0dp" for vertical layouts.
Edit, here is a code sample that achieves the design:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
</LinearLayout>

Remove these two attributes in your layout:
android:scaleType="fitCenter"
android:adjustViewBounds="true"
They're responsible for the stretching.
You'll then hopefully have right aligned images.
Set layout_gravity to center and that should align the images into the middle of their corresponding grids.

The parent LinearLayout that has direct children views needs to have android:weightSum="3" attribute specified. The child views already have the corresponding android:layout_weight="1" - so thats good. But the parent attribute is not present so the system doesnt know how to properly allocate the space for the child views.

How to split android screen horizontal 2 vertical 3 total 6

Ok i am trying to split screen size to horizontally equally and vertically 3 each part
Android studio on windows 8.1 api 9
Here image how i want
each image is exactly those sizes and i want them to proportionally scaled according to the lower resolutions
here my code that i tried and failed
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".Pokemon"
android:background="#color/background_floating_material_dark"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_monstermmorpg_1"
android:background="#null"
android:src="#drawable/bg_monstermmorpg_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_monstermmorpg_2"
android:background="#null"
android:src="#drawable/Register_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/login_monstermmorpg"
android:background="#null"
android:src="#drawable/Login_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_pokemonets_1"
android:background="#null"
android:src="#drawable/bg_pokemonpets_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_pokemonets_2"
android:background="#null"
android:src="#drawable/Register_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/login_pokemonpets"
android:background="#null"
android:src="#drawable/Login_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>
</LinearLayout>

I think simply you can use a GridView
in the layout aspect
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".Pokemon"
android:background="#color/background_floating_material_dark"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightsum="2"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation:vertical
android:weightsum="3"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/register_monstermmorpg_1"
android:background="#null"
android:src="#drawable/bg_monstermmorpg_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/register_monstermmorpg_2"
android:background="#null"
android:src="#drawable/Register_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/login_monstermmorpg"
android:background="#null"
android:src="#drawable/Login_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation:vertical
android:weightsum="3"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/register_pokemonets_1"
android:background="#null"
android:src="#drawable/bg_pokemonpets_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/register_pokemonets_2"
android:background="#null"
android:src="#drawable/Register_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/login_pokemonpets"
android:background="#null"
android:src="#drawable/Login_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_monstermmorpg_1"
android:background="#null"
android:src="#drawable/bg_monstermmorpg_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_monstermmorpg_2"
android:background="#null"
android:src="#drawable/Register_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/login_monstermmorpg"
android:background="#null"
android:src="#drawable/Login_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_pokemonets_1"
android:background="#null"
android:src="#drawable/bg_pokemonpets_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_pokemonets_2"
android:background="#null"
android:src="#drawable/Register_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/login_pokemonpets"
android:background="#null"
android:src="#drawable/Login_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</LinearLayout>
</LinearLayout>

The trick here is to use one LinearLayout as parent with a weightSum of 4 and orientation vertical. Then use 3 LinearLayout childs with a weightSum of 2, orientation horizontal and a weight of 2 for the first one and 1 for the second and third one. Inside these LinearLayout put 2 ImageButton with weight of 1.
If you want an example tell me but i think that i was clear.
P.s. all the layout_width and layout_height have to be match_parent

First you need a horizontal LinearLayout with a weight sum of 2.
Inside it, should be 2 vertical LinearLayouts with weight sums of 4, and weights of 1 each.
Inside those two layouts, add your 3 image buttons. Top has a weight of 2, others have a weight of 1

Using layout weight can be a good solution.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/Button01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button2" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/Button02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button3" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/Button05"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/Button04"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button2" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/Button03"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Android - Fitting 6 ImageButtons to layout

I've been having a huge problem with fitting 6 image buttons to one screen.
I have tried Intellij and ADT but came up with nothing. I've also used two methods and played around them. One of them was inserting linear layouts to relative layout and inserting the image buttons inside them. This seemed well in the first place, however, i got bad results on big screens. The other method was to use regular alignment methods in xml but this gave me a lot worse results and I'm really stuck right now. I think I'm going to go with the first method but I want to get a good result since this is my senior project. You can find the two methods below. Can you help me what I'm doing wrong? Thank you very much.
---EDIT---
My intent is 3 lines, 2 buttons at each line. And screenshots are below. I have nexus 7 2013 and galaxy s2, and the results are similar to the ones below, so I assume the results below are correct.
This is the picture for 1st method:
This is the picture for 2nd method:
---END OF EDIT---
First method (inserting image buttons to 3 linear layouts in relative layout):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="390dp"
android:layout_alignParentBottom="true" android:layout_alignParentStart="true">
<ImageButton
android:id="#+id/apuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/apu"
android:scaleType="fitCenter"
/>
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/lms"
android:scaleType="fitCenter"
/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true" android:layout_alignParentStart="true"
android:layout_marginTop="140dp" android:layout_marginBottom="255dp" android:id="#+id/linearLayout">
<ImageButton
android:id="#+id/mailButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/mail"
android:scaleType="fitCenter"/>
<ImageButton
android:id="#+id/scaButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/sca"
android:scaleType="fitCenter"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="119dp" android:layout_alignTop="#+id/linearLayout"
android:layout_alignParentStart="true" android:layout_marginBottom="140dp" android:id="#+id/linearLayout2">
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/library"
android:scaleType="fitCenter"/>
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/rating"
android:scaleType="fitCenter"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignTop="#+id/linearLayout2" android:layout_alignParentEnd="true"
android:layout_marginTop="127dp">
</LinearLayout>
Second method (using alignments):
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageButton
android:id="#+id/apuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/apu"
android:scaleType="fitCenter"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lms"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true" />
<ImageButton
android:id="#+id/mailButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mail"
android:scaleType="fitCenter"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
/>
<ImageButton
android:id="#+id/scaButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sca"
android:scaleType="fitCenter"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
<ImageButton
android:id="#+id/libraryButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/library"
android:scaleType="fitCenter"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rating"
android:scaleType="fitCenter"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
/>

// Try this way,hope this will help you to solve your problem...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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">
<ImageButton
android:id="#+id/apuButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/mailButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/scaButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
</LinearLayout>
</LinearLayout>

Check out this code, please comment if it works
<LinearLayout
android:id="#+id/grd_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="33"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/apuButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="33"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/mailButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/scaButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="33"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>

You'll want to use your first method with linear layouts and add in weights so that it doesn't become separated out like that. Here is the modified code of yours that should fix that issue (you'll want to create bigger images for each device so that it comes out looking a bit cleaner too).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
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.test.MainActivity$PlaceholderFragment" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/apuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/apu" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/lms" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/mailButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/mail" />
<ImageButton
android:id="#+id/scaButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/sca" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/library" />
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/rating" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentEnd="true"
android:layout_marginTop="127dp"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>

Categories

Resources