Button with right arrow

Question

I am trying to make a button with right arrow in it. I have defined a card view with a button inside it. but I am not sure how I can put the arrow along with it and if its possible to achieve in xml. Button should look like this :

My xml looks like this :

 <android.support.v7.widget.CardView
    android:id="@+id/signupCard"
    style="@style/CardView.Light"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="18dp"
    android:layout_marginEnd="29dp"
    android:layout_marginLeft="29dp"
    android:layout_marginRight="29dp"
    android:layout_marginStart="29dp"
    android:layout_marginTop="198dp"
    app:layout_constraintBottom_toTopOf="@+id/loginCard"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <Button
        android:id="@+id/signup"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/background_light"
        android:minWidth="0dp"
        android:paddingEnd="8dp"
        android:paddingStart="8dp"
        android:scaleType="center"
        android:text="@string/signUp"
        android:textColor="#DE000000" />
</android.support.v7.widget.CardView>

Parth Patel · Accepted Answer · 2021-01-17T19:20:27.637

Try to use this layout. It will work for your case.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

<androidx.cardview.widget.CardView
    android:id="@+id/signupCard"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="18dp"
    android:layout_marginEnd="29dp"
    android:layout_marginLeft="29dp"
    android:layout_marginRight="29dp"
    android:layout_marginStart="29dp"
    android:layout_marginTop="198dp"
    app:cardCornerRadius="@dimen/d5dp"
    app:cardElevation="@dimen/d10dp">
<Button
        android:id="@+id/signup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="@dimen/d50dp"
        android:background="@android:color/background_light"
        android:drawablePadding="@dimen/d30dp"
        android:drawableEnd="@drawable/icon_right_aero_black"
        android:minWidth="0dp"
        android:scaleType="center"
        android:text="Login"
        android:textColor="#DE000000" />
</androidx.cardview.widget.CardView>
</RelativeLayout>

For FontFamily, you can add android:fontFamily="" property in .xml layout of Button and set android:textAllCaps="false". — Parth Patel, May 31 '18 at 05:20

score 1 · Answer 2 · answered May 31 '18 at 03:29

1

Try this code : you can get that image by right click Drawable > New > Vector Asset > Clip Art

<Button
    android:id="@+id/signup"
    ...
    android:drawableRight="your image"
    ...
    android:textColor="#DE000000" />

answered May 31 '18 at 03:29

Asqa

103
1
10

score 0 · Answer 3 · edited May 31 '18 at 03:18

You can achieve this by android:drawableRight inside xml and just for information this property can also assigned to the view programatically for that yo have to use setCompoundDrawablesWithIntrinsicBounds(int,int,int,int)
here params arre

setCompoundDrawablesWithIntrinsicBounds(int /*FOR LEFT DRAWABLE*/,int/*FOR TOP DRAWABLE*/,int/*FOR RIGHT DRAWABLE*/,int/*FOR BOTTOM DRAWABLE*/)

if you don't want to set drawable then pass 0 in to it

so for know you just use first method inside the xml using android:drawableRight property

score 0 · Answer 4 · answered May 31 '18 at 05:26

You can use button drawable right or drawable end property to set image: Also, you can use padding property to apply padding to a drawable image.

<Button
      android:id="@+id/imgButton"
      android:text="imageButton"
      android:drawableRight="@drawable/your_image"
      android:drawableEnd="@drawable/your_image"
      android:drawablePadding="@dimen/padding_10dp"
      android:textColor="@color/colorButton" />

score 0 · Answer 5 · answered May 31 '18 at 05:42

Here you can go buddy,

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="5dp"
card_view:cardElevation="3dp"
android:layout_marginBottom="18dp"
android:layout_marginEnd="29dp"
android:layout_marginLeft="29dp"
android:layout_marginRight="29dp"
android:layout_marginStart="29dp"
android:layout_marginTop="198dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true"
>
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Login"
    android:background="@color/white"
    android:drawableRight="@drawable/ic_chevron"/>

score 0 · Answer 6 · answered May 31 '18 at 18:26

Its pretty simple you can First of all you need a vector icon which you an get from official google website Material Icons .

then you will get a rar while which you can extract each type of drawable to the mipmap folders of your android project

files you will get from rar file are

drawable-hdpi ,drawable-mdpi ,drawable-xhdpi ,drawable-xxhdpi drawable-xxxhdpi

copy images containing in this folders in mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi and mipmap-xxxhdpi respectively

now you have got icon now do following

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:background="@color/white"
android:drawableRight="@mipmap/yourIconName"/>

score 0 · Answer 7 · answered Jul 26 '18 at 05:01

         <android.support.v7.widget.CardView 
                      xmlns:android="http://schemas.android.com/apk/res/android"
                        xmlns:card_view="http://schemas.android.com/apk/res- 
                         auto"
                        android:id="@+id/cardview1"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="12dp"
                        android:layout_marginRight="7dp"
                        android:layout_marginTop="25dp"
                        android:clickable="true"
                        android:foreground="? 
                        android:attr/selectableItemBackground"
                        card_view:cardBackgroundColor="@color/White"
                        card_view:cardCornerRadius="7dp"
                        card_view:cardElevation="7dp"
                        card_view:cardMaxElevation="7dp"
                        card_view:contentPadding="7dp">

                        <RelativeLayout
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal"
                            android:padding="5dp">



                            <TextView
                                style="@style/TextColor"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_alignParentStart="true"
                                android:layout_centerVertical="true"
                                android:layout_gravity="center"
                                android:layout_marginStart="64dp"
                                android:paddingLeft="10dp"

                                android:text="@string/MySchool"
                                android:textSize="20dp"
                                tools:ignore="RtlCompat" />

                            <ImageButton
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_alignParentEnd="true"
                                android:layout_centerVertical="true"

                                android:layout_marginEnd="24dp"
                                android:background="@color/tranbackground"

                    android:src="@drawable/ic_keyboard_arrow_right_black_24dp"
                                tools:ignore="RtlCompat" />
                        </RelativeLayout>
                    </android.support.v7.widget.CardView>

Code without explanation isn't all that helpful - can you elaborate? — CertainPerformance, Jul 26 '18 at 05:24

Button with right arrow

7 Answers7