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>
Related
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:
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.
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>
I want to achieve this layout:
The nearest that i have been able to come to is this:
The layout so far is this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:baselineAligned="true"
android:orientation="vertical"
android:weightSum="4" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="8dip" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="8dip"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="8dip" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="8dip" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
</LinearLayout>
</LinearLayout>
How to design the above layout ?
create three linearlayouts with orientation set to vertical and equal layout weights. the child views of each linear layouts must also have equal layoutweights. set gravity of the first and third linearlayouts to be center_vertical.
This layout actually works as per your expectations:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- Center layout -->
<LinearLayout
android:id="#+id/llCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_centerInParent="true"
android:paddingBottom="8dp"
android:orientation="vertical"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
<!-- Left layout -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#id/llCenter"
android:paddingBottom="8dp"
android:orientation="vertical"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
<!-- Right layout -->
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/llCenter"
android:paddingBottom="8dp"
android:orientation="vertical"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
</RelativeLayout>
Result:
Why don't you leave the unnecessary layouts...??
And use the following...
<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="horizontal"
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=".MainActivity" >
<LinearLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="100dp"
android:layout_height="55dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="75dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="95dp"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="100dp"
android:layout_height="55dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="75dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="95dp"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="100dp"
android:layout_height="55dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="75dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="95dp"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
What about extending ViewGroup?
If you check the documentation there is an example of how you should create your custom children container.
Basically in your layout you have the following rules:
The gravity of the children is centered vertically
For the odd columns the middle element overlap with the line that goes from left to right centered vertically
For the even columns you have got n/2 elements over that line and the remaining ones (n/2) below the same one
If you are able to do that implementing a custom layout, at the cost of more time for development, you'll have a better result and it doesn't matter the number of elements that you want to add... you'll have a layout that can manage different situations.
I suggest you to have a look at custom attributes as well, in order to allow the integration of the attributes that you'll need directly into the XML declaration.
Is there a way to get the images touching like in this image without guessing the heights of each horizontal LinearLayout?
As you can see from my XML i had to guess the LinearLayout heights at 144dp to get this effect, is there a better way that would work on different screen sizes?
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="144dp" >
<ImageView
android:id="#+id/ImageView01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_science" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="match_parent"
android:layout_height="144dp"
android:layout_gravity="fill_horizontal" >
<ImageView
android:id="#+id/imageView03"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_science" />
<ImageView
android:id="#+id/imageView04"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout03"
android:layout_width="match_parent"
android:layout_height="144dp"
android:layout_gravity="fill_horizontal" >
<ImageView
android:id="#+id/ImageView05"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/ImageView06"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_science" />
</LinearLayout>
</LinearLayout>
If possible I would prefer to be able to do it in XML. The images are square so they have to fill the width and still be in proportion. I can almost do it with fitXY but that just stretches their width and not their height.
You should use a GridView instead of many LinearLayouts.
If you want to keep your code, update this :
Your main layout should have this property :
android:layout_height="match_parent"
The other "Layout Wrappers" should have :
android:layout_height="wrap_content"
android:orientation="horizontal"
Your imageView should have :
android:layout_height="wrap_content"
Are you working only with square images ?
I updated your code and didn't try it, but it should work :
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/ImageView01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_science" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_science" />
<ImageView
android:id="#+id/imageView04"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal"
android:orientation="horizontal" >
<ImageView
android:id="#+id/ImageView05"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/ImageView06"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_science" />
</LinearLayout>
</LinearLayout>
Whilst the images aren't perfectly square (although its quite unnoticeable) i managed to solve this problem by using 2 Vertical LinearLayouts instead of 3 Horizontal ones and using ScaleType=fitXY to fill the remaining gaps, leaving me with this:
From the code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="3" >
<ImageView
android:id="#+id/ImageView03"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_science" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_science" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="3" >
<ImageView
android:id="#+id/ImageView04"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/imageView03"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_science" />
<ImageView
android:id="#+id/imageView04"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_sport" />
</LinearLayout>
</LinearLayout>