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>
Related
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
I have three textviews with drawableleft on them in horizontal orientation of linear layout and trying to show first #+id/tv_video_call view then tv_language and showing correctly on the android studio preview and does not change its position inside the class.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_video_call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="7dp"
android:drawableLeft="#drawable/ic_video"
android:drawablePadding="10dp"
android:gravity="center"
android:text="Video Call"
android:textColor="#color/white"
android:textScaleX="1.2"
android:textSize="16sp"
android:textStyle="bold" />
<View
android:id="#+id/vertical_line"
android:layout_width="2dp"
android:layout_height="22dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="3dp"
android:layout_marginBottom="5dp"
android:layout_toStartOf="#id/tv_language"
android:background="#color/white"
android:paddingTop="2dp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_language"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="7dp"
android:layout_marginRight="15dp"
android:layout_toLeftOf="#id/tv_logout"
android:drawableLeft="#drawable/ic_language"
android:drawablePadding="10dp"
android:gravity="center"
android:text="#string/logout"
android:textColor="#color/white"
android:textScaleX="1.2"
android:textSize="16sp"
android:textStyle="bold" />
<View
android:id="#+id/logoutline"
android:layout_width="2dp"
android:layout_height="22dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="3dp"
android:layout_marginBottom="5dp"
android:layout_toStartOf="#id/tv_language"
android:background="#color/white"
android:paddingTop="2dp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_logout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginStart="7dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="6dp"
android:drawableLeft="#drawable/logouticon"
android:gravity="center"
android:text="#string/logout"
android:textColor="#color/white"
android:textScaleX="1.2"
android:textSize="16sp"
android:textStyle="bold"
android:visibility="visible" />
</LinearLayout>
but the emulator is showing the first textview after the second one having no idea what causes it to shift to that place.
Try to set buttons width with 0dp and set weight to 1 for them to divide equally in the layout.
Right now you have set width to wrap content which means that if those 2 buttons can't fit at the same time, one of them will be shift out.
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"/>
I'm trying to create a view like this on Facebook application.
but all I've got is this
My boss says it's ugly. I've tried everything but I don't know which visual element is that, I don't know where Facebook gets their widgets for Android, they look so different or doesn't exist.
I made this way:
<RelativeLayout
android:id="#+id/layoutPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="22dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/enterMobileNumber">
<TextView
android:id="#+id/country_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="4dp"
android:paddingTop="3dp"
android:paddingBottom="3dp"
android:text="#string/select_your_country"
android:textColor="#9B9B9B"
android:textSize="22sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
app:srcCompat="#drawable/ic_sortdown_48px"
tools:ignore="ContentDescription" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/country_code"
android:background="#737373" />
</RelativeLayout>
There's any way I can get the proper design?
Use spinner
<RelativeLayout
android:id="#+id/layoutPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="22dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/enterMobileNumber">
<TextView
android:id="#+id/country_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="4dp"
android:paddingTop="3dp"
android:paddingBottom="3dp"
android:text="#string/select_your_country"
android:textColor="#9B9B9B"
android:textSize="22sp" />
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:prompt="#string/spinner_title"/>
</RelativeLayout>
For your referance https://www.tutorialspoint.com/android/android_spinner_control.htm
Although the preview shows the image but when I run the application on the device, the image is not shown in the card view.
XML
<com.google.android.material.card.MaterialCardView
android:id="#+id/CollegesCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ImportantDatesCard"
android:layout_alignParentStart="true"
android:layout_marginStart="15dp"
android:layout_marginTop="13dp"
android:elevation="10dp"
android:padding="10dp"
android:background="#drawable/campus"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:stateListAnimator="#drawable/lift_on_touch">
<RelativeLayout
android:layout_width="170dp"
android:layout_height="170dp"
android:layout_gravity="center">
<TextView
android:id="#+id/COLLEGES"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:fontFamily="serif-monospace"
android:text="COLLEGES"
android:textColor="#000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/Content"
android:layout_width="102dp"
android:layout_height="107dp"
android:layout_below="#+id/COLLEGES"
android:layout_marginStart="1dp"
android:layout_marginTop="14dp"
android:text="Take Admission in Top Colleges in your Location"
android:textColor="#200094"
android:textSize="15sp" />
<ImageView
android:id="#+id/CAMPUSIMAGE"
android:layout_width="65dp"
android:layout_height="73dp"
android:layout_below="#+id/COLLEGES"
android:layout_alignStart="#+id/Content"
android:layout_marginStart="101dp"
android:layout_marginTop="2dp"
tools:srcCompat="#drawable/campus" />
<ImageView
android:layout_width="54dp"
android:layout_height="38dp"
android:layout_below="#id/CAMPUSIMAGE"
android:layout_alignStart="#+id/CAMPUSIMAGE"
android:layout_alignParentEnd="true"
android:layout_marginStart="7dp"
android:layout_marginTop="13dp"
android:layout_marginEnd="14dp"
tools:srcCompat="#drawable/ic_arrow_forward_black_24dp"
android:scaleType="centerCrop"/>
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>
[This is the image of the snapshot from virtual device.1[This is the image of the preview]2
I have attached the images of screenshot of the preview and the application running on a device. I have no idea why the image is not shown.
Image type is .png and it is been added from the drawable folder.
I changed some attributes of the 3 views, try it:
<com.google.android.material.card.MaterialCardView
android:id="#+id/CollegesCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ImportantDatesCard"
android:layout_alignParentStart="true"
android:layout_marginStart="15dp"
android:layout_marginTop="13dp"
android:elevation="10dp"
android:padding="10dp"
android:background="#drawable/campus"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:stateListAnimator="#drawable/lift_on_touch">
<RelativeLayout
android:layout_width="170dp"
android:layout_height="170dp"
android:layout_gravity="center">
<TextView
android:id="#+id/COLLEGES"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:fontFamily="serif-monospace"
android:text="COLLEGES"
android:textColor="#000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/Content"
android:layout_width="102dp"
android:layout_height="107dp"
android:layout_below="#+id/COLLEGES"
android:layout_marginStart="1dp"
android:layout_marginTop="14dp"
android:text="Take Admission in Top Colleges in your Location"
android:textColor="#200094"
android:textSize="15sp" />
<ImageView
android:id="#+id/CAMPUSIMAGE"
android:layout_width="65dp"
android:layout_height="73dp"
android:layout_below="#+id/COLLEGES"
android:layout_alignParentEnd="true"
android:layout_toEndOf="#+id/Content"
android:layout_marginTop="2dp"
tools:srcCompat="#drawable/campus" />
<ImageView
android:layout_width="54dp"
android:layout_height="38dp"
android:layout_below="#id/CAMPUSIMAGE"
android:layout_alignParentEnd="true"
android:layout_toEndOf="#+id/Content"
android:layout_marginStart="7dp"
android:layout_marginTop="13dp"
android:layout_marginEnd="14dp"
tools:srcCompat="#drawable/ic_arrow_forward_black_24dp"
android:scaleType="centerCrop"/>
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>