Android: Non-transparent text on transparent image - android

I need to put text on transparent image, but my text goes transparent too.
Update: I have an Activity background which is a picture, than I have LinearLayout with background as transparent picture, and in that Layout I need a TextView with text without transparency.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/img_background"
android:fitsSystemWindows="true"
tools:context="team.com.ContactUsActivity">
>
<LinearLayout
android:id="#+id/linearLayoutContactUsData"
android:layout_width="match_parent"
android:layout_height="200dip"
android:background="#drawable/img_contact_us"
android:alpha="0.4"
>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#FFFFFF"
android:textSize="18dip"
android:text="Phone: 111-111-111"
/>
</LinearLayout>
Any suggestions?

Just remove android:alpha.
If you don't, the TextView will inherit the container property, causing it to be transparent, instead of fully visible.
TextView backgrounds are transparent by default.

Related

Unable to add TextView into main xml Layout

I've been working on an app and am looking to adding a text view below the Camera view so that I could display some text there.
But, for some reason when trying to drag a text view into the layout it doesn't show up on the final screen.
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
</LinearLayout>
Layout view com.google.android.CameraSourcePreview height is set as 'match_parent' , so its eating up all the space on the view-port.
Try giving particular height and you should be able to see textview added below CameraSourcePreview.
Hope it helps.
Most likely, you're not able to add the TextView due to there not being enough space on the screen.
You're using a LinearLayout which displays all of it's views one after the other in either a vertical or horizontal manner.
Your CameraSourcePreview has it's height and width set to match_parent, which means it'll stretch completely on the screen. However, in a LinearLayout, this also means that there's no space to place the next View because it'll be placed off the screen.
You can add android:layout_weight="1" to your CameraSourcePreview. This will allow your TextView to fit into the LinearLayout because it's basically your CameraSourcePreview telling others it'll resize itself to allow for other components to fit on the screen.
But if you don't want your CameraSourcePreview to resize itself based on other Views, then you should look into using some other Layouts instead of LinearLayout. Perhaps one such as ConstraintLayout or RelativeLayout will work better, since they allow overlapping Views on top of each other.
This is happening because the height of the camera view is taking the whole space on the display you can use layout_weight for LinearLayout to make some necessary space for your TextView.
Just make height of CameraSourcePreview equals to 0dp and add a property
android:layout_weight="1"
So this it would look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:orientation="vertical">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here" />
</LinearLayout>
Instead of using LinearLayout I suggest to use FrameLayout which is easy to control for your case. It is also possible to display textView on CameraSourcePreview by using following code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity ="center">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here"
android:layout_gravity ="center|bottom" />
</FrameLayout>

Override the include's background attribute to change background color

Android Studio 1.5
I have this layout called chat_profile_header that will be used in many layouts. I have set the background to a indigo color. The problem is when I include this header in other layouts, I want to be able to change the background color based on that layout's theme. Everything in the header will remain the same.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/profile_header_indigo_500">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/photorace"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/tvProfileName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/profile_image"
android:layout_toEndOf="#id/profile_image"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
android:fontFamily="sans-serif"
android:textColor="#android:color/white"/>
</RelativeLayout>
Here I am using the above header included in this layout. However, based on this theme I want to change the header to another background color grey. However, I don't think I can override the background color attribute.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<include
layout="#layout/chat_profile_header"
android:background="#color/child_header_lighter_grey"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/rvParentList"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
Is there way to do this without having to create different header layouts based on background. Seems a lot of duplication.
this does not seem to be possible. You can set background from java.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<include
android:id="#+id/layout1"
layout="#layout/chat_profile_header"/>
<include
android:id="#+id/layout2"
layout="#layout/chat_profile_header"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/rvParentList"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
this java code
Linealayout layout1 = (Linealayout)findViewbyId(R.id.layout1);
Linealayout layout2 = (Linealayout)findViewbyId(R.id.layout2);
layout1.setBackgroundColor(R.color.color_1);
layout2.setBackgroundColor(R.color.color_2);
You can not set background color to <include> tag.
As you set the background color of include tag then it will be messed up with the include layout's background color.
So from my point of view you should make your include layout
transparent and then try to set background color of it.
In this case it won't get mixed up with the include layout's color.
Hope it will help you to get some idea regarding it.
You can always change your background color with layout theme you specified.
Just set the
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary">
</LinearLayout>
Then set the colorPrimary under your theme style files. Warning: by setting the color primary, you are changing the color of the action bar as well.
<style name="MyCustomTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#android:color/blue</item>
</style>
Using this method, your background will always be the same as the color you specified under the theme style.
Just in case, you doesn't know how to set the theme for you activity, you can always do in your AndroidManifest.xml
<activity
android:name=".Activity"
android:theme="#style/MyCustomTheme"
/>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/rl_profile_header"
android:layout_height="60dp"
android:background="#color/profile_header_indigo_500">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/photorace"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/tvProfileName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/profile_image"
android:layout_toEndOf="#id/profile_image"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
android:fontFamily="sans-serif"
android:textColor="#android:color/white"/>
assign id to your RelativeLayout
android:id="#+id/rl_profile_header"
then Initialize it where you want to use
like RelativeLayout rl=(RelativeLayout)findViewById(R.id.rl_profile_header)
then setColor as you need using rl.setBackgroundColor(R.color.red)
It seems not possible.
From https://developer.android.com/training/improving-layouts/reusing-layouts
"You can also override all the layout parameters (any android:layout_* attributes) of the included layout's root view by specifying them in the tag. "

How can i set an image to be in the bottom left corner of an activity AND in the background

I want to set the logo of my app to the bottom left hand side of the screen and be in the background. the reason i want to do this is to allow the users to modify the background colors which would not be possible if i simply set the entire activity or layout background to an image to give same impression.
Another way of asking this is how do i set an image to bottom left hand corner and below other controls?
i don't know if i understand correct. but what you ask is pretty simple.
<FrameLayout 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="#bbbbbb"
>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|left"
android:layout_margin="10dp"
android:src="#ffff00" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000"
android:orientation="vertical">
<!-- Put your views here -->
</LinearLayout>
</FrameLayout>
you can change the frame layout's background as you wish and keep logo on bottom left corner.
Also you can set your LinearLayout (which you can use any layout. it is up to you) background to transparent so you will see background. and any extra view inside the linear layout (your view container) will be on top always.
<?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"
android:background="#drawable/your_desired_full_background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_logo"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>

Textview background - what's setting it?

I have the following layout :
<?xml version="1.0" encoding="utf-8"?>
<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" >
<fragment
android:id="#+id/top_banner"
android:name="com.apps4care.mycarerecord.fragments.patientBannerFragment"
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_alignParentTop="true"
tools:layout="#layout/patient_banner" >
</fragment>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/top_banner" >
<LinearLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
<fragment
android:id="#+id/footer"
android:name="com.apps4care.mycarerecord.fragments.footerFragment"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_alignParentBottom="true"
tools:layout="#layout/footer">
</fragment>
</RelativeLayout>
I then add a number of fragments into the that have the following layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/documentFooter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/tvsectionHeading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="16dp"
android:text="Section Heading Text Goes Here"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceLarge" />
<WebView
android:id="#+id/wvsectionHTML"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/tvsectionHeading"
/>
</RelativeLayout>
This gives a screen that looks like
My question is in three parts :
1) Where did the background color come from on the TextView. It is not set in the XML layout file or the code.
2) Why is the background color on the TextView not consistent. The bars lower down the screen are lighter, especially in the horizontal centre of the screen.
3) The Scrollview content is meant to stop above the "footer" fragment but it does not, the bottom of the content on the Scrollview is hidden behind the "footer" fragment.
The background for the TextView comes from it's (default) style which is transparent.
what you are seeing is the default background of activity in the Holo light theme. you can change it by overriding it in your theme, or setting a background color to the relative layout in you main layout file
The TextView colour is consistent, but it the colour of your background page, the default colour, which has a glow towards the bottom (it is the page's default formatting). This happened to my application too. Try changing the background of your page and see if the issue is still there, it should go away.

TextView above ImageView with dynamic height

I have a ScrollView with some elements.
My problem is that i can't set textview's above ImageView's with dynamical height.
I have 3 ImageView with different height, they can be visible or gone.
Above them i need to put text with background color, this text need to be at the bottom part of the ImageView
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/pic"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ImageView>
<TextView
android:id="#+id/third_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:padding="8dp"
android:layout_alignParentBottom="true"
android:layout_above="#id/third_picture"
android:gravity="center_horizontal"
android:background="#android:color/white"
android:text="example text">
</TextView>
I tried a lot, but my View was always broken.
Please help, i need some proffesional advise.
You can do this in textview:
android:layout_alignBaseline="#id/pic"
This will align the baseline of textview with basline of imageview
You can set your picture as a background for a layout (e.g linear layout ) rather than using an ImageView and then put the textview inside it and place it where ever you want.
<LinearLayout
android:background="your picture" >
<!-- align it to the bottom -->
<TextView
/>
</LinearLayout>

Categories

Resources