I try to create a semi-transparent red View and a TextView inside RelativeLayout, which the height of View follows the height of TextView, it works as expected when the TextView is above the semi-transparent red View:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:background="#FF0000"
android:alpha="0.5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/textView"/>
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEST"
android:textSize="50dp"
android:textColor="#000000"/>
</RelativeLayout>
but I want to change it a bit: put the View above the TextView and others remain unchanged, I tried change android:layout_alignBottom into android:layout_alignTop:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:background="#FF0000"
android:alpha="0.5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/textView"/>
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEST"
android:textSize="50dp"
android:textColor="#000000"/>
</RelativeLayout>
but now the View seems doesn't follow the height of TextView:
What is the problem and how can I fix it?
Add android:layout_alignBottom="#+id/textView" in View. e.g.-
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/textView"
android:layout_alignBottom="#+id/textView"
android:alpha="0.5"
android:background="#FF0000" />
I want to change it a bit: put the View above the TextView and others remain unchanged
If by saying above you mean atop of TextView regarding z-axis, then you're in a wrong way.
What you can do, is just to change the ordering of the views in your layout: the layout that is declared the first will be laid out first, next one would be laid out atop of it.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEST"
android:textSize="50dp"
android:textColor="#000000"/>
<View
android:background="#FF0000"
android:alpha="0.5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView"/>
</RelativeLayout>
Related
I have a linear layout which contains a set of child views (mixture of text, images and other layouts).
I want to grey out the linear layout and all the child views so they look disabled (similar to how a button works).
Is this possible to achieve? I know i can set a colour filter when painting on the canvas, is there something similar for layouts?
Another way is to call setEnabled() on each child (for example if you want to do some extra check on child before disabling), check out this answer:
https://stackoverflow.com/a/7069377/4840812
You can use Frame-layout
Using TEST ONE you can achieve above text view like disabled. You can set root layout clickable false for actually disable views inside layout.
TEST TWO is for understanding purpose. Like you need to manage order of view to show effect.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--THIS IS TEST ONE-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="150dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<!--THIS IS TEST TWO-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="300dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="400dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30dp" />
</FrameLayout>
To achieve your layout you can use the RelativeLayout. In RelativeLayout you can use the 2 different views or LinearLayout. In first layout you can add views according to your need, and In second layout you can set the alpha colorcode for disable the layout.
Please try below code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1"
android:layout_marginLeft="20dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/trans"/>
</RelativeLayout>
Here is output for code:
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.
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.
In my fragment, I have a couple of TextViews inside a LinearLayout. I set the text dynamically in onViewCreated().
The height is set in the XML-Layout by android:layout_height="wrap_content".
However, the heights do not adjust to the content. They always stay same height.
Here is the XML:
<ScrollView 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"
android:background="#color/my_white_color">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/my_white_color"
android:padding="10dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/seminarImageView"
android:scaleType="fitCenter"
android:background="#color/gray3"
android:padding="1dp"
android:adjustViewBounds="true"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/titelTextView"
android:textColor="#color/blue_heading"
android:textSize="24sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/teaserTextView"
android:textColor="#color/blue1"
android:textSize="18sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bodyTextView"
android:textColor="#color/blue1"
android:textSize="15sp" />
</LinearLayout>
Any suggestions?
Try to call requestLayout() after setting the text.
I'm not sure, but onViewCreated() can be called after view is laid out.
i am trying to make a horizontal divider using View element. i wote the below code, but the problem is the divider is always of a very samll width despite the width of the View , as shown belwo, is set match_parent
please let emknow how to fix it.
update:
the problem is, the View is always as wide as the imageView??!! i do not know why? any explanation?
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="match_parent"
android:orientation="vertical" >
<TableLayout
android:id="#+id/tl_MainTable"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<TableRow
android:id="#+id/tr_Logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:id="#+id/iv_Logo"
android:layout_height="wrap_content"
android:src="#drawable/fr"
android:adjustViewBounds="true"
android:layout_weight="0"
android:contentDescription="#null"/>
<TextView
android:id="#+id/tv_Title"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_horizontal"
android:layout_weight="3"
android:text="#string/str_Disc_Neigh_Device"/>
</TableRow>
<TableRow
android:id="#+id/tr_Divider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:id="#+id/v_Divider"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#90909090"/>
</TableRow>
</TableLayout>
Here's what I did in my own app but in a linear layout, though you can give it try:
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:id="#+id/separator1"
android:visibility="visible"
android:background="#00000000"
android:layout_gravity="center_horizontal"/>
change background to your liking
Change your 2nd TableRow to LinearLayout
<LinearLayout
android:id="#+id/tr_Divider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:id="#+id/v_Divider"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#902631"
android:layout_span="2" />
</LinearLayout>
change view background colour as you wish.
Table layout is having its default divider android:showDividers="yourvalue" you can use it instead.
also to set the divider widht by using
android:dividerPadding="valueindp"