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.
Related
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.
Am developing an application for 21.5 screen android device. I have tried the code below and testing in the 10 inch emulator. its looking good. but i want to know whether is it good to use the relative layout or linear layout with weight. Because i don't want the blank space below the layout when it appears in 21,5 inch screen. Please suggest.
My layout code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:src="#drawable/image1" />
<com.acuvue.kiosk.view.CustomTextView
android:id="#+id/customTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_centerInParent="true"
android:layout_marginTop="100dp"
android:gravity="center"
android:text="#string/please_choose"
android:textSize="50sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/customTextView1"
android:layout_marginTop="100dp"
android:baselineAligned="false"
android:orientation="horizontal"
android:weightSum="2" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/hello_world"
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
Try this way,hope this will help you to solve your problem.
Here use LinearLayout with weight instead of Relativelayout.
<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">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/image1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<com.acuvue.kiosk.view.CustomTextView
android:id="#+id/customTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/please_choose"
android:textSize="50sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
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/
Hi
I have designed a layout, i have attached a screen shot of it. I was getting an unwanted space between linear layout(tabsFragmentll) and grid view linear layout, so to remove the space i added a tag in linear layout grid view as android:layout_marginTop= "-10dp".
After adding the tag, it removed the space between the linear layout(tabsFragmentll) and grid view linear layout, but at the bottom of the screen i am getting an unwanted space which is shown at the bottom of the screen.
I am trying hard to remove the unwanted spaces, but am not able to do so. Please look in to it and give me your suggestions.
The following is my layout design code:
<LinearLayout
android:id="#+id/slide_show_content"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.7" >
<FrameLayout
android:id="#+id/slide_show_fragment_content"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/tabsFragmentll"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.1" >
<fragment
android:name="com.beverly.fragments.TabsButtonFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="-10dp"
android:layout_weight="1.15"
android:baselineAligned="false" >
<RelativeLayout
android:id="#+id/center_pane_rl"
android:layout_width="200dp"
android:layout_height="fill_parent" >
<FrameLayout
android:id="#+id/center_pane_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ProgressBar
android:id="#+id/places_list_view_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<FrameLayout
android:id="#+id/tab_fragment_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
<TableRow
android:id="#+id/tableRowBtns"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:background="#drawable/toolbar_background" >
<FrameLayout
android:id="#+id/checkinframe"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true" >
<ImageButton
android:id="#+id/checkInIB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:background="#android:color/transparent"
android:src="#drawable/checkin" />
<TextView
android:id="#+id/checkInTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:text="#string/checkin"
android:textSize="14sp" />
</FrameLayout>
<FrameLayout
android:id="#+id/cameraframe"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true" >
<ImageButton
android:id="#+id/cameraIB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:background="#android:color/transparent"
android:src="#drawable/camera" />
<TextView
android:id="#+id/cameraTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:text="#string/camera"
android:textSize="14sp" />
</FrameLayout>
<FrameLayout
android:id="#+id/photosframe"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true" >
<ImageButton
android:id="#+id/photosIB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:background="#android:color/transparent"
android:src="#drawable/photos" />
<TextView
android:id="#+id/photosTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:text="#string/photos"
android:textSize="14sp" />
</FrameLayout>
<FrameLayout
android:id="#+id/termsframe"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true" >
<ImageButton
android:id="#+id/termsIB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:background="#android:color/transparent"
android:src="#drawable/terms" />
<TextView
android:id="#+id/termsTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:text="#string/terms"
android:textSize="14sp" />
</FrameLayout>
</TableRow>