I've got a TextView (text) overlaying my ImageView (image). My Problem ist that they do not have the same width. In other words - I want the red areas to appear white:
Here is my layout file so far:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF" >
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:padding="10dp"
android:textSize="25sp"
android:gravity="center"
android:background="#9988FF88"
android:textColor="#000000"/>
</RelativeLayout>
I am quite new to android and tried to add different tags to the textview like android:layout_alignLeft="#id/image" which couldn't fix it and also tried to configure the layout_width settings, but this didn't help me either. Also this solution couldn't solve it (I guess that is because of my android:layout_width="match_parent" in my ImageView). The solution was about adding these lines to the TextView:
android:layout_alignLeft="#+id/image"
android:layout_toRightOf="#+id/image"
I was also looking for programmatical solution, which also couldn't fix it:
image = (ImageView) findViewById(R.id.image);
text = (TextView) findViewById(R.id.text);
text.setWidth(image.getWidth());
Any ideas how to get rid of my red areas? Every idea will be appreciated and I would be happy about either an xml solution or a programmatical solution ! Thanks in advance :)
EDIT
I should specify that the image inside the ImageView does get replaced alot so that some images do fill the full horizontal screen in their width. So at some images there shall be a margin on the left and the right, but on others there shall not (in other words - the title shall always be as big as the image). (Btw: Thank you for your fast responses!)
UPDATE
I worked around this issue simply giving the header a white background color.
Try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="26dp"
android:background="#FFFFFF" >
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:padding="10dp"
android:textSize="25sp"
android:gravity="center"
android:background="#9988FF88"
android:textColor="#000000"/>
</RelativeLayout>
The best solution I can think of is:
Cut the white bourders out of your image (You will then set some Margins in yout ImageView, to simulate the borders)
Then, change your layout so:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:padding="10dp"
android:textSize="25sp"
android:gravity="center"
android:background="#9988FF88"
android:textColor="#000000"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
Your imageview is set to match_parent but there are still white areas around imageview. Are you sure your image doesn't have white areas around it?
Also, try using fill_parent instead of match_parent.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
<!--android:padding="10dp" -->
android:textSize="25sp"
android:gravity="center"
android:background="#9988FF88"
android:textColor="#000000"/>
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
Related
I want to display a custom text (mainly person info) inside an image like it's shown above. How can I do it in android? For example, I have a known size of this image (it differs from device to device) and want to display it with the different text size inside it in the special place.
You can use, for example, RelativeLayout.
Make your ImageView be match_parent and use some container for your text lines in bottom of parent RelativeLayout.
Example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:scaleType="fitXY"
app:srcCompat="#drawable/ic_launcher_background"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:padding="20dp"
android:background="#92fffaaa"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="200dp">
<TextView
android:textSize="20sp"
android:text="Some test text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Result:
Try this (adjust dimensions as your requirement)
<RelativeLayout
android:layout_width="200dp"
android:layout_height="150dp">
<ImageView
android:scaleType="centerCrop"
android:src="#drawable/your_image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:background="#64000000"
android:padding="8dp"
android:gravity="center_vertical"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="Title"
android:textColor="#ffffff"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Sub Title"
android:textColor="#ffffff"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
I've done something similar previously.
Use Framelayout.
Add ImageView in frame layout with match_parent constraints.
Add LinearLayout having background="#80000000" and layout_gravity="center" in FrameLayout which contains your two TextViews.
Let me know in case this does not work.
Can someone help me? My ImageView gets huge spacing for no apparent reason. Xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fragment_container_3"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_marginTop="50dp"
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginBottom="6dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
card_view:cardElevation="10dp"
card_view:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginBottom="0dp"
android:padding="0dp"
android:src="#drawable/list_cli2"
android:contentDescription="123" />
<TextView
android:id="#+id/totalCli"
android:layout_width="300dp"
android:paddingBottom="10dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:textColor="#fff"
android:layout_marginTop="10dp"
android:text="Total de Clientes: Buscando..."
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/cliChar"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="21dp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
...
</RelativeLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom|right"
android:layout_marginRight="18dp"
android:layout_marginBottom="60dp"
android:clickable="true"
app:backgroundTint="#android:color/background_dark"
app:fabSize="normal"
app:srcCompat="#drawable/refresh"/>
</FrameLayout>
Stays like this:
If I set the android: layout_height = "" with a low value, type 200dp, the spacing goes away, but in this case, on smaller devices, the view will be out of date. Already tried:
Placing the image as the background of a LinearLayout but the spacing was both above and below.
Placing the ImageView inside the LinearLayout however has done the same thing as above.
Does anyone know how to solve it?
If I put it outside the ScrollView, ImageView is centered in the middle of the screen
Add this to your imageview:
android:scaleType="centerCrop"
The scale type property will tell how the image should fit within the available space. Center crop will make it fill the whole space, but as a trade off the image will seem zoomed. There are other scale types you can try here.
It looks like your list_cli2 drawable already has the white space. Check it by open it with the image editor and see if the white space is there.
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 want to use wrap_content on TextView where I keep only numbers (and coma), but I have noticed that this takes more space than needed (as if reserved space for letters).
Shown here:
image link http://img802.imageshack.us/img802/3784/wrap.jpg
Current situation - blue lines, desired - gray lines.
If it's not possible to do this with numbers and coma, maybe it is possible only with numbers?
This is my layout:
<?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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:paddingLeft="5dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="5dp" >
<LinearLayout
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sampleText" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/image" />
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:inputType="phone"
android:text="0,00"
android:textSize="50dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</LinearLayout>
For example, MyTextView works as I wrote. The thing is that I want to center vertical my image, but it's not properly centered due to fact MyTextView takes more space than needed.
Set android:includeFontPadding to false, it is true by default. It will reduce the padding significantly although it does not remove it completely. Be sure to test this on a real device, since it had no effect for me in the layout preview. Set a background color to see the difference.
<TextView
...
android:includeFontPadding="false" />
Try it using textView.setTextSize(15dp);
I am using numbers in textView. I didnt feel it as a big issue.
Set height and width of the textview as wrap_content.Like,
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
are you using a custom font? If so, one possibility is that the padding you see is built into the font.
You can add this to your TextView: android:inputType="phone"