I want to create a Wizard like layout which should look like described:
* at the top should be some kind of title of the current dialog
* at the bottom should be a navigation bar containg buttons for next/previous and various operations. THis bar should always(!) be at the very bottom of the screen.
* at the center should be a list (should use all the space left, except the title bar and the navigation bar described above)
My first attempt is posted below. I used framelayout however I was told this is a bad idea. The problem I ran into is that last row of my list is below the bar with the buttons at the bottom of the screen. Do you have any suggestions on how I could solve my Problem?
Thanks
Here's my not working draft:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical" >
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal" style="#android:style/ButtonBar">
<ImageView android:src="#drawable/person"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/personstring"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold" android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<ListView android:visibility="visible" android:id="#android:id/list"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:id="#+id/footer"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_gravity="bottom|center"
android:layout_alignParentBottom="true" style="#android:style/ButtonBar">
<ImageButton android:id="#+id/loacreation.previousButton"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:src="#drawable/buttonarrowleft" />
<ImageButton android:id="#+id/loacreation.nextButton"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:src="#drawable/buttonarrowright" />
</LinearLayout>
</FrameLayout>
Use a RelativeLayout as your outermost container, and the LinearLayout that contains your buttons can have android:layout_alignParentBottom="true".
Related
Hi I have an annoying problem I want to place a button as part of an action bar at the bottom of my listview but there is some padding just above below the last item of the listview I can't get rid of. Here is my code any help would be greatly appreciated.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawingCacheQuality="high">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:drawingCacheQuality="high"
android:paddingBottom="0dp"
android:layout_margin="0dp"
>
<ListView
android:id="#+id/messagingListView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:layout_margin="0dp"
android:layout_alignParentTop="true"
android:dividerHeight="10dp"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="0dp"
android:paddingLeft="10dp"
/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:background="#FFFFFF"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="new_game"
android:textColor="#FFFFFF"
/>
</LinearLayout>
A simpler layout would look like this :
A vertical LinearLayout to contain the ListView and the action bar
The LinearLayout used for the action bar has its height to wrap_content so it only gets the height required by its children
The ListView has its height to 0dp and its weight to 1 in order to let it take all the available space left by the action bar
<?xml version="1.0"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawingCacheQuality="high">
<ListView
android:id="#+id/messagingListView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:divider="#null"
android:layout_margin="0dp"
android:dividerHeight="10dp"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="0dp"
android:paddingLeft="10dp" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:background="#FFFFFF">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="new_game"
android:textColor="#FFFFFF" />
</LinearLayout>
</LinearLayout>
If space remains, you should definitly show us the layout used for list items
Note :
In Android Studio, try to single click on the LinearLayout to let it be highlighted in the Preview, then on the ListView to see if there is a gap (Use the zoom).
If you see a gap with the layout just above, it's an Android Studio Preview bug on your computer, it works on every devices.
I want to make a layout as shown in the image below. On the top, there are common widgets required to be there always and similarly at the bottom. The tabs I want only in the middle for the two and should control only the portion which is under those tabs. Common widgets are independent of the tabs.
I tried many ways to achieve this. I am able to get tabs on top or bottom of the display but not at the middle. The tabs are not showing up at all but the objects under the tab are showing overlapping each other in the same display.
Please suggest how to make this layout.
You can use ViewPager Indicator Library.
Download from https://github.com/JakeWharton/Android-ViewPagerIndicator
And make ur layout something like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/another_bg"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:src="#drawable/ic_launcher" />
<com.viewpagerindicator.TabPageIndicator
android:id="#+id/main_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/main_pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_weight="1" />
</LinearLayout>
You can put tab any where u want.
One option is to use a custom layout in the ActionBar
final ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setCustomView(R.layout.myactionbar);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
In your layout (myactionbar) you put the text, the image and manually draw the tabs below them.
It involves some work, since those are not "real" tabs. you can create real tabs and manually call onTabSelected(), onTabUnselected() by setting the onClick() listener to the textViews.
<?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" >
<TextView
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center"
android:text="YOUR TEXT" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#android:drawable/btn_star" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3" >
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/tab_indicator_holo"
android:gravity="center"
android:singleLine="true"
android:text="TAB1" />
<View style="#style/SeparatorVertical" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/tab_indicator_holo"
android:gravity="center"
android:singleLine="true"
android:text="TAB2" />
<View style="#style/SeparatorVertical" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/tab_indicator_holo"
android:gravity="center"
android:singleLine="true"
android:text="TAB3" />
</LinearLayout>
</LinearLayout>
What I want to do is, make layout like this:
Title
Date
Long text with scrolling
Navigation bar stick to the bottom
Well I have done everything, however there is a little problem with scrolling. I want only to scroll text. Title and date should be stick to the top, and nav bar to the bottom of activity. And yes, it works, but my nav bar overlaps text :/
I tried everything, there is one solution I found, set fixed height for Scrollview, but this will not work on every devices well, isn't it? I probably could do some calculation in code, and on it change height, but I would like to stay in XML.
Any one have any suggestions?
Here is my XML file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical" >
<TextView
android:id="#+id/feed_title"
style="#style/h1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" />
<TextView
android:id="#+id/feed_info"
style="#style/h2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ImageView
android:id="#+id/feed_fav_ico"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical|right"
android:background="#drawable/ic_fav_off" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollY="20dp" >
<TextView
android:id="#+id/feed_text"
style="#style/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Loren ipsum full tekst" />
</ScrollView>
</LinearLayout>
<!-- Buttons -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FFFFFF"
android:orientation="vertical"
android:paddingBottom="5dp" >
<Button
android:id="#+id/go_to_article"
style="#style/button_screen"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="15dp"
android:text="#string/feed_show_full" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/next_feed"
style="#style/button_screen"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/button_arrow_up" />
<Button
android:id="#+id/share_feed"
style="#style/button_screen"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="#string/feed_share" />
<Button
android:id="#+id/delete_feed"
style="#style/button_screen"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="#string/feed_delete" />
<Button
android:id="#+id/prev_feed"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/button_arrow_down" />
</LinearLayout>
</LinearLayout>
<!-- ~Buttons -->
</RelativeLayout>
Here are the things I have changed:
Moved top layout to bottom
Gave bottom layout name android:id="#+id/bottom_layout"
Gave top layout a name android:id="#+id/top_layout" (Not necessary just for clarity)
Now top layout will have these properties:
android:layout_above="#id/bottom_layout"
android:layout_alignParentTop="true"
The first one is to make top layout anchored above bottom layout.
Second one is to align top edge of top layout to parent's top. Which in this case is RelativeLayout.
Now bottom layout will have these properties:
android:layout_alignParentBottom="true"
It will tell that bottom edge of bottom layout matches with bottom edge of parent (which is RelativeLayout)
Below is the fully working layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- Buttons -->
<LinearLayout
android:id="#+id/bottom_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FFFFFF"
android:orientation="vertical"
android:paddingBottom="5dp" >
<Button
android:id="#+id/go_to_article"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="15dp"
android:text="Feed full" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/next_feed"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:id="#+id/share_feed"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="share" />
<Button
android:id="#+id/delete_feed"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="delete" />
<Button
android:id="#+id/prev_feed"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
<!-- ~Buttons -->
<LinearLayout
android:id="#+id/top_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/bottom_layout"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical" >
<TextView
android:id="#+id/feed_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" />
<TextView
android:id="#+id/feed_info"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ImageView
android:id="#+id/feed_fav_ico"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical|right"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollY="20dp" >
<TextView
android:id="#+id/feed_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/long_test" />
</ScrollView>
</LinearLayout>
</RelativeLayout>
Did you try to put a weight to the scroll layout ?
LinearLayout
- LinearLayout
-- Title
-- Date
- ScrollView layout_weigth=1
-- TextView
- LinearLayout
-- Button
-- Button
-- Button
Drag the bottom edge of the LinearLayout (lets call it l1) holding your text and align it to the top edge of the linear layout holding your navigation bar (let's call it l2). So that the AbsoluteLayout.above on l1 is equal to l2.
<LinearLayout android:id="#+id/l1"
android:layout_above="#+id/l2">
</LinearLayout>
Like Jonas says, but to give you a litte more, make sure you fill in the other stuff.
<LinearLayout
android:layout_height="fill-parent">
<LinearLayout
android:layout_height="wrap_content">
put your title and things in here
</LinearLayout>
<ScrollView
android:layout_height="fill_parent"
android:layout_weight="1"> <!-- this makes it not overlap the layout(navbar) below-->
put your title and things in here
</ScrollView>
<LinearLayout
android:layout_height="wrap_content">
put your nav bar stuff in here
</LinearLayout>
</LinearLayout>
If you do not set the layout_weight, the scrollview will actually push the navbar out off the bottom of the screen in this configuration. It has something to do with how the space for layouts is reserved, I'm not completely sure why, but adding weight delays the reservation till later.
Since the scrollview is filling the parent but still is part of the linear layout, the layout will make sure to accomodate your lower navbar, and unlike the Relative Layout there will be no overlap.
in my app i am trying to show two buttons and an a title bar with a title text over it. these all are been placed along with a background image. But i am able to see only the background image and the other buttons, title bar and text. Following is the layout of my activity.
here i have denoted the background imageView id as bgd.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView android:id="#+id/bgd"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:src="#drawable/startingpage">
</ImageView>
<LinearLayout android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ImageView android:id="#+id/title"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/applicationbar">
</ImageView>
<TextView android:id="#+id/titletext"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="2dip"
android:layout_gravity="center"
android:layout_marginLeft="80dip">
</TextView>
</LinearLayout>
<ImageButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dip"
android:layout_marginLeft="20dip"
android:id="#+id/add"
android:src="#drawable/addrestingspot">
</ImageButton>
<ImageButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:layout_marginLeft="20dip"
android:id="#+id/search"
android:src="#drawable/search">
</ImageButton>
</LinearLayout>
please tell me where i am going wrong.....
I think your ImageView is "eating" all the space and pushing the rest of the elements to the bottom. Since you don't have a scrollbar you can't see them. You should use the Background Image in the first LinearLayout (the top level one). Something like:
<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="#drawable/startingpage"
>
For the first layout should do the trick
I am doing a simple chat application and I want to show balloons similar to the iphone's sms app.
So I am doing an Activity with a ListView with a certain layout.
This are my layouts:
/* Activity Layout */
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ListView android:id="#+id/chat_log"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stackFromBottom="true"
android:layout_marginTop="50dp"
android:transcriptMode="alwaysScroll"
android:layout_weight="1"
android:cacheColorHint="#00000000"
android:clickable="false"
/>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<EditText android:id="#+id/chat_input_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="bottom"
/>
<Button android:id="#+id/chat_send_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/chat_send_button"
/>
</LinearLayout>
</LinearLayout>
Other:
/* Row Layout */
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/userprofile_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/chat_ballon_left" >
<TextView
android:id="#+id/chat_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="2dp"
android:text="haasdasdasdasdasdasdasdoo" />
</FrameLayout>
Here's the result.
My issues:
The gray line which I would like to remove.
Text is not using the whole space.
Somehow even thought I've added android:clickable="false" the balloons are clickable.
The FrameLayout is unnecessary, so use the TextView as a root element (with the chat_ballon_left background of course). Set the width to match_parent so that the text takes the whole space.
BTW nice baloons, don't forget to have hdpi versions too :)