I want to add an icon to my custom alert dialog
I want it to be added at the edge of the dialog same as below picture.
So how can I achieve that
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#drawable/custom_alert_dialog"
android:layout_height="match_parent">
<TextView
android:background="#color/Blue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Warning"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<Button
android:id="#+id/btn_confirm"
android:layout_width="100dp"
android:layout_height="30dp"
/>
<Button
android:id="#+id/btn_quit"
android:layout_width="100dp"
android:layout_height="30dp"
/>
</LinearLayout>
you should use rounded image view
implement //rounded image
implementation "com.makeramen:roundedimageview:2.3.0"
2.add this code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:elevation="2dp"
android:background="#drawable/dark_blue_circle"
android:layout_centerHorizontal="true"/>
<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="10dp"
android:elevation="2dp"
android:background="#drawable/grey_circle"
android:layout_centerHorizontal="true"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#drawable/rounded_white_rectangle"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="80dp">
<TextView
android:layout_marginTop="30dp"
android:textColor="#color/blue_dark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Warning"
android:textStyle="bold"
android:textAlignment="center"
android:textSize="40dp"/>
<TextView
android:layout_marginTop="30dp"
android:textColor="#color/blue_dark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="You just display this"
android:textAlignment="center"
android:textSize="40dp"/>
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Done"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:textSize="40dp"
android:textColor="white"/>
</LinearLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I will add step 3 in replay
My solution
Kotlin code
class CustomOneDialog : DialogFragment() {
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val binding = DialogCustomOneBinding.inflate(layoutInflater)
binding.btnDone.setOnClickListener {
dialog?.dismiss()
}
val dialog = MaterialAlertDialogBuilder(
requireActivity(),
R.style.MaterialAlertDialog_CustomBorders
).apply {
setView(binding.root)
setOnKeyListener { _, keyCode, keyEvent ->
if (keyCode == KeyEvent.KEYCODE_BACK && keyEvent.action == KeyEvent.ACTION_UP) {
dismiss()
true
} else false
}
}.create()
dialog.getWindow()?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
return dialog
}
}
layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:background="#drawable/dialog_custom_borders"
android:orientation="vertical"
android:paddingStart="16dp"
android:paddingTop="48dp"
android:paddingEnd="16dp"
android:paddingBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/dialog_congratulations_title"
android:textAppearance="#style/TextAppearance.MaterialComponents.Headline5"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/dialog_congratulations_summary"
android:textAppearance="#style/TextAppearance.MaterialComponents.Body1" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:text="#android:string/ok"
android:textColor="#color/md_white_1000"
app:shapeAppearance="#style/ShapeAppearance.Capsule" />
</LinearLayout>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView"
android:layout_width="68dp"
android:layout_height="68dp"
android:layout_marginTop="-28dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/linearLayout"
app:srcCompat="#drawable/circle_rounded_filled" />
</androidx.constraintlayout.widget.ConstraintLayout>
Resources circle with icon done
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="UnusedResources">
<item>
<shape android:shape="oval">
<size
android:width="34dp"
android:height="34dp" />
<solid android:color="#color/md_light_green_A700" />
<stroke
android:width="2dp"
android:color="?android:colorBackgroundFloating" />
</shape>
</item>
<item
android:drawable="#drawable/ic_baseline_done_24"
android:gravity="center" />
</layer-list>
button capsule style
<style name="ShapeAppearance.Capsule" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
In dark mode show this
Related
I'm trying to make a Circular Timer by using a ProgressBar with a TextView in the middle of it. Everything looks good on phones with bigger screens, but on smaller screens the circle in the ProgressBar gets cut like this:
Image: [1]: https://i.stack.imgur.com/dteS6.png
I feel like I've tried everything but can't seem to get it to work.
So I would really appreciate if someone got a fix for this.
drawable/timer_circle_green:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="15dp"
android:useLevel="true">
<solid android:color="#53C085" />
</shape>
drawable/timer_circle_gray:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="15dp"
android:useLevel="false">
<solid android:color="#eff0f6" />
</shape>
main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintVertical_weight="1"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintVertical_weight="0.2"
android:text="Timer"
android:textSize="45dp"
android:gravity="center"
android:textColor="#color/black"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/progressBarContainer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginBottom="10dp"
/>
<RelativeLayout
android:id="#+id/progressBarContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintVertical_weight="0.4"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/plusminuscontainer">
<ProgressBar
android:id="#+id/progressBarCircle"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/timer_circle_gray"
android:indeterminate="false"
android:max="360"
android:progress="360"
android:progressDrawable="#drawable/timer_circle_green"
android:rotation="-90"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"/>
<TextView
android:id="#+id/timertext"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignStart="#id/progressBarCircle"
android:layout_alignTop="#id/progressBarCircle"
android:layout_alignEnd="#id/progressBarCircle"
android:layout_alignBottom="#id/progressBarCircle"
android:layout_centerInParent="true"
android:alpha="0.8"
android:fontFamily="sans-serif-thin"
android:gravity="center"
android:text="15:00"
android:textColor="#color/black"
android:textSize="60sp"
android:textStyle="bold" />
</RelativeLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/plusminuscontainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintVertical_weight="0.4"
android:orientation="horizontal"
android:minHeight="90dp"
android:maxHeight="150dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:foregroundGravity="center"
app:layout_constraintTop_toBottomOf="#id/progressBarContainer"
app:layout_constraintBottom_toTopOf="#id/starttimerbutton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<Button
android:id="#+id/decreasebtn"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="–"
android:textSize="60sp"
android:background="#drawable/grey_round_plus_minus_button"
android:textColor="#color/white"
android:fontFamily="sans-serif"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#id/increasebtn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="?android:attr/borderlessButtonStyle" />
<Button
android:id="#+id/increasebtn"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="+"
android:textSize="60sp"
android:background="#drawable/red_round_plus_minus_button"
android:textColor="#color/white"
android:fontFamily="sans-serif"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintStart_toEndOf="#id/decreasebtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="?android:attr/borderlessButtonStyle"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:id="#+id/starttimerbutton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="25dp"
android:layout_marginEnd="25dp"
android:layout_marginBottom="25dp"
app:layout_constraintVertical_weight="0.4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/plusminuscontainer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:textSize="18sp"
android:text="Start Timer"
android:textColor="#color/white"
android:background="#drawable/start_timer_button"
android:fontFamily="sans-serif"
android:layout_gravity="bottom"
android:textAllCaps="false" />
</androidx.constraintlayout.widget.ConstraintLayout>
I want to make this layout (circle above rectangle)
this is where i stuck
I solved this
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
android:background="#color/white"
tools:context=".activity.fragments.profile_page">
<View
android:id="#+id/view_header"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/purple_500"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:letterSpacing="1"
android:paddingVertical="10dp"
android:text="#string/app_name"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/profile_circular_image_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/purple_200"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>
I used constraint Layout for making this layout.
see this layout image
First, create a drawable resource file into your drawable.
go to, Drawable -> Right Click -> New -> Drawble Resource File -> Give Any name
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:color="#color/white" android:width="2dp"/>
<solid android:color="#color/black" />
</shape>
Second, Create your Layout in your Activity/Fragment
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
android:background="#color/black"
tools:context=".FragmentA">making
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/teal_200"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jonathan Wick"
android:textColor="#color/white"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="#id/imageView"
app:layout_constraintEnd_toEndOf="#id/imageView"
app:layout_constraintStart_toStartOf="#id/imageView"
app:layout_constraintTop_toTopOf="#id/imageView" />
<ImageView
android:id="#+id/circle"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_marginTop="10dp"
android:background="#drawable/circle"
app:layout_constraintBottom_toTopOf="#id/tvDashBoard"
app:layout_constraintEnd_toEndOf="#id/imageView"
app:layout_constraintStart_toStartOf="#id/imageView"
app:layout_constraintTop_toBottomOf="#id/tvName" />
<TextView
android:id="#+id/tvDashBoard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="30dp"
android:drawableStart="#drawable/ic_dashboard"
android:drawablePadding="10dp"
android:text="Dashboard"
android:textColor="#color/white"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/circle" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to construct an UI as shown in below image:
Please check this as well: https://imgur.com/a/fXPRBez
My code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:background="#drawable/drawableborder"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/iv_attachment"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:paddingStart="#dimen/padding_big"
android:paddingEnd="#dimen/padding_big"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/frameLayout"
app:srcCompat="#drawable/ic_gallery" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/gv_attach_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_toStartOf="#+id/iv_attachment"
android:layout_toLeftOf="#+id/iv_attachment"
android:nestedScrollingEnabled="true"
android:numColumns="3"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tell_us_more" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tell_us_more"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/what_do_you_need_help"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/tell_us_moreone"
style="#style/whathelpdoyouneedontextinput"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/dell_grey2"
app:layout_constraintTop_toBottomOf="#+id/gv_attach_image">
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This produces the UI as given below:
As you can see, this creates a small gap between TextInputLayout and the border. How do I fix this?
You can do something like:
<LinearLayout
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="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:orientation="vertical"
>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tell_us_more"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/hint_tell_us"
app:boxStrokeColor="#color/......"
app:placeholderText="Required"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.top">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/tell_us_moreone"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape_rounded"
android:gravity="end">
<ImageView
android:id="#+id/iv_attachment"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:scaleType="centerInside"
app:srcCompat="#drawable/ic_menu_gallery" />
</LinearLayout>
</LinearLayout>
You can apply a shapeAppearanceOverlay to your TextInputLayout to obtain different corners:
<style name="ShapeAppearanceOverlay.top" parent="">
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>
In the layout that contains the image use a shape background with only 3 sides:
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="-2dp">
<shape>
<stroke android:width="1dp" android:color="#color/...." />
<corners
android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"/>
<solid android:color="#FFFFFF"/>
</shape>
</inset>
Finally the TextInputLayout uses a placeholder with app:placeholderText="Required" and a floating label(hint) with the red asterisk.
Starting from the 1.2.0-alpha05 you can format the hint text.
For example you can just use something like:
<com.google.android.material.textfield.TextInputLayout
android:hint="#string/hint_tell_us"
...>
with:
<string name="hint_tell_us"><font fgcolor='#FF0000'>*</font> Tell us more about the issue</string>
Your layout is not looking good but to salvage what you already have, may be please try to:
Remove style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" under android:id="#+id/tell_us_more"
Add app:boxBackgroundMode="none" under same location (android:id="#+id/tell_us_more")
try this :
xml :
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:background="#drawable/border_grey">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/txt_more"
android:layout_width="0dp"
android:layout_height="match_parent"
android:hint="Tell Us More About The Issue"
android:layout_marginTop="8dp"
bind:boxBackgroundColor="#FFFFFF"
bind:layout_constraintEnd_toEndOf="parent"
bind:layout_constraintStart_toStartOf="parent"
bind:layout_constraintTop_toTopOf="parent"
bind:boxBackgroundMode="none">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/tell_us_moreone"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.material.textfield.TextInputLayout>
<View
android:id="#+id/line"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="16dp"
android:background="#color/grey"
bind:layout_constraintEnd_toEndOf="parent"
bind:layout_constraintStart_toStartOf="parent"
bind:layout_constraintTop_toBottomOf="#+id/txt_more" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/iv_attachment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:scaleType="centerInside"
bind:layout_constraintBottom_toBottomOf="parent"
bind:layout_constraintEnd_toEndOf="parent"
bind:layout_constraintTop_toBottomOf="#+id/line"
bind:srcCompat="#drawable/ic_menu_gallery" />
</androidx.constraintlayout.widget.ConstraintLayout>
drawable shape :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<stroke android:color="#color/grey" android:width="1dp"/>
<solid android:color="#color/colorWhite"/>
<corners android:radius="#dimen/radius_8dp"/>
</shape>
note : you can add your RecyclerView Or ... to ui.
I'm working on a layout and I want to make the similar layout like the one in the picture below. I don't know what should I use to make this layout ? I've worked with Listview and Recycler View but I don't know if I can use them to make a layout like this?
Does anyone have a tutorial on how can I make a similar layout?
Use below layout as item of your RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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"
app:cardCornerRadius="15dp"
app:cardMaxElevation="3dp"
android:elevation="3dp"
app:cardUseCompatPadding="true"
app:cardBackgroundColor="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_weight=".95"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp">
<TextView
android:id="#+id/tv_received_message_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Received Message:"/>
<TextView
android:id="#+id/tv_received_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Received Message"
android:layout_marginStart="5dp"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorPrimary"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp">
<TextView
android:id="#+id/tv_reply_message_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reply Message:"/>
<TextView
android:id="#+id/tv_reply_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Reply Message"
android:layout_marginStart="5dp"/>
</LinearLayout>
</LinearLayout>
<View
android:layout_weight=".05"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#color/colorPrimary"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
Add your color in background attribute of View
The Output of above code is:
I hope it works for you.
The best way is to use Recycler View and add divider between all items: look at this How to add dividers and spaces between items in RecyclerView?
And use this item layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="wrap_content"
android:orientation="vertical"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="8dp"
app:cardElevation="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/message_content_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/message_end_green_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:padding="8dp">
<TextView
android:id="#+id/tv_received_message_key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Received message:"
android:textColor="#color/green"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="4dp"/>
<TextView
android:id="#+id/tv_received_message_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tv_received_message_key"
app:layout_constraintTop_toTopOf="parent"
tools:text="Message" />
<View
android:id="#+id/tv_message_divider"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#color/grey_light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_received_message_key"
android:layout_marginTop="8dp"/>
<TextView
android:id="#+id/tv_reply_message_key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Repley message:"
android:layout_marginTop="8dp"
android:textColor="#4caf50"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_message_divider"
android:layout_marginStart="4dp"/>
<TextView
android:id="#+id/tv_reply_message_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tv_reply_message_key"
app:layout_constraintTop_toTopOf="#id/tv_reply_message_key"
app:layout_constraintBottom_toBottomOf="#id/tv_reply_message_key"
tools:text="Message" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/message_end_green_view"
android:layout_width="8dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/shape_rectangle_green"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
in which shape_rectangle_green is this drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#4caf50" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="0dp"
android:topRightRadius="8dp" />
</shape>
I let you change the margins, padding and colors.
i am trying to make my login page more like the picture : https://ibb.co/DKmTnHH it currently looks like this : https://ibb.co/0MV0rgj
i can't seem to figure out how much margin do i put between the views just from the picture ? how do you figure it out , how do i make my edittext rounded from the side and all the small details ?
<?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"
>
<ImageView
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/logo"
android:scaleType="fitXY"/><!--set scale type fit xy-->
<EditText
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_above="#id/password"
android:hint="اسم المستخدم" />
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_above="#id/signin"
android:ems="10"
android:hint="كلمة السر" />
<ImageButton
android:id="#+id/signin"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:layout_above="#id/forgetpassword"
android:src="#drawable/Login-button" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="#+id/forgetpassword"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_above="#id/noaccount"
android:src="#drawable/Forget-pass"/>
<ImageButton
android:id="#+id/noaccount"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_above="#id/footer"
android:layout_centerInParent="true"
android:src="#drawable/Dont-have-acc" />
<ImageView
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="60dp"
android:src="#drawable/footer-image"
android:layout_alignParentBottom="true"
android:scaleType="fitXY"/><!--set scale type fit xy-->
</RelativeLayout>
You can use ConstraintLayout with Chains and Guidelines to get a responsive screen without the having to use fixed size margins (makes your screen to a non-responsive one).
Here is an example:
<?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">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/guideline32"
app:layout_constraintStart_toStartOf="#+id/guideline33"
app:layout_constraintTop_toTopOf="#+id/guideline31" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView11"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<TextView
android:id="#+id/textView11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView12"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<TextView
android:id="#+id/textView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/textView11" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline31"
app:layout_constraintEnd_toStartOf="#+id/guideline32"
app:layout_constraintStart_toStartOf="#+id/guideline33"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars[10]" />
<android.support.constraint.Guideline
android:id="#+id/guideline31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="200dp"
app:layout_constraintGuide_percent="0.3" />
<android.support.constraint.Guideline
android:id="#+id/guideline32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="352dp"
app:layout_constraintGuide_percent="0.9" />
<android.support.constraint.Guideline
android:id="#+id/guideline33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent="0.1" />
</android.support.constraint.ConstraintLayout>
It will look like this:
For your round button look, you can use custom shape, create a new drawable file:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="-90"
android:centerColor="#F2F2F2"
android:endColor="#ADA996"
android:startColor="#DBDBDB" />
<stroke
android:width="2dp"
android:color="#000000" />
<corners android:radius="8dp" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
And now just apply this to your view:
android:background="#drawable/frame"
And there you have it, custom looking View: