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>
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'm trying to design the layout for tablet. I want each control to have equal spaces between each other. How all of these can be aligned properly ? Sorry I cannot attach the image as I don't have 10 reputation :(. Please help
Here is the layout code and the parent layout is linear layout.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="125dp"
android:background="#517398"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="125dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="30dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/image_agenda"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1.0"
android:src="#drawable/agenda_view" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="125dp"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
<TextView
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginRight="40dp"
android:background="#000000" />
<ImageButton
android:id="#+id/image_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src="#drawable/month_view" />
<TextView
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginLeft="40dp"
android:background="#000000" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="125dp"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/image_day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0"
android:src="#drawable/day_view" />
</LinearLayout>
</RelativeLayout>
// try this way,hope this will help you...
<?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:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="125dp">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center">
<ImageButton
android:id="#+id/image_agenda"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#000000" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center">
<ImageButton
android:id="#+id/image_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#000000" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center">
<ImageButton
android:id="#+id/image_day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Please check the below Sample layout code i have made to test
i dont know for what purpose you are using and how you are using the center element 2 textview so right now i have commented that if you want that center element all 2 textview and imagebutton with equal space distribution then same formula layout_weight you use that i have used for this code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/image_agenda"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<!-- <TextView
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginRight="40dp"
android:background="#000000" /> -->
<ImageButton
android:id="#+id/image_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<!-- <TextView
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#000000" /> -->
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/image_day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
if you have any doubt you can ask me.....
try Using Weight Attribute and Avoid Using Relative Layout. Define WeightSum to parent Layout and weight to childs. It will work for both Tablet and Phones[portrait]
If u are trying to divide spaces acc. to width then give width = 0dp to childs and if Acc to height then give height 0dp to childs when using weights.
code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="125dp"
android:background="#517398"
android:weightSum="9" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_marginBottom="8dp"
android:paddingLeft="30dp"
android:layout_weight="3"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/image_agenda"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1.0"
android:src="#drawable/agenda_view" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_centerHorizontal="true"
android:layout_weight="3"
android:orientation="horizontal" >
<TextView
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginRight="40dp"
android:background="#000000" />
<ImageButton
android:id="#+id/image_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src="#drawable/month_view" />
<TextView
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginLeft="40dp"
android:background="#000000" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_alignParentRight="true"
android:layout_weight="3"
android:orientation="horizontal"
android:paddingRight="30dp" >
<ImageButton
android:id="#+id/image_day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0"
android:src="#drawable/day_view" />
</LinearLayout>
</LinearLayout>
Note: Relative Layout do not support weight or WeightSum.
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.
I want to create a menu with 6 buttons that is suppose to be in this layout. Can anyone help me please?
This will give you that exact layout (I used ImageButtons in this layout)
I added the scroll view so that the menu will scroll on very small screens. You can remove that if you want.
<ScrollView 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:layout_margin="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:weightSum="2" >
<ImageButton
android:id="#+id/id1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/icon" />
<ImageButton
android:id="#+id/id2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/icon" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2" >
<ImageButton
android:id="#+id/id3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/icon" />
<ImageButton
android:id="#+id/id4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/icon" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2" >
<ImageButton
android:id="#+id/id5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/icon" />
<ImageButton
android:id="#+id/id6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/icon" />
</LinearLayout>
</LinearLayout>
</ScrollView>
Or you can just use a TableLayout
you can use <TableLayout> ... </TableLayout>
example: http://www.mkyong.com/android/android-tablelayout-example/