Text does not fit the screen in LinearLayout - android

The TextViews used in the following layout do not get wrapped in the screen and go out on the left (or start) edge of the screen.
<?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"
>
<LinearLayout
android:id="#+id/text_pane"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/iv_video_thumbnail"
android:layout_toStartOf="#+id/iv_video_thumbnail"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:layout_gravity="end"
android:padding="#dimen/text_padding"/>
<TextView
android:padding="#dimen/text_padding"
android:layout_gravity="end"
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="#dimen/thumbnail_width"
android:layout_height="#dimen/thumbnail_height"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:contentDescription="#string/video_thumbnail_image"
app:srcCompat="#drawable/video" />
</RelativeLayout>
I do not know why the text goes out of screen on the left side. I have tried using margin and padding for the RelativeLayout and LinearLayout and the two TextViews, but none of them solved the problem.
Currently, the app displays content as follows:
As you see in the code, I have also applied the gravity attribute to the TextViews, but no success yet. Does anyone know how to solve this?


Try this!!
<?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:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:padding="10dp"
android:text="#android:string/dialog_alert_title"
app:layout_constraintEnd_toStartOf="#+id/iv_video_thumbnail"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:padding="10dp"
android:text="#android:string/fingerprint_icon_content_description"
app:layout_constraintEnd_toStartOf="#+id/iv_video_thumbnail"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title" />
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="1dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/tv_video_descr"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/your_img" />
</android.support.constraint.ConstraintLayout>


Try this...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="horizontal">
<LinearLayout
android:id="#+id/text_pane"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/iv_video_thumbnail"
android:layout_toStartOf="#+id/iv_video_thumbnail"
android:layout_weight=".2"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:gravity="right"
android:layout_margin="3dp"
android:layout_weight=".1"
android:padding="10dp"/>
<TextView
android:padding="10dp"
android:id="#+id/tv_video_descr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight=".3"
android:text="" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_weight=".1"
android:scaleType="fitXY"
android:layout_alignParentRight="true"/>
</LinearLayout>
Output:


Use this layout instead.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/text_pane"
android:layout_width="0dp"
android:padding="#dimen/text_padding"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="Hi" />
<TextView
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="Hi" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="0dp"
android:layout_height="#dimen/thumbnail_height"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
app:srcCompat="#drawable/video" />
</LinearLayout>

Related

Massive space below RecyclerView entries

I have a massive space (almost the entire rest of the screen - not complete) below each of my RecyclerView entries, and I have no idea what could be causing it. I have one LinearLayout with weights, but that's contained within another LinearLayout of a fixed height (as shown in the code below). Here is my EntryItem layout, as well as my host layout (Fragment):
Entry Item Layout
<?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="675dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:weightSum="5"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="7">
<android.support.v7.widget.CardView
android:id="#+id/top_card"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="-10dp"
android:layout_weight="2"
app:cardBackgroundColor="#color/redditOrange"
app:cardCornerRadius="10dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.Guideline
android:id="#+id/top_card_vert"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.075" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
app:srcCompat="#drawable/reddit"
app:layout_constraintRight_toLeftOf="#id/top_card_vert"/>
<TextView
android:id="#+id/label"
android:layout_width="349dp"
android:layout_height="20dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/volte_regular"
android:gravity="center_vertical"
android:text="r/tifu"
app:layout_constraintStart_toEndOf="#id/top_card_vert"
android:textColor="#ffffff" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/main_card"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
app:cardBackgroundColor="#color/cardColor"
app:cardElevation="7dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="#+id/card_title_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<TextView
android:paddingTop="2dp"
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/volte_bold"
android:text="TIFU by trying to buy a Christmas present for my wife"
app:layout_constraintBottom_toTopOf="#+id/card_title_line"
android:textColor="#color/offBlack" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Using ConstraintLayouts to do percents are recommended instead of using nested weights (LinearLayouts) -->
<android.support.constraint.Guideline
android:id="#+id/hor_guideline_below"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="73dp" />
<android.support.constraint.Guideline
android:id="#+id/above_text_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.27" />
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.constraint.Guideline
android:id="#+id/ver_guideline_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.32" />
<android.support.constraint.Guideline
android:id="#+id/hor_guideline_above"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.38" />
<TextView
android:id="#+id/author"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/volte_regular"
android:gravity="center_vertical"
android:paddingTop="7dp"
android:paddingBottom="1dp"
android:text="/u/TheFiveHundred"
android:textColor="#color/darkRedditOrange"
android:textSize="10sp"
app:layout_constraintLeft_toRightOf="#id/ver_guideline_subtitle"
app:layout_constraintTop_toBottomOf="#id/hor_guideline_above" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/author"
app:layout_constraintEnd_toStartOf="#id/date_created"
app:layout_constraintLeft_toRightOf="#id/ver_guideline_subtitle"
app:layout_constraintTop_toBottomOf="#id/hor_guideline_above"
android:paddingTop="5dp"
android:textColor="#color/darkRedditOrange"
android:textSize="10sp"
android:text="|"/>
<TextView
android:id="#+id/date_created"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="116dp"
android:fontFamily="#font/volte_regular"
android:gravity="center_vertical"
android:paddingBottom="1dp"
android:paddingTop="7dp"
android:text="12.12.2018"
android:textColor="#color/darkRedditOrange"
android:textSize="10sp"
app:layout_constraintLeft_toRightOf="#id/ver_guideline_subtitle"
app:layout_constraintTop_toBottomOf="#id/hor_guideline_above" />
</android.support.constraint.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_gravity="bottom">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="63dp"
android:layout_height="63dp"
android:layout_gravity="bottom"
android:layout_marginStart="4dp"
android:layout_marginBottom="3dp"
android:tint="#color/redditOrange"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textContent"
android:layout_width="304dp"
android:layout_height="63dp"
android:layout_gravity="bottom|end"
android:layout_marginEnd="8dp"
android:fontFamily="#font/volte_regular"
android:gravity="center_vertical"
android:paddingLeft="5dp"
android:text="#string/lorem_ipsum"
android:textColor="#color/darkGray"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="#+id/hor_guideline_below"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/thumbnail"
app:layout_constraintTop_toBottomOf="#id/above_text_content"
app:layout_constraintVertical_bias="0.0" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
Fragment Layout (Host)
<?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.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
Any assistance would be greatly appreciated.

Remove
android:weightSum="5"
from the parent LinearLayout.
Also, do you need this fixed height?:
android:layout_height="675dp"

Aligning controls to appear horizontally centered on screen

I'm trying to align an image view so that it appears in the center of the screen, and then two buttons that appear centered below the image view.
However, I can't get it to work. I've tried many different ideas, but none of them work.
Is there a good way of doing this?
Thanks!
Here is a screenshot of what is going on:
And here is my xml layout:
<?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"
tools:background="?android:attr/colorForeground"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="64dp"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imgSurf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:maxHeight="500px"
android:maxWidth="500px"
android:minHeight="500px"
android:minWidth="500px" />
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center">
<Button
android:id="#+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:gravity="center_vertical|center_horizontal"
android:text="Start"
android:textSize="12dp" />
<Button
android:id="#+id/btnStop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="center_vertical|center_horizontal"
android:text="Stop"
android:textSize="12dp" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>

Check this code, but you should work with ConstraintLayout directly, without nested layouts. Also you should use dp instead px.
<?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"
tools:background="?android:attr/colorForeground"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imgSurf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:maxHeight="500px"
android:maxWidth="500px"
android:minHeight="500px"
android:minWidth="500px" />
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:gravity="center">
<Button
android:id="#+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:gravity="center_vertical|center_horizontal"
android:text="Start"
android:textSize="12dp" />
<Button
android:id="#+id/btnStop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="center_vertical|center_horizontal"
android:text="Stop"
android:textSize="12dp" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Check this video about
ConstraintLayout

View not visible in device but visible in XML

I am trying to build a layout with a right arrow and a vertical line with 2 textviews to right of it.
This layout will be used in a RecyclerView
This is the code that I am using,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:clickable="true"
android:id="#+id/rootLayout"
>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_margin="#dimen/app_margin"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="4dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
>
<View
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:id="#+id/lineView"
android:layout_marginLeft="15dp"
android:background="#color/colorPrimary"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/name"
android:layout_toRightOf="#+id/lineView"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/type"
android:layout_toRightOf="#+id/lineView"
android:layout_below="#+id/name"
/>
<android.support.v7.widget.AppCompatImageView
android:layout_width="50dp"
android:layout_height="50dp"
app:srcCompat="#drawable/right_arrow"
android:layout_alignParentEnd="true"
android:layout_centerInParent="true"
android:id="#+id/right_arrow"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
This is the result of the above layout
The blue line is not visible when I run the output on my device but is visible in XML as shown
My Questions
How do I make it visible in my device ?
The blue line is very big I tried wrap_content but still did not work

You can simply align your lineView upto the height of text views. otherwise it will grow upto the device height. Refer this sample.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.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_margin="10dp"
app:cardBackgroundColor="#FFFFFF"
app:contentPadding="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<View
android:id="#+id/view"
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/linearLayout"
android:layout_alignParentTop="true"
android:background="#color/colorPrimary" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/view"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABCD"
android:textSize="15sp" />
<TextView
android:id="#+id/value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABCD"
android:textSize="15sp" />
</LinearLayout>
<ImageView
android:id="#+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
app:srcCompat="#drawable/ic_keyboard_arrow_right_black_24px" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Screenshot of above example:

To fit the line according to content use this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<View
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:id="#+id/lineView"
android:layout_marginLeft="15dp"
android:background="#color/colorPrimary"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/name"
android:layout_toRightOf="#+id/lineView"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/type"
android:layout_toRightOf="#+id/lineView"
android:layout_below="#+id/name"
/>
<LinearLayout />

Android - height of multiline button with layout_weight set

I have the following layout for my dialog:
<?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="match_parent"
android:orientation="vertical">
<TextView
style="#style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="#string/practice_question" />
<TextView
android:id="#+id/dialog_select_question"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:textColor="#color/primary_text"
android:textSize="16sp"
tools:ignore="RtlHardcoded" />
<ListView
android:id="#+id/dialog_select_answers"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/dialog_select_board_button"
style="?attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="#string/practice_look_board" />
<Button
android:id="#+id/dialog_select_answer_button"
style="?attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="#string/practice_answer" />
</LinearLayout>
</LinearLayout>
There is a problem with bottom buttons:
I want the first button not to be cropped. I've set android:layout_height="wrap_content" but that doesn't helped.
P.S. If I change button text from "Look on the board" to "Look on the\nboard" all works fine. But I want to make the second button optional, so the first button may match the whole parent's width.

I have changed some of your code please try this
<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"
android:orientation="vertical">
<TextView
android:id="#+id/dialog_select_title"
style="#style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="#string/practice_question" />
<TextView
android:id="#+id/dialog_select_question"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/dialog_select_title"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:textColor="#color/primary_text"
android:textSize="16sp"
tools:ignore="RtlHardcoded" />
<ListView
android:id="#+id/dialog_select_answers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/dialog_select_question" />
<LinearLayout
android:id="#+id/dialog_select_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/dialog_select_answers"
android:orientation="horizontal">
<Button
android:id="#+id/dialog_select_board_button"
style="?attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="#string/practice_look_board" />
<Button
android:id="#+id/dialog_select_answer_button"
style="?attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="#string/practice_answer" />
</LinearLayout>
</RelativeLayout>

Overlapping circleView on top of two different Layouts

I am trying to obtain this:
but I was only able to obtaing this:
using 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="match_parent"
android:orientation="vertical" >
<!--android:background="#mipmap/background_poly"-->
<RelativeLayout android:id="#+id/headerL"
android:layout_width="match_parent" android:layout_height="100dp"
android:background="#color/account_grey_200">
</RelativeLayout>
<RelativeLayout android:id="#+id/account_det"
android:layout_width="match_parent" android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/usrAvatar"
android:layout_width="90dp" android:layout_height="90dp"
android:src="#mipmap/aka"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="38dp"/>
<TextView android:id="#+id/usrName"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="8dp" android:layout_marginStart="8dp"
android:layout_marginTop="2dp"
android:text="CrisRe"
android:textColor="#000000" android:textSize="14sp" android:textStyle="normal"
android:layout_toEndOf="#id/usrAvatar"
android:layout_toRightOf="#id/usrAvatar"
android:layout_alignTop="#id/usrAvatar" />
<!--android:layout_alignBaseline="#id/usrAvatar"-->
<TextView android:id="#+id/usrEmail"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="normal"
android:text="crisRe#mymail.com"
android:layout_alignLeft="#id/usrName"
android:layout_alignStart="#id/usrName"
android:layout_below="#id/usrName" />
</RelativeLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="fill_parent"
android:layout_below="#+id/headerL"
android:background="#color/account_grey_400"/>
what's the matter? How can I overlap my CircleView on top of the two layouts?
I've also considered using a drawable layer-list but I wasn't able to make it work. This one seemed to be the easiest solution, though I am also considering other alternatives.

A slight modification in your xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- android:background="#mipmap/background_poly" -->
<RelativeLayout
android:id="#+id/headerL"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/account_grey_200" >
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/headerL"
android:background="#color/account_grey_400" />
<RelativeLayout
android:id="#+id/account_det"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/usrAvatar"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="38dp"
android:src="#mipmap/aka" />
<TextView
android:id="#+id/usrName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/usrAvatar"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="2dp"
android:layout_toEndOf="#id/usrAvatar"
android:layout_toRightOf="#id/usrAvatar"
android:text="CrisRe"
android:textColor="#000000"
android:textSize="14sp"
android:textStyle="normal" />
<!-- android:layout_alignBaseline="#id/usrAvatar" -->
<TextView
android:id="#+id/usrEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/usrName"
android:layout_alignStart="#id/usrName"
android:layout_below="#id/usrName"
android:layout_marginTop="6dp"
android:text="crisRe#mymail.com"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="normal" />
</RelativeLayout>

Change the below code according to your requirements
<RelativeLayout
android:id="#+id/top_layout"
android:layout_width="match_parent"
android:background="#FFFF0000"
android:layout_height="100dp"></RelativeLayout>
<RelativeLayout
android:id="#+id/bottom_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"></RelativeLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_below="#+id/top_layout"
android:layout_marginTop="-45dp" //It should be half of the height
android:src="#drawable/ic_launcher" />

Categories

Resources