ViewPager/Fragment overlapping LinearLayout at bottom - android

I have a ViewPager which shows Fragments and I want that on the top, and a simple LinearLayout on the bottom. But, the Fragments are overlapping the layout at the bottom. I want the Fragment to end right about the LinearLayout. See picture:
XML with ViewPager
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="#+id/steps_pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/finish_checklist_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/btn_white_glossy"
android:layout_margin="20dp"
android:text="#string/finish_checklist" />
</LinearLayout>
XML of Fragment
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
android:background="#fff" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="26sp"
android:text="#string/step_order_label" />
<TextView
android:id="#+id/step_order"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="26sp" />
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#000" />
<TextView
android:id="#+id/step_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textSize="26sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="40dp"
android:textSize="20sp"
android:text="#string/result_label" />
<TextView
android:id="#+id/result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp" />
</LinearLayout>
<!-- YES/NO BUTTONS -->
<Button
android:id="#+id/button_no"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/btn_white_glossy"
android:padding="20dp"
android:visibility="gone"
android:text="#string/button_no" />
<Button
android:id="#+id/button_yes"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/button_no"
android:background="#drawable/btn_white_glossy"
android:padding="20dp"
android:layout_marginBottom="30dp"
android:visibility="gone"
android:text="#string/button_yes" />
<!-- END YES/NO BUTTONS -->

I used android:layout_below element here.
layout_below your ViewPager id.
and this layout as vertical
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="fill_vertical"
android:orientation="vertical" >

In all your xml files, should define the background color for it, it will solve the problem :
Add this android:background="#android:color/black" in to the View tag you defined.
p/s : This case only avoid Background was overlapped.

Related

Relative layout arrange views android

Friends,
I am new to android so I could use your help. I want to implement a gallery where the user can flip between two images (presented in ImageView1 below). The display that I want is given by:
[TextView1] [TextView2]
[ImageView1]
[ImageView2]
Where [TextView1] and [TextView2] are static texts that do not change with flipping between the two images. [ImageView1] is the actual image that is displayed and [ImageView2] is an image indicator (i.e., image one is selected).
I am using ViewPager to bound the images to [ImageView1], which is given below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<ImageView
android:id="#+id/image_to_show"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:contentDescription="#string/image_description"
android:scaleType="fitCenter" />
</RelativeLayout>
The main fragment where the images are shown:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/name_of_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:textColor="#color/card_text_color"
android:textSize="14sp" />
<TextView
android:id="#+id/date_taken"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingBottom="10dp"
android:textColor="#color/card_text_color"
android:textSize="14sp" />
<android.support.v4.view.ViewPager
android:id="#+id/details_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingTop="10dp" />
<LinearLayout
android:id="#+id/page_indicator_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"/>
</RelativeLayout>
The output from the code is:
[TextView1] [TextView2]
[ImageView2]
[ImageView1]
Where the image and page indicator have reversed positions.
Any ideas how I can fix this?
I do not want any vertical space among the views. I have used a LinearLayout instead of the RelativeLayout for the main fragment, but that leaves space among the views depending on the screen size.
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/name_of_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/card_text_color"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/date_taken"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/card_text_color"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/details_image"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingBottom="10dp"
android:paddingTop="10dp" />
<LinearLayout
android:id="#+id/page_indicator_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"/>
</LinearLayout>
Do This
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView1" />
</LinearLayout>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
Change your code with this

Putting ScrollView and bottom menu on the same view

The layout I'm trying to put ScrollView above of the menu at the bottom of the screen (which is just an <include> wrapped in <LinearLayout>.
Problem: ScrollView doesn't work (last elements of it cannot be shown on the screen and is show "below" the menu, which looks like there was no ScrollView at all) and I can't scroll through it.
Layout .xml file:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<LinearLayout
android:id="#+id/l1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center_vertical" >
<com.myapp.AutoResizeTextView
android:id="#+id/text_discounts_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:drawableLeft="#drawable/ic1"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:maxLines="100"
android:paddingTop="5dp"
android:text="#string/label1"
android:textColor="#color/text_black"
android:textSize="14sp" />
<TextView
android:id="#+id/text_discounts_month_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/text_discounts_month"
android:layout_weight="0.4"
android:gravity="right"
android:minEms="2"
android:text="#string/label1_number"
android:textColor="#color/text_black"
android:textSize="14sp" />
</LinearLayout>
<!-- Horizontal line -->
<View
android:id="#+id/hr1"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_below="#id/l1"
android:layout_marginTop="10dp"
android:background="#android:color/darker_gray" />
<!-- There are many more items as the item below inside the layout, i.e. LinearLayout followed by a horizontal line -->
</LinearLayout>
</ScrollView>
<!-- Bottom menu -->
<LinearLayout
android:id="#+id/down"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="15dp"
android:gravity="center_vertical" >
<include
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout="#layout/menu_bottom_full" />
</LinearLayout>
</RelativeLayout>
Try this
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_above="#+id/down"
android:fillViewport="true" >
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
Try this

Aligning margins correctly in android layout

Given below is the screenshot of my screen which contains a progressbar. As you can see from the screen, the spacing between the left and right of the screens and this progressbar is not equal. It is less towards the right. How can I make this the same as the left with less gap?
Any help is appreciated
Code and screenshot below:
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textViewContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/blue"
android:textSize="18sp" />
<TextView
android:id="#+id/textLink"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:textSize="16sp" />
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="10dp"
android:progressDrawable="#drawable/green_progress_color" />
</LinearLayout>
</TableRow>
EDIT
Main Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/bottom_layout_installing"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="#string/total_progress" />
<ProgressBar
android:id="#+id/total_installed_package_installer"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_margin="10dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp" >
<Button
android:id="#+id/buttonAbort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_bg"
android:onClick="onAbortClick"
android:text="#string/abort"
android:textColor="#android:color/white" />
<Button
android:id="#+id/buttonLaunch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_bg"
android:text="#string/install"
android:textColor="#android:color/white" />
</LinearLayout>
</LinearLayout>
<ScrollView
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_above="#id/bottom_layout_installing" >
<TableLayout
android:id="#+id/installingListview"
style="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:groupIndicator="#android:color/transparent"
android:listSelector="#android:color/transparent" >
</TableLayout>
</ScrollView>
Looks like your '#drawable/green_progress_color' doesn't stretch. Try with '#android:drawable/progress_horizontal' to check if this is to your layout or your progress drawable.
Don't use a TableRow just on its own like that, remove it and just have the LinearLayout. The TableRow is causing the problem. TableRow must always be nested within a TableLayout(http://developer.android.com/reference/android/widget/TableRow.html)
<?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/textViewContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/blue"
android:textSize="18sp" />
<TextView
android:id="#+id/textLink"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:textSize="16sp" />
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="10dp"
android:progressDrawable="#drawable/green_progress_color" />
</LinearLayout>

How to make a button stay at the bottom of the screen

Hello all im getting really frustrated with my button, how do i make it so it stays at the bottom of the screen,
<?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" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
?
You can do that by replacing the LinearLayout with RelativeLayout like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/* this puts the textview at the top of the relative layout */
android:layout_alignParentTop="true"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/* this puts the textview1 at the bottom of the first textview */
android:layout_below="#id/textView1"
android:text="TextView" />
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/* this puts the button at the bottom of the RelativeLayout */
android:layout_alignParentBottom="true"
android:text="Button" />
</RelativeLayout>
Remove the comment lines if you copy and paste the code because are not working in xml...
Add the empty View with weight 1 between your text views and the button. This view will expand over unused space, keeping the button at the bottom.
<?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" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Please copy this code and use, it will work...
<LinearLayout 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="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>

Align a layout to the top of another layout in order to make a status bar

I have a layout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#e4e8ed"
android:gravity="top" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0px"
android:orientation="vertical"
android:padding="0px" >
<include
android:id="#+id/tabBar"
layout="#layout/tab" />
<Button
android:id="#+id/nist"
android:layout_width="match_parent"
android:layout_height="67dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_marginTop="3dp"
android:background="#drawable/ready"
android:textColor="#FFFFFF" />
<ListView
android:id="#+id/lastCases"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2.08"
android:longClickable="true" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="7dp"
android:layout_below="#id/app"
android:background="#drawable/dropshadow_custom" >
<TextView
android:id="#+id/error"
style="#style/AudioFileInfoOverlayText"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="120dp"
android:gravity="center"
android:text="No Cases"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#D6D8D9"
android:textSize="40dp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/app"
android:background="#000000"
android:gravity="bottom"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
I try to align the last LinearLayout on top of the layout which holds the ListView by using this tag: android:layout_alignTop="#+id/app" But it doesn't seem to work. How can accomplish this?
Many Thanks!
Without any content a Layout with layout_width="wrap_content" and layout_height="wrap_content" is not shown as its width and height have a value of 0! Even if you have set some background color nothing will appear! You either have to add some content to the layout or you have to define another layout dimension. The position of your layout with android:layout_alignTop="#+id/app" should be correct. Hope that helps.
You can set "layout_below" on the first layout targeting to the last layout.
The code is that, I put a button inside the top layout as an exemple (Obs: In your listview you should use 0dp in layout_weight cause you already use layout_weight ^^) :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#e4e8ed"
android:gravity="top" >
<LinearLayout
android:id="#+id/app"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0px"
android:orientation="vertical"
android:layout_below="#+id/top"
android:padding="0px" >
<Button
android:id="#+id/nist"
android:layout_width="match_parent"
android:layout_height="67dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_marginTop="3dp"
android:textColor="#FFFFFF" />
<ListView
android:id="#+id/lastCases"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.08"
android:longClickable="true" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="7dp"
android:layout_below="#+id/app" >
<TextView
android:id="#+id/error"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="120dp"
android:gravity="center"
android:text="No Cases"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#D6D8D9"
android:textSize="40dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/top"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:background="#000000"
android:gravity="bottom"
android:orientation="vertical" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Top"
/>

Categories

Resources