Display a changeable ListView next to a Webview - android-layout

I need to display a ListView next to a Webview (like the Master/Detail sample), but I need to be able to sort the ListView in a different order (to display some items by category or by name for example), but I did not succeed to make it possible with tabs, dropdown menu or SectionPagerAdapter because the Master/Detail sample uses Fragment, and the TabHost is not a Fragment. I am a bit lost with what I should use.
To make it clear, I want to display it like that :
1
Is there some open source project that use this kind of view, or do your have some advice to perform that ?

You can do it also manually. Just make two list views on top of each other and change their visibilities so only one at a time will be shown.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<FrameLayout
android:layout_width="64dp"
android:layout_height="match_parent" >
<ListView
android:id="#+id/list_view1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/list_view2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<WebView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
This is just skeleton of you're UI that you can use.

Related

Android Studio: Content goes off screen

Part of my UI goes off-screen when installed on an actual android device. It uses the Google maps API. The "my location" button goes a little bit off screen.
Also the map doesn't cover the complete screen even though it does in the UI preview in Android Studio.
<LinearLayout xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:layout_width="269dp"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/SearchLocationText"
android:hint="Search Location"
android:textCursorDrawable="#drawable/black_cursor"
/>
<Button
android:text="Search"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/SearchButton"
android:onClick="onSearch" />
</LinearLayout>
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
tools:context="com.anand.projectv10.MapsActivity1"
android:layout_height="519dp"
android:layout_width="382dp" />
You have a preview of what you are designing at android studio.So you will design something to cover that screen but note that every screen is not with the same dimensions(width/height/dpi). When you hardcore values there is a high possibility to make view positions go wrong in real scenarios.Values assigned based on ratios always stick fine.
You can use weightSum and layout_weight to achieve what you want without hard coding values
<LinearLayout 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:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5">
<EditText
android:id="#+id/SearchLocationText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:ems="10"
android:hint="Search Location"
android:inputType="textPersonName"
android:textCursorDrawable="#drawable/black_cursor" />
<Button
android:id="#+id/SearchButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:onClick="onSearch"
android:text="Search" />
</LinearLayout>
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.anand.projectv10.MapsActivity1" />
</LinearLayout>
For further understanding Read
What is android:weightSum in android, and how does it work?
What does android:layout_weight mean?

dynamically updating the layout Android

I am designing a layout in which i have 3 buttons at the center of the screen and a grid view at bottom f the screen. in the grid view i am adding images. but when i am adding images the buttons are fixed at their places and after many images gridview start covering the buttons starting from bottom. is there any way i can dynamically adjust the screen when the number of image increase.
my activity.xml file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:andriod="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/address1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="locate yourself"
android:onClick="address"/>
<Button
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="photo"
android:onClick="takePicture"/>
<Button
android:id="#+id/confirm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="place order"
android:onClick="confirm"/>
</LinearLayout>
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="8dp"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center">
</RelativeLayout>

android:layout_above error when refrencing RelativeLayout ID

I am getting a strange problem using what seems like a simple layout. This is the line that keeps erring out.
android:layout_above="#id/layoutButtonOrganizer"
I does exist in the in the R.java file
**public static final int layoutButtonOrganizer=0x7f090003;**
The Error I am getting is
**error: Error: No resource found that matches the given name (at 'layout_above' with value '#id/layoutButtonOrganizer').**
It compiles fine unless I try to use the id to align a button above it.
<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="wrap_content"
tools:context="com.MasinoMike.mmasinolab4_1.MainActivity" >
<Button
android:id="#+id/buttonShowAnswer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
***android:layout_above="#id/layoutButtonOrganizer"***
android:text="#string/buttonTextShowAnswer" />
<LinearLayout
android:id="#+id/layoutButtonOrganizer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonNext"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/buttonTextNext" />
<Button
android:id="#+id/buttonPrevious"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/buttonTextPrevious" />
</LinearLayout>
</RelativeLayout>
After working on this for a few hours I figured out what was going on. Even though the LinearLayout is below the button that I am referencing it from (My Button is above the layout in the xml file) I have to load the reference ID the first time it is used with the #+
android:layout_above="#+id/layoutButtonOrganizer"
The solution is to always make sure to have #+ the first time that you use a resource reference in your xml file. It feels sort counter intuitive to load the reference before creating the View object the id belongs to, but whatever makes the compiler happy.
<Button
android:id="#+id/buttonShowAnswer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
**android:layout_above="#+id/layoutButtonOrganizer"**
android:text="#string/buttonTextShowAnswer" />
<LinearLayout
**android:id="#id/layoutButtonOrganizer"**
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >

How do I load two fragments vertically in the same layout?

I am making an app for my university's SafeWalk program and I am trying to make an activity that will display a map fragment with a button bar below it with emergency call buttons. The problem I am running in to is that when I load the following layout file, only the map fragment is displayed, and not the buttons along the bottom.
Note: I am also using a navigation drawer in this layout so I have included that code in case it is conflicting.
I have tried changing the layout_width and layout_height values of the two parent FrameLayouts
and I only can obtain one of two results, a full page of map, or a full page of my buttons (stretched to the top). I can attach the layout for the CallButtonFragment if necessary, but it is a horizontal linear layout with the button bar style containing two buttons.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#+id/content_frame" >
<fragment
android:id="#+id/titles"
android:name="edu.purdue.SafeWalk.CallButtonFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</RelativeLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
Following the suggestion of Android-er-naut below, I have this result:
(It is an improvement, but the buttons need to be a bit larger and fit the width of the screen.)
How about this -
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<fragment
android:id="#+id/titles"
android:name="edu.purdue.SafeWalk.CallButtonFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</LinearLayout>

Android layout weight not working as I thought

following What does android:layout_weight mean?
I have this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonToastSimple"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="English Toast" />
<Button
android:id="#+id/buttonToastFancy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="French Toast" />
</LinearLayout>
The link tells me buttonToastFancy will take up three quarters of the size (3/(3+1), but it's the other way round. The buttonToastSimple takes up three quarters of the screen size according to Eclipse/my AVD.
What am I doing wrong?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:weightSum="4"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonToastSimple"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="English Toast" />
<Button
android:id="#+id/buttonToastFancy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="French Toast" />
</LinearLayout>
try setting the wanted attribute to 0dp ..
ex. if you are setting the weight for the widths support, use android:layout_width="0dp" along with the android:layout_weight="3". Also, don't forget the android:weightSum="4" in the parent.
the amount of space your view is going to occupy is computed as
dimension/layout_weight hence the view with the lower layout_weight occupies more space in your layout. in the future, you may also need to user layout_weightSum.
They are further explained here.

Resources