Android - Button with Header and additional text

Question

I want to create following view:

I have chosen a GridLayout and added 4 Buttons in it. Now every Button should have a header and an additional text (like my concept). What is the best way to achieve this?

Answer 1

Here's my solution for this button

This is my activity_main.xml file content:

<!-- THIS IS YOUR SINGLE BUTTON-->
<!-- It has three parts-->
<LinearLayout
    android:id="@+id/item"
    android:layout_width="300dp"
    android:layout_height="100dp"
    android:background="#FFFFFFFF"
    android:gravity="center_horizontal"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal">

    <!-- PART I.-->
    <!-- THIS IS YOUR BAR ON THE LEFT-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:background="@color/colorAccent"/>

    <!-- PART II.-->
    <!-- THIS IS YOUR MIDDLE WITH TEXTS AND LINE-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="6"

        android:orientation="vertical">

        <!-- I thought that line has the same margin as strings-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:background="#FFFFFFFF"
            android:layout_weight="2"
            android:orientation="horizontal">

            <!-- ViewGroup with texts-->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:layout_marginTop="5dp"
                android:layout_marginRight="10dp"
                android:background="#FFFFFFFF"
                android:orientation="vertical">

                <!-- First is fitted with triangle - I think -->
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:rotation="90.0"
                        android:src="@drawable/triangle"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Trainingsmodus"
                    android:textStyle="bold"
                    android:textAppearance="?android:attr/textAppearanceMedium"/>
                </LinearLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Trainiere nach Themen sortiert"
                    android:paddingLeft="20dp"
                    android:textAppearance="?android:attr/textAppearanceSmall"/>/>

            </LinearLayout>

            <!-- nothing more than single vertical line-->
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#F1999999"></View>
        </LinearLayout>

    </LinearLayout>

    <!-- PART III.-->
    <!--LET'S SAY BUTTON ON THE RIGHT-->
    <TextView
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text=">"
        android:textAlignment="gravity"
        android:textSize="40dp"
        android:textStyle="bold"
        android:textColor="@color/colorAccent"
        android:layout_weight="6"/>

</LinearLayout>

Create in your drawable folder inside your project directory triangle.xml and put into this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="-40%"
            android:pivotY="87%" >
            <shape
                android:shape="rectangle" >
                <solid
                    android:color="@color/colorAccent" />
            </shape>
        </rotate>
    </item>
</layer-list>

That's only example how to make a button like above. Play with it, make yours and put into GridView. The picture in your post is good for landscape, not for portrait. Consider using both different orientation.

NOTE: This example is lack of android:id. To use any adapter or set text programmatically you need add to every view id.

Hope it help