For the UI of my app, I want a Gridview above two lines if Textviews, as shown in the image.
I can manage to get one textview to sit nicely below the gridview (using this method) but I cannot work out how to get the second one to display properly. It always seem to be off the bottom of the screen or incredibly thin down the right hand side of the full height of the screen.
Code:
<GridView
android:id="#+id/gridview"
android:layout_alignParentTop="true"
android:layout_above="#+id/textLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnWidth="135dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
<LinearLayout
android:id="#+id/textLinearLayout"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textviewTimerLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Elapsed time: "/>
<TextView
android:id="#+id/textviewTimerTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:text="00:00:00"/>
<TextView
android:id="#+id/textviewPCUTotalLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total PCU's: "/>
<TextView
android:id="#+id/textviewPCUTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"/>
</LinearLayout>
</LinearLayout>
put the grid layout and other two text fieltds in a linear layout. Then make all of their layout_width attributes match_parent. Finally add weight to the views so that the grid layout has twice as much space as the text fields have. for example grid layout gets weight=2 and the text views get weight=1 each
<LinearLayout
...>
<GridView
...
/>
<LinearLayout
...
android:orientation="vertical"
>
<TextView
...
/>
<TextView
...
/>
<TextView
...
/>
</LinearLayout>
</LinearLayout>
I'm not sure exactly why you're nesting two LinearLayouts together when one should suffice, but all you should need is to set the LinearLayout's orientation to vertical.
Related
I have a layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/textView2"
android:layout_below="#+id/textView1" android:columnWidth="90dp"
android:gravity="center" android:horizontalSpacing="10dp"
android:numColumns="3" android:stretchMode="spacingWidth"
android:verticalSpacing="10dp" />
<TextView android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" android:text="Level 1"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp" android:text=""
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
So I want to have same layout when user scrolls right. There will be again gridview and textviews with different images. However I could not achieve it even if I looked examples. I tried to convert it to Linear Layout but again I could not create scroolview.
In other words, I have a layout like this one:
And when user scrolls right I want to have another gridview that holds different images. When user scrolls nothing changes but just images. Any help?
As I understood you want to make it possible to scroll your images in GridView horizontally. You can't achieve it with ScrollView. Try to use TwoWayGridLayout. Or you can use ViewPager and Fragments. Choose one that is more convenient for your purposes.
I need to have a button, a grid view and a button, arranged vertically. I can see the Button and the GridView but can't see the button declared after the grid view. Why's that? This happens with any view below the grid view declaration.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_marginTop="20dip"
android:text="Fragment1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="30dip" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<GridView
android:id="#+id/gridview"
android:layout_width="wrap_content"
android:layout_height="match_parent"overla
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
</LinearLayout>
As you have taken LinearLayout with vertical orientation, give wrap_content to the height of GridView.
Now, if you want last button at below to the screen, then include android:layout_weight="1" in GridView.
try this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button1"/>
as you have declared height of gridview as match_parent it should overlap the views declared below it if it can not find enough screen space available to show it.
You should try calling bringtoFront() method on the view declared below gridview.
Other thing from my viewpoint is to try relativeLayout if possible and use android:layout_above and android:layout_below with gridview.
I am showing data from DB in an Activity. I want a Table and buttons on bottom. For data thought TableLayout would be best option for it. I added TableLayout to HorizontalView & to ScrollView making it scroll vertically & Horizontally. Am adding all rows dynamically - including header. This part is working fine.
I want is when the contents is less than the screen width, it should yet occupy the whole screen width. For eg. If a table fits well in Portrait mode then ofcourse for Landscape mode their will be blank space left on the right. I don't want that space to eb empty, instead to occupy by all columns. If the row width is greater than the screen width then no issues at all - as horiontal scrollbar appears.
I tried few variations, but nothing helped out. Any idea what settings to make to utlize all space (if at all avbl) & show it.
And yes, 1 more issue of horizontal scrollbar, it appears just on the last row. I want it to
appear below last row - so the border of last row is visible. My XML :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:scrollbars="horizontal|vertical">
<HorizontalScrollView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="10dp" android:layout_marginBottom="10dp" >
<TableLayout android:id="#+id/browseTable" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginBottom="20dp"
android:background="#FF0000" android:stretchColumns="1,2,3">
</TableLayout>
</HorizontalScrollView>
</ScrollView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal" android:gravity="center"
android:layout_marginTop="15dp">
<Button android:id="#+id/browseAddBtn" android:text="Add" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginRight="10dp" />
<Button android:id="#+id/browseViewBtn" android:text="Edit" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginRight="10dp" />
<Button android:id="#+id/browseReturnBtn" android:text="Return" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
OUTPUT :
I found one thing while solving your problem, about TableLayout when used inside a HorizontalScrollView. The android:stretchColumns is not working when we use Table Layout inside Horizontal Scroll View. So that you are getting blank space when screen is rotated or columns have less width data.
I hope you understand this. I am trying to solve this problem by replacing Horizontal Scroll View with some other. I will post answer if i get solution. Bye.
EDIT
Hi Tvd finally I got the solution for your problem. make below changes to your XML layout file.
In <HorizontalScrollView>
use
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
Use stretchColumns = "*" in TableLayout if you want all columns to be stretched.
Bye. :-)
I did some changes. some of your problem will solve by below layout code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scrollbars="horizontal|vertical" >
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" >
<TableLayout
android:id="#+id/browseTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#FF0000" >
</TableLayout>
</HorizontalScrollView>
</ScrollView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
style="#android:style/ButtonBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/browseAddBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Add" />
<Button
android:id="#+id/browseViewBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Edit" />
<Button
android:id="#+id/browseReturnBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Return" />
</LinearLayout>
I need a screen that is filled with an image as background and three buttons floating over the image. I created this fine in xml and in vertical orientation it does what I want. However in landscape it doesnt so I have tried to add a scrollview and am getting very confused as to how to combine these elements correctly. After various tries I reached the stage shown below
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_height="fill_parent"
android:layout_width="fill_parent" android:id="#+id/home_container"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:src="#drawable/alert"
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:scaleType="fitCenter" android:clickable="true"
android:enabled="true" />
<LinearLayout android:layout_width="fill_parent"
android:paddingBottom="25px" android:paddingLeft="25px"
android:orientation="vertical" android:paddingTop="90px" android:id="#+id/toplinear"
android:layout_height="fill_parent" android:paddingRight="25px"
android:gravity="top">
<Button android:layout_width="fill_parent" android:textSize="20dp"
android:id="#+id/startprogrambutton" android:paddingBottom="12dp"
android:text="#string/text1" android:layout_height="wrap_content"
android:paddingTop="12dp"></Button>
<Button android:layout_width="fill_parent" android:textSize="20dp"
android:id="#+id/button1" android:paddingBottom="12dp"
android:layout_marginTop="10dp" android:background="#drawable/webview_buttons"
android:text="#string/text2" android:layout_height="wrap_content"
android:paddingTop="12dp"></Button>
<Button android:layout_width="fill_parent" android:textSize="20dp"
android:id="#+id/button2" android:paddingBottom="12dp"
android:layout_marginTop="10dp" android:background="#drawable/webview_buttons"
android:text="#string/text3" android:layout_height="wrap_content"
android:paddingTop="12dp"></Button>
<Button android:layout_width="fill_parent" android:textSize="20dp"
android:id="#+id/button3" android:paddingBottom="12dp"
android:layout_marginTop="10dp" android:background="#drawable/webview_buttons"
android:text="#string/text4" android:layout_height="wrap_content"
android:paddingTop="12dp"></Button>
</LinearLayout>
Now it errors with scrollview can only contain one child. Is there some way to rearrange so that I can have my image and the floating buttons all scroll together?
put both ImageView and LinearLayout in another Vertical LinearLayout. This solves your scrollView child problem.
<ScrollView>
<LinearLayout>
<Imageview />
<LinearLayout />
</LinearLayout>
</ScrollView>
Why don't you give image as background for linearLayout with buttons, it will serve your purpose.
In case you want to scroll only your buttons and not the ImageView you can try this:
<LinearLayout>
<Imageview />
<ScrollView>
<LinearLayout>
<Button />
<Button />
<Button />
<Button />
</LinearLayout>
</ScrollView>
</LinearLayout>
Hope this helps!
Just so you know, you're not limited to trying to find a single solution for both orientations. You can have 2 separate layouts for both orientations by specifying separate layout xml files in a land & port directory. See the official documentation here:
http://developer.android.com/guide/practices/screens_support.html
I have been working on an app for my school recently and wanted to clean it up a bit before possibly publishing it. On the scheduling portion of the app, I have 5 buttons that perform actions on a ListView that is also on the screen at the same time. However, I have the issue when I have around 6 or more events on the screen as once the list view takes over the screen and pushes the buttons off the screen, making it so that I cannot delete the events, make new ones, and so on.
I tried setting the list view to a static size (400px) which worked for normal screen orientation, but if the phone is set to landscape view you cannot see the buttons either. With my current code it would appear to work in the XML viewer but in practice is not the case.
This is the code without the static size setting:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#551A8B"
android:textColor="#FFD700"
>
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button3">
</Button>
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button3"
android:layout_alignTop="#id/button3">
</Button>
<Button android:text="#string/delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button4"
android:layout_alignTop="#id/button4">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:text="#string/Previousweek"
android:layout_below="#id/button3">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:text="#string/Next"
android:layout_below = "#id/button3"
android:layout_toRightOf = "#id/button7">
</Button>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp" >
</ListView>
</RelativeLayout>
The XML viewer for this code is:
Which would lead me to believe it would work fine. I tested it on my emulator and got the following result after entering a bunch of silly events however:
This result is consistent with multiple versions of the emulator.
How I can fix this problem without using static size constraints that cause landscape orientation issues?
Separate the buttons into a separate RelativeLayout and enclose this and the ListView in a vertical LinearLayout.
Then:
<LinearLayout android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout [...]
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!-- Your buttons -->
</RelativeLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />
</LinearLayout
The key point here is the height and weight on the ListView. This means that it fills the remaining space in the LinearLayout after space has been correctly allocated for the buttons.
Add a android:weigth in your listView tag and set the android:weigth value to 1. This will work when your list view height and width is set to fill_parent and your list view is covering entire layout. So try it, it will work.
One simple solution would be to separate the buttons in their own relative layout and put the whole thing in a linear layout, eg:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#551A8B"
android:textColor="#FFD700">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#551A8B"
android:textColor="#FFD700">
<!-- your buttons -->
</RelativeLayout>
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp">
</ListView>
</LinearLayout>
Use a vertical LinearLayout with two rows of Buttons (each row as a LinearLayout), then give the ListView a layout_weight value of "1". In fact, use layout_weight to clean up the size of your buttons too.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:id="#+id/button3" />
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button android:text="#string/Delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Previousweek" />
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Next" />
</LinearLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:textColor="#FFD700"
android:textSize="10sp" >
</ListView>