I've got an Image button and want to place on top of it a descriptive text. Also need the ImageButton to be 1/3 of the parent's width so can't use a ConstraintLayout nor a LinearLayout. Any ideas?
Try wrapping your ImageView and TextView in a RelativeLayout as:
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
and set android:weightSum=3 in the parent layout. Once you have the desired layout, make the RelativeLayout clickable instead of using an ImageButton.
Related
I am trying to place an ImageView inside my RelativeLayout that is positioned about 3/4 down the screen, but as soon as I add an ImageView to the RelativeLayout, the layout and the image get snapped to the top of the screen and I am not sure how to move it from there.
This is what it looks like whenever I add an ImageView to the RelativeLayout
But I want it positioned just above the "Ready" button
This is the .xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
This is happening because you don't understand RelativeLayout well enough.
All Views placed inside RelativeLayout will automatically be placed ontop of each other in the top left corner of the RelativeLayout.
If you want to move it, you need to 'align' it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
By aligning the ImageView to the bottom of the RelativeLayout, it should be placed above the Ready button IF your RelativeLayout ends right above the Ready button.
If you want to center the ImageView, you can add in android:layout_centerHorizontal="true".
You can read more about RelativeLayout here: https://developer.android.com/guide/topics/ui/layout/relative
However, there's 2 curious things about your xml code.
Why are you placing an ImageView of height 80dp inside a RelativeLayout of height 74dp? It's basically purposely looking for trouble.
Why are you using a RelativeLayout if you're using ConstraintLayout already? One of the main benefits of using a ConstraintLayout is so you don't have to use nested layouts. With the power and control of ConstraintLayout, you can actually rearrange almost all views to any design you want without nesting another layout like RelativeLayout inside of it.
I'm just guessing that you're using ConstraintLayout because you used app:layout_constraintStart_toStartOf in your RelativeLayout and these types of 'constraints' only exist for ConstraintLayout.
So if you're already using a ConstraintLayout and your Ready Button is inside the ConstraintLayout, you simply need to do:
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
You don't need a RelativeLayout to place the ImageView above the Ready Button.
wrap the relative layout and button with linear layout orientation vertical and adjust gravity as you like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
</LinearLayout>
I am trying to add a custom border to a framelayout. The framelayout is used as container for the fragment. Thus I want to display fragment with a border. The border should be external to framelayout and should not consume the space inside of framelayout. And it should adjust with change in screen size.
What i can think right now is some sort of custom ViewGroup, add ImageView for border. Use image processing to get the inside area of imageview and in that area inflate a frame layout.
I am looking for some easy way out.
The easiest solution for this would be to create a 9-patch drawable and set it as the background for your FrameLayout. I have created the below 9-patch drawable that you can use. Hope this suffice your requirement.
You can obtain the effect via layout XML using for example LinearLayouts with proper layout_weight, so your centre-most FrameLayout will expand to take up available space.
There are 4 drawables used: for top, bottom, left and right part of frame.
Check out this code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/border_left" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/border_top" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!-- FrameLayout content goes here -->
</FrameLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/border_top" />
</LinearLayout>
<ImageView
android:layout_width="wrap_conttXY"
android:layout_height="match_parght"
android:scaleType="fient"
android:src="#drwable/border_right" />
</LinearLayout>
In the following code I've got two main containers, a RelativeLayout and a ScrollView. I need the RelativeLayout to be on top fixed and below that I need the ScrollView with Images to be scrollable. I've got the following two questions:
Though my ScrollView is scrollable but it goes on top of the RelativeLayout. !important
The view of my images present within the vertical LinearLayout are thumbnail sized. If I have 15-20 images, they take a lot of vertical space. How do I have the images to fit the maximum in a row based on the screen size and then go to the next row?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</RelativeLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView>
</ImageView>
<ImageView>
</ImageView>
<ImageView>
</ImageView>
<ImageView>
</ImageView>
</LinearLayout>
</ScrollView>
Follow these in simple way:
You need to use a fixed height for the parent, i.e., <RelativeLayout>.
Set the height of the ScrollView to match_parent.
Make sure you put everything inside a LinearLayout.
Finally you would end up with this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</RelativeLayout>
</LinearLayout>
First, you can set your RelativeLayout's height to a fixed value. Then set your ScrollView's height to match_parent, so it takes up all the available space. Then both of these should be contained in a vertical LinearLayout, to avoid any overlapping.
How i can insert an textview with height=100dp in parent layout with height=60 and display cropped textview?
I want to resize parent layout without resizing textview inside.
Set a negative value to the layout_marginTop of your TextView, and after resizing the parent you should also set that layout_marginTop to zero. The layout is like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_marginTop="-40dp"
android:layout_height="100dp"
android:text="text" />
</LinearLayout>
I have a ScrollView with some elements.
My problem is that i can't set textview's above ImageView's with dynamical height.
I have 3 ImageView with different height, they can be visible or gone.
Above them i need to put text with background color, this text need to be at the bottom part of the ImageView
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/pic"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ImageView>
<TextView
android:id="#+id/third_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:padding="8dp"
android:layout_alignParentBottom="true"
android:layout_above="#id/third_picture"
android:gravity="center_horizontal"
android:background="#android:color/white"
android:text="example text">
</TextView>
I tried a lot, but my View was always broken.
Please help, i need some proffesional advise.
You can do this in textview:
android:layout_alignBaseline="#id/pic"
This will align the baseline of textview with basline of imageview
You can set your picture as a background for a layout (e.g linear layout ) rather than using an ImageView and then put the textview inside it and place it where ever you want.
<LinearLayout
android:background="your picture" >
<!-- align it to the bottom -->
<TextView
/>
</LinearLayout>