Develop Reference

Android Custom Circular ProgressBar drawable gets cut

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>

Custom background resource not working in android

I know it is a small thing but I don't know why it is not working.
when I am putting custom drawable image it is not working. I want to have a transparent background button with corners (stroke).
below is the image.
<RelativeLayout 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="#drawable/welcome"
tools:context=".MainActivity">
<ImageView
android:id="#+id/app_logo"
android:layout_width="300dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="60dp"
android:src="#drawable/applogo"/>
<TextView
android:id="#+id/app_slogan"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="80dp"
android:layout_marginTop="140dp"
android:text="Find, Discover, Choose and buy anything online"
android:textAlignment="center"
android:textSize="22sp"
android:textStyle="bold|italic"
android:textColor="#color/design_default_color_primary"
/>
<Button
android:id="#+id/main_login_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="10dp"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:background="#drawable/buttons"
android:padding="20dp"
android:textAllCaps="false"
android:textSize="18sp"
android:text="Already have a account ? Login"
android:textColor="#android:color/white"
/>
<Button
android:id="#+id/main_join_now_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_above="#id/main_login_btn"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:background="#drawable/input_design"
android:padding="20dp"
android:textAllCaps="false"
android:textSize="18sp"
android:text="Already have a account ? Login"
android:textColor="#android:color/white"
/>
</RelativeLayout>
// Drawable resource file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:color="#fff"
android:width="3dp"
/>
<corners
android:radius="15dp"
/>
login button should have a background of input_design.xml but I don't know why it is not working.
help me out
thank you in advance.

To achieve a transparent background on your button perhaps use Widget.MaterialComponents.Button.OutlinedButton.
You will need this line in your build.gradle (if not there already):
implementation 'com.google.android.material:material:1.2.1'
Your button would then simply look like this:
<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/teal_700"
tools:context=".FirstFragment">
<Button
android:id="#+id/button"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="32dp"
android:text="I am a Button!"
android:textColor="#color/white"
app:cornerRadius="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rippleColor="#color/white"
app:strokeColor="#color/white"
app:strokeWidth="3dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
Notice:
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:textColor="#color/white"
app:cornerRadius="15dp"
app:rippleColor="#color/white"
app:strokeColor="#color/white"
app:strokeWidth="3dp"
and that will produce:

Add Lines around an Image

Here guys,
I would like to add 4 lines of View in my Android screen. I was able to add 2 Lines, one on the top and one on the left but I don't know how to add one on the right and one on the bottom.
Here is my XML Code:
<?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"
android:background="#color/colorPrimary"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintWidth_percent="0.25"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imvBalle"
android:layout_width="24dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.482"
app:srcCompat="#drawable/balle" />
<View
android:id="#+id/lineTop"
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#android:color/darker_gray" />
<View
android:id="#+id/lineLeft"
android:layout_width="10dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray" />
</android.support.constraint.ConstraintLayout>

Use layout_constraintEnd_toEndOf and layout_constraintBottom_toBottomOf constraints:
<View
android:id="#+id/lineRight"
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent" />
<View
android:id="#+id/lineBottom"
android:layout_width="10dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent" />

You can add background around your view by creating a border shape.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#000000"
android:dashWidth="5dp"></stroke>
</shape>
</item>
</selector>

Make a similar layout like the one below

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.

how do i adjust the spaces and the overall look of the file so it looks more like the picture?

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: