How do I properly set text onto a dynamically loaded image? - android

I have a custom array adapter where each item consists of two textviews over an imageview(SmartImageView is a third party imageview that renders remote images from a url):
<?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">
<com.loopj.android.image.SmartImageView
android:id="#+id/backgroundImage"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="Data Model Title"
android:textSize="30sp" />
<TextView
android:id="#+id/details"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="Data Model Details"
android:textSize="15sp" />
</RelativeLayout>
</FrameLayout>
I see the image with a top and bottom margin and no text:
1) the RelativeLayout with the text should go over the image since it is the 2nd child of FrameLayout
2) why is there a margin above and below my image? I said my imageview's dimensions were match parent, and didnt specify any top or bottom margins for it

It should and it actually does. The text didn't show up for a different reason.
I added android:scaleType="centerCrop" which filled the row completely.

Related

Android Grey Out LinearLayout

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:

How can I Embed text inside image?

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.

TextView in RelativeLayout improper alignment

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>

Two textviews on listview aligend right

I wanted 2 textviews on my listview that I want to one of them has right align and another align center but all of them aligend left !!! my listview xml :
<?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:background="#ffffff"
android:orientation="vertical">
<TextView
android:layout_gravity="center"
android:gravity="center"
android:id="#+id/tv_subject"
android:layout_weight="0.5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="13sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_pic"
android:layout_gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:contentDescription="ads"/>
<TextView
android:layout_gravity="right"
android:gravity="right"
android:textColor="#ffffff"
android:paddingRight="5dp"
android:layout_weight="0.5"
android:id="#+id/tv_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
this code worked successfully but when compiler build the application and I want to touch one row at list view in fact when my finger is at list view color of row should be change, but because I had to set width match_parent it cover the entire screen.
how can I make this the output that I want and when my finger is on the selected row user see the color of the row has changed.
Just delete android:background="#ffffff". If you want change color - set it to ListView.

Android gallery dynamically resize height

I want to make horizontal gallery to perform custom views:
for example a want to have an array of products with its' description, price and photo,
I build custom layout and override getView and adapter.
Description text can be too large and I return only small portion of it and load to the view. There is a button "more" to expand this view. Below the gallery there is an another layout view with some buttons, controls etc.
OnMoreButtonClick I only set full text to the description TextView. Gallery height I wrapcontent and I think it has to change size dynamically.
BTW if I load the full text without short one - everything is ok.
This is main screen of app, when I press button I want gallery item to stretch down and pull TimeAndDatePicker down.
But when I press it I can only see:
And if I load the full text without small one everything is ok:
Main.xml:
<?xml version="1.0" encoding="utf-8"?>
android:layout_width="fill_parent"
android:id = "#+id/scene"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/main_background" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ru.human.samples.CustomGallery
android:id="#+id/galleryUnique"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:spacing="1dp" android:unselectedAlpha="255.0" android:visibility="visible" android:fadingEdge="none"/>
<DatePicker
android:id="#+id/datePicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
And galleryItem xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
style="#style/PriceText"
android:text="Medium Text"/>
</LinearLayout>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
style="#style/BodyText"
android:text="TextView" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
style="#style/BodyText"
android:text="Medium Text"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
There is one "hack" in my case.
I put gallery in one more LinearLayout, make it WrapContent by default and Gallery FitParent,
when i click "more" button i expand the Layout height (previous height + countlines of new textview * sizeoftext).

Categories

Resources