Trying to figure out to overcome this little problem.
Below, on the left side, is a sample of the view that I'm trying to implement for an app. On the right side is the view that I'm ending up with.
In my xml mock up I've decided to use a RelativeLayout but I can't get the TextView to be centered between the top and bottom views.
For reference here's a represenation of my xml code:
<RelativeLayout
android:layout_width:"match_parent"
android:layout_height:"wrap_content">
<ImageView
android:id="#+id/BlackImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_alightParentTop="true"
android:layout_centerHorizontal="true"/>
<ImageView
android:id="#+id/RedImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_below="#+id/BlackImage"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/BlackImage"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Any idea what I'm missing, or how to change to get what I want?
try below link hope it will help you :-
TextView above Image view in a layout
Android listview item display text over image using array adapter
how to put text under image view
<?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" android:background="#drawable/tmp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/uph"
android:layout_marginTop="-10dp"/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|center">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/propfile"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>
Related
Let me explain i have a xml like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/img_circle" />
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imgCircle"
android:layout_toEndOf="#id/imgCircle"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
<TextView
android:id="#+id/mapCurrentLocation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="TextView1"
android:textColor="#color/lblTextColor"
android:textSize="#dimen/lblTextLarge"
android:textStyle="normal" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="TextView2"
android:textColor="#color/lblHintColor2"
android:textSize="#dimen/lblTextMedium"
android:textStyle="normal" >
</TextView>
</LinearLayout>
</RelativeLayout>
And this gives me Image and TextViews next to it
But i want to accomplish something like this
that TextView Background is extended (padding maybe) at the half of the Rounded Image (behind it) so that it looks like its "part" of the image. Or I was thinking of Making a view with background white that goes behind TextView so that it looks that way. But wanted to ask here maybe if there is a better way to do this.
I hope i was clear in explaining this (That is why I added pictures).
I have tried to use demo with your xml file and you can check below code. I had to give static height and width of the ImageView to achieve result.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/imgCarCircle"
android:layout_alignTop="#id/imgCarCircle"
android:layout_marginLeft="30dp"
android:background="#color/colorAccent"
android:orientation="vertical"
android:paddingLeft="40dp">
<TextView
android:id="#+id/mapCurrentLocation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="text1"
android:textStyle="normal"></TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="text2"
android:textStyle="normal"></TextView>
</LinearLayout>
<ImageView
android:id="#+id/imgCarCircle"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#mipmap/ic_launcher_round" />
</RelativeLayout>
try these:
first solution: change this
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imgCircle"
android:layout_toEndOf="#id/imgCircle"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
to this:
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_marginLeft="20dp" // or just figure your image width and set this programatically
android:layout_height="wrap_content"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
second solution: it to use AbsoluteLayout which is a bit hard to handle.
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>
I have TextView and ImageButton in xml layout. And ImageButton is positioned right of TextView and I want group both to center them horizontally at screen. I use RelativeLayout.
What should I do?
I assume you are developing an android application... If so this code can be used:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal">
<TextView
android:id="#+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
/>
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>
android:layout_centerInParent="true" will place items in the middle of the RelativeLayout parent
android:layout_centerHorizontal="true" will only center items horizontally. You can remove the one you don't need.
An optimized approach, which doesn't use unnecessary layout nesting and reduces the View counts by incorporating the image inside the TextView:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<TextView
android:id="#+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:drawableRight="#drawable/ic_launcher"
android:text="#string/hello_world"
/>
</RelativeLayout>
The secret is the use of the compund drawable android:drawableRight="#drawable/ic_launcher".
To change it programmatically, use setCompoundDrawablesWithIntrinsicBounds()
Hi and thanks for any suggestion.
I need to put an ImageView to overlapp over a LinearLayout.
I have tried this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/background"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/backgroundimage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/gradient_box"
android:layout_gravity="center"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_gravity="center">
But this is the result I get (the ImageView shrinks to a single line)
I have tried using RelativeLayout, this is the result I get.
CLOSE, but the ImageView now expands to fill all the available space and does not "wrap content" as I need to.
The desired result would be like this:
PS: I cannot use android:background="image" because i need to change it at runtime.
You can use a Relativ Layout that contains the LinearLayout and then align the ImageView with the LinearLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/background"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/linear"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_gravity="center">
<ImageView
android:id="#+id/backgroundimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/gradient_box"
android:layout_alignLeft="#id/linear"
android:layout_alignRight="#id/linear"
android:layout_alignTop="#id/linear"
android:layout_alignBottom="#id/linear"
android:layout_gravity="center"
android:scaleType="fitCenter" />
If you just want to set the image as a background you can just set a background image for the linear layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/background"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/blue" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:background="#drawable/gradient_box"
android:layout_gravity="center">
PS: I cannot use android:background="image" because i need to change it at runtime.
Why not? Use setBackgroundResource.
I'm trying to get an image and a list in the same 'scroll' (I don't know how else to put it). My basic (vertical) layout is:
TextView
ImageView
ListView
I'm trying to get the scrolling as if the image is a list item itself. So the textview has to stay in place at the top and everything else has to scroll under it.
At the moment I have the following code:
<?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:background="#color/background"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/app_purple"
android:orientation="vertical" >
<TextView
android:id="#+id/about_app_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="15dp"
android:text="#string/about_app_label"
android:textColor="#color/background"
android:textSize="20dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/app_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/logo" />
</LinearLayout>
<ListView
android:id="#+id/information_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:divider="#drawable/listdivider"
android:dividerHeight="1dp"
android:fadingEdge="none" >
<!-- Preview: listitem=#layout/row -->
</ListView>
Any help would be greatly appreciated!
EDIT
The custom row layout for the listView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/listview"
android:orientation="horizontal"
android:padding="4dip" >
<ImageView
android:id="#+id/list_icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:layout_marginRight="5dp"
android:contentDescription="#string/icon_content_description" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/list_label"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:maxLines="1"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:textColor="#color/result_label"
android:textStyle="bold" />
<TextView
android:id="#+id/list_count"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/list_label"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:textColor="#color/text" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/list_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textColor="#color/text"
android:textColorLink="#color/app_purple" />
<ProgressBar
android:id="#+id/list_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
You would have a vertical LinearLayout holding the fixed TextView and the ListView. Your ImageView would be a header on the ListView, added via addHeaderView(). Headers, despite their name, scroll with the contents of the ListView.
to make custom list views you need to create a single_list_item.xml file to arrange everything you want to scroll for example the image with a description text next to it. Also you need to add a ListView on your Xml file so the program can process the view. And them, you can process everything on your java file using an adapter. and the the list will appear at the bottom of the text.
There is a great example of how to do it here
it's not clear what exactly are you trying to do. ScrolView can have only ONE child. so I guess you should put the ImageView and the Listview in a LinearLayout.
but any way - it's a bad idea to put a Listview inside a ScrollView - how would the OS now what are you trying to scroll? the ListItem or the whole list. if you can be more specific - I can try help more...