So, I've seen several instances of padding being a problem in a custom title bar but this seems to be unique and I would love to see if anyone could shed some light on it.
Here's what I have:
There's padding to the right of the configure button that shouldn't be. I want a little bit of padding in the end but, to prove a point, this is with no padding set. Here's the layout for the custom title bar.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFF" >
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/titleImage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingLeft="8dip"
android:paddingTop="8dip"
android:paddingBottom="8dip"
android:src="#drawable/icon" />
<TextView android:id="#+id/customtitlebar"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="COMPANY"
android:textSize="20dip"
android:textColor="#205cc7"
android:textStyle="bold"
android:paddingTop="15px" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingTop="8dip"
android:paddingBottom="8dip"
android:src="#drawable/configure" />
</LinearLayout>
</RelativeLayout>
I thought maybe the layout I gave a dummy id "container" was being cut off as well and the problem was outside this layout, but, when I change its background to red, it takes up the whole screen.
Does anyone have a solution short of hiding the OS title bar and making it a header for every screen layout?
Try to set android:layout_alignParentRight="true" to the LinearLayout which should be strechted to the right edge of the RelativeLayout.
Apart from that I agree to Octavian Damiean that your definition is to complex to receive the layout you want.
This layout has the same problem that the first image does. It uses alignParentRight and simplifies the layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFF" >
<ImageView
android:id="#+id/titleImage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingLeft="8dip"
android:paddingTop="8dip"
android:paddingBottom="8dip"
android:src="#drawable/icon" />
<TextView android:id="#+id/customtitlebar"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingLeft="55dip"
android:text="COMPANY"
android:textSize="20dip"
android:textColor="#205cc7"
android:textStyle="bold"
android:paddingTop="15px" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:paddingTop="8dip"
android:paddingBottom="8dip"
android:src="#drawable/configure" />
</RelativeLayout>
Related
I'm having a problem with an Android APP that seems related to layout. Attached image you'll see that the "Alerts" button sticks out and doesn't seem the same as the other buttons. I've replaced the image with a known good one, but the problem remains.
It was suggested it was because it is tabhost layout, but all the changes that have been recommended have not worked. So far I've tried changing the attributes from android:height and width to "wrap_content", "fill_parent", and "match_parent". Match caused another strange white space to be corrected, but this button is my last apparent challenge.
Here's the layout code, can you tell me what the problem is?
<?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="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btnSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_search"
android:focusable="false"
android:freezesText="false"
android:imeOptions="actionNext"
android:longClickable="false"
android:paddingLeft="17dp"
android:text="Search"
android:textColor="#color/color_text_default"
android:textSize="12dp"
android:visibility="visible" />
<Button
android:id="#+id/btnHistory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_history"
android:paddingLeft="25dp"
android:text="History"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
<Button
android:id="#+id/btnFavorites"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_favorites"
android:paddingLeft="30dp"
android:text="Favorites"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
<Button
android:id="#+id/btnAlerts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_alerts"
android:paddingLeft="12dp"
android:text="Alerts"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.32" >
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</TabWidget>
</LinearLayout>
</TabHost>
You'd think someone would have replied, in the end it was stupid simple.
The answers is:
Tabhost using tabactivity will display the background through menu items if they are re-sized. Add a color coded (html notation) color to the schema, then call that with the android:border-background construct.
I am having issues with creating a menu (not menu when you click menu button -- but menu as in the welcome screen to select items). I went to ImageView and TextView float (left/right) Android and I did not solve my issue. I would like to create at least five or six options to select from on this menu class. This is my menu.xml file. Please let me know what I need to do.
The issue is that the first item appears, but the second item overlaps the first item. I been picking away with this for the last hour and cannot solve this issue.
<?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="wrap_content"
android:padding="5dp">
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon" />
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
thannk you.
Why don't you use a LinearLayout (like a vertical one with severals little horizontal ones inside, each with a TextView and an ImageView) ?
Anyway, if you want to use RelativeLayout you should use something like android:layout_toRightOf, android:layout_toLeftOf, android:layout_above or android:layout_below in your xml to place your elements.
I advise you to take a look at http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html if you don't know those parameters.
You use a RelativeLayout but you don't place elements with reference to each other.
Example :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button android:id="#+id/topBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top"
android:layout_centerHorizontal="true">
</Button>
<Button android:id="#+id/leftBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:layout_below="#+id/topBtn"
android:layout_toLeftOf="#+id/topBtn">
</Button>
</RelativeLayout>
http://developer.android.com/reference/android/widget/RelativeLayout.html
A Linear Layout would be better.
Try this and tell me if this is what you needed:
<?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:padding="5dp"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account"
android:textSize="18dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site"
android:textSize="18dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</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.
The view that I would like to have would be shown in the figure.
For that you can take FrameLayout.
For example - 1:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="#drawable/icon"
android:scaleType="fitCenter"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
<TextView
android:text="Learn-Android.com"
android:textSize="24sp"
android:textColor="#000000"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>
Update:
For Example - 2: Superb example and Trick, found here: http://www.curious-creature.org/2009/03/01/android-layout-tricks-3-optimize-part-1/
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/golden_gate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="Golden Gate" />
</FrameLayout>
Putting the 2 custom views inside a relative layout will give what you've shown in the image.
Yes the customview2 will be transparent in the areas where you don't draw anything. To avoid that you will need to set a background to that view.
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