CODEWITHSUNDEEP
androidandroid-layoutmaterial-designandroid-buttonmaterial-components-android
user2638180
user2638180

Reputation: 1023

Reduce distance between an imageView and a TextView

I've defined both this an imageview and a button this way in my linearlayout:

  <ImageView
                                android:id="@+id/imageView2"

                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_margin="4dp"
                                android:layout_weight=".1"
                                android:src="@drawable/clock"/>

                        <Button
                                android:id="@+id/buttonEntryHour"
                                style="@style/Widget.AppCompat.Button.Borderless"
                                android:layout_width="0dp"
                                android:layout_height="wrap_content"
                                android:layout_margin="1dp"
                                android:layout_weight=".33"
                                android:onClick="clickTimePicker1"
                                android:text="@string/otrosEntryHourText"
                                android:textAlignment="textStart"
                                android:textColor="@color/colorPrimary"
                                app:layout_constraintEnd_toEndOf="parent"
                                app:layout_constraintStart_toStartOf="parent" />

But they show in an unwanted way, like this:

enter image description here

I'd like the distance between the icon and the text to be reduced, so it displays like something like this:

enter image description here

How could be something like that achieved?

Upvotes: 1

Views: 356

Answers (10)

Rakesh P.
Rakesh P.

Reputation: 183

Try this Using Linear Layout

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_margin="8dp">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/ic_add"
        android:layout_margin="8dp"/>

    <TextView
        android:id="@+id/tvDemo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="Demo Text"
        android:gravity="center"
        android:textSize="18dp"/>

</LinearLayout>

Try this Using Relative Layout

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/ic_add"
        android:layout_margin="8dp"/>

    <TextView
        android:id="@+id/tvDemo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/iv"
        android:layout_margin="8dp"
        android:text="Demo Text"
        android:gravity="center"
        android:textSize="18dp"/>

</RelativeLayout>

Upvotes: 0

Jassem Ben Hamida
Jassem Ben Hamida

Reputation: 524

Please make the width of the ImageView to 0dp like the Button, and put in mind that the some layout_weight in a LinearLayout should be equal to 1. So if you have only this two Views on your layout make the some of their layout_weight to 1 (0.7 and 0.3 or 0.5 and 0.5...). Try with the below code:

  <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:layout_weight="0.3"
        android:src="@drawable/clock"/>

<Button
        android:id="@+id/buttonEntryHour"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="1dp"
        android:layout_weight="0.7"
        android:onClick="clickTimePicker1"
        android:text="@string/otrosEntryHourText"
        android:textAlignment="textStart"
        android:textColor="@color/colorPrimary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

Upvotes: 0

TecCheck
TecCheck

Reputation: 31

Try this:


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/clock" />

    <Button
        android:id="@+id/buttonEntryHour"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="clickTimePicker1"
        android:text="@string/otrosEntryHourText"
        android:textColor="@color/colorPrimary" />

It should look like this:

Layout

Upvotes: 0

Lakhwinder Singh
Lakhwinder Singh

Reputation: 7209

No Need to put that in a linearLayout use drawableStart

<Button
                                android:id="@+id/buttonEntryHour"
                                style="@style/Widget.AppCompat.Button.Borderless"
                                android:layout_width="0dp"
                                android:layout_height="wrap_content"
                                android:layout_margin="1dp"
                                android:layout_weight=".33"
                                android:onClick="clickTimePicker1"
                                android:text="@string/otrosEntryHourText"
                                android:textAlignment="textStart"
                                android:textColor="@color/colorPrimary"
                                app:layout_constraintEnd_toEndOf="parent"
                                app:layout_constraintStart_toStartOf="parent" 
                            android:drawableStart="@drawable/clock"/>

And if you want to add some space to it, use drawablePadding

Upvotes: 1

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364988

The issue in your layout is the use of android:layout_weight. Remove them.

But just use the MaterialButton with the app:icon attribute, instead of 2 views:

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/ic_add_24px"
        android:text="Button"
        ../>

enter image description here

You can customize the padding between icon and button text using the app:iconPadding attribute.

Something like:

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/ic_add_24px"
        app:iconPadding="xxdp"
        android:text="Button"
        ../>

You can also use the TextButton.Icon style:

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
        app:icon="@drawable/ic_add_24px"
        android:text="Button"
        ../>

enter image description here

or an OutlinedButton.Icon style:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
    app:icon="@drawable/ic_add_24px"
    android:text="Button"
    ../>

enter image description here

Upvotes: 2

Dipak Nai
Dipak Nai

Reputation: 46

Here i assume that you want to get both image and text together and want them to act as like a button.

If my assumption is true then please find below code.

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:elevation="@dimen/_10sdp"
                android:gravity="center"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/ivFacebook"
                    android:layout_width="@dimen/_14sdp"
                    android:layout_height="@dimen/_14sdp"
                    android:src="@drawable/ic_facebook"
                    android:tint="@drawable/textview_selector_social" />

                <TextView
                    android:id="@+id/tvFacebook"
                    android:layout_width="wrap_content"
                    android:layout_height="@dimen/_33sdp"
                    android:layout_marginStart="@dimen/_5sdp"
                    android:layout_marginTop="@dimen/_1sdp"
                    android:fontFamily="@font/poppins_regular"
                    android:gravity="center_vertical"
                    android:text="@string/facebookLogin"
                    android:textColor="@drawable/textview_selector_social"
                    android:textSize="@dimen/_12ssp"
                    android:textStyle="bold" />

            </LinearLayout>

            <Button
                android:id="@+id/btnFacebookLogin"
                android:layout_width="match_parent"
                android:layout_height="@dimen/_35sdp"
                android:layout_marginStart="@dimen/_20sdp"
                android:layout_marginTop="@dimen/_5sdp"
                android:layout_marginEnd="@dimen/_20sdp"
                android:layout_marginBottom="@dimen/_5sdp"
                android:background="@drawable/btn_social_selector"
                android:fontFamily="@font/poppins_regular"
                android:textColor="@drawable/textview_selector_social" />

        </RelativeLayout>

Result is here

enter image description here

Upvotes: 0

Kartik Shah
Kartik Shah

Reputation: 916

Just Try this .You will achieve exactly what you want

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="4dp"
        android:src="@drawable/clock"/>

    <Button
        android:id="@+id/buttonEntryHour"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:onClick="clickTimePicker1"
        android:text="Hello"
        android:textColor="#000"
        />

</LinearLayout>

Upvotes: 0

khushpreet
khushpreet

Reputation: 11

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

    <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher_background"/>

    <Button

            android:id="@+id/buttonEntryHour"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginStart="5dp"
            android:layout_weight="1"
            android:onClick="clickTimePicker1"
            android:text="otrosEntryHourText"
            android:textAlignment="textStart"
            android:textColor="@color/colorPrimary"/>

</LinearLayout>

Upvotes: 1

Razvan S.
Razvan S.

Reputation: 803

If you have a linear layout you don't need the layout constraint code in your button (the last two lines). Also, you don't need the layout weights. All you need is a horizontal linear layout and add the ImageView first and the Button second. They will be displayed next to each other. You can add a margin if you want them a little more spread out.
A mock example would be:
<ImageView android:layout_width="30dp" android:layout_height="30dp"/> <Button android:layout_width="100dp" android:layout_height="30dp" android:layout_marginStart="8dp" android:text="Button Text"/>

Upvotes: 0

Googlian
Googlian

Reputation: 6751

You can use LinearLayout as a button instead of using the default Button object since you need few customizations.

<LinearLayout
    android:onClick="someMethod"
    android:clickable="true"
    android:background="#f2f2f2"
    android:padding="10dp"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_marginRight="15dp"
        android:src="@drawable/clock"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_gravity="center"
        android:text="TEST CLICK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

enter image description here

Upvotes: 0

Related Questions