I'm new to Android development. I've searched and tried almost everything that I've found but I couldn't managed to create the layout below. Basiciliy it'll be rows with background image and text middle-left aligned. I want all rows to be static height and background image to be covered (like this: css).
It's not very clear but you could try a LinearLayout (vertical) with inside
a RelativeLayout with fixed height for each items. In RelativeLayout aa
ImageView with match_parent for background of item with scale type at center and a TextView for text with padding:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="100dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/btn_alert_1"
android:scaleType="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="blabla"
android:textColor="#android:color/holo_green_dark"
android:paddingLeft="50dp"
android:paddingTop="40dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="100dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/btn_alert_2"
android:scaleType="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="blabla"
android:textColor="#android:color/holo_green_dark"
android:paddingLeft="50dp"
android:paddingTop="40dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="100dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/btn_alert_1"
android:scaleType="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="blabla"
android:textColor="#android:color/holo_green_dark"
android:paddingLeft="50dp"
android:paddingTop="40dp"/>
</RelativeLayout>
</LinearLayout>
Documentation about Android scale type: https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
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.
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 would like to make an ImageView overlay another ImageView like this; only half of the circle green is overlaying the image:
I have tried using RelativeLayout and put both ImageView inside. Then I overlay the circle over the image by using android:layout_alignBottom. It did overlay the but I have no idea how to set the offset so that only half of the circle is overlaying the base image.
EDIT:
Sorry, here is my layout xml code
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
</RelativeLayout>
I get lots of upvote for this answer.So i try to improve that answer. May be this is the better way to do that compare to other two, because this solution doesn't required to fix the layout or divide screen in equal part so may be this is better to do that.
<android.support.design.widget.CoordinatorLayout
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/viewA"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:orientation="horizontal">
<TextView
android:id="#+id/subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/white"
android:textSize="17sp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/viewB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="horizontal">
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/black"
android:textSize="17sp"
/>
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/plus"
app:layout_anchor="#+id/viewA"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Alternate way Try this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
// this is your first layout to put the big image
// use src or backgroud image as per requirement
<LinearLayout
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
// this is your bottom layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
// This is the imageview which overlay the first LinearLayout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/success"
android:adjustViewBounds="true"
android:layout_gravity="center"/>
</FrameLayout>
its look like this
found one more solution for that (Edit)
if your big image size is fixed height you can try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/layoutTop"
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="200dp" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutBottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/layoutTop" >
</RelativeLayout>
<ImageView
android:id="#+id/overlapImage"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_above="#id/layoutBottom"
android:layout_centerHorizontal="true"
android:layout_marginBottom="-20dp"
android:adjustViewBounds="true"
android:src="#drawable/testimage" />
</RelativeLayout>
Refernce :- Android: Placing ImageView on overlap between layouts
Hope this will help.Good Luck
Try out this way:
Just change layout_width and layout_height according to your need.
<?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" >
<View
android:id="#+id/viewOne"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#126989" />
<View
android:id="#+id/viewTwo"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/viewOne"
android:background="#547866" />
<View
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignBottom="#+id/viewTwo"
android:layout_centerHorizontal="true"
android:background="#ff7800"
android:layout_marginBottom="35dp" />
</RelativeLayout>
It will look like this:
I would recommend Constraintlayout as it gives excellent control over the positioning of individual view items. Sample based on your example below
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/parentLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product"/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintTop_toBottomOf="#+id/image_view_product"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/circle"
android:src="#drawable/ic_add_circle_green_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
Use layout_marginTop = -20dp ( Half of your image size ). It will go up.
android:layout_marginTop="-20dp"
put both the image in Relative layout
first define the image you want to put behind the green circle
than define the green circle as
android:layout_alignBottom="#+id/Image1"
Than adjust the position by giving margin to the green circle image.
I recommend you to use a framelayout with these two images.
with the refresh imageview at the bottom and the table fan at the top.
Note : As the framelayout behaves like a stack, the item at the bottom will appear at the top.
And do the set the gravity of the refresh icon to be bottom|center to make it look this way.
<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_fan"
android:scaleType="centerCrop"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<ImageView
android:src="#drawable/ic_refresh"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center|bottom"/>
</FrameLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:id="#+id/ivBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="-20dp"
android:layout_below="#+id/ivBackground"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
I think this should help you i have edited your code and made changes as below
- I change circle imageview height to 40dp and then i give margin top -20 dp so that image will overlay half as you need on background image.
I did not run this code so if you face any issues just let me know i hope this works well for you..
Screenshot:
activity_main.xml:
<RelativeLayout
android:id="#+id/rl_image"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="null"
android:scaleType="fitXY"
android:src="#drawable/album9" />
<ImageView
android:id="#+id/imageView_round"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/user_profile" />
</RelativeLayout>
I'm targeting API level 21 and min is also 21 (I support Lollipop only for now, it's a pet project to learn).
I'm having problems with a custom ListView item layout. Here is my XML:
<?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="wrap_content">
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:background="#FF0000"
android:src="#drawable/ic_test"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/test_list_item_icon"
android:textSize="50sp"/>
</RelativeLayout>
And here is what it looks like (the icon's red background color is only to see how big the actual view is):
I would like the image view to behave like the following: take up the available vertical space at the 'start'/left of the layout, have the image scale proportionally, and have the width be grown so that the image can be fully shown, like this (pardon my gimp skills):
Is it possible?
Try this for your ImageView
<?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">
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:background="#FF0000"
android:src="#drawable/ic_test"
android:adjustViewBounds="true"
android:scaleType="fitXY"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/test_list_item_icon"
android:textSize="50sp"/>
</RelativeLayout>
In the end I decided to create one more icon size, xxxhdpi, and it all looks nice now.
Many thanks to #corsair992 for information about the bug in one of the comments.
HI wujek the reason for your problem is you set height as wrap content for your relative layout . so it will take the textview's height as its height .then image view will use this as its height .so change relative layout height to match parent. Please try and let me know thanks
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:adjustViewBounds="true"
android:background="#ff0000"
android:src="#drawable/ic_launcher"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/layout_1"
android:gravity="center"
android:text="bhsbd"
android:textSize="50sp" />
try this
if u want to image should capture imageview size use background insted src.
if red background is mandatory use another relative layout as parent for imageview.
hope it works fo u..
<?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="wrap_content" >
<RelativeLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#FF0000" >
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:background="#drawable/ic_launcher"
android:adjustViewBounds="true"
tools:ignore="ContentDescription" />
</RelativeLayout>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/layout_1"
android:textSize="50sp" />
</RelativeLayout>
edit 2
<?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="wrap_content" >
<RelativeLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/test_list_item_name"
android:layout_alignTop="#+id/test_list_item_name"
android:background="#FF0000" >
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:adjustViewBounds="true"
tools:ignore="ContentDescription" />
</RelativeLayout>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/layout_1"
android:textSize="50sp"
android:text=" text 5>" />
</RelativeLayout>
Define a LineatLayout with weightsum.
<LinearLauyout
----
android:orientation="horizontal"
android:weightSum="5">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4">
</LinearLayout>
you can adjust the weightsum as per your requirement.