Daniel Gustafsson
Daniel Gustafsson

Reputation: 1817

picture to the left and text in center

I want the little icon in my custom button to be aligned to the left and both textviews to be centered in the relativeview. How can i do that? As you can se i try to center the text horizontal and i try to align the icon to the left but it doesn't work.

 <TableRow
        android:gravity="center_horizontal"
        android:layout_marginTop="10dp">
        <RelativeLayout
            android:clickable="true"
            android:id="@+id/Imagesbtn"
            android:background="@drawable/MainButtonLayout"
            android:layout_height="100dp"
            android:layout_width="wrap_content"
            android:layout_marginBottom="20dp"
            android:gravity="center_horizontal"
            android:paddingTop="20dp"
            android:paddingBottom="20dp">
            <ImageView
                android:id="@+id/IconImage"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_action_pictureblack"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true" />
            <TextView
                android:id="@+id/largeTextImages"
                android:text="Images"
                android:layout_toRightOf="@id/IconImage"
                android:layout_width="wrap_content"
                android:gravity="center_horizontal"
                android:textSize="30dp"
                android:layout_marginLeft="30dp"
                android:textColor="#000000"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/smallTextImages"
                android:text="Acces images"
                android:layout_below="@id/largeTextImages"
                android:textSize="10dp"
                android:layout_marginLeft="100dp"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:textColor="#000000" />
        </RelativeLayout>
    </TableRow>

This is MainButtonLayout:

<?xml version="1.0" encoding="UTF-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android">
   <solid android:color="#FFFFFF"/>
    <!--<stroke android:width="400dp" android:color="#B1BCBE" />-->
    <corners android:radius="4dip"/>
   <padding android:left="0dip" android:top="0dip" android:right="0dip"  android:bottom="0dip" />

    </shape>

enter image description here

I want the text to be aligned in the middle so that the center of the text is right on the red line and i want all the icons to be centered on the yellow line. Do you get it?:) Here is what i get: enter image description here

Upvotes: 0

Views: 74

Answers (2)

vipul mittal
vipul mittal

Reputation: 17401

If you wan text to be horizontally center aligned try this:

<RelativeLayout
    android:id="@+id/Imagesbtn"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp"
    android:background="@drawable/mainbuttonlayout"
    android:clickable="true"
    android:paddingBottom="20dp"
    android:paddingTop="20dp" >

    <ImageView
        android:id="@+id/IconImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:src="@drawable/icon" />

    <TextView
        android:id="@+id/largeTextImages"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_toRightOf="@id/IconImage"
        android:gravity="center_horizontal"
        android:text="Images"
        android:textColor="#000000"
        android:textSize="30dp" />

    <TextView
        android:id="@+id/smallTextImages"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/largeTextImages"
        android:layout_marginLeft="30dp"
        android:layout_toRightOf="@id/IconImage"
        android:gravity="center_horizontal"
        android:text="Acces images"
        android:textColor="#000000"
        android:textSize="10dp" />
</RelativeLayout>  

Example

enter image description here

EDIT1

    <ImageView
        android:id="@+id/IconImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/largeTextImages"
        android:src="@drawable/ic_launcher"  />

    <TextView
        android:id="@+id/largeTextImages"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_centerHorizontal="true"
        android:text="Images"
        android:textColor="#000000"
        android:textSize="30dp" />

    <TextView
        android:id="@+id/smallTextImages"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/largeTextImages"
        android:layout_marginLeft="30dp"
        android:gravity="center_horizontal"
        android:layout_centerHorizontal="true"
        android:text="Acces images"
        android:textColor="#000000"
        android:textSize="10dp" />
</RelativeLayout>

Image:

enter image description here

Upvotes: 1

GrIsHu
GrIsHu

Reputation: 23638

Remove the TableRow from your code. If you have not used TableLayout then there is no need of TableRow also.

Try out below code:

 <RelativeLayout
        android:id="@+id/Imagesbtn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:background="@drawable/mainbuttonlayout"
        android:clickable="true"
        android:paddingBottom="20dp"
        android:paddingTop="20dp" >

        <ImageView
            android:id="@+id/IconImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:src="@drawable/icon" />

        <TextView
            android:id="@+id/largeTextImages"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_toRightOf="@id/IconImage"
            android:gravity="center_horizontal"
            android:text="Images"
            android:textColor="#000000"
            android:textSize="30dp" />

        <TextView
            android:id="@+id/smallTextImages"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/largeTextImages"
            android:layout_marginLeft="30dp"
            android:layout_toRightOf="@id/IconImage"
            android:gravity="center_horizontal"
            android:text="Acces images"
            android:textColor="#000000"
            android:textSize="10dp" />
    </RelativeLayout>

enter image description here

Upvotes: 0

Related Questions