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>
Related
I am trying to create a rectangle with rounded corners to be the background of two elements in my XML. I have created a TextView for this background called prod1_bg and set its cornerRadius to 10dp.
Why don't the prodX_bg rectangles have rounded corners even though I specified a cornerRadius of 10dp?
XML:
<?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"
tools:context=".SearchResultsScreen">
<ScrollView
android:layout_width="407dp"
android:layout_height="422dp"
android:layout_marginTop="10dp"
android:contentDescription="#string/search_results"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/searchbar">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inner_constraint"
android:layout_width="match_parent"
android:layout_height="1100dp">
**<TextView
android:id="#+id/prod1_bg"
android:layout_width="350dp"
android:layout_height="100dp"
android:background="#4A8BC34A"
android:visibility="invisible"
app:cornerRadius="10dp"
app:layout_constraintBottom_toBottomOf="#+id/product_img_test"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/product_img_test" />
<TextView
android:id="#+id/prod2_bg"
android:layout_width="350dp"
android:layout_height="100dp"
android:background="#4A8BC34A"
android:visibility="invisible"
app:cornerRadius="10dp"
app:layout_constraintBottom_toBottomOf="#+id/product_img_test2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/product_img_test2" />**
<ImageButton
android:id="#+id/product_img_test"
android:layout_width="94dp"
android:layout_height="91dp"
android:layout_marginTop="20dp"
android:contentDescription="#string/product_desc_test"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.139"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/strongbow"
tools:ignore="ImageContrastCheck,DuplicateSpeakableTextCheck" />
<Button
android:id="#+id/product_btn_test"
android:layout_width="220dp"
android:layout_height="50dp"
android:background="#00FFFFFF"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="#+id/product_img_test"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toEndOf="#+id/product_img_test"
app:layout_constraintTop_toTopOf="#+id/product_img_test"
tools:ignore="DuplicateSpeakableTextCheck,SpeakableTextPresentCheck" />
<Button
android:id="#+id/product_btn_test2"
android:layout_width="220dp"
android:layout_height="50dp"
android:background="#00FFFFFF"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="#+id/product_img_test2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toEndOf="#+id/product_img_test"
app:layout_constraintTop_toTopOf="#+id/product_img_test2"
tools:ignore="SpeakableTextPresentCheck" />
<ImageButton
android:id="#+id/product_img_test2"
android:layout_width="94dp"
android:layout_height="91dp"
android:layout_marginTop="20dp"
android:contentDescription="#string/product_desc_test"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.141"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/product_img_test"
app:srcCompat="#drawable/strongbow"
tools:ignore="ImageContrastCheck,DuplicateSpeakableTextCheck" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
<TextView
android:id="#+id/hor_line"
android:layout_width="0dp"
android:layout_height="4dp"
android:layout_marginBottom="100dp"
android:background="#C4C4C4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/ver_line"
android:layout_width="2dp"
android:layout_height="0dp"
android:background="#E3E6DA"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/hor_line" />
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/imvCircularWithStroke"
android:layout_width="86dp"
android:layout_height="86dp"
android:layout_marginBottom="56dp"
android:background="#44A6D0"
android:elevation="7dp"
android:padding="0dp"
app:layout_constraintBottom_toBottomOf="#+id/ver_line"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:shapeAppearanceOverlay="#style/Circular"
app:strokeColor="#D0EAE6"
app:strokeWidth="2dp"
tools:ignore="ImageContrastCheck" />
<ImageButton
android:id="#+id/barcode_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="76dp"
android:background="#0044A6D0"
android:contentDescription="#string/barcode_icon_desc"
android:elevation="7dp"
app:layout_constraintBottom_toBottomOf="#+id/ver_line"
app:layout_constraintEnd_toEndOf="#+id/hor_line"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="#+id/hor_line"
app:srcCompat="#drawable/barcode_icon"
tools:ignore="ImageContrastCheck"
app:tint="#FFFFFF" />
<ImageButton
android:id="#+id/search_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:background="#00FFFFFF"
android:contentDescription="#string/search_icon_desc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.181"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/search_icon" />
<TextView
android:id="#+id/search_btn_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:text="#string/search_btn"
android:textColor="#000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/search_btn"
app:layout_constraintStart_toStartOf="#+id/search_btn"
app:layout_constraintTop_toBottomOf="#+id/search_btn"
app:layout_constraintVertical_bias="0.0" />
<ImageButton
android:id="#+id/calendar_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:background="#00FFFFFF"
android:contentDescription="#string/calendar_icon_desc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.742"
app:layout_constraintStart_toEndOf="#+id/search_btn"
app:srcCompat="#drawable/calendar_icon" />
<TextView
android:id="#+id/calendar_btn_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:text="#string/calendar_btn"
android:textColor="#000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/calendar_btn"
app:layout_constraintStart_toStartOf="#+id/calendar_btn" />
</androidx.constraintlayout.widget.ConstraintLayout>
IIRC, in order to use the cornerRadius attribute directly in layout file, the minimum API level for your app must be 31+ (which means it will only support devices with Android 12 and above).
You can also use some View/Layout that already support a rounded corners like CardView (will need to update Gradle dependencies).
Or you can just simply create a drawable XML file with rectangle shape (and having corners' radiuses). Then set that drawable as your TextView's background.
Sample drawable named rounded_corners_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" /> <!-- corner radius -->
<solid android:color="#ffffff" /> <!-- inner background colour -->
<stroke android:color="#000000" /> <!-- border colour -->
</shape>
There are other attributes as well such as <gradient>, <padding>, ...
Then, in your <TextView>:
<TextView
android:id="#+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corners_background" />
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:
how can a put a TextView befor a Button in xml file? My textview always behind the button. I am in a constraintlayout. I want to make a little number in the top right corner of the button. I made a drawable for that, hat it looks nice.
It would be nice if someone could help! Thanks!!!
xml:
<?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:id="#+id/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="at.kessapps.cookieclicker.MainActivity">
<TextView
android:id="#+id/clicker_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/sale_corner"
android:text="20%"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/shopbutton"
app:layout_constraintRight_toRightOf="#id/shopbutton"
app:layout_constraintTop_toTopOf="#id/shopbutton" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/cooltext348859404219232" />
<Button
android:id="#+id/shopbutton"
style="#style/Widget.AppCompat.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:hapticFeedbackEnabled="false"
android:onClick="toShop"
android:text="Shop"
android:drawableLeft="#drawable/ic_store"
android:textColor="#color/colorWhite"
android:paddingLeft="5dp"
android:background="#drawable/button_neutral_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:id="#+id/onOption"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:onClick="toOption"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/optionen" />
</androidx.constraintlayout.widget.ConstraintLayout>
here a picture
Please use this layout to put the TextView on top of Button view:
You need to add android:translationZ="10dp" in TextView
<?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:id="#+id/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="at.kessapps.cookieclicker.MainActivity">
<TextView
android:id="#+id/clicker_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:translationZ="10dp"
android:background="#drawable/sale_corner"
android:text="20%"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/shopbutton"
app:layout_constraintRight_toRightOf="#id/shopbutton"
app:layout_constraintTop_toTopOf="#id/shopbutton" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/cooltext348859404219232" />
<Button
android:id="#+id/shopbutton"
style="#style/Widget.AppCompat.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:hapticFeedbackEnabled="false"
android:onClick="toShop"
android:text="Shop"
android:drawableLeft="#drawable/ic_store"
android:textColor="#color/colorWhite"
android:paddingLeft="5dp"
android:background="#drawable/button_neutral_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:id="#+id/onOption"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:onClick="toOption"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/optionen" />
</androidx.constraintlayout.widget.ConstraintLayout>
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:
I have a strange problem where the text in a TextView is not being displayed if it's wrapping to a new line.
This screenshot shows my issue:
The bold text is causing a word to wrap to the next line but it's not being shown. This is what it looks like without the bold:
And this is what it looks like if I force two lines using android:lines="2":
This is the code I'm using:
<?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:id="#+id/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="horizontal">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:breakStrategy="simple"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I've tried setting the width to wrap_content and changing the padding and margins but nothing works.
I should mention this layout is a row in a RecyclerView if that makes a difference.
<?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:id="#+id/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:textStyle="bold"
android:text="Episode 1010 Christina Hendericks"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/episode_row_item_title_thumbnail"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
android:layout_marginRight="8dp"/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
android:text="Yesterday"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:text="01:02:24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_download"
android:layout_marginTop="4dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Try using the above layout with correct drawables