Layout alignment issue in Android

Layout alignment issue in Android - android

I am trying to achieve this user interface
through the layout. But getting issues in the alignments. Along with this, which is the best way either to use LinearLayout or RelativeLayout in general? Getting many references suggesting both.
here is my xml:
<?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" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="400dp"
android:src="#drawable/splash_landscape" />
<TextView
android:layout_width="301dp"
android:layout_height="100dp"
android:text="Product Name" />
<TextView
android:id="#+id/textView1"
android:layout_width="323dp"
android:layout_height="82dp"
android:text="TextView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:layout_width="300dp"
android:layout_height="100dp"
android:text="Product Name"
></TextView>
<RelativeLayout >
<TextView android:layout_width="200dp"
android:layout_height="100dp"
android:text="Product Name"
></TextView>
</RelativeLayout>
<RelativeLayout >
<TextView android:layout_width="200dp"
android:layout_height="100dp"
android:text="Product Name"
></TextView>
<TextView android:layout_width="200dp"
android:layout_height="100dp"
android:text="Product Name"
></TextView>
</RelativeLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/launcher" />
</LinearLayout>
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>

I have tried the above layout and I reached to near that. Below is the xml file and screen shot
<?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:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="60dip"
android:orientation="vertical" android:background="#c0c0c0">
<Button
android:id="#+id/button8"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Button" />
</LinearLayout>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_marginTop="5dip">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_toLeftOf="#+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff">
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_toLeftOf="#+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_marginTop="5dip">
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_toLeftOf="#+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_marginTop="5dip">
<LinearLayout
android:id="#+id/linearLayout7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_toLeftOf="#+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_weight="1">
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_toLeftOf="#+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_weight="1">
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_toLeftOf="#+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_marginTop="5dip">
<LinearLayout
android:id="#+id/linearLayout9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_toLeftOf="#+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_weight="1">
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout10"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_toLeftOf="#+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_weight="1">
<Button
android:id="#+id/button5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="70dip"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_alignParentRight="true" android:background="#c0c0c0" android:layout_alignBottom="#+id/linearLayout2" android:layout_alignTop="#+id/linearLayout2">
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout11"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#c0c0c0"
android:orientation="horizontal" android:layout_marginTop="5dip">
<Button
android:id="#+id/button6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" android:layout_weight="1"/>
<Button
android:id="#+id/button7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout12"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:orientation="vertical" android:layout_alignParentRight="true" android:background="#c0c0c0" android:layout_marginTop="5dip">
<Button
android:id="#+id/button6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout13"
android:layout_width="fill_parent"
android:layout_height="60dip"
android:orientation="vertical" android:layout_alignParentRight="true" android:background="#c0c0c0" android:layout_marginTop="5dip">
<Button
android:id="#+id/button6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Button" />
</LinearLayout>
</LinearLayout>

I would definitely use RelativeLayout as your root. Then it would be much easier to arrange all views by using below,toRightOf,alignParentLeft and so on..

Related

multiple layout in a single xml file

I just want to use multiple layout in a single xml file.I have attached my code below. In that there will be an absolute layout that should be under Horizontal scroll. As a beginner I don't know how to implement it
need your help friends..
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/aagr_background2"
android:orientation="vertical" >
<fragment
android:id="#+id/adview153613"
android:name="com.sentientit.theiWedplanner.Fragadmob"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#drawable/aanavigationbar" >
<Button
android:id="#+id/back"
android:layout_width="70dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="8dp"
android:layout_marginTop="3dp"
android:layout_x="8px"
android:layout_y="3px"
android:background="#drawable/custom_btn_breaker_bay"
android:text="Back"
android:textColor="#ffffff"
android:textSize="20sp" />
<Button
android:id="#+id/home"
android:layout_width="50px"
android:layout_height="30px"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/back"
android:layout_marginRight="46dp"
android:background="#drawable/home1"
android:paddingBottom="12px"
android:paddingTop="10px"
android:visibility="gone" />
</RelativeLayout>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="61dp" >
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="61dp"
android:layout_x="120dp"
android:layout_y="35dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="38dp"
android:layout_y="30dp"
android:text="- Kid Seated"
android:textColor="#000000"
android:textSize="13dp"
android:typeface="serif" >
</TextView>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="6dp"
android:layout_y="28dp"
android:src="#drawable/kid" >
</ImageView>
</AbsoluteLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="437dp"
android:layout_y="3dp"
android:src="#drawable/add11_table" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="48dp"
android:layout_y="4dp"
android:text="Line"
android:textSize="20sp" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="128dp"
android:layout_y="4dp"
android:text="circle"
android:textSize="20sp" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="212dp"
android:layout_y="6dp"
android:text="vshape"
android:textSize="20sp" />
</AbsoluteLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/table"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
</LinearLayout>
</HorizontalScrollView>
</ScrollView>
Thank you in advance

Not sure whether your looking for this alignment but i just gave a shot..... whenever you wish to fix layout at the bottom of screen make sure you use weight property i.e if you want fix button at the bottom of screen then put android:layout_height = "0dp" and layout_weight="1" for other major layout in the xml and to button which has to be fixed at the bottom use android:layout_height="wrap_content" and layout_weight = "0" that's all is the trick (sorry if i have made it hard to understand... just simply saying play with weight and height property)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fff"
android:orientation="vertical" >
<fragment
android:id="#+id/adview153613"
android:name="com.sentientit.theiWedplanner.Fragadmob"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/back"
android:layout_width="70dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="8dp"
android:layout_marginTop="3dp"
android:layout_x="8px"
android:layout_y="3px"
android:text="Back"
android:textColor="#ffffff"
android:textSize="20sp" />
<Button
android:id="#+id/home"
android:layout_width="50px"
android:layout_height="30px"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/back"
android:layout_marginRight="46dp"
android:paddingBottom="12px"
android:paddingTop="10px"
android:visibility="gone" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/table"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
</LinearLayout>
</HorizontalScrollView>
</ScrollView>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0" >
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="61dp"
android:layout_x="120dp"
android:layout_y="35dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="38dp"
android:layout_y="30dp"
android:text="- Kid Seated"
android:textColor="#000000"
android:textSize="13dp"
android:typeface="serif" >
</TextView>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="6dp"
android:layout_y="28dp" >
</ImageView>
</AbsoluteLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="437dp"
android:layout_y="3dp" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="48dp"
android:layout_y="4dp"
android:text="Line"
android:textSize="20sp" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="128dp"
android:layout_y="4dp"
android:text="circle"
android:textSize="20sp" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="212dp"
android:layout_y="6dp"
android:text="vshape"
android:textSize="20sp" />
</AbsoluteLayout>
</LinearLayout>

Yes, you can use use multiple layouts in single XML using the <include>.
Here is a example for that:
<?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:background="#color/app_background"
android:orientation="vertical" >
<include layout="#layout/actionbar_main" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/img_rest_pic"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".35"
android:src="#drawable/upload_image" />
</LinearLayout>
</LinearLayout>
The actionbar_main.xml file is in different XML:
<?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="?android:attr/actionBarSize"
android:background="#drawable/navbar_txt"
android:orientation="vertical" >
<ImageButton
android:id="#+id/ibtn_action_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:background="#null"
android:src="#drawable/navbar_back" />
<ImageButton
android:id="#+id/ibtn_action_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/ibtn_action_back"
android:layout_marginRight="5dp"
android:background="#null"
android:src="#drawable/nacbar_setting" />
<View
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#color/white" />
</RelativeLayout>

Relative Layout: Buttons (Android)

by setting four Buttons on a XML. I try this in the RelativeLayout, and for Galaxy Nexus 4 in the Graphicsl View it looks good, but when i change to another VIew like the Nexus 10 it looks horrible.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context="com.example.b2.MainActivity"
tools:ignore="MergeRootFrame" >
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:text="Button" />
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_above="#+id/button2"
android:layout_centerHorizontal="true"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="180dp"
android:layout_height="80dp"
android:layout_above="#+id/button4"
android:layout_alignParentRight="true"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_above="#+id/button4"
android:layout_alignParentLeft="true"
android:text="Button"
android:layout_toLeftOf="#+id/button3"
/>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/okbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SET"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/okbuttodn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SET"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/okbuttdtgyodn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SET"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/okbuttrtodn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SET"
/>
</LinearLayout>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/okbuttodn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SET"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/okbuttdtgyodn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SET"
/>
</LinearLayout>
</LinearLayout>

use LinearLayout and android:layout_weight="size".

Equal vertically spaced columns layout

I want to make this layout on my main screen of my application.
I have stripes for each image block shown above.
Please guide my which layout (RelativeLayout, LinearLayout...etc) should I use to achieve this.
I am new to android development. I have experimented few layout but not having success. I also used FrameLayout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<FrameLayout
android:id="#+id/inboxLargeButton"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/inbox_normal"
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_gravity="center_horizontal">
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="2631"
android:layout_gravity="bottom"
android:gravity="center"
android:textColor="#fff"
android:textSize="50dp" />
</FrameLayout>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/outbox_normal"
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_gravity="center_horizontal">
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="0296"
android:layout_gravity="bottom"
android:gravity="center"
android:textColor="#fff"
android:textSize="50dp" />
</FrameLayout>
</TableRow>
<TableRow>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/header_left_normal"
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_gravity="center_horizontal">
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Most sent"
android:layout_gravity="bottom"
android:gravity="center"
android:textColor="#fff"
android:textSize="15dp" />
</FrameLayout>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/header_right_normal"
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_gravity="center_horizontal">
</ImageView>
</FrameLayout>
</TableRow>
<TableRow>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/body_left_normal"
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_gravity="center_horizontal">
</ImageView>
</FrameLayout>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/body_right_normal"
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_gravity="center_horizontal">
</ImageView>
</FrameLayout>
</TableRow>
</TableLayout>
As I want to make the each block clickable too.

Try this code:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/inboxLargeButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:text="2631"
android:textColor="#fff"
android:textSize="50dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:text="0296"
android:textColor="#fff"
android:textSize="50dp" />
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:text="Most sent"
android:textColor="#fff"
android:textSize="15dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
</LinearLayout>
</TableRow>
</TableLayout>

Layout xml issue in Android

Here is my layout:
Here is my XML. My layout is good except the red color part. I could not able to bring it into view. There is issue in the alignment. Is there a tool to design the layouts easily? Always facing issue in the alignments compatible to all resolutions and for both portrait and landscape dimensions.
<?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" >
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="400dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/linearLayout3"
android:background="#fff"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#fff"
android:orientation="vertical" >
<ImageView
android:id="#+id/productImageView"
android:layout_width="fill_parent"
android:layout_height="380dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="500dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="420dp"
android:background="#fff"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dip" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/linearLayout3"
android:background="#fff"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="5dip"
android:layout_toLeftOf="#+id/linearLayout3"
android:background="#fff"
android:orientation="vertical" >
<TextView
android:id="#+id/product_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="5dip"
android:layout_toLeftOf="#+id/linearLayout3"
android:background="#fff"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/linearLayout3"
android:layout_weight="1"
android:background="#fff"
android:orientation="horizontal" >
<TextView
android:id="#+id/your_price_tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Your Price" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/linearLayout3"
android:layout_weight="1"
android:background="#fff"
android:orientation="horizontal" >
<TextView
android:id="#+id/your_price"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="5dip"
android:layout_toLeftOf="#+id/linearLayout3"
android:background="#fff"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/linearLayout3"
android:layout_weight="1"
android:background="#fff"
android:orientation="horizontal" >
<TextView
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Retail Price" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout10"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/linearLayout3"
android:layout_weight="1"
android:background="#fff"
android:orientation="horizontal" >
<TextView
android:id="#+id/retail_price"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="70dip"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/linearLayout2"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/linearLayout2"
android:background="#c0c0c0"
android:orientation="vertical" >
<ImageView
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/linearLayout15"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="5dip"
android:background="#c0c0c0"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout11"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="5dip"
android:background="#c0c0c0"
android:orientation="horizontal" >
<Button
android:id="#+id/button6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Buy Now" />
<Button
android:id="#+id/button7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Gush It" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout12"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:layout_alignParentRight="true"
android:layout_marginTop="5dip"
android:background="#c0c0c0"
android:orientation="vertical" >
<TextView
android:id="#+id/button6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Description" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout13"
android:layout_width="fill_parent"
android:layout_height="60dip"
android:layout_alignParentRight="true"
android:layout_marginTop="5dip"
android:background="#c0c0c0"
android:orientation="vertical" >
<TextView
android:id="#+id/product_description"
android:layout_width="fill_parent"
android:layout_height="400dp"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>

If you are making a grid like this, I would prefer a GridLayout
You can set view's to specific position [+ width/height] in the GridLayout using the Spec objects in the LayoutParam

How to make custom "button" like Facebook for Android

I want to make my home screen for my android application like Facebook for Android. Is there anyone know how to make this layout? I am still newbie for Android Development.

You can make a 3x3 table, put 3 buttons per row, and a background image as the button:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_height="match_parent"
android:layout_width="wrap_content">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon1"></Button>
<Button
android:text="Button"
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon2"></Button>
<Button
android:text="Button"
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon3"></Button>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon4"></Button>
<Button
android:text="Button"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon5"></Button>
<Button
android:text="Button"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon6"></Button>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon7"></Button>
<Button
android:text="Button"
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon8"></Button>
<Button
android:text="Button"
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon9"></Button>
</TableRow>
Change the #drawable/iconX to whatever background image you want/need.

Use three linear layout with horizontal orientation and make their parent layout with vertical orientation, like this:
<?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:baselineAligned="false" android:orientation="horizontal">
<LinearLayout android:gravity="center" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_vertical" android:layout_weight="1">
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:baselineAligned="false" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:baselineAligned="false" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Looks like this:

Here is the code:
home_icon_view.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout android:orientation="vertical" android:focusable="true" android:layout_width="90.0dip" android:layout_height="70.0dip" android:layout_margin="5.0dip" xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" />
</LinearLayout>
<TextView android:textSize="14.0sp" android:textColor="#color/home_text_color" android:gravity="center_horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" />
</LinearLayout>
And home.xml
<LinearLayout android:orientation="vertical" android:id="#id/home_icons" android:paddingTop="5.0dip" android:paddingBottom="24.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="#id/home_news_feed_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_profile_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_friends_icon" layout="#layout/home_icon_view" />
</LinearLayout>
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="#id/home_messages_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_places_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_groups_icon" layout="#layout/home_icon_view" />
</LinearLayout>
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="#id/home_events_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_photos_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_chat_icon" layout="#layout/home_icon_view" />
</LinearLayout>
</LinearLayout>

Develop Reference

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

Layout alignment issue in Android - android

I would definitely use RelativeLayout as your root. Then it would be much easier to arrange all views by using below,toRightOf,alignParentLeft and so on..

Related

multiple layout in a single xml file

Relative Layout: Buttons (Android)

Equal vertically spaced columns layout

Layout xml issue in Android

How to make custom "button" like Facebook for Android

Categories

Resources