I want to make my layout like this as per below picture. this image i am able to see in iphone devices.
Here i used frame layout to achieve make overlays of top and bottom image bar on imageview but after using frame layout i can only able to see top imagebar overlay not bottom image bar? why its happens?
Forgot about the content of top and bottom iamge bar.. i am focusing to achieve this functionality.
Please make me correct if i am wrong in my code.
xml file code :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>
per android documentation
Child views are drawn in a stack, with the most recently added child on top.
so you need to arrange your layout as follows
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>
in this case the actual location of the view is not determined by the order that the views are declared in the xml. For a linear layout this would be true however not so with the FrameLayout, in a framelayout the location is determined by gravity so your views will still be placed in the correct locations and they will be loaded in order they were declared, so first is the image view, then the first include is placed on top of that, then the second include is placed on top of that (however in this case they dont intersect so it doesn't matter).
edit2: after chatting with sam we were able to figure out the problem here's our solution
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:id="#+id/greenImage"
android:src="#2dff3d"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView1"
android:layout_centerVertical="true"/>
</RelativeLayout>
</FrameLayout>
note the usage of layout_gravity as apposed to just gravity.
Related
I am trying to implement a screen with a map and on top on the map it should have a textbar displaying text but for some reason my textbar always goes below the google map view.
I tried to look up for relateable questions but no success with their answers. The picture is attached below to give some more gudience. Code is 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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingStart="20dp"
android:paddingEnd="20dp">
<com.google.android.gms.maps.MapView
android:id="#+id/map"
android:elevation="10dp"
android:layout_below="#+id/tv_treatment_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/tv_rateDoctor"
>
</com.google.android.gms.maps.MapView>
<include
android:id="#+id/toolbar"
layout="#layout/menu_top_header"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_toolbar_height"
/>
<TextView
android:id="#+id/tv_treatment_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:layout_marginBottom="20dp"
android:layout_centerHorizontal="true"
android:text="Treatment ID: 222-X-F"
android:textSize="#dimen/font_label" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tv_information"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_alignTop="#+id/map"
android:orientation="horizontal"
android:background="#color/colorTextGrey"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_sent_info"
android:padding="20dp"
android:text="Your Treatment has been sent to the following lab"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:padding="20dp"
android:id="#+id/tv_rateDoctor">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/rate_doctor"
android:textSize="#dimen/font_input"
android:fontFamily="#font/lato_bold"
/>
<ImageView
android:layout_marginStart="5dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_arrow_right"
android:layout_marginLeft="30dp" />
</LinearLayout>
Image of desirable output
Try the next layout. If you want to display something in front then you must put it at last in the layout.
EDIT
Try this code instead. I´m using it in a personal project and show buttons in front of the map. But of course im using a SupportMapFragment, maybe you can try using it too.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<fragment
android:id="#+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="250dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:gravity="top">
<!-- Put any TextView, Imageview, Button, etc inside -->
<LinearLayout/>
</FrameLayout>
Hope it helps!
try using this in your textView
android:layout_alignParentTop="true"
layout_alignParentTop
If true, makes the top edge of this view match the top edge of the
parent. Accommodates top margin.
May be a boolean value, such as "true" or "false".
You can also try using
android:layout_alignTop
which Makes the top edge of this view match the top edge of the given anchor view ID. Accommodates top margin.
I need to implement the following UI:
For this, I am using the following layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<ImageView
android:id="#+id/news_image0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="#dimen/news_cell0_imageview_min_height"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
<RelativeLayout
android:id="#+id/news0_cell_image_overlay_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/news_image0"
android:layout_alignTop="#+id/news_image0"
android:layout_alignLeft="#+id/news_image0"
android:layout_alignStart="#+id/news_image0"
android:layout_alignEnd="#+id/news_image0"
android:layout_alignRight="#+id/news_image0"
android:background="#drawable/news_cell0_overlay_gradient">
<TextView
android:id="#+id/news_title0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:maxLines="3"
android:ellipsize="end"
android:textColor="#color/colorNewsCellType0TitleText"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="#dimen/news_cell0_title_text_size"
android:typeface="monospace" />
</RelativeLayout>
</RelativeLayout>
Into the ImageView I am loading image using Picasso from a URL. I am getting output correctly in most of the devices, but in some of the devices running android less than Lollipop, this shows up like the screenshot below. The text shows up at the top, instead of bottom. But I have set android:layout_alignParentBottom="true" for the TextView. The RelativeLayout is rendered correctly, and it fits the image(it has a background gradient, which can clearly be seen at the bottom of the image).
What is causing this problem and how can I solve this?
You can try with FRAMELAYOUT
FrameLayout is designed to block out an area on the screen to display
a single item. Generally, FrameLayout should be used to hold a single
child view, because it can be difficult to organize child views in a
way that's scalable to different screen sizes without the children
overlapping each other.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/ic_launcher"
android:scaleType="fitCenter"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
<TextView
android:text="Hi.."
android:textSize="17sp"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center|bottom"/>
</FrameLayout>
You can try this layout,
<?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="#android:color/white">
<ImageView
android:id="#+id/news_image0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:minHeight="100dp"
android:scaleType="fitXY"/>
<TextView
android:id="#+id/news_title0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/news_image0"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:maxLines="3"
android:padding="12dp"
android:text="fsdsdfdsdsfsdfsdf"
android:textColor="#f00"
android:typeface="monospace"/>
</RelativeLayout>
firstly excuse me for terrible naming with the subject.
I have the following layout setup:
<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="match_parent"
tools:context=".PersonDetails" >
<FrameLayout
android:id="#+id/bannerLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/coverImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/default_cover">
</ImageView>
<ImageView
android:id="#+id/thumbImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|bottom"
android:scaleType="fitStart"
android:src="#drawable/fingerprint_ic" />
</FrameLayout>
<TextView
android:id="#+id/textName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textColor="#55FF55"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
What i am trying to achieve is to have a banner (much like facebook cover that spans across the top of the screen). And have a thumbnail photo at the corner left of the banner.
The height of the banner should only takes up about 1/4 of the height of the screen. Since i would need the rest of the space for other components.
Immediately below the banner i would like to have a TextView (on the leftside) and a button on the rightside.
So far i can only able to put the thumbnail on top of the banner, but i don't know how to place it on the lower left (i could set it using marginTop but, i believe this is not the correct way of doing it).
Does anyone know how to achieve this? Thanks.
EDIT #1:
Here is the UI
From your description i think you want to make something like this:
I used a linearlayout with 2 layouts as content. Using the android:layout_weight attribute we can make the top layout take up 1/4th of the space, while the bottom layout has the rest to use.
Then to position the icon in the top layout we use alignParentBottom to make it stick to the bottom.
<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"
tools:context=".PersonDetails"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/bannerLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/coverImage"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/default_cover"></ImageView>
<ImageView
android:id="#+id/thumbImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="fitStart"
android:src="#drawable/fingerprint_ic" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="3"
android:layout_margin="10dp">
<TextView
android:id="#+id/textName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40dp"
android:text="Large Text"
android:textColor="#55FF55"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
</LinearLayout>
I'm creating a simple android project that utilizes a ViewPager and a PagerTabStrip. Each fragment of the ViewPager consists of an ImageView and a ProgressBar. Right now, the ImageView of the fragment does not underlay the PagerTabStrip as I guess the PagerTabStrip has reserved space at the top.
Ideally, I want the ImageView to go underneath the strip as if I had changed the visibility of PagerTabStrip to View.GONE, but with the strip still there to overlay it.
I've tried to adjust the margins of the ImageView and fiddled with the XML parameters by scaling it to "FitXY" but it still doesn't go under the PagerTabStrip. Any help would be greatly appreciated! Here's the XML code I have below:
MainActivity.xml
<?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/home_screen_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_tab_strip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#000000"
android:paddingBottom="0dp"
android:paddingTop="0dp"
android:textAppearance="#style/PagerTabStripText"
android:textColor="#fff" />
</android.support.v4.view.ViewPager>
<ImageButton
android:id="#+id/fbButton"
android:layout_width="#dimen/button_size"
android:layout_height="#dimen/button_size"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="#dimen/fb_button_left_margin"
android:layout_marginBottom="#dimen/download_button_bottom_margin"
android:background="#drawable/facebookbutton" />
<ImageButton
android:id="#+id/miscButton"
android:layout_width="#dimen/button_size"
android:layout_height="#dimen/button_size"
android:layout_alignParentBottom="true"
android:layout_marginLeft="#dimen/button_margin"
android:layout_marginBottom="#dimen/download_button_bottom_margin"
android:layout_toRightOf="#+id/fbButton"
android:background="#drawable/button" />
<ImageButton
android:id="#+id/downloadButton"
android:layout_width="#dimen/button_size"
android:layout_height="#dimen/button_size"
android:layout_alignParentBottom="true"
android:layout_marginLeft="#dimen/button_margin"
android:layout_marginBottom="#dimen/download_button_bottom_margin"
android:layout_toRightOf="#+id/miscButton"
android:background="#drawable/button" />
<ImageView
android:id="#+id/bottomBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:adjustViewBounds="true"
android:baselineAlignBottom="true"
android:cropToPadding="true"
android:padding="0dp"
android:scaleType="fitXY"
android:src="#drawable/bottombar" />
</RelativeLayout>
MainActivityFragment.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/imageview_description"
android:scaleType="fitXY" />
</RelativeLayout>
Here's a Screenshot of what it's like now:
With PagerTabStrip: http://i.imgur.com/w1WaF9P
Without PagerTabStrip: http://i.imgur.com/Nr2Ny3v
The second image was achieved by using a translation animating to move the PagerTabStrip upwards.
Ideally, the ImageView starts from 0,0 in the upper left hand corner and is overlapped by the PagerTabStrip so that when it translates, there isn't a blank white space.
It will be helpful if you can show MainActivity.xml in full form, I believe there are more View(s) configuration in there.
With the information you have provided, the only reason that could cause this is because you are using RelativeLayout in your MainActivityFragment.xml layout.
Read the RelativeLayout document:
"A Layout where the positions of the children can be described in relation to each other or to the parent."
"Note that you cannot have a circular dependency between the size of the RelativeLayout and the position of its children. For example, you cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a child set to ALIGN_PARENT_BOTTOM."
I will suggest you use LinearLayout for your fragment that manages its own view without dependency.
I have a relative layout, and inside it i place 3 items, 2 imageviews and one scrollview.
My layout is like this...
<?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:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal"
android:baselineAligned="true"
android:background="#drawable/background">
<RelativeLayout
android:id="#+id/logosLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:layout_margin="16dp"
android:gravity="center">
<!-- An image will be placed here -->
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:background="#33ffffff"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/up" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_margin="8dp"
android:fadingEdgeLength="32dp"
android:scrollbars="none" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/hotelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/button_background"
android:contentDescription="#string/hotelBtnDesc"
android:gravity="center"
android:src="#drawable/icon1" />
<TextView
android:id="#+id/hotelBtnDescTxtVw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/hotelBtnDesc"
android:textColor="#ffffff"
android:textSize="14sp" />
<!-- more scrollview items -->
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>
The above code produces the view shown here:
You may note that the arrows are not aligned in the center, but are slightly moved to the right. Why is that, and how can I fix it ? Note that i have already used android:layout_centerHorizontal="true" to my imageviews.
Thank you in advance
Its problem with your
android:layout_margin="8dp"
remove it from both scrollview and imageView
and pass it to RelativeLayout direct.
or add
android:layout_marginTop="8dip"
android:layout_marginBottom="8dip"
in your RelativeLayout.
and pass
android:layout_centerHorizontal="true"
to your scrollview
they are aligned to the center if you put the marginRight into consideration, try adding android:layout_margin="8dp" to the arrows.
u need to set image view that is under the Relative layout set this image view width fill parent.
Try removing android:layout_weight="1" from your RelativeLayout and see if it works.
In your LinearLayout, the attribute android:orientation="horizontal" causing your display to be aligned horizontaly. Therefore your RelativeLayout is in center but since its shared with another layout thats why you cant note the difference. If you completely remove the first RelativeLayout (the one with id logosLayout) then i hope you'll see the second layout in center.
So, first you need to define the hierarchy of layout you require and then adjust your views accordingly.
It seems problem with your android:layout_margin="8dp" for your scrollview only and pass it to RelativeLayout direct but instead of using margin use padding = "8dp".