Scrollable Tile View in android - android

I have the follwoing way to have tile view of any grid size. But I want only 2x3 tiles on the page and 2x1 on the below the visible part of the page. Which you can access only after scrolling the page. But I am not able to achieve this by the below method.
I tried scroll view for the whole view.xml but then it got shrunk to the top of the page. And I don't have any control on the size of tiles. The change according to the view.
view.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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>

did you test this layout structure:
<?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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

Related

image stretched on 8 inch tablet

I designed a layout which contains rows of buttons and these buttons have background .I tested this layout in different devices and it works fine ,even in 8 inch tablet and 'Youwave' emulator. This is my code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg"
android:orientation="vertical"
android:padding="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.5"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/btn_die"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="#drawable/btn_die" />
<Button
android:id="#+id/btn_logo"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="#drawable/btn_logo" />
<Button
android:id="#+id/veladat"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="#drawable/veladat" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/btn_ezde"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="#drawable/btn_ezde" />
<Button
android:id="#+id/btn_faaliat"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="2"
android:background="#drawable/btn_faaliat" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/btn_havades"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="2"
android:background="#drawable/havades" />
<Button
android:id="#+id/btn_zendeg"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="#drawable/btn_zendeg" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/btn_favlist"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="#drawable/btn_favlist" />
<Button
android:id="#+id/btn_shakh"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="2"
android:background="#drawable/shakhsiat" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.5"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal"
android:gravity="center"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/site" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
<!-- Listview to display slider menu -->
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/list_background"
android:choiceMode="singleChoice"
android:divider="#color/list_divider"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector" />
</android.support.v4.widget.DrawerLayout>
and this is a part of picture of YouWave emulator:
what is the problem with my code?
Just add android:adjustViewBounds="true" in your ImageView
Note:
You can use ImageView instead Button
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds=true
android:src="#drawable/site" />
If not working then add android:scaleType
Second Way, You can use ImageButton
and add android:src="#drawable/ instead android:background

Android: How to balance GridLayout in xml

I want to have a layout with a header and a footer and four pictures (ImageView) all the same size in two rows and two columns in the center. I don't want to use GridView.
This is what I'm thinking of:
the GridLayout elements go their own way with size and don't shrink to the size imposed by the surrounding elements. They either become too big and go off the page, or are cropped by the following LinearLayout. Here is an example of what I mean:
I guess you'll need to see the 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"
android:weightSum="3" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_row="0"
android:layout_weight="1"
android:columnCount="2"
android:weightSum="4"
android:rowCount="2" >
<Button
android:id="#+id/button2"
android:layout_column="0"
android:layout_row="0"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button13"
android:layout_column="1"
android:layout_row="0"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button14"
android:layout_column="0"
android:layout_row="1"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button15"
android:layout_column="1"
android:layout_row="1"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
</GridLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
</LinearLayout>
I want:
A header and footer
Four centered pictures of the same size
A left and right margin around the four-picture bock.
Maybe I'm taking the wrong approach to this, so feel free to send me off in a new direction if necessary.
Without GridView you can try it:
It works perfect.
<?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"
android:weightSum="3" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_row="0"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_row="0"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button14"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button15"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>

Android linear layout, how to match remaining parent?

I am going to create a listview with two button at the bottom
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ListView
android:layout_width="match_parent"
android:layout_height="400dp"
android:id="#android:id/list"></ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task"
android:id="#+id/addTaskButton"></Button>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2"
android:id="#+id/addTaskButton2"></Button>
</LinearLayout>
</LinearLayout>
How to make the listview match the height to the remaining parent?
If I set a height to listview
android:layout_height="400dp"
this is not suitable to all device
If I set match_parent
android:layout_height="match_parent"
The listview will over the buttons at the bottom
If you set its height to 0dp and it's layout weight to 1, it will fill out the remaining space. Also, you don't need the LinearLayout surrounding the ListView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#android:id/list" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task"
android:id="#+id/addTaskButton" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2"
android:id="#+id/addTaskButton2" />
</LinearLayout>
</LinearLayout>
This will work and I have also reduced number of lines in your code:
<?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" >
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</ListView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/addTaskButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task" >
</Button>
<Button
android:id="#+id/addTaskButton2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2" >
</Button>
</LinearLayout>
</LinearLayout>
Use this layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9" >
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#android:id/list"></ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task"
android:id="#+id/addTaskButton"></Button>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2"
android:id="#+id/addTaskButton2"></Button>
</LinearLayout>
</LinearLayout>
You may use this layout :
<RelativeLayout 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"
>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/lv_button"
android:layout_alignParentTop="true"
android:layout_marginBottom="#dimen/margin_bottom"
>
</ListView>
<LinearLayout
android:id="#+id/lv_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="#dimen/margin_bottom"
android:layout_marginLeft="#dimen/margin_left"
android:layout_marginRight="#dimen/margin_right"
android:layout_marginTop="#dimen/margin_top"
android:orientation="horizontal" >
<Button
android:id="#+id/btn1"
android:layout_width="0.0dip"
android:layout_height="#dimen/button_height"
android:layout_marginRight="#dimen/margin_right"
android:layout_weight="1.0"
android:text="Button1"
/>
<Button
android:id="#+id/btn2"
android:layout_width="0.0dip"
android:layout_height="#dimen/button_height"
android:layout_marginLeft="#dimen/margin_left"
android:layout_weight="1.0"
android:text="Button2"
/>
</LinearLayout>
</RelativeLayout>
Use weight sum. Refer this link to know about weightsum
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" android:weightSum="10">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8"
>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#android:id/list"></ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0"
android:layout_weight="2"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task"
android:id="#+id/addTaskButton"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2"
android:id="#+id/addTaskButton2"></Button>
</LinearLayout>
</LinearLayout>
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ListView
android:layout_width="match_parent"
android:layout_height="400dp"
android:id="#android:id/list"></ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task"
android:id="#+id/addTaskButton"></Button>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2"
android:id="#+id/addTaskButton2"></Button>
</LinearLayout>
</LinearLayout>

Android AlertDialog custom layout distortion

Hi I'm wondering about how exactly alertdialogs inflate custom xml layouts? In my example, the xml looks fine when I look at it in the eclipse editor however when the alertdialog builds it i looks completly different. (Sadly I do'nt have the reputation to post screenshots)
Heres the xml. The layout gets pushed up so to speak, so the bottom half of linearlayouts take up maybe 2 thirds of the page even though they have a weight of only 0.40 (ps if anyone could tell me an alternative to all these linearlayouts I would be gratefull!!)
Thank You
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.20"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.98"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:paddingLeft="20dp"
android:paddingTop="32dp"
android:text="Share with..."
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#00C5CD" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.02"
android:orientation="vertical" >
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#00C5CD" >
</View>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.40"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.50"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="0.50"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.350"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.350"
android:orientation="vertical" >
<ImageView
android:id="#+id/iv_prev"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/facebook" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.150"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_customize_pill"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="10dp"
android:text="Whatsapp"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.150"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="0.50"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.350"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.350"
android:orientation="vertical" >
<ImageView
android:id="#+id/iv_preview3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/whatsapp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.150"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_customize_pillsas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="10dp"
android:text="Whatsapp"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.150"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.40"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="0.50"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.150"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.350"
android:orientation="vertical" >
<ImageView
android:id="#+id/iv_preview4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/email" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.150"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_customize_pill4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="10dp"
android:text="Email"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="0.350"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
Ok for what I understood all you need is like a header and under that a grid like layout right?? If I'm right TableLayout might be what you need.
Check this xml and see if it helps you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:paddingLeft="20dp"
android:paddingTop="32dp"
android:text="Share with..."
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#00C5CD" />
<View
android:layout_width="wrap_content"
android:layout_height="1dp"
android:background="#00C5CD"/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Some text"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Some text"/>
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Some text"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Some text"/>
</LinearLayout>
</TableRow>
</TableLayout>
</LinearLayout>

How can i create a grid of buttons with a textview below

Hi,
I want to create a screen like I've (tried to) drawn above.
A,b,c,d,e,f,g and h are buttons, and p is a EditText.
Now what I want to accomplish is that when deployed on a larger or smaller screen, or rotated, the following will happen:
element 'p' stays the same height but sizes horizontally (gets
wider/smaller)
elements a-h (the buttons) all size horizontally and
vertically. So when the screen gets twice as wide, the buttons are
two times wider, and when it's twice as high, the buttons are twice
as high.
I've been able to create one row of buttons to size horizontally (with a lineairlayout and a android:layout_weight, but I am not getting any further.
Try it out,hope it works:
<?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="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="50dp" />
</LinearLayout>
Here's a solution that will work:
Set the EditText height as you wish.
<LinearLayout
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"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="40dp" />
</LinearLayout>
One quick solution is to make use of nested layouts and nested weights. An example of this could be:
<LinearLayout
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"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
However, nested weights aren't recommended as they are computationally heavy. An alternative (superior) layout could be based on relative layouts to replace nested LinearLayouts and their weights. A hidden center component is used to split the relative layout in two. An example of this is posted below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView1" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView2" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView2" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView3" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView3" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView4" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView4" />
</RelativeLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
The solution using RelativeLayout was inspired by the answer from DeeV in this SO question: Making two LinearLayouts have 50% of the screen each without using layout_weight
If you want to avoid the soft keyboard from showing when the layouts are inflated you can do the following to your parent LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:focusableInTouchMode="true">
// try 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:padding="5dp"
android:orientation="vertical" >
<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">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="a"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="b"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="c"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="d"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="e"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="f"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="g"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="h"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:hint="p"/>
</LinearLayout>

Categories

Resources