I am trying to build the following layout on Android:
As indicated by the dotted lines:
- The two TextViews should be left aligned.
- The ImageView should be center aligned with the title TextView
The labels should be anchored relative to the parent and each other as indicated in the sketch.
I have tried to implement this using ConstrainedLayout which gets me pretty far. But the tricky part is the alignment of image and title.
I would need an attribute like layout_constraintCenter_toCenterOf which unfortunately does not exist.
EDIT: ### removed hard-coded height ###
There was an unwanted hardcoded height in my code (marked in example below). After removing that it works fine for me.
But the question stands: What is the 'right' way to center-align views?
My solution feels like a hack.
#######################################
This is what I got so far:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="5dp">
<ImageView
android:id="#+id/image1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:layout_weight="0"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toStartOf="#+id/titleText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/titleText"
android:layout_width="0dp"
### edit: this line must go:
### android:layout_height="19dp"
android:layout_marginStart="158dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
tools:text="title" />
<TextView
android:id="#+id/detailText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:layout_weight="0"
android:gravity="center_vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/titleText"
app:layout_constraintTop_toBottomOf="#+id/titleText"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="subtitle" />
</android.support.constraint.ConstraintLayout>
I have tried to work around by aligning top and bottom which looks right in the preview but causes glitches in the real app:
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
Maybe ConstrainedLayout is the wrong tool for the job altogether.
What is the 'right way' to implement this layout in Android?
You may try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:src="#drawable/connected_icon_png" />
<View
android:layout_width="10dp"
android:layout_height="0dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:text="Title Label"/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:maxLines="2"
android:text="Content that you want" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"/>
</LinearLayout>
</LinearLayout>
You may able to do further edit if you need.
Happy Coading
Snapshot:
use your widgets inside relative 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="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_centerInParent="true"
android:padding="5dp">
<ImageView
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:id="#+id/image1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:src="#color/colorAccent"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toStartOf="#+id/titleText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="19dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:ellipsize="end"
android:text="abcjdnadnaadjdndd"
android:layout_toRightOf="#id/image1"
android:gravity="center_vertical"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
tools:text="title" />
<TextView
android:layout_toRightOf="#id/image1"
android:textAlignment="center"
android:layout_below="#id/titleText"
android:id="#+id/detailText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:text="sadhbhaeadhbaedn"
android:gravity="center_vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/titleText"
app:layout_constraintTop_toBottomOf="#+id/titleText"
tools:text="subtitle" />
</RelativeLayout>
Related
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
tools:context=".HomeList.HomeListAdapter"
android:layout_margin="20dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="30dp"
android:background="#drawable/radius_product"
android:elevation="5dp"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="140dp"
android:layout_height="70dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="40dp"
android:background="#drawable/radius_white" />
<TextView
android:id="#+id/productName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginBottom="68dp"
android:fontFamily="#font/ibmplexsanskr_regular"
android:text="product"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.091"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="46dp"
android:text="₩"
android:textColor="#F57154"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.133"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginBottom="37dp"
android:fontFamily="#font/ibmplexsanskr_regular"
android:text="dsdsdsds"
android:textColor="#F57154"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.258"
app:layout_constraintStart_toStartOf="parent" />
</FrameLayout>
I'm making xml of list-adapter item using Framelayout in Android Studio and I want to make it like pic1.
pic1
But I think it doesn't work. Because I can't bring product name or price in front of product image. And it works like this pic2.
pic2
I know that textView(id:price) would be the most recent child on top of the stack but it doesn't work.
I think it's because you have set android:elevation in your first ImageView. You either need to set a higher elevation for your TextViews, or remove the elevation if it's not necessary.
For some strange reason, the TextViews in my ConstraintLayout won't budge to show all text and it appears to go over the screen's boundaries. I already tried using app:layout_constrainedWidth="true" with android:layout_width="wrap_content" but that didn't have any effect in changing the positioning, leading me to think what would happen to the '1C' and '1D' text views when I add longer text in those.
Current result
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
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:layout_marginBottom="20dp"
app:cardUseCompatPadding="true"
android:background="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayoutA"
android:padding="12dp"
android:foreground="?android:attr/selectableItemBackground">
<!--Constraint 1-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/constraintLayoutTitle"
android:layout_marginBottom="10dp">
<ImageView
android:id="#+id/ibA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ibA"
app:layout_constraintTop_toTopOf="parent"
app:layout_constrainedWidth="true"
style="#android:style/TextAppearance.Medium"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<!--Constraint 2-->
<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:id="#+id/constraintLayout">
<ImageView
android:id="#+id/ivA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ivA"
app:layout_constraintTop_toTopOf="#+id/ivA"
style="#android:style/TextAppearance.Medium"/>
<TextView
android:id="#+id/tvC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toTopOf="#+id/tvD"
app:layout_constraintStart_toEndOf="#+id/ivA"
app:layout_constraintTop_toBottomOf="#+id/tvB"
style="#android:style/TextAppearance.Medium"/>
<ImageView
android:id="#+id/ivD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="#+id/ivA"
app:layout_constraintStart_toStartOf="#+id/ivA"
app:layout_constraintTop_toBottomOf="#+id/ivA"
app:layout_constraintTop_toTopOf="#+id/tvD"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ivD"
app:layout_constraintTop_toBottomOf="#+id/tvC"
style="#android:style/TextAppearance.Medium"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
Suraj Vaishnav's suggestion
Because there is no constraint from the right(or end) side, add this app:layout_constraintEnd_toEndOf="parent" to tvA,tvB and so on.
Update:
apply both constraints: start and end and set the width 0dp. here are the working properties for tvB:
<TextView
android:id="#+id/tvB"
app:layout_constraintStart_toEndOf="#+id/ivA"
android:layout_width="0dp"
app:layout_constraintEnd_toEndOf="parent"
...
I guess you can do the same things for tvC & tvD, let me know if you face any issue.
I am developing android app and how can I create ui like below picture
and below my xml I have played around but it is not giving expected output any suggestion will be greatly appreciated and hints welcome I dont know where exactly I am making mistake
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
card_view:cardPreventCornerOverlap="false"
card_view:cardCornerRadius="50dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/articleTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/articleSource"
android:paddingBottom="45dp"
android:text="22222222"
tools:layout_editor_absoluteX="25dp"
tools:layout_editor_absoluteY="16dp" />
<ImageView
android:layout_width="60dp"
android:contentDescription="#string/bbc_sport"
android:layout_height="60dp"/>
<TextView
android:id="#+id/articleSource"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="90dp"
android:text="News blalalalal"/>
<TextView
android:id="#+id/articleTime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="90dp"
android:text="News blalalalal"/>
</androidx.constraintlayout.widget.ConstraintLayout
>
</androidx.cardview.widget.CardView>
If you mean item list you maybe can do this
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="85dp"
android:layout_marginStart="16dp"
android:contentDescription="bbc"
tools:background="#color/colorPrimary" />
<TextView
android:id="#+id/articleTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="#id/imageView"
android:ellipsize="end"
android:lines="3"
android:maxLines="3"
android:text="1\n2\n3\n" />
<ImageView
android:id="#+id/imageCategory"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_below="#id/articleTitle"
android:layout_marginStart="16dp"
android:layout_toEndOf="#id/imageView"
tools:background="#color/colorPrimary" />
<TextView
android:id="#+id/articleCategory"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_below="#id/articleTitle"
android:layout_marginStart="16dp"
android:layout_toEndOf="#id/imageCategory"
android:gravity="center|start"
android:text="Onefootbal" />
<TextView
android:id="#+id/articleTime"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_below="#id/articleTitle"
android:layout_alignParentEnd="true"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="#id/articleCategory"
android:gravity="center|start"
android:text="- 1h"
android:textColor="#android:color/darker_gray" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
If you are looking for a way to build the whole screen I'd suggest you using Epoxy library by Airbnb https://github.com/airbnb/epoxy
You will basically treat this screen as RecyclerView which has 2 types of layouts - item without image (as the one on top) and item with image (all the bottom ones).
It will take some time to learn the library but it will be very handy especially if your layout is reusable and other screens use similar items
When I am trying to make a border (frame) around my ImageView by using padding or margin in FrameLayout (in code it has id: main_frame), it's only shown on left and right sides but not on top and bottom.
But as I wrote I need it around because it should look like frame.
There is a code:
<?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"
android:background="#color/colorPrimaryDark"
tools:context=".WallActivity">
<RelativeLayout
android:id="#+id/wall_frame"
android:layout_width="592dp"
android:layout_height="315dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout"
app:layout_constraintVertical_bias="1.0">
<ImageView
android:id="#+id/wall"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/room"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<FrameLayout
android:id="#+id/main_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/transparent"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.621"
android:layout_margin="40dp">
<FrameLayout
android:id="#+id/frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/black"
android:visibility="visible"
android:padding="20dp">
<FrameLayout
android:id="#+id/mat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/white"
android:visibility="visible"
android:padding="10dp">
<RelativeLayout
android:id="#+id/imageholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent">
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/nature"
android:visibility="visible"
android:layout_centerInParent="true"/>
</RelativeLayout>
</FrameLayout>
</FrameLayout>
</FrameLayout>
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="586dp"
android:layout_height="36dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:orientation="horizontal"
android:weightSum="35.5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/hideBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Hide"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/clearBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Clear"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/lockBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Lock"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<Button
android:id="#+id/exportBTN"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Export"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<Button
android:id="#+id/wallBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Wall"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/pictureBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Picture"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
And here is the screenshot.
Do you have any idea how to solve it? I tried searching but couldn't find anything similar. Or is there a better way to make frames?
Thank you!
//Edited:
I added full xml code, added some padding to FrameLayouts with id: mat, frame. It looks perfect but main_frame is still broken. main_frame should be invisible (with transparent color) so you may think it's not necessarily to solve it, but I find out when I let it be like that it brokes image when I change it. It adds some white borders (only just on left and right side) to the image...
There is another picture to show you that frames look good but as I said main_frame is broken...
Add this: android:padding="2dp" to the FrameLayout with id frame. You can change 2dp to what you like.
You might consider having a simple layout using one RelativeLayout and an ImageView. The RelativeLayout might have a background whereas the ImageView will have some padding along with a background as well. So the layout will be something like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/room">
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/black"
android:padding="16dp"
android:scaleType="fitCenter"
android:src="#drawable/nature" />
</RelativeLayout>
Hope that helps!
I need to set text for a LottieAnimationView, but the documentation isn't helping me much
I tried adding a text view on the layout, but it doesn't seem to do anything.
<com.airbnb.lottie.LottieAnimationView
android:background="#color/trans_100"
android:id="#+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_value"
android:textSize="20sp"
android:layout_gravity="center"
/>
I don't think you can put a text in the animation because is like an image (you don't have the source for edit this).
However, if you use relative or constraintlayout you can do the trick by using:
In relative layout:
<TextView
android:paddingTop="-10dp"
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_value"
android:textSize="20sp"
android:layout_gravity="center" />
In constraintlayout:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="350dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:layout_height="match_parent">
<com.airbnb.lottie.LottieAnimationView
android:background="#color/trans_100"
android:id="#+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:paddingTop="10dp"
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_value"
android:textSize="20sp"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#null"
app:textAllCaps="false" />
</androidx.constraintlayout.widget.ConstraintLayout>
Right now i am doing a test with the information a gave you with a Lottie Animation I am working in ConstraintLayout a this is the result: