TableLayout with ImageView inside

TableLayout with ImageView inside - android

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:

Related

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.

How to align TextView in image center

I am try to display a textview in image center, but not working in LinearLayout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/kurtis"
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5"
android:scaleType="fitXY"
android:src="#mipmap/kurtis" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing" />
<ImageView
android:id="#+id/salwars"
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_marginLeft="10dp"
android:layout_weight="0.5"
android:scaleType="fitXY"
android:src="#mipmap/salwar" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
Any one have idea please help me.
I edited my question, this is my problem.

You could, for example, use RelativeLayout to center your TextView over the ImageView:
<?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="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5">
<ImageView
android:id="#+id/kurtis"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/salwar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5">
<ImageView
android:id="#+id/salwars"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/salwar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
</RelativeLayout>
</LinearLayout>

You can use FrameLayout for that. It centers all its childs, like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal">
<FrameLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_marginRight="10dp"
android:layout_weight="1">
<ImageView
android:id="#+id/kurtis"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#mipmap/kurtis" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Testing"
android:textSize="18sp" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="1">
<ImageView
android:id="#+id/salwar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#mipmap/salwar" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Testing"
android:textSize="18sp" />
</FrameLayout>
</LinearLayout>

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 TableLayout rows and columns evenly distributed

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>

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>

Develop Reference

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

TableLayout with ImageView inside - android

Related

How to show multiple images inside Linear Layout?

How to align TextView in image center

How to split android screen horizontal 2 vertical 3 total 6

Android TableLayout rows and columns evenly distributed

Android - Fitting 6 ImageButtons to layout

Categories

Resources