Develop Reference

How show cardview as a dilouge while bluring the background

I have a card view with 2 radio buttons I want to show it as a dialogue
I want to achieve multiple things
Showing card view as a dialogue
blurring the background layout while showing the dialog
I have 2 radio buttons (only one is selectable) I want that after selecting one of them the dialogue will disappear but not immediately at least there should be a short delay so the user can see the selection of the radio button
Note:- If you want more references of the code please tell me I will
update the question as you can find I dint include the fragment_home
java file so the question doesn't get long and confusing
Here is the layout
sort_image.xml
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:backgroundTint="#color/grey"
app:cardCornerRadius="20dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/sort_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_marginTop="5dp"
android:fontFamily="#font/roboto"
android:text="Sort by"
android:textAlignment="center"
android:textColor="#color/lite_grey"
android:textSize="25sp" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/divider_line_sort_by"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/sort_textView"
android:layout_marginStart="10dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="10dp"
android:backgroundTint="#color/lite_grey"
app:cardCornerRadius="50dp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<TextView
android:id="#+id/latest_sort_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:fontFamily="#font/roboto"
android:text="Latest"
android:textAlignment="center"
android:textColor="#color/lite_grey"
android:textSize="25sp" />
<TextView
android:id="#+id/most_popular_sort_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/latest_sort_textView"
android:layout_alignParentStart="true"
android:layout_centerInParent="true"
android:layout_marginStart="30dp"
android:layout_marginTop="25sp"
android:fontFamily="#font/roboto"
android:text="Most Popular"
android:textAlignment="center"
android:textColor="#color/lite_grey"
android:textSize="25sp" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true">
<RadioButton
android:id="#+id/latest_sort_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25sp" />
<RadioButton
android:id="#+id/most_popular_sort_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" />
</RadioGroup>
</RelativeLayout>
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>
fragment_home.xml // This layout contains the text which I want that when pressed I open the dialogue and also this is the fragment/layout which I want to blur when showing the dialogue
Note:- only included the necessary code of this layout
<com.google.android.material.card.MaterialCardView
android:id="#+id/sort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
android:layout_toStartOf="#id/divider_line"
android:backgroundTint="#color/black"
android:elevation="6dp"
android:paddingBottom="10dp"
android:textAlignment="center"
app:cardCornerRadius="10dp">
<TextView
android:id="#+id/sort_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="5dp"
android:fontFamily="#font/roboto"
android:text="#string/sort"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="17sp"
android:textStyle="bold" />
</com.google.android.material.card.MaterialCardView>

I think you need to use dialog fragment. You can read more about that in official documentation https://developer.android.com/guide/fragments/dialogs

Hello friends how achieve bottom media controller layout?

Hello friends i am beginner in android i want know how to achieve this type layout the image which shown below please help me i trying achieve this type of layout

It is very simple layout FYI
It can be done with any type of parent layout Constraint, Relative and
even with Linear
I will share a Relative one example. Use your own drawables and assests.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayoutMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:padding="4dp">
<TextView
android:id="#+id/textViewSongTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="24dp"
android:layout_marginEnd="10dp"
android:layout_toStartOf="#+id/buttonBackward"
android:ellipsize="end"
android:maxLines="1"
android:padding="2dp"
android:text="Song Name - [details]"
android:textColor="#android:color/white"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textViewArtistName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textViewSongTitle"
android:layout_alignParentStart="true"
android:layout_marginStart="24dp"
android:layout_marginEnd="10dp"
android:layout_toStartOf="#+id/buttonBackward"
android:padding="2dp"
android:text="Singer Name"
android:textColor="#android:color/white"
android:textSize="12sp" />
<Button
android:id="#+id/buttonForward"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="8dp"
android:background="#android:color/holo_green_dark"
android:gravity="center"
android:text="F"
android:textColor="#android:color/white" />
<Button
android:id="#+id/buttonPlayAndStop"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginEnd="8dp"
android:layout_toStartOf="#id/buttonForward"
android:background="#android:color/holo_green_dark"
android:gravity="center"
android:text="PS"
android:textColor="#android:color/white" />
<Button
android:id="#+id/buttonBackward"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginEnd="8dp"
android:layout_toStartOf="#id/buttonPlayAndStop"
android:background="#android:color/holo_green_dark"
android:gravity="center"
android:text="B"
android:textColor="#android:color/white" />
</RelativeLayout>

Adding padding or buffers to Android XML views

I have the following Android Activity:
As you can see, the EditText views need to come down just a few pixels lower so that the entire text can be displayed (without being cut off). Here is my XML for this activity:
<?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:context="com.example.myuser.myapp.O1LoginActivity">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Opponent 1 Login"
android:textSize="18sp"
tools:layout_editor_absoluteY="1dp"
android:layout_marginLeft="16dp"
layout_constraintLeft_toLeftOf="parent"
layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView6"
android:layout_width="55dp"
android:layout_height="17dp"
android:layout_marginLeft="16dp"
android:text="Username:"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<EditText
android:id="#+id/o1.username"
android:layout_width="219dp"
android:layout_height="31dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<TextView
android:id="#+id/textView10"
android:layout_width="55dp"
android:layout_height="17dp"
android:layout_marginLeft="16dp"
android:text="Password:"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/o1.username" />
<EditText
android:id="#+id/o1.password"
android:layout_width="219dp"
android:layout_height="31dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="7dp"
android:onClick="toO2Login"
android:text="Next >>"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>
I'd really prefer to keep the existing constraints (layout_constraintLeft_toLeftOf, layout_constraintTop_toBottomOf, etc.) in place, because I want each subsequent view to appear left-aligned and beneath the previous view/widget. I'm just looking to add a buffer/margin to the top of my EditText instances so that the text (when entered in) doesn't get truncated. Any ideas?

As mentioned in the comment below your question by #Mohamed_AbdAllah, the height you have given for the views is too less than the text size. Change it to wrap_content as below and it should be good.
<TextView
android:id="#+id/textView6"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:text="Username:"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<EditText
android:id="#+id/o1.username"
android:layout_width="219dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />

Android RelativeLayout working in LayoutEditor but breaking on device

For the TitleBar I have a RelativeLayout, which should display two buttons on the right side, and two TextViews on the left side. I got the layout code working in the Editor, but on the device it always breaks down.
On the image you can see a Screenshot from the Layout Editor and from the device (runs like this on multiple devices).
Here is the Layout Code I'm using:
- I know I just can dump in LinearLayouts, but this should be possible with RelativeLayout?
- I used the "toStartOf" properties because I don't want to overflow the icons with text if the text might be longer.
- Bonus Question: how can I center the two labels vertical, so that they are also centered if I only have a title and set the subtitle visibility to GONE
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="#dimen/default_content_padding"
android:background="#android:color/transparent"
tools:src="#drawable/account"/>
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="16dp"
android:layout_toStartOf="#id/toolbar_right_button"
android:background="#android:color/transparent"
tools:src="#drawable/ic_notifications"/>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignWithParentIfMissing="true"
android:layout_toStartOf="#id/toolbar_left_button"
android:fontFamily="#string/font_family_medium"
android:textAppearance="?android:textAppearanceMedium"
tools:text="Title "/>
<TextView
android:id="#+id/toolbar_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignWithParentIfMissing="true"
android:layout_below="#id/toolbar_title"
android:textAppearance="?android:textAppearanceSmall"
tools:text="Subtitle"/>
</RelativeLayout>

A ConstraintLayout would solve your problem. It keeps your layout flat, and also centers your text layouts vertically (and maintains it even after you 'remove' the subtitle).
<android.support.constraint.ConstraintLayout>
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/default_content_padding"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/account" />
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/default_content_padding"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/toolbar_right_button"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/ic_notifications" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#string/font_family_medium"
android:textAppearance="?android:textAppearanceMedium"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="#id/toolbar_subtitle"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/toolbar_left_button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
tools:text="Title " />
<TextView
android:id="#+id/toolbar_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:textAppearance="?android:textAppearanceSmall"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_title"
tools:text="Subtitle" />
</android.support.constraint.ConstraintLayout>

I have made it simple so it wont get messy:
<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="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
app:srcCompat="#android:drawable/ic_menu_compass" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignStart="#+id/imageButton"
android:layout_below="#+id/imageButton"
app:srcCompat="#android:drawable/btn_dialog" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageButton2"
android:layout_alignParentStart="true"
android:text="TextView" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/textView4"
android:text="TextView" />
There are high chances that if You add a lot of elements and tools to the layout it will get messy, try to keep it simple and You will find what caused the problem.

RecyclerView scrolling as part of parent layout and not as a separate scroll (Similar to YouTube video comments)

I'm building a layout similar to the YouTube video layout, trying to get the RecyclerView holding the video comments to scroll as part of the whole layout and not be a separate scroll. I'm relatively new to Android programming and cannot get this to work.
The layout is as such:
At the top of the layout there is a YouTube player which never
scrolls with the screen;
Bellow it are other views which should scroll;
and at the bottom of the layout is the comment section which is a
RecyclerView and it should scroll as part of the whole layout.
I've read on similar questions regarding headers to put the header inside the RecyclerView, but this seems bigger than just a header.
Additionally, the "header" part has a few views that change (rating, view count).
<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">
<fragment
android:id="#+id/youtube_fragment"
android:name="com.google.android.youtube.player.YouTubePlayerSupportFragment"
android:layout_width="match_parent"
android:layout_height="200dp" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/youtube_fragment"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textview_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginEnd="64dp"
android:layout_marginRight="64dp"
android:layout_marginTop="40dp"
android:text="Star Wars the Force Awakens"
android:textColor="#color/colorPrimaryText"
android:textSize="#dimen/text_size_large" />
<TextView
android:id="#+id/textview_view_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignTop="#+id/textview_title"
android:text="1737\nViews"
android:textColor="#color/colorSecondaryText"
android:textSize="#dimen/text_size_small" />
<ImageButton
android:id="#+id/imagebutton_show_description"
style="?attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_below="#id/textview_view_count"
android:contentDescription="Image of an arrow pointing down, which when pressed shows the item's description"
android:src="#drawable/ic_arrow_drop_down_black_24dp" />
<TextView
android:id="#+id/textview_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton_show_description"
android:layout_marginTop="12dp"
android:textColor="#color/colorSecondaryText"
android:textSize="#dimen/text_size_small"
android:visibility="gone" />
<View
android:id="#+id/divider1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/textview_description"
android:layout_marginLeft="#dimen/divider_horizontal_margin"
android:layout_marginRight="#dimen/divider_horizontal_margin"
android:layout_marginTop="32dp"
android:background="#color/colorDivider" />
<RatingBar
android:id="#+id/ratingbar"
style="#style/MyRating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textview_title"
android:layout_alignStart="#+id/textview_title"
android:layout_below="#+id/divider1"
android:layout_marginTop="16dp"
android:numStars="5" />
<TextView
android:id="#+id/rating_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/ratingbar"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_toEndOf="#+id/ratingbar"
android:layout_toRightOf="#+id/ratingbar"
android:text="0"
android:textColor="#color/colorSecondaryText"
android:textSize="#dimen/text_size_large" />
android:layout_below="#+id/divider1"
android:layout_marginTop="16dp"
android:text="FLOAT" />
<ImageView
android:id="#+id/imageview_user"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_below="#+id/ratingbar"
android:layout_marginTop="32dp"
android:src="#drawable/singer" />
<View
android:id="#+id/divider2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/imageview_user"
android:layout_marginLeft="#dimen/divider_horizontal_margin"
android:layout_marginRight="#dimen/divider_horizontal_margin"
android:layout_marginTop="12dp"
android:background="#color/colorDivider" />
<TextView
android:id="#+id/comment_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/divider2"
android:layout_marginTop="24dp"
android:text="Comments"
android:textColor="#color/colorSecondaryText"
android:textSize="#dimen/text_size_small" />
<ImageView
android:id="#+id/imageview_commenting_user"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_below="#+id/textview_comment_header"
android:layout_marginTop="24dp"
android:src="#drawable/singer" />
<EditText
android:id="#+id/edittext_comment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textview_comment_header"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_toEndOf="#+id/imageview_commenting_user"
android:layout_toRightOf="#+id/imageview_commenting_user"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:hint="Add public comment"
android:longClickable="false" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/edittext_comment"
android:layout_marginBottom="16dp"
android:layout_marginTop="32dp" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
I later followed Hister's answer from Is there an addHeaderView equivalent for RecyclerView? and added everything but the video as a header, and the comments as the second holder. It seems to work (though I'm still not sure if this is how I was supposed to do this), but every time I added a new comment to the first position (after the header), I get extra white spaces added to the top of the comments section. I looked over the code and I have no idea what could add an empty section each time i add a new comment.