Android: Drawablebottom hides text

Question

I have several LinearLayouts (See image at bottom and a piece of code). There is a text on each button and an image under the text. But there is an issue. When the application runs on a mobile with lower resolution the image hides text. How do I prevent this happening?

I set layout_height to 0pt to let layout_weight take care of this.

image of layout

<LinearLayout
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="0pt"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button1"
        android:layout_weight="1"
        android:layout_width="0pt"
        android:layout_height="match_parent"
        android:text="@string/button_pin1"
        android:background="@drawable/button_blue"
        android:layout_margin="2dp"
        android:drawableBottom="@mipmap/ic_arrow_left" />

    <Button
        android:id="@+id/button2"
        android:layout_weight="1"
        android:layout_width="0pt"
        android:layout_height="match_parent"
        android:text="@string/button_pin2"
        android:background="@drawable/button_green"
        android:layout_margin="2dp"
        android:drawableBottom="@mipmap/ic_arrow_right" />
</LinearLayout>

<LinearLayout
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="0pt"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button3"
        android:layout_weight="1"
        android:layout_width="0pt"
        android:layout_height="match_parent"
        android:text="@string/button_pin3"
        android:background="@drawable/button_yellow"
        android:layout_margin="2dp"
        android:drawableBottom="@mipmap/ic_arrow_up"/>

    <Button
        android:id="@+id/button4"
        android:layout_weight="1"
        android:layout_width="0pt"
        android:layout_height="match_parent"
        android:text="@string/button_pin4"
        android:background="@drawable/button_purple"
        android:layout_margin="2dp"
        android:drawableBottom="@mipmap/ic_arrow_down"/>
</LinearLayout>

Thank you for your answers.

EDIT (jaydroider):

I have tried your approach, but this is what i get updated image. In android studio I have taken a look at different screen sizes and this code will not fill the whole screen. I do not know if I am doing something bad.

Here are my updated codes:

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.jigsik.arduinocontrol.Pin8aActivity">

<LinearLayout style="@style/CoreLayout">

    <TextView
        android:id="@+id/myText"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

<LinearLayout style="@style/CoreLayout">

    <Button
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/stop_all"
        android:onClick="stopAll"
        android:background="@drawable/button_red"
        android:layout_margin="2dp"
        android:drawableBottom="@mipmap/ic_stop"/>
</LinearLayout>

<LinearLayout style="@style/CoreLayout">

    <Button
        android:id="@+id/button1"
        style="@style/Button.Blue"
        android:text="@string/button_pin1"
        android:drawableBottom="@mipmap/ic_arrow_left" />

    <Button
        android:id="@+id/button2"
        style="@style/Button.Green"
        android:text="@string/button_pin2"
        android:drawableBottom="@mipmap/ic_arrow_right"/>
</LinearLayout>

<LinearLayout style="@style/CoreLayout">

    <Button
        android:id="@+id/button3"
        style="@style/Button.Yellow"
        android:text="@string/button_pin3"
        android:drawableBottom="@mipmap/ic_arrow_up"/>

    <Button
        android:id="@+id/button4"
        style="@style/Button.Purple"
        android:text="@string/button_pin4"
        android:drawableBottom="@mipmap/ic_arrow_down"/>
</LinearLayout>

<LinearLayout style="@style/CoreLayout">

    <Button
        android:id="@+id/button5"
        style="@style/Button.Orange"
        android:text="@string/button_pin5"
        android:drawableBottom="@mipmap/ic_arrow_right"/>

    <Button
        android:id="@+id/button6"
        style="@style/Button.Azure"
        android:text="@string/button_pin6"
        android:drawableBottom="@mipmap/ic_arrow_left"/>
</LinearLayout>

<LinearLayout style="@style/CoreLayout">

    <Button
        android:id="@+id/button7"
        style="@style/Button.Pink"
        android:text="@string/button_pin7"
        android:drawableBottom="@mipmap/ic_arrow_down"/>

    <Button
        android:id="@+id/button8"
        style="@style/Button.Grey"
        android:text="@string/button_pin8"
        android:drawableBottom="@mipmap/ic_arrow_up"/>
</LinearLayout>

Styles.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="CoreLayout">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:orientation">horizontal</item>
    <item name="android:weightSum">2</item>
</style>

<style name="Button">
    <item name="android:layout_weight">1</item>
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_margin">2dp</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:gravity">center</item>
    <item name="android:padding">10dp</item>
</style>

<style name="Button.Blue">
    <item name="android:background">@drawable/button_blue</item>
</style>

<style name="Button.Green">
    <item name="android:background">@drawable/button_green</item>
</style>

<style name="Button.Yellow">
    <item name="android:background">@drawable/button_yellow</item>
</style>

<style name="Button.Purple">
    <item name="android:background">@drawable/button_purple</item>
</style>

<style name="Button.Orange">
    <item name="android:background">@drawable/button_orange</item>
</style>

<style name="Button.Azure">
    <item name="android:background">@drawable/button_azure</item>
</style>

<style name="Button.Pink">
    <item name="android:background">@drawable/button_pink</item>
</style>

<style name="Button.Grey">
    <item name="android:background">@drawable/button_grey</item>
</style>

EDIT: I think this situation does not have a solution I would like it have. In my opinion there is only one way to accomplish this task. I have to make a second layout file for smaller screens and change it to achieve the desired behaviour (smaller images etc). Thanks for answers guys. I would not find the solution without brainstorming with you :-).

you have to design your layout for any resolution see my answer [here](http://stackoverflow.com/questions/36820746/multi-screen-for-mobiles-in-android/36821546#36821546) — mehrdad khosravi, May 11 '16 at 10:15
@mehrdadkhosravi I have taken a look at your answer. You want to say I have to make like 5 different version of layouts for each kind of phone? I hope there is another way, because I have to make more versions of this app with different button count. In each case thank you for your answer! — Martin Pohorský, May 12 '16 at 19:01
you can design 5 different version of layouts but this is not good solution. you can use 5 dimens for design 1 layout for 5 different resolution. do you know dimens? — mehrdad khosravi, May 14 '16 at 03:42

Jay Rathod · Answer 1 · 2016-05-13T11:11:26.823

Give android:weightSum="2" to your each Linear Layout. I have applied changes to your Layout. Even it will work with smaller Layouts.

Refer this.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">


        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin2" />
    </LinearLayout>

EDIT1:

More then 10 Buttons. Don't use style for each Linear Layout.

Just refer this.

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

    <LinearLayout
        android:id="@+id/LL1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">


        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin2" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LL2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">


        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin3" />

        <Button
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin4" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LL3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">


        <Button
            android:id="@+id/button5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin5" />

        <Button
            android:id="@+id/button6"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin6" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LL4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">


        <Button
            android:id="@+id/button7"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin7" />

        <Button
            android:id="@+id/button8"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin8" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LL5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">


        <Button
            android:id="@+id/button9"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin9" />

        <Button
            android:id="@+id/button10"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin10" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LL6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">


        <Button
            android:id="@+id/button11"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin11" />

        <Button
            android:id="@+id/button12"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:padding="20dp"
            android:text="Pin12" />
    </LinearLayout>

</LinearLayout>

Here is Screen.

@MartinPohorský Why are you giving core layout style to every `Linear Layout`. Try with what i have given in answer. don't use style in root tags of layout. might be that causes problem. use same i have given in answer. it will work in all the devices small ,large , medium large. — Jay Rathod, May 11 '16 at 16:32
I have followed your "Give android:weightSum="2" to your each Linear Layout". I did not want to have a large question so I posted only one linear layout. If I use your approach with f.e. 10 buttons instead of 8, I am in the same situation on my Samsung Galaxy Note 4. Have you tried your solution with many buttons? — Martin Pohorský, May 11 '16 at 16:48
@MartinPohorský Yes i have tried with more buttons on my side. it 's because answer not getting large that's why i have put only one linear layout.' — Jay Rathod, May 11 '16 at 16:57
I do not understand what I am doing wrong then. Can you provide me your (complete) code with more buttons (lets say 10 or more)? Thank you. — Martin Pohorský, May 12 '16 at 04:52
@MartinPohorský I will provide but you just have to copy and paste that `Single Linear Layout with Two Buttons` copy that as many times you want and you have that output with 10 or more buttons. — Jay Rathod, May 12 '16 at 05:08
@MartinPohorský are you stuck anywhere martin ? Let me know is it worked for you or not more than 10 buttons. — Jay Rathod, May 12 '16 at 12:20
Yes. I am stuck. Can you please let me take a look at your code? I thought I got it, but now I see I do not. I cannot have more linear layouts in one activity - I have to have it in another layout so I do not know the point of your answer. — Martin Pohorský, May 12 '16 at 18:57
@MartinPohorský i didn't get you martin for this now I see I do not. I cannot have more linear layouts in one activity I have to have it in another layout so I do not know the point of your answer. can you please ellaborate what help i could do for you. — Jay Rathod, May 13 '16 at 05:15
I thought I should just copy the linear layout. But I must have these linear layouts in another layout - because there should be only one parent. I think this cannot be solved. Now I found out that if I make the picture on background It will adapt to the whole button. I ask you for the third time, can you provide me your working code with more buttons (like 10)? I am loosing hope that you know how to make this. — Martin Pohorský, May 13 '16 at 10:51
@MartinPohorský Check mu EDIT1 Part of asnwer it have more then 10 buttons on layout. — Jay Rathod, May 13 '16 at 12:06
If I try your layout. I can see 10 buttons instead of 12. I think the other 2 are under the screen? :-). Like I said earlier. I do not think the problem is with layout, the problem is with the button itself. I found out that if I do android:background instead of android:drawablebottom, the image will resize to fit the button. Then I can change button to textview to have more flexible text. I do not like this solution, but I cannot find out anything else. The app will be only vertical and I hope I can provide images for different screen ratios instead of resolution. Anyway thanks for help! — Martin Pohorský, May 13 '16 at 12:31

score 1 · Answer 2 · answered May 11 '16 at 11:16

For that ,

you need to make image of different size check http://developer.android.com/guide/practices/screens_support.html

other thing is you have to add LinearLayout as parent to other LinearLayout, check below code

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="2" >

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/cal"
            android:drawableBottom="@mipmap/ic_launcher"
            android:text="button_pin1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0pt"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/cal"
            android:drawableBottom="@mipmap/ic_launcher"
            android:text="button_pin2" />
    </LinearLayout >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/cal"
            android:drawableBottom="@mipmap/ic_launcher"
            android:text="button_pin3" />

        <Button
            android:id="@+id/button4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/cal"
            android:drawableBottom="@mipmap/ic_launcher"
            android:text="button_pin4" />
    </LinearLayout >
</LinearLayout >

Now, according to your requirement you can change weightSum and add LinearLayout

I have posted my question in a wrong way. I have the parent LinearLayout. I have added weightSum. I do not have problems with LinearLayouts. The layout is just fine. I have only problem with hiding text with images. The button has fixed size and when the image cannot be smaller it will just do not care if there is text or not. I have these images in mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi. I saw there is also ldpi, but Android studio do not let me have it. — Martin Pohorský, May 11 '16 at 17:07
I am afraid that I want to have these images too small. But what if I need to have f.e. 16 buttons? — Martin Pohorský, May 11 '16 at 17:09
If there are 16 buttons than you can use scrolview and images according to resolutions. — Amit Vaghela, May 12 '16 at 10:57
Yeah. It would be a solution. But I cannot use scrollview for this project. See comment for @N.T. answer — Martin Pohorský, May 13 '16 at 12:35

score 0 · Accepted Answer · answered May 12 '16 at 01:44

0

No matter how small you make the images, at some point, if you add just enough buttons, they will not fit on the screen.

Is scrolling acceptable?

You could take your second posted layout exactly like it is and embed it into a ScrollView. That way you can have the buttons the size you want - and if it just so happens to have too many buttons, you can scroll to reach the extra ones.

answered May 12 '16 at 01:44

N.T.

2,601
1
14
20

I see. Unfortunately, It is not the solution I can accept. The application will use at most handicapped people (they can have problem also with their fingers and scrolling screen could make it hard to control the application). But I agree with you and also think that the images cannot convert to be extra small. There are just 5 sizes of image available. But I got an idea. Couldn't I convert the images by myself programmaticly? I know it would be hardware comsuming, but the application is not that complicated. – Martin Pohorský May 12 '16 at 04:57
After some time I considered this the best answer, because there is no way to always fit the picture in button with text. I solved this using images without text. – Martin Pohorský Aug 19 '16 at 08:21

Android: Drawablebottom hides text

3 Answers3