I have three elements in layout, two TextViews and one ImageView between them. I'm trying to achieve this behavior:
image (arrow) has 9patch
image is wide as possible
image has set minimal width
right and left texts go wider with longer text but only to meet image's minWidth, then new line appears
Below are few screenshots from Android Studio layout preview, gained with different layouts.
What I have tried:
Relative layout: image centered, minWidth set, texts have set toRightOf/toLeftOf
Relative layout: image has set toRightOf/toLeftOf
Constraint layout: "constraint arrows" go from image to text
Constraint layout: "constraint arrows" go from text to image
Linear layout: using weight (not really responsive)
What I always get:
What I want seems quite straightforward to me but I cannot do it. Am I missing something or is it really impossible? Thank you in advance.
Use below code
<?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">
<TextView
android:id="#+id/left_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text="TextView" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:layout_toLeftOf="#+id/right_tv"
android:layout_toRightOf="#+id/left_tv"
app:srcCompat="#drawable/arrow" />
<TextView
android:id="#+id/right_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="TextView" />
</RelativeLayout>
Replace your image with arrow
Here is one more answer done via constraintLayout by creating horizontal chains.
Updated as you asked
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="wrap_content">
<TextView
android:id="#+id/left_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="ajn sdhbch chf nbhjgvbf vkjf vhf bvihfijnvj vfknvv ihvb jnvkjnfv kjnvfn"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/imageView6"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/left_tv"
app:layout_constraintRight_toLeftOf="#+id/right_tv"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_next_button" />
<TextView
android:id="#+id/right_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageView6"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Updated: the code is updated for more responsive layout.
Now play with maxwidth of both text views.
For your problem updating maxwidth programmatically will be better.
This code is done with Linear layout method. There is a GridLayout method also along with constraintLayout method. Can be achieved with many layouts, if you know the right technique to do so.
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/left_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView is long and very long" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_add_circle_green" />
<TextView
android:id="#+id/right_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="60dp"
android:text="TextView is long and very long" />
</LinearLayout>
Related
I am trying to center the text in a TextView, which itself is contained in a constraint layout. The problem is, wrap_content does not wrap the text tightly enough, which causes it to be off-center. I tried all gravities, making it fill the parent and then use gravities, etc. and can't think of a solution and did not find anything useful when googling.
Problem can be seen well in the layout preview:
badge.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:orientation="vertical"
android:textAlignment="center"
tools:layout_height="32dp"
tools:layout_width="32dp">
<ImageView
android:id="#+id/badge_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/circle_accent"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible"/>
<TextView
android:id="#+id/badge_counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foregroundGravity="center"
android:gravity="center"
android:textAlignment="center"
android:textColor="#color/white"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/badge_background"
app:layout_constraintLeft_toLeftOf="#id/badge_background"
app:layout_constraintRight_toRightOf="#id/badge_background"
app:layout_constraintTop_toTopOf="#id/badge_background"
tools:text="21"
tools:visibility="visible" />
<ImageView
android:id="#+id/badge_watched_tick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_watch"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/badge_background"
app:layout_constraintLeft_toLeftOf="#id/badge_background"
app:layout_constraintRight_toRightOf="#id/badge_background"
app:layout_constraintTop_toTopOf="#id/badge_background"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Try to use round drawable as TextView background
image
For the tree I made LinearLayout (horizontal). It has an image and other LinearLayout which has text and button.
I tried to give weight to text and button, it keeps I am using nested weights. How should I fix it without an error?
If you want to use the LinearLayout here, there's no way around without nested weights. Google recommends using ConstraintLayout to keep the layout's hierarchy low.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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="wrap_content"
android:orientation="vertical">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/glCenterVertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="150dp"
app:layout_constraintEnd_toEndOf="#id/glCenterVertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Space
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/imageView"
app:layout_constraintStart_toEndOf="#id/imageView"
app:layout_constraintTop_toTopOf="#id/imageView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/space"
android:text="Test"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/imageView"
app:layout_constraintTop_toTopOf="#id/imageView"/>
<Button
android:layout_width="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/imageView"
android:text="Test"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/imageView"
app:layout_constraintTop_toTopOf="#id/space"
android:layout_height="wrap_content"/></androidx.constraintlayout.widget.ConstraintLayout>
I have an XML file with an ImageView and a TextView. Everytime that the TextView is populated, the text goes off of the screen. I looked at other people who have had the same problem and the common solution seems to be to set the Textview's width to 0dp. This hasn't worked for me. Wondering if anyone knows why?
Here is my constraintLayout XML file:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintRight_toLeftOf="#id/weather_data"
android:layout_width="50dp"
android:layout_height="match_parent" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE"
android:textStyle="bold"
android:paddingRight="16dp"
style="#style/TextAppearance.AppCompat.Large"
app:layout_constraintLeft_toRightOf="#id/weather_icon"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Here is what it looks like, text is clearly getting cut off:
I got the solution of your problem just use it:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/weather_data"
android:layout_width="50dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE "
android:textStyle="bold"
android:paddingRight="16dp"
style="#style/TextAppearance.AppCompat.Large"
app:layout_constraintLeft_toRightOf="#id/weather_icon"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
You should set the width of your TextView to match_constraint which, in the XML, will be 0dp.
And I see you're using both left/right and start/end notations. Stick to only one of them.
I encourage you to use the start/end notation because there might be devices using your app that their language is one that reads from right to left, i.e.: Arabic, so using the start/end you don't have to worry about these devices.
Thanks to Sandeep and Martin. I combined their suggestions and this works well in the layout:
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintEnd_toStartOf="#id/weather_data"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="50dp"
android:layout_height="wrapcontent" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE"
android:textStyle="bold"
android:paddingRight="16dp"
app:layout_constraintStart_toEndOf="#id/weather_icon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="#style/TextAppearance.AppCompat.Large"
android:layout_width="0dp"
android:layout_height="wrap_content" />
I am struggling creating the UI for a list item which should look like this:
I am trying to build a similar layout for my list items like in the picture above. However, I am stuck, because I don't exactly know, how to nest the views so the sell-buttons has the same height as both textviews.
If I use the RelativeLayout than I cannot use the layout_weight attribute anymore which position the views evenly horizontally on the screen.
However, if I use the LinearLayout than I cannot use the relative-attributes like alignTop and so on. I am trying to nest the views in a way so I can achieve this, however I am failing so far... (sry for my poor english skills)
This is what I have so far, however I still cannot get the desired result:
<?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="80dp"
android:padding="16dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="45dp">
<TextView
android:id="#+id/productname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Google Pixel" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/productname"
tools:text="699$" />
<TextView
android:id="#+id/quantity_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
tools:text="Quantity" />
<TextView
android:id="#+id/quantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/quantity_textview"
android:layout_centerHorizontal="true"
tools:text="31" />
</RelativeLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_alignParentRight="true"
tools:text="SELL"
android:layout_alignParentTop="true" />
</RelativeLayout>
I'd recommend ConstraintLayout. This will allow you to set the top of the button to be constrained to the top of first text view, the bottom of the button to be constrained to the bottom of the second text view, and maintain the even distribution left to right with a horizontal chain.
Here's a an example I just threw together for funsies:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="0dp"
android:text="TextView"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView4"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:text="Google Pixel" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView5"
app:layout_constraintLeft_toLeftOf="#+id/textView2"
app:layout_constraintRight_toRightOf="#+id/textView2"
tools:text="6995" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintLeft_toRightOf="#+id/textView2"
app:layout_constraintRight_toLeftOf="#+id/button2"
app:layout_constraintTop_toTopOf="parent"
tools:text="Quantity" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="32dp"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="#+id/textView4"
app:layout_constraintRight_toRightOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4"
tools:text="31" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginRight="8dp"
android:layout_marginTop="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/textView5"
app:layout_constraintLeft_toRightOf="#+id/textView4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:text="Sell" />
</android.support.constraint.ConstraintLayout>
This gives you this layout in the preview:
And this is what the preview looks like showing the constraints. You can see the button being constrained to the two views (dashed lines), and the chain across the "Google Pixel" label, the "Quantity" label, and the button that keeps everything evenly distributed.
Note that if you want the button to be smaller to shrink down to match the bottom of the second text view, you have to set the button's minHeight attribute to 0. You'll probably also have to replace the default background of the button if you want pixel-perfect alignment of the top and bottom as the default background drawable has some built-in padding.
Hope that helps!
Try using Frame Layout, with it you will be able to align your views according to your need.
Or you can use a listview with a custom adapter for creating this kind of view. You can refer to this link
http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/
I'm newbie in Android.
I would like to know if it's possible to put a button or another component over an ImageView. I've tried setting the image as a background image of a LinearLayout, but when I change between landscape and portrait mode, the image porportions are changed.
Thanks a lot.
Don't put the image as a background, you don't have any control on how the image is scaled. Instead, create a RelativeLayout, and put an ImageView as one of the child, and you can place anything (buttons etc) as other RelativeLayout children.
<RelativeLayout ...>
<ImageView (your image) ...>
<Button (the button you want) ... />
</RelativeLayout>
Try this code... it's Help you....
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/imageviewMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="Path "
/>
<Button android:id="#+id/but2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
Try this Code .....
In that give paramater in button to set your Button Position....
android:layout_margin or android:layout_alignParent
And also give Path of Image....
There is another way to do it,http://www.curious-creature.org/2009/03/01/android-layout-tricks-3-optimize-part-1/
Thank you.
The simpliest way to do it is to use a FrameLayout.
This is easy using the ConstraintLayout.
Set the constraints of the Button to the ImageView.
Drag the Button anywhere you want over the ImageView to position it.
XML code will be autogenerated.
For those using Constraint Layout: Just use an ImageView and add its constraints from all the four side to Parent and than add the other views as well.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:cardPreventCornerOverlap="true"
app:contentPadding="5dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/food"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imagebtn_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_share_24"
app:layout_constraintTop_toTopOf="parent"
android:padding="15dp"
app:layout_constraintStart_toStartOf="parent" />
<ImageButton
android:id="#+id/imagebtn_call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_call_24"
android:padding="15dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/expdate_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test_date"
android:background="#E2E3E4"
android:layout_marginBottom="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/imagebtn_address"
android:layout_marginEnd="30dp"
android:padding="5dp"/>
<TextView
android:id="#+id/title_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginBottom="5dp"
android:background="#E2E3E4"
android:padding="5dp"
android:textSize="18sp"
android:text="#string/test_foodname"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imagebtn_address"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<ImageButton
android:id="#+id/imagebtn_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_location_on_24"
android:padding="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Note: Replace the drawables added with your own.