Android Bottom Menu with images & Text of equal Size

Question

I have a requirement where there needs to be a horizontal row of buttons with different images for different tap states and text on the bottom. For the life of me, I can't figure out how to keep the aspect ratio, my button backgrounds look stretched wide.

I'm using a LinearLayout and each button has equal weight. That made the buttons equal size to each other but I wanted to keep the background image aspect ratio square. The ideal layout would be a row of square sized buttons...

I have tried this solution but it is for an ImageButton.

My main.xml looks like this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:layout_weight="1"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="25dp"
    android:layout_marginRight="25dp"
    android:weightSum="5">

    <Button
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/menu"
        android:gravity="center|bottom"
        android:text="Settings" />

    <Button
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@null" />

    <Button
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@null" />

    <Button
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@null" />

    <Button
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@null" />
</LinearLayout>

And my layout looks like this, yes I realize some buttons don't have images yet. How should I fix the aspect ratio?

id use imageview/textview in their own linearlayout. not buttons. — letsCode, Feb 01 '18 at 18:27

Abhishek kumar · Accepted Answer · 2018-02-01T18:34:43.803

Your layout will be look like this :

Your Bottom Layout will be like this :

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        android:background="@color/gray_light1"
        android:layout_alignParentBottom="true">

        <include layout="@layout/home_bottom"/>

you can include this LinearLayout to your Bottom LinearLayout :

home_bottom.xml :

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/home_ll"
        android:gravity="center_horizontal"
        android:layout_weight="1"
        android:padding="5dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:background="?android:attr/selectableItemBackground"
        android:layout_height="55dp">

        <ImageView
            android:id="@+id/home_img"
            android:background="@mipmap/ic_home"
            android:layout_width="25dp"
            android:layout_height="25dp" />

        <TextView
            android:layout_marginTop="4dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/blacklike"
            android:textSize="10dp"
            android:text="Home"
            />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/search_ll"
        android:gravity="center_horizontal"
        android:layout_weight="1"
        android:padding="5dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:background="?android:attr/selectableItemBackground"
        android:layout_height="55dp">

        <ImageView
            android:id="@+id/search_img"
            android:background="@mipmap/ic_search"
            android:layout_width="25dp"
            android:layout_height="25dp" />

        <TextView
            android:layout_marginTop="4dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/blacklike"
            android:textSize="10dp"
            android:text="Search"
            />

    </LinearLayout>
    <LinearLayout
        android:id="@+id/categories_ll"
        android:gravity="center_horizontal"
        android:layout_weight="1"
        android:padding="5dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:background="?android:attr/selectableItemBackground"
        android:layout_height="55dp">

        <ImageView
            android:id="@+id/categories_img"
            android:background="@mipmap/ic_categories"
            android:layout_width="25dp"
            android:layout_height="25dp" />

        <TextView
            android:layout_marginTop="4dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/blacklike"
            android:textSize="10dp"
            android:text="Categories"
            />

    </LinearLayout>
    <LinearLayout
        android:id="@+id/cart_ll"
        android:gravity="center_horizontal"
        android:layout_weight="1"
        android:padding="5dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:background="?android:attr/selectableItemBackground"
        android:layout_height="55dp">


        <LinearLayout
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/cart_img"
                android:background="@mipmap/ic_cart"
                android:layout_width="25dp"
                android:layout_height="25dp" />

            <TextView
                android:gravity="center"
                android:layout_marginLeft="-10dp"
                android:layout_width="18dp"
                android:layout_height="18dp"
                android:textColor="@color/white"
                android:textSize="10dp"
                android:background="@mipmap/ic_cart_back"
                android:text="8"
                />



        </LinearLayout>



        <TextView
            android:layout_marginTop="4dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/blacklike"
            android:textSize="10dp"
            android:text="Cart"
            />

    </LinearLayout>
    <LinearLayout
        android:id="@+id/account_ll"
        android:gravity="center_horizontal"
        android:layout_weight="1"
        android:padding="5dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:background="?android:attr/selectableItemBackground"
        android:layout_height="55dp">

        <ImageView
            android:id="@+id/account_img"
            android:background="@mipmap/ic_account"
            android:layout_width="25dp"
            android:layout_height="25dp" />

        <TextView
            android:layout_marginTop="4dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/blacklike"
            android:textSize="10dp"
            android:text="Account"
            />

    </LinearLayout>





</LinearLayout>

Great thanks, I'll try your solution. Can I still assign an onClick to these somehow? So it functions like a button? And can I still my existing defined selector (contains different pressed state images)? — Jason, Feb 01 '18 at 18:28
Thanks! I do have one more question, will I be able to set the text of these "buttons" programmatically? How would I grab a reference to one of these button textviews? — Jason, Feb 01 '18 at 18:40
Sorry, I'm not getting where you want to set the text ? @Jason — Abhishek kumar, Feb 01 '18 at 18:41
I want to set the text in the textview of these buttons in my MainActivity.Class — Jason, Feb 01 '18 at 18:42
yes, of-course you can set no issue at all. @Jason , if any Issue just comment. — Abhishek kumar, Feb 01 '18 at 18:46
Sorry, I can't use this solution as is, assigning my selector to the imageview src or background does not work. — Jason, Feb 01 '18 at 19:00
Are you facing issue on java ?? Assign that to linearLayout listner and change will be on images — Abhishek kumar, Feb 01 '18 at 19:01
Oh just kidding, I had to set the imageview clickable property to true. — Jason, Feb 01 '18 at 19:02

Android Bottom Menu with images & Text of equal Size

1 Answers1