CODEWITHSUNDEEP
androidandroid-layoutimageviewandroid-linearlayoutandroid-relativelayout
TormundThunderfist
TormundThunderfist

Reputation: 707

Center an imageview in half of parentview without using LinearLayout

The way my layout is designed at the moment is that I have a LinearLayout having a width="match_parent". This view has two ImageViews as its children, which take up half of the LinearLayouts width using weight="1"

The problem is that this way, onClicks are registered on transparent portions of the card, because the View is stretched.

Edit: I should have mentioned, that these circles are only supposed to represent image files and not circle-shapes filled with a solid color.

My current code:

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

    <ImageView

        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <ImageView

        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

</LinearLayout>

The red portion indicates touch areas

x

what I want is something like the following while keeping the ratios: this

I know that I could simply try to nest each ImageView in a RelativeLayout like so:

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

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <ImageView
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <ImageView
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>


</LinearLayout>

but nesting like this is pretty horrible form

Upvotes: 1

Views: 227

Answers (4)

Bali
Bali

Reputation: 759

use percentage relative layout no nesting required link here

Upvotes: 2

rhari
rhari

Reputation: 1367

You can see the color of the pixel that was touched and act accordingly :

 final Bitmap bitmap = ((BitmapDrawable)imageView.getDrawable()).getBitmap();
    imageView.setOnTouchListener(new OnTouchListener(){
        @Override
        public boolean onTouch(View v, MotionEvent event){
        int x = (int)event.getX();
        int y = (int)event.getY();
        int pixel = bitmap.getPixel(x,y);

        int redValue = Color.red(pixel);
        int blueValue = Color.blue(pixel);
        int greenValue = Color.green(pixel); 
        if(redValue != 255 && blueValue != 255 && greenValue != 255) {
            //Not the background, so handle the click
        }
        return false;
        }
   });

Upvotes: 0

Aleksandar G
Aleksandar G

Reputation: 1181

Try to create new component: res/drawable/my_circle.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/your_color" />
</shape>

And then set as source in your ImageView

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

    <ImageView

        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/my_circle" />

    <ImageView

        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/my_circle" />

</LinearLayout>

Upvotes: 0

noobEinstien
noobEinstien

Reputation: 3283

You can use RelativeLayout

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1">

    <ImageView
        android:layout_alignParentLeft="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageView
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

But this will cause overlapping sometime if the aspect ratio of screen is less.

Upvotes: 0

Related Questions