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

Android: How to get 3 elements side by side

I'm trying to have 3 elements side by side like this:
The second image is never displayed. Where is my mistake ?
<ImageView
android:id="#+id/asset_cat_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="10dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/asset_cat_image"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/asset_cat_image">
<TextView
android:id="#+id/asset_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textStyle="bold"
android:maxLines="1"
android:textColor="#color/cardview_head"
android:ellipsize="end"
tools:text="Main Text"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp" />
<TextView
android:id="#+id/asset_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="italic"
android:textSize="14sp"
android:textColor="#color/cardview_subhead"
tools:text="Sub Text"
android:maxLines="1"
android:ellipsize="end"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp" />
</LinearLayout>
<ImageView
android:id="#+id/collapseimg"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="10dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>

While LinearLayouts width is match_parent it displaces every view after it by default. To avoid it you need to say what view should be placed after it. In your case it should be:
<LinearLayout
...
android:layout_toRightOf="#+id/asset_cat_image"
android:layout_toLeftOf="#+id/collapseimg">
Then align your second image to the right side:
<ImageView
...
android:layout_alignParentRight="true"/>

Avoid layout element to move the second element out of the layout when is too big

I have two TextViews in the same row, next to each other. The first TextView may be so big that can be bigger than the width of the screen. So when this happens I need the second one to be visible and have the first one with ellipsize = true and show the 3 dots. The second one has more or less the same size always, and it should be always visible.
This is what I have now:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/horizontalItemTitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/horizontalItemDescriptionSecond"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/horizontalItemDescription2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:ellipsize="end"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
tools:text="10 songs"
style="#style/AppTheme.Text.Body_2" />
<TextView
android:id="#+id/horizontalItemDescriptionSecond2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:layout_toEndOf="#+id/horizontalItemDescription2"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
android:visibility="gone"
android:gravity="start"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
tools:text=", 45 min"
tools:visibility="visible"
style="#style/AppTheme.Text.Body_2" />
</RelativeLayout>
I also tried with ConstraintLayout and LinearLayout but I couldn't make it work as I want.
EDIT
Here 2 images of how it have to be. Please focus on the last line
1.- When the first textview is small.
the second text view is just next to the first one.
2.- When the first textview is large.
The first text view end with ... but doesn't move the second text view out of the layout.

I have updated the layout. Try with this layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1"
app:layout_constraintTop_toBottomOf="#+id/horizontalItemTitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/horizontalItemDescriptionSecond"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/horizontalItemDescription2"
android:layout_width="0dp"
android:layout_weight="0.7"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:ellipsize="end"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
tools:text="10 songs"
style="#style/AppTheme.Text.Body_2" />
<TextView
android:id="#+id/horizontalItemDescriptionSecond2"
android:layout_width="0dp"
android:layout_weight="0.3"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
android:visibility="gone"
android:gravity="start"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
tools:text=", 45 min"
tools:visibility="visible"
style="#style/AppTheme.Text.Body_2" />
</RelativeLayout>

You can achieve this behaviour working with the constraint layout:
<androidx.constraintlayout.widget.ConstraintLayout
android:background="#color/red"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/test1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/test2"
android:background="#color/green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
android:maxLines="1"
android:ellipsize="end"
android:text="10 songs"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed" />
<TextView
android:background="#color/primaryLight"
android:id="#+id/test2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/test1"
app:layout_constraintEnd_toEndOf="parent"
android:maxLines="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=", 45 min" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can do this by using android:layout_weight attribute and by setting android:maxWidth according to big text.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal">
<TextView
android:id="#+id/horizontalItemDescription2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="100dp"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:ellipsize="end"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
tools:text="10 songs"
style="#style/AppTheme.Text.Body_2" />
<TextView
android:id="#+id/horizontalItemDescriptionSecond2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="#dimen/spacing_x_small"
android:maxLines="1"
android:textColor="#color/item_subtitle"
android:textSize="#dimen/text_size_caption"
android:visibility="visible"
android:gravity="start"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
tools:text=", 45 min"
tools:visibility="visible"
style="#style/AppTheme.Text.Body_2" />

You can add a property maxWidth and provide the equal max width in both TextViews like this.
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="#dimen/_100sdp"
android:maxLines="1"
android:ellipsize="end"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="#dimen/_100sdp"
android:maxLines="1"
android:ellipsize="end"
/>

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>

Android: Possible Bug in Android

I have two Views I am using to arrange some buttons on the screen. The screen size I am seeing the result on is Moto G in landscape mode - 640dp * 360dp. The problem is - the buttons are arranging them according to the View with id=center_parent instead of the the one with id=left_corner
<?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">
<View android:id="#+id/center_parent"
android:layout_centerInParent="true"
android:layout_width="0dp"
android:layout_height="0dp"/>
<View android:id="#+id/left_corner"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toLeftOf="#+id/center_parent"
android:layout_marginRight="165dp"
android:layout_above="#+id/center_parent"
android:layout_marginBottom="150dp"
android:layout_alignParentTop="true"/>"
<Button android:id="#+id/btn1"
android:layout_height="20dp"
android:layout_width="20dp"
android:padding="0dp"
android:layout_toRightOf="#+id/left_corner"
android:layout_marginLeft="165dp"
android:layout_below="#+id/left_corner"
android:layout_marginTop="5dp"
android:text="1"
android:textColor="#android:color/black"
android:background="#drawable/star"/>
<Button android:id="#+id/btn2"
android:layout_height="20dp"
android:layout_width="20dp"
android:padding="0dp"
android:layout_toRightOf="#+id/left_corner"
android:layout_marginLeft="330dp"
android:layout_below="#+id/left_corner"
android:layout_marginTop="171dp"
android:text="2"
android:textColor="#android:color/black"
android:background="#drawable/star"/>
<Button android:id="#+id/btn3"
android:layout_height="20dp"
android:layout_width="20dp"
android:padding="0dp"
android:layout_toRightOf="#+id/left_corner"
android:layout_marginLeft="292dp"
android:layout_below="#+id/left_corner"
android:layout_marginTop="171dp"
android:text="3"
android:textColor="#android:color/black"
android:background="#drawable/star"/>
<Button android:id="#+id/btn4"
android:layout_height="20dp"
android:layout_width="20dp"
android:padding="0dp"
android:layout_toRightOf="#+id/left_corner"
android:layout_marginLeft="292dp"
android:layout_below="#+id/left_corner"
android:layout_marginTop="292dp"
android:text="4"
android:textColor="#android:color/black"
android:background="#drawable/star"/>
</RelativeLayout>!
Attached is the image of how it looks on the screen. Even though the arrows show that is measure using left_corner, but is not the case. If I replace left_corner with center_parent in the buttons while arranging the result is the same.
The marked arrow is left_corner
I have found an alternative. So alternative is not what I am looking for. I will love to learn the explanation of this.

The layout_marginLeft and layout_marginRight are too much.
Remove all the margins first, you will see the view properly. Then start addding the margins again accordingly.
There are few things you need to observer here.
layout_marginBottom pushing left_corner too far up from center_parent
layout_marginRight is pushing left_corner too far from center_parent
you have to make up your mind on where you want the controls to be places and aligned to what.
<?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">
<View android:id="#+id/center_parent"
android:layout_centerInParent="true"
android:layout_width="10dp"
android:layout_height="10dp"/>
<View android:id="#+id/left_corner"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_toLeftOf="#+id/center_parent"
android:layout_marginRight="10dp"
android:layout_above="#+id/center_parent"
android:layout_marginBottom="10dp"
android:layout_alignParentTop="true"/>"
<Button android:id="#+id/btn1"
android:layout_height="20dp"
android:layout_width="20dp"
android:padding="0dp"
android:layout_toRightOf="#+id/left_corner"
android:layout_marginLeft="10dp"
android:layout_below="#+id/left_corner"
android:layout_marginTop="0dp"
android:text="1"
android:textColor="#android:color/black"
android:background="#drawable/star"/>
<Button android:id="#+id/btn2"
android:layout_height="20dp"
android:layout_width="20dp"
android:padding="0dp"
android:layout_toRightOf="#+id/left_corner"
android:layout_marginLeft="10dp"
android:layout_below="#+id/left_corner"
android:layout_marginTop="20dp"
android:text="2"
android:textColor="#android:color/black"
android:background="#drawable/star"/>
<Button android:id="#+id/btn3"
android:layout_height="20dp"
android:layout_width="20dp"
android:padding="0dp"
android:layout_toRightOf="#+id/left_corner"
android:layout_marginLeft="10dp"
android:layout_below="#+id/left_corner"
android:layout_marginTop="40dp"
android:text="3"
android:textColor="#android:color/black"
android:background="#drawable/star"/>
<Button android:id="#+id/btn4"
android:layout_height="20dp"
android:layout_width="20dp"
android:padding="0dp"
android:layout_toRightOf="#+id/left_corner"
android:layout_marginLeft="10dp"
android:layout_below="#+id/left_corner"
android:layout_marginTop="60dp"
android:text="4"
android:textColor="#android:color/black"
android:background="#drawable/star"/>
</RelativeLayout>
using the above xml, i got the below output.