create customise button with image at top and text at bottom

Question

i am referrring this link , but it dosent help

Source code

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto">

    <data>

        <variable
            name="collection"
            type="com.techryde.bajafresh.data.model.local.CollectionDb" />
    </data>

    <RelativeLayout
        android:id="@+id/circle_layout"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/whitecircle">

        <RelativeLayout
            android:id="@+id/circle_layoutinner"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_above="@+id/rating_viewtv"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:background="@drawable/circle_inset_drawable">

            <ImageView
                android:id="@+id/country_photo"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                app:url="@{collection.imageUrl}" />


        </RelativeLayout>

        <TextView
            android:id="@+id/rating_viewtv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="3dp"
            android:text="@{collection.collectionName}"
            android:textColor="@android:color/white" />
    </RelativeLayout>
</layout>

whitecircle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false">

    <solid android:color="@android:color/holo_red_dark" />

</shape>

circletwo.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false">

    <!--<solid android:color="#ff9546" />-->
    <solid android:color="#ffffff" />

</shape>

circle_insert_drawable.xml

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/circletwo"
    android:insetTop="40dp"
    android:visible="true" />

Cant figure out whats the issue is? If anyone has face this issue before it would be great of ur help .Thanks

have used cardview also. but is also not helping out. if you can provide some example it would be great.Thanks — Ankit Ostwal, Dec 30 '16 at 09:31

score 0 · Answer 1 · answered Dec 30 '16 at 09:36

0

you can easily create button with drawable top...

<Button android:layout_weight="wrap_content"
    android:layout_height="wrap_Content"
    android:drawableTop="@drawable/yourimage"
    android:background="your circle shap drawble"/>

answered Dec 30 '16 at 09:36

Abhishek Singh

9,008
5
28
53

that dosent help. i want the text in bottom as shown and image in above section as shown. – Ankit Ostwal Dec 30 '16 at 09:38
@AnkitOstwal drawble top will put a image on Top – Abhishek Singh Dec 30 '16 at 09:39
how will you show red color bg behind text & that too in a effect as shown in image, at the bottom? – Ankit Ostwal Dec 30 '16 at 09:41
you can put color in circle shape drawble – Abhishek Singh Dec 30 '16 at 09:42
i am getting output like this.. https://www.dropbox.com/s/ghxh3hmcjauiz6m/Screen%20Shot%202016-12-30%20at%203.14.52%20pm.png?dl=0 .. But i want as shown in question above. – Ankit Ostwal Dec 30 '16 at 09:50
use larger image or mix this image with a larger image with white background – Abhishek Singh Dec 30 '16 at 09:53
that dosent help. images comes from server. If you can figure out above code , and help me out that would be great.Thanks – Ankit Ostwal Dec 30 '16 at 09:55
then use cardviews – Abhishek Singh Dec 30 '16 at 10:06
should i use background as circle drawable in cardview – Ankit Ostwal Dec 30 '16 at 10:11
can you provide some hint @AbhishekSingh – Ankit Ostwal Dec 30 '16 at 10:12
ya waiting & i am trying to implement same as directed by you.Thanks – Ankit Ostwal Dec 30 '16 at 10:16
i am not able to make circular card. – Ankit Ostwal Dec 30 '16 at 11:04

create customise button with image at top and text at bottom

1 Answers1

Linked