Android: the ability to draw next to a TextView with a weight for each TextView in LinearLayout

Question

I am trying to achieve the result, as shown in Figure 1. I tried setting the gravity, paddingleft, etc., but the drawing image gets to the right end, and not next to the text (shown in Pic 2 ) Can anyone suggest how to align the image next to the TextView? Also how to set drawable size?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="@drawable/separator" android:padding="10dp"> <TextView android:id="@+id/sms" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:layout_marginRight="2dp" android:layout_weight="1" android:drawableEnd="@drawable/message" android:drawableRight="@drawable/message" android:gravity="center" android:paddingLeft="3dp" android:paddingRight="3dp" android:text="SMS" /> <TextView android:id="@+id/call" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableEnd="@drawable/call" android:drawableRight="@drawable/call" android:gravity="center" android:text="CALL" /> <TextView android:id="@+id/email" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:drawableEnd="@drawable/mail" android:drawablePadding="3dp" android:drawableRight="@drawable/mail" android:text="MAIL" /> 

Answer 1

Created a custom button that does not require layout layouts and can, if necessary, align the displayed images.

Button.xml Layout File:

 <Button xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/custom_button" style="@style/custom_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:drawablePadding="5dp" android:gravity="center" /> 

Custom Button Class:

 public class DrawableAlignedButton extends RelativeLayout { private View view; private Button button; /** * @param context * used to inflate the View. * @param attrs * XML defined attributes. */ public DrawableAlignedButton(final Context context, final AttributeSet attrs) { super(context, attrs); init(context, attrs); } /** * @param context * used to inflate the View. */ public DrawableAlignedButton(final Context context) { super(context); init(context, null); } /** * @param context * used to inflate the View. * @param attrs * XML defined attributes. * @param style * the style for the View. */ public DrawableAlignedButton(final Context context, final AttributeSet attrs, final int style) { super(context, attrs, style); init(context, attrs); } private void init(final Context context, final AttributeSet attributeSet) { view = ((Activity) getContext()).getLayoutInflater().inflate(R.layout.button, this, true); button = (Button) view.findViewById(R.id.custom_button); String buttonText = null; int drawableStart = 0; int drawableEnd = 0; if (attributeSet != null) { final TypedArray a = context.getTheme().obtainStyledAttributes(attributeSet, R.styleable.CustomButtonStyle, 0, 0); buttonText = a.getString(R.styleable.CustomButtonStyle_buttonText); drawableStart = a.getResourceId(R.styleable.CustomButtonStyle_buttonDrawableStart, 0); drawableEnd = a.getResourceId(R.styleable.CustomButtonStyle_buttonDrawableEnd, 0); a.recycle(); } FontUtil.getInstance(context).useNormalRegularFont(button); if (buttonText != null) { button.setText(buttonText); } button.setCompoundDrawablesRelativeWithIntrinsicBounds(drawableStart, 0, drawableEnd, 0); } /** * Sets the button text. * * @param text * the text to be set. */ public void setButtonText(final String text) { if (button != null) { button.setText(text); } } /** * Sets the drawable to the button. * * @param drawableStart * the drawable to set at the beginning of the text. * @param drawableEnd * the drawable to set at the end of the text. */ public void setDrawableStart(final int drawableStart, final int drawableEnd) { if (button != null) { button.setCompoundDrawablesRelativeWithIntrinsicBounds(drawableStart, 0, drawableEnd, 0); } } } 

How to use it in XML:

 <com.package.view.DrawableAlignedButton xmlns:drawableAlignedButton="http://schemas.android.com/apk/res-auto" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/transparent_button_selector" drawableAlignedButton:buttonDrawableStart="@drawable/small_active" drawableAlignedButton:buttonText="Button Text" /> 

Answer 2

Try to build around this.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:color/transparent" android:orientation="horizontal" android:padding="10dp"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:gravity="center" android:layout_weight="1"> <TextView android:id="@+id/sms" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:layout_marginRight="2dp" android:gravity="center" android:drawableRight="@drawable/message" android:text="SMS" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:gravity="center" android:layout_weight="1"> <TextView android:id="@+id/call" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableRight="@drawable/call" android:gravity="center" android:text="CALL" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:gravity="center" android:layout_weight="1"> <TextView android:id="@+id/email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableRight="@drawable/mail" android:gravity="center" android:text="MAIL" /> </LinearLayout> </LinearLayout> 

Answer 3

The main problem is that you set layoutWidth = 0dp and weight 1. This makes each TextView the maximum width according to the weight. DrawableRight / drawableEnd sets the drawable resource to be drawn on the far right edge of the view. If you want this layout to simply wrap it in another viewGroup, as shown in @Dhinakaran's figure. A better approach would be to use a tab layout .

Answer 4

Instead of using multiple line layouts, you can use relative layout.

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <RelativeLayout android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="bottom" android:layout_weight=".33" android:gravity="center_horizontal|center_vertical"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="Small Text" android:textAppearance="?android:attr/textAppearanceSmall"/> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toEndOf="@+id/textView" android:layout_toRightOf="@+id/textView" android:src="@android:drawable/btn_star"/> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="bottom" android:layout_weight=".33" android:gravity="center_horizontal|center_vertical"> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="Small Text" android:textAppearance="?android:attr/textAppearanceSmall"/> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toEndOf="@+id/textView2" android:layout_toRightOf="@+id/textView2" android:src="@android:drawable/btn_star"/> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="bottom" android:layout_weight=".33" android:gravity="center_horizontal|center_vertical"> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="Small Text" android:textAppearance="?android:attr/textAppearanceSmall"/> <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toEndOf="@+id/textView3" android:layout_toRightOf="@+id/textView3" android:src="@android:drawable/btn_star"/> </RelativeLayout> </LinearLayout> 

Result