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>
Related
I have a complex View, in that i need to set Buttons at the bottom of the page. I need two rows of bottons, with one on the left and two on the right.
The way I manage to solve this is like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true">
...........
</ScrollView>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|bottom"
android:orientation="horizontal">
<TableLayout
android:stretchColumns="1"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableRow
android:gravity="center_horizontal"
android:layout_height="wrap_content">
<Button
android:textSize="12sp"
android:id="#+id/btAnterior"
android:layout_width="wrap_content"
android:layout_height="30sp"
android:text="A"
android:background="#drawable/black_buttonSmall"
style="#style/button_text" />
<Button
android:layout_gravity="right"
android:textSize="12sp"
android:id="#+id/btnGuardar"
android:layout_width="wrap_content"
android:layout_height="30sp"
android:text="G"
android:background="#drawable/black_buttonSmall"
style="#style/button_text" />
<Button
android:layout_gravity="right"
android:textSize="12sp"
android:id="#+id/btnCancelar"
android:layout_width="wrap_content"
android:layout_height="30sp"
android:text="C"
android:background="#drawable/black_buttonSmall"
style="#style/button_text" />
</TableRow>
<TableRow
android:gravity="center_horizontal"
android:layout_height="wrap_content">
<Button
android:textSize="12sp"
android:id="#+id/btVolver"
android:layout_width="wrap_content"
android:layout_height="30sp"
android:text="V"
android:background="#drawable/black_buttonSmall"
style="#style/button_text" />
<Button
android:layout_gravity="right"
android:textSize="12sp"
android:id="#+id/btnMateriales"
android:layout_width="wrap_content"
android:layout_height="30sp"
android:text="Materiales"
android:background="#drawable/black_buttonSmall"
style="#style/button_text" />
<Button
android:layout_gravity="right"
android:textSize="12sp"
android:id="#+id/btnUltima"
android:layout_width="wrap_content"
android:layout_height="30sp"
android:text="U"
android:background="#drawable/black_buttonSmall"
style="#style/button_text" />
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
It look like this
What I need is to set leftMargin on Left and Right.
How can I do it?
Actually why don't you try something like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!--Your code...-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom" >
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<Button
android:layout_width="wrap_content"
android:text="A"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:text="B"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearContainerHelper"
android:layout_alignParentRight="true" >
<Button
android:layout_width="wrap_content"
android:text="C"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:text="D"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/linearContainerHelper">
<Button
android:layout_width="wrap_content"
android:text="E"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:text="F"
android:layout_height="wrap_content"/>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
If your parent-root is a RelativeLayout try using android:layout_alignParentBottom="true"istead of android:layout_gravity="bottom"
Im trying to scroll some content inside a linearlayout and the outer layout is as relativelayout that includes a header and a bottom menu.
How to make it scrollable ?
This is my current layout. But nothing happens in scrolling the linearlayout section.
<?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"
android:background="#color/white">
<include layout="#layout/header_guide"
android:id="#+id/GuideHeaderInclude"
android:layout_alignParentTop="true"
/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/GuideHeaderInclude"
android:isScrollContainer="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/GuideContentHolder">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/guidecard"
android:layout_gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideRegCardHeader"
android:layout_gravity="center_horizontal"
style="#style/OnlineAboutHeaderStyle"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideRegCardText"
style="#style/OnlineAboutTextStyle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/guidemap"
android:layout_gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideMapHeader"
android:layout_gravity="center_horizontal"
style="#style/OnlineAboutHeaderStyle"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideMapText"
style="#style/OnlineAboutTextStyle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/guidelist"
android:layout_gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideVerifyHeader"
android:layout_gravity="center_horizontal"
style="#style/OnlineAboutHeaderStyle"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideVerifyText"
style="#style/OnlineAboutTextStyle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/guidecashback"
android:layout_gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideCashbackHeader"
android:layout_gravity="center_horizontal"
style="#style/OnlineAboutHeaderStyle"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideCashbackText"
style="#style/OnlineAboutTextStyle"
/>
</LinearLayout>
</ScrollView>
<include layout="#layout/bottom_menu"
android:id="#+id/GuideBottomMenu"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
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:background="#color/white">
<include layout="#layout/header_guide"
android:id="#+id/GuideHeaderInclude"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:isScrollContainer="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/GuideContentHolder">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/guidecard"
android:layout_gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideRegCardHeader"
android:layout_gravity="center_horizontal"
style="#style/OnlineAboutHeaderStyle"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideRegCardText"
style="#style/OnlineAboutTextStyle"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/guidemap"
android:layout_gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideMapHeader"
android:layout_gravity="center_horizontal"
style="#style/OnlineAboutHeaderStyle"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideMapText"
style="#style/OnlineAboutTextStyle"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/guidelist"
android:layout_gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideVerifyHeader"
android:layout_gravity="center_horizontal"
style="#style/OnlineAboutHeaderStyle"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideVerifyText"
style="#style/OnlineAboutTextStyle"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/guidecashback"
android:layout_gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideCashbackHeader"
android:layout_gravity="center_horizontal"
style="#style/OnlineAboutHeaderStyle"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/GuideCashbackText"
style="#style/OnlineAboutTextStyle"/>
</LinearLayout>
</ScrollView>
<include layout="#layout/bottom_menu"
android:id="#+id/GuideBottomMenu"/>
</LinearLayout>
Am new to android UI designing.I want to implement the view (like in the image) into the specified linear layout. please help to sort me out.
<Linear Layout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<include
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout="#layout/header" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
?????????????????????????????
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:contentDescription="#string/dash_progress"
android:scaleType="fitXY"
android:src="#drawable/account_progress" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true" >
</ListView>
This the desired view i need
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="100dip"
android:layout_height="100dip"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="0.5"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="Button" />
</LinearLayout>
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_launcher"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/common_signin_btn_icon_dark" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="TextView" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_forward" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_plusone_medium_off_client" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Opthalmologist"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:text="UK" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Check this or you can do this with RelativeLayout simply
You need a RelativeLayout.
It is the best way to position your components this way.
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>
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..