Part of layout scrollable android - android

I am trying a linearlayout scrollable in android app. I need it this way.
when user swipes up, Box 1 can move out of screen and box 2 should be fixed at top of the screen and box 3 is a scrollable box. How to implement this? I think image helps you to understand.
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ScrollView
android:id="#+id/scroller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="26dp" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Row1" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Row2" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Row3" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tableLayout1"
android:layout_alignRight="#+id/tableLayout1"
android:layout_below="#+id/tableLayout1"
android:ems="10"
android:text="Row4" />
</TableRow>
</TableLayout>
</ScrollView>
<TableLayout
android:id="#+id/tableLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tableLayout2"
android:layout_centerVertical="true"
android:layout_marginLeft="49dp" >
<TableRow
android:id="#+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tableLayout1"
android:layout_centerVertical="true"
android:ems="10"
android:text="Row5" />
</TableRow>
</TableLayout>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tableLayout3"
android:layout_below="#+id/tableLayout2"
android:layout_marginTop="25dp" >
<TableRow
android:id="#+id/tableRow6"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Row6" >
<requestFocus />
</EditText>
</TableRow>
<TableRow
android:id="#+id/tableRow7"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Row7" />
</TableRow>
<TableRow
android:id="#+id/tableRow8"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Row8" />
</TableRow>
<TableRow
android:id="#+id/tableRow9"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Row9" />
</TableRow>
</TableLayout>
</RelativeLayout>


You can do this by using ListView where the section header remains at the top. See this for an example: https://github.com/JimiSmith/PinnedHeaderListView


I actually need Pinned header and found this more useful.
This github project is actually working(Only few tweaks in code). #rahulritesh link also helped me. But this is more understandable for me.
https://github.com/beworker/pinned-section-listview/

Related

I am getting perfect view in graphical layout but in avd it's not looking good. Is there any solution?

I am getting proper view in my graphical layout but when I see the output in avd it's not covering the whole screen. How can I make it proper? Can anyone help me.
Thanks in advance.
My landscape layout-land\main.xml
<AbsoluteLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1.0"
android:orientation="horizontal"
android:gravity="center"
>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:text="#string/Msg" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginRight="30dp"
android:layout_weight="1"
android:singleLine="true"/>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="#string/hint" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/txt_hint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginRight="30dp"
android:layout_weight="1"
android:singleLine="true"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1.0">
<Button
android:id="#+id/btn_encry" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center_horizontal"
android:layout_marginLeft="75dp"
android:text="#string/EncryButton" /></LinearLayout>
</TableRow>
</TableLayout>
</AbsoluteLayout>

android design xml layout alignment (how to draw the like that)

How to design the following as shown in the picture:
my xml structure is:
<Root>
<other design>
<need to design as in picture>
</Root>
the picture is :
that is the text should appear in left and right alignment.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="HOUR"
android:textColor="#C0C0C0" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="$1.80"
android:textColor="#6686A8" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="DAY"
android:textColor="#C0C0C0" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="$10.00"
android:textColor="#6686A8" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="WEEK"
android:textColor="#C0C0C0" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="$35.00"
android:textColor="#6686A8" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="MONTH"
android:textColor="#C0C0C0" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="$105.00"
android:textColor="#6686A8" />
</TableRow>
</TableLayout>

You can use TableLayout to achieve that kind of layout.

Android: Image button is not alligned to right

I want my image button to be placed on the rt side bottom of the scree. but it is not getting visible.Please see the code.
<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"
tools:context=".MainActivity" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date of Birth:" />
<Button
android:id="#+id/dateButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:text="Select date" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Manual labour" />
<EditText
android:id="#+id/ed1"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:inputType="number" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gender :" />
<RadioGroup
android:id="#+id/radioSex"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton
android:id="#+id/radioMale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Male" />
<RadioButton
android:id="#+id/radioFemale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Female" />
</RadioGroup>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Occupation" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/occuaption_arrays"
android:prompt="#string/occupation_prompt" />
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monthly Income" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/income_arrays"
android:prompt="#string/income_prompt" />
</TableRow>
</TableLayout>
<ImageButton
android:id="#+id/next"
android:layout_height="50dp"
android:layout_width="50dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:contentDescription="dfg"
android:src="#drawable/next"
android:visibility="visible"/>
I have tried using RelativeLayout as parent and add attribute android:layout_alignParentRight="true" and android:layout_alignParentBottom="true"
My image is very large.Is that can be a problem?

You have setted match-parent to width and height of TableLayout. So TableLayout overlaps ImageButton
use below code...
android:layout_width="match_parent"
android:layout_height="wrap-content"

How to make android button equal width?

I've set android:layout_weight="1" to all 3 buttons, but doesn't work.
My layout is something like:
<table1>
<row></row>
<row><button /><button /><button /></row>
<row><table2><row>SOMETHING</row></table2></row>
</table1>
When table2 is hidden ("gone"), those 3 buttons seems not too bad, although they don't have equal width, when table2 is not hidden, the first button become big and I can hardly see the other 2 buttons, below are the full xml and snapshot:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Title" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText2"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_weight="1"
android:hint="Content"
android:inputType="textMultiLine" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="A"
android:text="A" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="B"
android:text="B" />
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="C"
android:text="C" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TableLayout
android:id="#+id/optionalViewGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
> <!-- android:visibility="gone" -->
<TableRow
android:id="#+id/tableRow5"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="Tags (optional)" />
</TableRow>
<TableRow
android:id="#+id/tableRow6"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Itinerary Name (optional)" />
</TableRow>
<TableRow
android:id="#+id/tableRow7"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="date" />
<EditText
android:id="#+id/editText6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="time" />
</TableRow>
</TableLayout>
</TableRow>
</TableLayout>
</ScrollView>

When using layout_weight for horizontal View distribution, set layout_width="0dip" instead of "fill_parent" or "wrap_content" on the View with the layout_weight attribute.
See:
Android Layout Weight
android:layout_weight beginner's question.

Android TableLayout does not scroll vertically

Thanks in advance for any help. I am very new to Android.
Here's my problem. I am using a TableLayout to display editable fields. There are about twenty rows to display.
The rows overflow the screen on smaller devices. I need the View to allow the user to scroll up and down. What am I missing?
Tried wrapping the TableLayout in a ScrollView, didn't work.

put your TableLayout inside ScrollView
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>
</ScrollView>

Try something 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:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow6"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow7"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText7"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow8"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText8"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow9"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText9"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow10"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText10"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow11"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText11"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<requestFocus />
</EditText>
</TableRow>
<TableRow
android:id="#+id/tableRow12"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText12"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow13"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText13"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow14"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText14"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow15"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText15"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
</ScrollView>
but how about using a listView instead?

Categories

Resources