Issue
I want to have two Material Buttons directly next to each other with a 1dp-wide separator line between them, like this (imgur).
I've tried setting custom background drawables on the buttons, but Material Buttons no longer allow this.
My next attempt was to use Material Buttons' stroke
attributes, but I can't find a way to apply the stroke to a single side.
I've also tried inserting a 1dp-wide View between the buttons, which could be a solution, but I haven't been able to programatically set the height and position of that View without becoming too complicated.
The two buttons are currently in a ConstraintLayout, but I've also tried nesting them inside a RelativeLayout inside the ConstraintLayout.
Here's the attempt inside a RelativeLayout:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:id="@+id/registration_cl">
<RelativeLayout
android:id="@+id/signin_social_rl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@id/signin_btn_back">
<com.google.android.material.button.MaterialButton
android:id="@+id/signin_btn_facebook"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:backgroundTint="#525352"
android:backgroundTintMode="screen"
android:fontFamily="@font/proximanova"
android:padding="15dp"
android:text="Facebook"
android:textAllCaps="false"
android:textColor="@color/white_ffffff"
android:textSize="18sp"
app:icon="@drawable/ic_facebook_icon_fb_socialshare_"
app:iconTint="@color/white_ffffff"
tools:alpha="1" />
<View
android:id="@+id/signin_social_div"
android:layout_width="1dp"
android:layout_height="50dp"
android:backgroundTint="@color/white_ffffff"
android:background="@color/white_ffffff"
android:layout_toEndOf="@id/signin_btn_facebook"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/signin_btn_google"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_toEndOf="@id/signin_social_div"
android:backgroundTint="#525352"
android:backgroundTintMode="screen"
android:fontFamily="@font/proximanova"
android:padding="15dp"
android:text="Google"
android:textAllCaps="false"
android:textColor="@color/white_ffffff"
android:textSize="18sp"
app:iconSize="8dp"
tools:alpha="1" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I expected there to be a simpler solution to adding a one-side-border besides programatically sizing and positioning a view between the buttons.
Solution
Your views are not constrained inside the RelativeLayout, that's why the View
is taking full height. Instead, using LinearLayout
to achieve the result would be much easier. Following code should help:
<androidx.constraintlayout.widget.ConstraintLayout ...>
<LinearLayout
android:id="@+id/signin_social_rl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@id/signin_btn_back">
<com.google.android.material.button.MaterialButton
android:id="@+id/signin_btn_facebook"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
... />
<View
android:id="@+id/signin_social_div"
android:layout_width="1dp"
android:layout_height="match_parent"
... />
<com.google.android.material.button.MaterialButton
android:id="@+id/signin_btn_google"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
... />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Using LinearLayout
instead of RelativeLayour
makes the rendering faster as well. Hope that helps!
Answered By - kushpf
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.