i am trying to make dynamic number pad view with rounded shape but the problem is this when i assign background it not showing properly i am using weights so it works on all screen sizes and orientation how can i achieve this is my layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">
<LinearLayout android:id="#+id/pin_code_first_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/pin_code_button_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/rounded"
android:text="1" />
<Button
android:id="#+id/pin_code_button_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
</LinearLayout>
<LinearLayout android:id="#+id/pin_code_second_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/pin_code_first_row"
android:weightSum="3">
<Button
android:id="#+id/pin_code_button_4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
</LinearLayout>
<LinearLayout android:id="#+id/pin_code_third_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/pin_code_second_row"
android:weightSum="3">
<Button
android:id="#+id/pin_code_button_7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
</LinearLayout>
<LinearLayout android:id="#+id/pin_code_fourth_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/pin_code_third_row"
android:weightSum="3">
<Button
android:id="#+id/pin_code_button_10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/pin_code_button_clear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
</LinearLayout>
</LinearLayout>
this is my rounded shape
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- fill color -->
<solid android:color="#color/colorAccent" />
<!-- radius -->
<stroke
android:width="1dp"
android:color="#color/colorAccent" />
<!-- corners -->
<corners
android:radius="2dp"/>
</shape>
but i want to make my layout look like this
how can i make this layout without using static spacing and sizes with weights please help me what i am doing wrong?
Use ConstraintLayout as below:
Here is your code:
your_layout.xml
<?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="#75A5CB"
android:padding="40dp">
<TextView
android:id="#+id/tvEnterCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="Enter Access Code"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:background="#ffffff"
android:gravity="center"
android:minWidth="100dp"
android:padding="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvEnterCode"
tools:text="..." />
<Button
android:id="#+id/pin_code_button_1"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="30dp"
android:background="#drawable/shape_circle_blue"
android:text="1"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvCode" />
<Button
android:id="#+id/pin_code_button_2"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="2"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_1"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_1"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_3"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="3"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_2"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_4"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="#dimen/_16sdp"
android:background="#drawable/shape_circle_blue"
android:text="4"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_5"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="5"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_4"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_6"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_1"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="6"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_5"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_7"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="#dimen/_16sdp"
android:background="#drawable/shape_circle_blue"
android:text="7"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_8"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_8"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="8"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_7"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_9"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_4"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_7" />
<Button
android:id="#+id/pin_code_button_9"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="9"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_8"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_7" />
<Button
android:id="#+id/pin_code_button_0"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="#dimen/_16sdp"
android:background="#drawable/shape_circle_blue"
android:text="0"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="#+id/pin_code_button_8"
app:layout_constraintStart_toStartOf="#+id/pin_code_button_8"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_8" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Delete"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_0" />
</android.support.constraint.ConstraintLayout>
Shape Drawable:
your_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#4588C0" />
<stroke
android:width="2dp"
android:color="#ffffff" />
</shape>
If you want to display pressed/selected button with white color then you have to create selector drawable and give it in background of button.
Edit: If you don't want to give static vertical margin, use below 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="#75A5CB"
android:padding="40dp">
<TextView
android:id="#+id/tvEnterCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="Enter Access Code"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:background="#ffffff"
android:gravity="center"
android:minWidth="100dp"
android:padding="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvEnterCode"
tools:text="..." />
<Button
android:id="#+id/pin_code_button_1"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="30dp"
android:background="#drawable/shape_circle_blue"
android:text="1"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvCode" />
<Button
android:id="#+id/pin_code_button_2"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="2"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_1"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_1"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_3"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="3"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_2"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_4"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="4"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toTopOf="#+id/pin_code_button_7"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_1" />
<Button
android:id="#+id/pin_code_button_5"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="5"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_4"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_6"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_1"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="6"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_5"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_7"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="7"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toTopOf="#+id/pin_code_button_0"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_8"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_4" />
<Button
android:id="#+id/pin_code_button_8"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="8"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_7"
app:layout_constraintEnd_toStartOf="#+id/pin_code_button_9"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_4"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_7" />
<Button
android:id="#+id/pin_code_button_9"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="9"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="#+id/pin_code_button_7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/pin_code_button_8"
app:layout_constraintTop_toTopOf="#+id/pin_code_button_7" />
<Button
android:id="#+id/pin_code_button_0"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/shape_circle_blue"
android:text="0"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#ffffff"
app:layout_constraintBottom_toTopOf="#+id/tvDelete"
app:layout_constraintEnd_toEndOf="#+id/pin_code_button_8"
app:layout_constraintStart_toStartOf="#+id/pin_code_button_8"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_8" />
<TextView
android:id="#+id/tvDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Delete"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_code_button_0" />
</android.support.constraint.ConstraintLayout>
Change Your background drawable with this
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- fill color -->
<solid android:color="#color/colorAccent"/>
<!-- radius -->
<stroke
android:width="1dp"
android:color="#color/colorAccent"/>
<size
android:width="50dp"
android:height="50dp"/>
<!-- corners -->
<corners
android:radius="2dp"/>
Change size as per your need,
You can use constraint layout or something else to achieve this kind of design
for u #Mateen Chaudhry
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/margin_30">
<Button
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:text="1"
android:textColor="#color/body_text_color"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:text="2"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toStartOf="#+id/three"
app:layout_constraintStart_toEndOf="#+id/one"/>
<Button
android:id="#+id/three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:text="3"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:id="#+id/four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:text="4"
android:textColor="#color/body_text_color"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<Button
android:id="#+id/five"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:text="5"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toStartOf="#+id/three"
app:layout_constraintStart_toEndOf="#+id/one"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<Button
android:id="#+id/six"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:text="6"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:text="7"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/four"/>
one alternative solution is use textview instead of buttons
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/margin_30">
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="1"
android:textColor="#color/body_text_color"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="2"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toStartOf="#+id/three"
app:layout_constraintStart_toEndOf="#+id/one"/>
<TextView
android:id="#+id/three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="3"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="#+id/four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="4"
android:textColor="#color/body_text_color"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<TextView
android:id="#+id/five"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="5"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toStartOf="#+id/three"
app:layout_constraintStart_toEndOf="#+id/one"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<TextView
android:id="#+id/six"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="6"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/one"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_10"
android:background="#drawable/bg_white_rounded_corners"
android:gravity="center"
android:text="7"
android:textColor="#color/body_text_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/four"/>
</android.support.constraint.ConstraintLayout>
First i will tell you to use Contraint Layout that is latest one and more efficient in designing. #Viraj Patel answer he did with constraint layout.
But you want to acheive same design in relative layout. It quite be easy. Have a look at this
Step 1
Create center button first to make it center vertically & horizontally. All you need is add this line to your center button.
android:layout_centerInParent="true"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<Button
android:id="#+id/btn_digit5"
android:layout_width="70dp"
android:layout_height="70dp"
android:text="5"
android:textColor="#android:color/white"
android:background="#drawable/circle"
android:layout_centerInParent="true"/>
</RelativeLayout>
Am added static width & height to make it background circle. If you want to make circle of button using WRAP_CONTENT or MATCH_PARENT you done at runtime in java code. Here am using static value.
Above xml code will give you like this
Step 2
Then you can add more buttons depending on the center buttons and this two more property values.
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
Now i add Digit4 & Digit6 which is vertically aligned to Digit5. Below code will give you the results
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<Button
android:id="#+id/btn_digit5"
android:layout_width="70dp"
android:layout_height="70dp"
android:text="5"
android:textColor="#android:color/white"
android:background="#drawable/circle"
android:layout_centerInParent="true"/>
<Button
android:id="#+id/btn_digit4"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toLeftOf="#+id/btn_digit5"
android:layout_marginRight="20dp"
android:text="4"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toRightOf="#+id/btn_digit5"
android:layout_marginLeft="20dp"
android:text="6"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
</RelativeLayout>
Add to_leftof & to_rightof property and vertically align property to this buttons & add margins value as well.
Above code will give you
Step 3
Now i add Digit2 & Digit8 which is horizontally aligned to Digit5. Below code will give you the results
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<Button
android:id="#+id/btn_digit5"
android:layout_width="70dp"
android:layout_height="70dp"
android:text="5"
android:textColor="#android:color/white"
android:background="#drawable/circle"
android:layout_centerInParent="true"/>
<Button
android:id="#+id/btn_digit2"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_above="#+id/btn_digit5"
android:layout_marginBottom="20dp"
android:text="2"
android:layout_centerHorizontal="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit4"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toLeftOf="#+id/btn_digit5"
android:layout_marginRight="20dp"
android:text="4"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toRightOf="#+id/btn_digit5"
android:layout_marginLeft="20dp"
android:text="6"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit8"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="8"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:layout_below="#+id/btn_digit5"
android:textColor="#android:color/white" />
</RelativeLayout>
Add layout_below & layout_above property and horizontal align property to this buttons & add margins value as well.
Above code will give you
Step 4
Add corner digits with help of relative layout property to_leftof to_right_of layout_above layout_below. Have a look at this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<Button
android:id="#+id/btn_digit5"
android:layout_width="70dp"
android:layout_height="70dp"
android:text="5"
android:textColor="#android:color/white"
android:background="#drawable/circle"
android:layout_centerInParent="true"/>
<Button
android:id="#+id/btn_digit2"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_above="#+id/btn_digit5"
android:layout_marginBottom="20dp"
android:text="2"
android:layout_centerHorizontal="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit4"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toLeftOf="#+id/btn_digit5"
android:layout_marginRight="20dp"
android:text="4"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toRightOf="#+id/btn_digit5"
android:layout_marginLeft="20dp"
android:text="6"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit8"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="8"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:layout_below="#+id/btn_digit5"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit1"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="1"
android:layout_above="#+id/btn_digit4"
android:layout_toLeftOf="#+id/btn_digit2"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit3"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="3"
android:layout_marginLeft="20dp"
android:layout_marginBottom="20dp"
android:layout_toRightOf="#+id/btn_digit2"
android:layout_above="#+id/btn_digit6"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit7"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="7"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_below="#+id/btn_digit4"
android:layout_toLeftOf="#id/btn_digit8"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit9"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="9"
android:layout_below="#+id/btn_digit6"
android:layout_toRightOf="#id/btn_digit8"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:textColor="#android:color/white" />
</RelativeLayout>
And your output is
Step 4
Finally add zero as well.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<Button
android:id="#+id/btn_digit5"
android:layout_width="70dp"
android:layout_height="70dp"
android:text="5"
android:textColor="#android:color/white"
android:background="#drawable/circle"
android:layout_centerInParent="true"/>
<Button
android:id="#+id/btn_digit2"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_above="#+id/btn_digit5"
android:layout_marginBottom="20dp"
android:text="2"
android:layout_centerHorizontal="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit4"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toLeftOf="#+id/btn_digit5"
android:layout_marginRight="20dp"
android:text="4"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit6"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:layout_toRightOf="#+id/btn_digit5"
android:layout_marginLeft="20dp"
android:text="6"
android:layout_centerVertical="true"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit8"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="8"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:layout_below="#+id/btn_digit5"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit1"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="1"
android:layout_above="#+id/btn_digit4"
android:layout_toLeftOf="#+id/btn_digit2"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit3"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="3"
android:layout_marginLeft="20dp"
android:layout_marginBottom="20dp"
android:layout_toRightOf="#+id/btn_digit2"
android:layout_above="#+id/btn_digit6"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit7"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="7"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_below="#+id/btn_digit4"
android:layout_toLeftOf="#id/btn_digit8"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit9"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="9"
android:layout_below="#+id/btn_digit6"
android:layout_toRightOf="#id/btn_digit8"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_digit0"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/circle"
android:text="0"
android:layout_below="#+id/btn_digit8"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:textColor="#android:color/white" />
</RelativeLayout>
FINAL OUTPUT
Added
This will centering your layout on all device size & also centering on landscape mode.
shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<corners android:radius="30dp"/>
<stroke android:color="#FFFFFF"
android:width="2dp"/>
<solid android:color="#color/colorPrimary"/>
UPDATED
You need to use ConstraintLayout. Have a look at this
<?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"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#color/colorPrimaryDark"
app:layout_constraintBottom_toBottomOf="#+id/guideline2"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toEndOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="#+id/guideline">
<Button
android:id="#+id/btn_digit5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="5"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit8"
app:layout_constraintEnd_toStartOf="#+id/btn_digit6"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit4"
app:layout_constraintTop_toBottomOf="#+id/btn_digit2" />
<Button
android:id="#+id/btn_digit2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="2"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit5"
app:layout_constraintEnd_toStartOf="#+id/btn_digit3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit1"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_digit4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="4"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit7"
app:layout_constraintEnd_toStartOf="#+id/btn_digit5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_digit1" />
<Button
android:id="#+id/btn_digit6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="6"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit5"
app:layout_constraintTop_toBottomOf="#+id/btn_digit3" />
<Button
android:id="#+id/btn_digit8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="8"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit0"
app:layout_constraintEnd_toStartOf="#+id/btn_digit9"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit7"
app:layout_constraintTop_toBottomOf="#+id/btn_digit5" />
<Button
android:id="#+id/btn_digit1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="1"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit4"
app:layout_constraintEnd_toStartOf="#+id/btn_digit2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_digit3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="3"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit2"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_digit7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="7"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit0_Left"
app:layout_constraintEnd_toStartOf="#+id/btn_digit8"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_digit4" />
<Button
android:id="#+id/btn_digit9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/btn_digit6"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="9"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/btn_digit0_right"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit8"
app:layout_constraintTop_toBottomOf="#+id/btn_digit6" />
<Button
android:id="#+id/btn_digit0"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:text="0"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btn_digit0_right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit0_Left"
app:layout_constraintTop_toBottomOf="#+id/btn_digit8" />
<Button
android:id="#+id/btn_digit0_right"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:visibility="invisible"
android:text="0"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_digit0"
app:layout_constraintTop_toBottomOf="#+id/btn_digit9" />
<Button
android:id="#+id/btn_digit0_Left"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/circle"
android:visibility="invisible"
android:text="0"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btn_digit0"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_digit7" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
<android.support.constraint.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
OUTPUT on 5" inch display
It is better to use table layout when you want to create such layout. In table layout handling weight is so easy. Another point is you have to put weight on button container layout. Not for button itself.
<TableRow android:layout_margin="#dimen/margin_half">
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="1"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="2"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="3"/>
</FrameLayout>
</TableRow>
<TableRow android:layout_margin="#dimen/margin_half">
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="4"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="5"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_6"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="6"/>
</FrameLayout>
</TableRow>
<TableRow android:layout_margin="#dimen/margin_half">
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_7"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="7"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_8"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="8"/>
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/pin_code_button_9"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/circle_back"
android:text="9"/>
</FrameLayout>
</TableRow>
And this is final view and you can change distances and margin and get your desired layout:
Hope helpful!
I think you could work with this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="1"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="2"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="3"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="4"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="5"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="6"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="7"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="8"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="9"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="0"/>
</LinearLayout>
</LinearLayout>
The result looks like this:
And if you using "dp" for margin and padding, you shouldn't have any problems with different devices and screen sizes.
Related
I've been asked to make a view available with a Scrollview to allow for further additions to the buttons available. The problem is that to arrange the buttons in a 3 x 3 row I've used three successive RelativeLayouts as set out in the code below
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#color/dialogWhite"
android:layout_marginTop="5dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/symptomsTxt"/>
<TextView
android:id="#+id/hdrText"
android:layout_width="370dp"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/todays_side_effects"
android:textAlignment="center"
android:textSize="16sp"
app:layout_constraintTop_toBottomOf="#+id/symptomsTxt"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<ScrollView
android:id="#+id/scrollViewWB"
android:layout_width="fill_parent"
android:layout_height="400dp"
android:visibility="visible"
android:layout_marginTop="5dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/hdrText">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonView"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="5dp"
android:orientation="horizontal"
tools:ignore="NotSibling">
<Button
android:id="#+id/buttonSel1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="60dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_diarrhoeia_selected"
android:onClick="diarreaClick"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/textViewLoc"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="45dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/diarrea"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel1" />
<Button
android:id="#+id/buttonSel2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_vomiting_selected"
android:onClick="vomittingClick"
app:layout_constraintLeft_toLeftOf="#id/buttonSel1" />
<TextView
android:id="#+id/textViewLoc2"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="145dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/vomiting"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="#+id/textViewLoc"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel2" />
<Button
android:id="#+id/buttonSel3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="260dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_headache_selected"
android:onClick="headacheClick"
app:layout_constraintLeft_toLeftOf="#id/buttonSel2" />
<TextView
android:id="#+id/textViewLoc3"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="245dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/headache"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="#+id/textViewLoc2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel3" />
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonView2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="15dp"
android:orientation="horizontal"
tools:ignore="NotSibling">
<Button
android:id="#+id/buttonSel4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="60dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_weakness_selected"
android:onClick="weaknessClick"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/textViewLoc4"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="45dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/weakness"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel4" />
<Button
android:id="#+id/buttonSel5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_sweating_selected"
android:onClick="sweatingClick"
app:layout_constraintLeft_toLeftOf="#id/buttonSel4" />
<TextView
android:id="#+id/textViewLoc5"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="145dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/sweating"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="#+id/textViewLoc4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel5" />
<Button
android:id="#+id/buttonSel6"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="260dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_tremors_selected"
android:onClick="tremorsClick"
app:layout_constraintLeft_toLeftOf="#id/buttonSel5" />
<TextView
android:id="#+id/textViewLoc6"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="245dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/tremors"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="#+id/textViewLoc5"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel6" />
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonView3"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="15dp"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#+id/buttonView2"
tools:ignore="NotSibling">
<Button
android:id="#+id/buttonSel7"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="60dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_fast_heart_beat_selected"
android:onClick="heartRateClick"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/textViewLoc7"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="45dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/fast_heart_rate"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel7" />
<Button
android:id="#+id/buttonSel8"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_fainting_selected"
android:onClick="faintingClick"
app:layout_constraintLeft_toLeftOf="#id/buttonSel7" />
<TextView
android:id="#+id/textViewLoc8"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="145dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/fainting"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="#+id/textViewLoc7"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel8" />
<Button
android:id="#+id/buttonSel9"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="260dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_irritability_selected"
android:onClick="irritabilityClick"
app:layout_constraintLeft_toLeftOf="#id/buttonSel8" />
<TextView
android:id="#+id/textViewLoc9"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="245dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/irritability"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="#+id/textViewLoc8"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel9" />
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonView4"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="15dp"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#+id/buttonView2"
tools:ignore="NotSibling">
<Button
android:id="#+id/buttonSel10"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="60dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_fast_heart_beat_selected"
android:onClick="heartRateClick"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/textViewLoc10"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="45dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/fast_heart_rate"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel10" />
<Button
android:id="#+id/buttonSel11"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_fainting_selected"
android:onClick="faintingClick"
app:layout_constraintLeft_toLeftOf="#id/buttonSel10" />
<TextView
android:id="#+id/textViewLoc11"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="145dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/fainting"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="#+id/textViewLoc10"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel11" />
<Button
android:id="#+id/buttonSel12"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="260dp"
android:layout_marginTop="10dp"
android:background="#drawable/ic_irritability_selected"
android:onClick="irritabilityClick"
app:layout_constraintLeft_toLeftOf="#id/buttonSel11" />
<TextView
android:id="#+id/textViewLoc12"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="245dp"
android:layout_marginTop="60dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/irritability"
android:textAlignment="center"
android:textColor="#color/dialogHeaderLight"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="#+id/textViewLoc11"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonSel12" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/EnterButton"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#drawable/button_purple_rounded"
android:drawablePadding="25dp"
android:layout_marginTop="20dp"
android:fontFamily="sans-serif-condensed"
android:gravity="center_horizontal|center_vertical"
android:onClick="enterDose"
android:paddingEnd="24dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingStart="24dp"
android:text="#string/enter"
android:textAlignment="gravity"
android:textColor="#color/dialogWhite"
android:textStyle="bold"
app:layout_constraintTop_toBottomOf="#+id/scrollViewWB"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
The problem is that only the first row of buttons appear ("#+id/buttonView") the remaining three rows don't appear. I've tried resizing the Scrollview but I cannot make all four rows appear in the Scrollview. What am I doing wrong?
Just add:
android:orientation="vertical"
to your
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
Searched around, can't find this issue specifically. Created an account specifically to ask WHAT'S HAPPENING HERE?!
Using a ConstraintLayout for the first time - I've had good success, but for some reason CANNOT get two of my Components to play nicely.
Here's what I WANT it to look like (accomplished by breaking constraints and hardcoding stuff):
...and here's the jumbled mess I get if I try to constrain "LabelJournal" and "linearLayout2":
The problems are happening for components named "LabelJournal" and "linearLayout2". Here's what my LayoutFile looks like... It's a WIP so I know right now there's a lot of hardcoding of text values and whatnot - I'm just trying to figure out WHAT in the world is causing these two components to get stuck at the top of the parent:
<?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">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#android:color/transparent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_left" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginEnd="14dp"
android:layout_marginStart="14dp"
android:inputType="date"
android:text="03/04/2018"
android:textAlignment="center"
android:textSize="24sp"
app:layout_constraintEnd_toStartOf="#+id/imageButton2"
app:layout_constraintStart_toEndOf="#+id/imageButton"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#android:color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_right" />
<TextView
android:id="#+id/LabelJournal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="Journal:"
android:textStyle="italic"
app:layout_constraintBottom_toTopOf="#id/ContentJournal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageButton" />
<TextView
android:id="#+id/ContentJournal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="The journal text would go in right about here. It should wrap to the next line for sufficientyl large text blocks."
android:textColorLink="#android:color/black"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/LabelTags"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelJournal" />
<TextView
android:id="#+id/LabelTags"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:text="Tags:"
android:textStyle="italic"
app:layout_constraintBottom_toTopOf="#+id/horizontalScrollView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/ContentJournal" />
<HorizontalScrollView
android:id="#+id/horizontalScrollView"
android:layout_width="0dp"
android:layout_height="41dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelTags">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/TagDayOff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#DayOff"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagUntracked"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Untracked"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagTravel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Travel"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagGames"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Games"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagMovie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Games"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
</LinearLayout>
</HorizontalScrollView>
<TextView
android:id="#+id/LabelDIet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="Diet:"
android:textStyle="italic"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/horizontalScrollView" />
<TextView
android:id="#+id/ContentCalories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelDIet"
tools:text="2813" />
<TextView
android:id="#+id/DietCalLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Cal"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentCalories"
app:layout_constraintStart_toEndOf="#+id/ContentCalories" />
<ProgressBar
android:id="#+id/ProgressCalories"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="-8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="2dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_green_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentCalories"
app:layout_constraintEnd_toEndOf="#+id/ContentProteinPercent"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentCalories" />
<TextView
android:id="#+id/ContentProtein"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/DietCalLabel"
app:layout_constraintTop_toBottomOf="#+id/ContentCalories"
tools:text="154" />
<TextView
android:id="#+id/DietProteinLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="P"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentProtein"
app:layout_constraintStart_toEndOf="#+id/ContentProtein" />
<ProgressBar
android:id="#+id/ProgressProtein"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_marginBottom="4dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_red_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentProtein"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentProtein" />
<TextView
android:id="#+id/ContentProteinPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.074"
app:layout_constraintStart_toEndOf="#+id/ProgressProtein"
app:layout_constraintTop_toTopOf="#+id/ContentProtein"
tools:text="22 %" />
<TextView
android:id="#+id/ContentFat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/DietCalLabel"
app:layout_constraintTop_toBottomOf="#+id/ContentProtein"
tools:text="103" />
<TextView
android:id="#+id/dietProteinLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="F"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentFat"
app:layout_constraintStart_toEndOf="#+id/ContentFat" />
<ProgressBar
android:id="#+id/ProgressFats"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_marginBottom="4dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_orange_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentFat"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentFat" />
<TextView
android:id="#+id/contentProteinPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.074"
app:layout_constraintStart_toEndOf="#+id/ProgressProtein"
app:layout_constraintTop_toTopOf="#+id/ContentFat"
tools:text="33 %" />
<TextView
android:id="#+id/ContentCarbs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/DietCalLabel"
app:layout_constraintTop_toBottomOf="#+id/ContentFat"
tools:text="302" />
<TextView
android:id="#+id/DietCarbLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="C"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentCarbs"
app:layout_constraintStart_toEndOf="#+id/ContentCarbs" />
<ProgressBar
android:id="#+id/ProgressCarbs"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_blue_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentCarbs"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentCarbs" />
<TextView
android:id="#+id/ContentCarbPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.074"
app:layout_constraintStart_toEndOf="#+id/ProgressProtein"
app:layout_constraintTop_toTopOf="#+id/ContentCarbs"
tools:text="43 %" />
<TextView
android:id="#+id/LabelExercise"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="Exercise:"
android:textStyle="italic"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ContentCarbs" />
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="436dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelExercise" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/ImageExerciseAttribution"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/transparent"
android:scaleType="fitXY"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelExercise"
app:srcCompat="#drawable/fit" />
<TextView
android:id="#+id/ContentExercise"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_weight="1"
android:text="45 min - PHUL Upper Power"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/ImageExerciseAttribution"
app:layout_constraintStart_toEndOf="#+id/ImageExerciseAttribution"
app:layout_constraintTop_toTopOf="#+id/ImageExerciseAttribution" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Perhaps I should also mention - I have no errors showing up in my Constraint Layout (although a ton of warnings about hardcoded text and whatnot that I'll deal with later).
Alright took me an hour of tinkering - but ever line in my Layout HTML that contains "layout_constraintBottom_toTopOf" caused the problem. I don't know if it's an ordering thing or some weird drawing hierarchy. It makes no sense to me how this got busted.
I am using chained view in constraint layout. Now I want the intermediate space between two text views to be removed.As the buttons at the bottom are at distance. I am trying to move them from design layout but its not happening as well. How to do it.Following is my xml
<?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"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="23dp"
android:layout_marginStart="32dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintStart_toEndOf="#+id/imageView3" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="26dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textViewHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/linearLayout2">-->
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="25dp"
android:layout_marginStart="16dp"
android:layout_marginTop="70dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="32dp"
android:layout_marginTop="26dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<!-- </LinearLayout>-->
<!-- <LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/linearLayout"
>-->
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="17dp"
android:layout_gravity="center"
android:layout_marginBottom="58dp"
android:layout_marginEnd="213dp"
android:layout_marginTop="58dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/textViewHeader" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="67dp"
android:layout_marginStart="90dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="63dp"
android:layout_marginEnd="89dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4" />
<!-- </LinearLayout>-->
</android.support.constraint.ConstraintLayout>
At the bottom there are two text views,placed horizontally and there is space between them. Thanks much :)
To remove space between two chained view, simply add the following line to the first item in the chain:
app:layout_constraintHorizontal_chainStyle="packed"
To read more about chain styles:
Official Android documentation
Medium article
You have to add Guideline
<?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"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="23dp"
android:layout_marginStart="32dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintStart_toEndOf="#+id/imageView3" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="26dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textViewHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/linearLayout2">-->
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="25dp"
android:layout_marginStart="16dp"
android:layout_marginTop="70dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="32dp"
android:layout_marginTop="26dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<!-- </LinearLayout>-->
<!-- <LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/linearLayout"
>-->
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="17dp"
android:layout_gravity="center"
android:layout_marginBottom="58dp"
android:layout_marginEnd="213dp"
android:layout_marginTop="58dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/textViewHeader" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="67dp"
android:gravity="center"
app:layout_constraintEnd_toStartOf="#+id/guideline1"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="63dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline1" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline1"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
<!-- </LinearLayout>-->
</android.support.constraint.ConstraintLayout>
About Guideline in ConstraintLayout:
Utility class representing a Guideline helper object for ConstraintLayout. Helper objects are not displayed on device (they are marked as View.GONE) and are only used for layout purposes. They only work within a ConstraintLayout. [...]
For more details, there is good documentation:
https://developer.android.com/reference/android/support/constraint/Guideline.html
I tried every combination of this, some people said it's a bug but I think it's something small I'm missing. With the follwing XML, I can't scroll at all, only the horizontal scroll works.
I have a side-scroll RecyclerView which I can drag left and right, but the page has more I items than can fit, hence the ScrollView.
At first I was aiming for a collapsable toolbar, but when I add CoordinatorLayout, the activity is just blank.
My XML:
<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:nestedScrollingEnabled="true"
app:layout_constraintTop_toBottomOf="#+id/scrollv"
tools:context="com.wearecatchapp.blueandwhite.catchapp_droid.EventDetailActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/detail_toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#fff"
android:elevation="2dp"
android:minHeight="60dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/evt_title"
fontPath="fonts/PanameFY.otf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="30sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="2dp"
android:text="Organizer's level:"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="12sp" />
<ImageView
android:id="#+id/org_level"
android:layout_width="60dp"
android:layout_height="16dp"
android:layout_gravity="center_vertical" />
</LinearLayout>
<TextView
android:id="#+id/optional_title"
fontPath="fonts/PanameFY.otf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="2dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="24sp"
android:visibility="gone" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/detail_toolbar">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/activity_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#color/black" />
<TextView
android:id="#+id/month"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="NOV"
android:textAlignment="center"
android:textColor="#android:color/holo_red_light"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/activity_image" />
<TextView
android:id="#+id/day"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="2dp"
android:text="15"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/month" />
<TextView
android:id="#+id/starts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="Starts"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintLeft_toRightOf="#+id/month"
app:layout_constraintTop_toBottomOf="#+id/activity_image" />
<TextView
android:id="#+id/ends"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="7dp"
android:text="Ends"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintLeft_toRightOf="#+id/day"
app:layout_constraintTop_toBottomOf="#+id/starts" />
<TextView
android:id="#+id/start_date"
fontPath="fonts/AvenirNext-Medium.ttf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="42dp"
android:layout_marginStart="42dp"
android:layout_marginTop="8dp"
android:text=" 18:10 Wed, Nov 15"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintLeft_toRightOf="#+id/starts"
app:layout_constraintTop_toBottomOf="#+id/activity_image" />
<TextView
android:id="#+id/textView34"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginStart="50dp"
android:layout_marginTop="7dp"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintLeft_toRightOf="#+id/ends"
app:layout_constraintTop_toBottomOf="#+id/start_date" />
<View
android:id="#+id/view10"
id="#+id/view8"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="16dp"
android:background="#color/thegray"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2" />
<View
android:id="#+id/view9"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="9dp"
android:background="#color/thegray"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView34" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="397dp"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView34">
<ImageView
android:id="#+id/requests_image"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_weight="1"
app:srcCompat="#drawable/requestsicon" />
<ImageView
android:id="#+id/invite_image"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_weight="1"
app:srcCompat="#drawable/invitefriends" />
<ImageView
android:id="#+id/recommend_image"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_weight="1"
app:srcCompat="#drawable/recommend" />
<ImageView
android:id="#+id/share_image"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_weight="1"
app:srcCompat="#drawable/shareblue" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="396dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<TextView
android:id="#+id/requests_text"
fontPath="fonts/avenir-next-bold.ttf"
android:layout_width="24dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Requests"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="12sp" />
<TextView
android:id="#+id/invite_friends_text"
fontPath="fonts/avenir-next-bold.ttf"
android:layout_width="24dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Invite friends"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="12sp" />
<TextView
android:id="#+id/recommend_event_text"
fontPath="fonts/avenir-next-bold.ttf"
android:layout_width="24dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Recommend"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="12sp" />
<TextView
android:id="#+id/share_text"
fontPath="fonts/avenir-next-bold.ttf"
android:layout_width="24dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Share"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="12sp" />
</LinearLayout>
<TextView
android:id="#+id/status_text"
fontPath="fonts/avenir-next-bold.ttf"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:paddingLeft="8dp"
android:textColor="#color/dark_gray"
android:textSize="20sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view10" />
<ImageView
android:id="#+id/is_for"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="6dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/status_text"
app:srcCompat="#drawable/maleandfemale" />
<TextView
android:id="#+id/going"
fontPath="fonts/AvenirNext-Medium.ttf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="15dp"
android:text="going"
android:textColor="#color/black"
app:layout_constraintLeft_toRightOf="#+id/is_for"
app:layout_constraintTop_toBottomOf="#+id/status_text" />
<TextView
android:id="#+id/more_togo"
fontPath="fonts/AvenirNext-Medium.ttf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:text="TextView"
android:textColor="#color/black"
app:layout_constraintLeft_toRightOf="#+id/hor_view"
app:layout_constraintTop_toBottomOf="#+id/status_text" />
<View
android:id="#+id/hor_view"
class="android.support.v4.widget.Space"
android:layout_width="1dp"
android:layout_height="30dp"
android:layout_marginLeft="35dp"
android:layout_marginStart="35dp"
android:layout_marginTop="8dp"
android:background="#color/dark_gray"
app:layout_constraintLeft_toRightOf="#+id/going"
app:layout_constraintTop_toBottomOf="#+id/status_text" />
<android.support.v7.widget.RecyclerView
android:id="#+id/participants_list"
android:layout_width="0dp"
android:layout_height="117dp"
android:layout_marginTop="12dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/hor_view" />
<View
android:id="#+id/view16"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="8dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/participants_list" />
<TextView
android:id="#+id/textView47"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="17dp"
android:text="Costs"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view16" />
<TextView
android:id="#+id/cost_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="17dp"
android:text="TextView"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view16" />
<View
android:id="#+id/view19"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="55dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view16" />
<TextView
android:id="#+id/cost_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="13dp"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view19" />
<View
android:id="#+id/view20"
android:layout_width="0dp"
android:layout_height="1px"
android:layout_marginTop="16dp"
android:background="#color/thegray"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view19" />
<ImageView
android:id="#+id/imageView15"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:padding="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view20"
app:srcCompat="#drawable/pinblue" />
<TextView
android:id="#+id/textView50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="7dp"
android:layout_marginStart="7dp"
android:layout_marginTop="16dp"
android:text="Event location"
android:textColor="#color/colorPrimary"
android:textSize="18sp"
app:layout_constraintLeft_toRightOf="#+id/imageView15"
app:layout_constraintTop_toBottomOf="#+id/view20" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:padding="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView50"
app:srcCompat="#drawable/background" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginBottom="29dp"
android:layout_marginEnd="40dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginStart="40dp"
app:cardBackgroundColor="#color/colorPrimary"
app:cardCornerRadius="18dp"
app:cardElevation="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:text="REQUEST TO JOIN"
android:textColor="#android:color/white"
android:textSize="14dp" />
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
Someone pleeeease for the love of god explain this sh*t to me.
Try adding setNestedScrollingEnabled(false) to your inner recyclerview.
https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html
setNestedScrollingEnabled
Enable or disable nested scrolling for this view.
If this property is set to true the view will be permitted to initiate
nested scrolling operations with a compatible parent view in the
current hierarchy. If this view does not implement nested scrolling
this will have no effect. Disabling nested scrolling while a nested
scroll is in progress has the effect of stopping the nested scroll.
1)xml
android.support.v4.widget.NestedScrollView
inner use LinerLayout
2)
recyclerView = (RecyclerView)view.findViewById(R.id.recyclerview_main);
recyclerView.setNestedScrollingEnabled(false);
If someone still facing this issue, please take care of 2 things:
Your NestedScrollView height should be match_parent. If you are using NestedScrollView inside ConstraintLayout you can achive this by following line of code
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
Add below line in your RecyclerView
android:nestedScrollingEnabled="false"
I hope it will save others time.
i am using linear layout with weight but it is not looking consistent on different screen sizes(only handsets). i need the text should be exactly below the image icon. so is there any way to create this layout in android
here is my xml code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/progress_count_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="23.5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.5"/>
<ImageView
android:id="#+id/one_ic_iv"
android:layout_width="48dp"
android:layout_height="48dp"
android:scaleType="fitCenter"
android:gravity="center_vertical"
android:src="#drawable/ic_wizard_5step_step01c_active_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="9.5"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="#+id/two_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_wizard_5step_step02a_inactive_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="12"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="#+id/three_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_wizard_5step_step03a_inactive_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="12"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="#+id/four_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_wizard_5step_step04a_inactive_incomplete"/>
<View
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_weight="12"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"/>
<ImageView
android:id="#+id/five_ic_iv"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_wizard_5step_step05a_inactive_incomplete"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"/>
</LinearLayout>
<LinearLayout
android:id="#+id/progress_text_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:weightSum="10"
android:orientation="horizontal">
<TextView
android:id="#+id/create_acc_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Create\nAccount"
android:textSize="14sp"
android:textColor="#color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="#+id/accept_terms_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Verify\nPhone"
android:textSize="14sp"
android:textColor="#color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="#+id/verify_phone_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Accept\nTerms"
android:textSize="14sp"
android:textColor="#color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="#+id/link_bank_progress_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Link\nBank"
android:textSize="14sp"
android:textColor="#color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<TextView
android:id="#+id/get_approved_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.8"
android:text="Get\nApproved"
android:textSize="14sp"
android:textColor="#color/CelestialBlue"
android:gravity="center"
fontPath="HVD Fonts - BrandonText-Light.otf"/>
</LinearLayout>
</LinearLayout>
If your text is coming up out of sync with the images, you might try to include a vertical LinearLayout for each component (image and text).
So use one big horizontal LinearLayout with 5 vertical LinearLayouts inside it. Rather than two horizontal LinearLayouts like you have now.
As another option, you could try to build this with ConstraintLayout. It will allow you to align things such that they don't get out of sync.
https://developer.android.com/training/constraint-layout/index.html
try to do like this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
enter code here
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_margin="10dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Create Account"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Create Account"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Create Account"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>[layout should look like this ][1]
[1]: https://i.stack.imgur.com/lim80.png
Try this library it will give you result
https://github.com/baoyachi/StepView
https://github.com/anton46/Android-StepsView
https://github.com/oli107/material-range-bar
Java Code
HorizontalStepView setpview5 = (HorizontalStepView) mView.findViewById(R.id.step_view5);
List<StepBean> stepsBeanList = new ArrayList<>();
StepBean stepBean0 = new StepBean("接单",1);
StepBean stepBean1 = new StepBean("打包",1);
StepBean stepBean2 = new StepBean("出发",1);
StepBean stepBean3 = new StepBean("送单",0);
StepBean stepBean4 = new StepBean("完成",-1);
stepsBeanList.add(stepBean0);
stepsBeanList.add(stepBean1);
stepsBeanList.add(stepBean2);
stepsBeanList.add(stepBean3);
stepsBeanList.add(stepBean4);
setpview5
.setStepViewTexts(stepsBeanList)//总步骤
.setTextSize(12)//set textSize
.setStepsViewIndicatorCompletedLineColor(ContextCompat.getColor(getActivity(), android.R.color.white))//设置StepsViewIndicator完成线的颜色
.setStepsViewIndicatorUnCompletedLineColor(ContextCompat.getColor(getActivity(), R.color.uncompleted_text_color))//设置StepsViewIndicator未完成线的颜色
.setStepViewComplectedTextColor(ContextCompat.getColor(getActivity(), android.R.color.white))//设置StepsView text完成线的颜色
.setStepViewUnComplectedTextColor(ContextCompat.getColor(getActivity(), R.color.uncompleted_text_color))//设置StepsView text未完成线的颜色
.setStepsViewIndicatorCompleteIcon(ContextCompat.getDrawable(getActivity(), R.drawable.complted))//设置StepsViewIndicator CompleteIcon
.setStepsViewIndicatorDefaultIcon(ContextCompat.getDrawable(getActivity(), R.drawable.default_icon))//设置StepsViewIndicator DefaultIcon
.setStepsViewIndicatorAttentionIcon(ContextCompat.getDrawable(getActivity(), R.drawable.attention));//设置StepsViewIndicator AttentionIcon
OUTPUT
you can use like this as per your requirement.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:layout_width="10dp"
android:layout_height="wrap_content"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/one_ic_iv"
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center_vertical"
android:scaleType="fitCenter"
android:src="#drawable/circle_crop" />
<TextView
android:id="#+id/create_acc_progress_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/one_ic_iv"
android:gravity="center"
android:text="Create\nAccount"
android:textColor="#color/colorPrimary"
android:textSize="14sp" />
</RelativeLayout>
<View
android:layout_width="30dp"
android:layout_height="3dp"
android:layout_gravity="center"
android:background="#color/colorAccent"
android:gravity="center_horizontal" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/one_ic_iv1"
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center_vertical"
android:scaleType="fitCenter"
android:src="#drawable/circle_crop" />
<TextView
android:id="#+id/create_acc_progress_tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/one_ic_iv1"
android:gravity="center"
android:text="Create\nAccount"
android:textColor="#color/colorPrimary"
android:textSize="14sp" />
</RelativeLayout>
I would suggest you to use LinearLayout with orientation: horizontal and then put separate RelativeLayouts for each progresses. I am suggesting RelativeLayout because then you can use its positional tags like android:layout_toLeftOf to align your textvies or imageviews.
here is the solution of my question , i used constraint layout for this
<?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="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/top_margin_wizard_bar"
android:layout_marginBottom="#dimen/bottom_margin_wizard_bar">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline1"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.06" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/guideline1"
app:layout_constraintRight_toLeftOf="#+id/guideline2"
app:srcCompat="#drawable/ic_wizard_5step_step01c_active_incomplete"
app:layout_constraintTop_toTopOf="#+id/imageView2"
app:layout_constraintBottom_toBottomOf="#+id/imageView2" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Create\nAccount"
android:textColor="#color/CelestialBlue"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="#+id/imageView"
app:layout_constraintRight_toRightOf="#+id/imageView"
android:textSize="#dimen/font_size_small_14sp"
app:layout_constraintBaseline_toBaselineOf="#+id/textView2" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1506666" />
<View
android:id="#+id/view_1"
android:layout_width="0dp"
android:layout_height="#dimen/height_wizard_line"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline2"
app:layout_constraintRight_toLeftOf="#+id/guideline3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline3"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2573333" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/guideline3"
app:layout_constraintRight_toLeftOf="#+id/guideline4"
app:srcCompat="#drawable/ic_wizard_5step_step02a_inactive_incomplete"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Verify\nMobile"
android:textColor="#color/CelestialBlue"
app:layout_constraintLeft_toLeftOf="#+id/imageView2"
app:layout_constraintRight_toLeftOf="#+id/guideline4"
android:textSize="#dimen/font_size_small_14sp"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBaseline_toBaselineOf="#+id/textView3" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline4"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.348" />
<View
android:id="#+id/view_2"
android:layout_width="0dp"
android:layout_height="#dimen/height_wizard_line"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toLeftOf="#+id/guideline5"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline5"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.4333333" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/guideline5"
app:layout_constraintRight_toLeftOf="#+id/guideline6"
app:srcCompat="#drawable/ic_wizard_5step_step03c_active_incomplete"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Accept\nTerms"
android:textColor="#color/CelestialBlue"
app:layout_constraintLeft_toLeftOf="#+id/imageView3"
app:layout_constraintRight_toRightOf="#+id/imageView3"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:layout_constraintHorizontal_bias="0.5"
android:textSize="#dimen/font_size_small_14sp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline6"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5666666" />
<View
android:id="#+id/view_3"
android:layout_width="0dp"
android:layout_height="#dimen/height_wizard_line"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline6"
app:layout_constraintRight_toLeftOf="#+id/guideline7"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline7"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.652" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/guideline7"
app:layout_constraintRight_toLeftOf="#+id/guideline8"
app:srcCompat="#drawable/ic_wizard_5step_step04a_inactive_incomplete"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:layout_constraintBottom_toBottomOf="#+id/imageView3" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Link\nBank"
android:textColor="#color/CelestialBlue"
app:layout_constraintBaseline_toBaselineOf="#+id/textView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="#+id/imageView4"
app:layout_constraintRight_toRightOf="#+id/imageView4"
android:textSize="#dimen/font_size_small_14sp"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline8"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.7426666" />
<View
android:id="#+id/view_4"
android:layout_width="0dp"
android:layout_height="#dimen/height_wizard_line"
android:background="#color/CelestialBlue"
android:gravity="center_horizontal"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline8"
app:layout_constraintRight_toLeftOf="#+id/guideline9"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="#+id/imageView4"
app:layout_constraintTop_toTopOf="#+id/imageView4"
app:layout_constraintVertical_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline9"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8493333" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
app:layout_constraintDimensionRatio="H, 1:1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/guideline9"
app:layout_constraintRight_toLeftOf="#+id/guideline10"
app:srcCompat="#drawable/ic_wizard_5step_step05a_inactive_incomplete"
app:layout_constraintTop_toTopOf="#+id/imageView4"
app:layout_constraintBottom_toBottomOf="#+id/imageView4" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:gravity="center_horizontal"
android:text="Get\nApproved"
android:textColor="#color/CelestialBlue"
app:layout_constraintBaseline_toBaselineOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="#+id/imageView5"
app:layout_constraintRight_toRightOf="#+id/imageView5"
android:textSize="#dimen/font_size_small_14sp"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline10"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.94" />
</android.support.constraint.ConstraintLayout>