I'm trying to overlap an ImageView on top of another one inside an Async. The idea is to pass an array of size 16 and to place an overlapping picture on spots that are marked true (the first square is 0, the last is 15). The constructor for the Async class takes in an array of booleans and creates an array of ImageViews with the picture otherwise leaves it blank. Since that wasn't working as intended I tried manually adding 2.
Instead when I place them, the starting point is not the top left corner as i expect. For a visual, I'm trying to get the green/blue box on top of one of the black and white ones http://i.imgur.com/yrez0t7.jpg
fl = (FrameLayout) findViewById(R.id.papa);
Bitmap bmp;
bmp=BitmapFactory.decodeResource(getResources(),R.drawable.effect_fire);
bmp=Bitmap.createScaledBitmap(bmp, btn1.getWidth(), btn1.getHeight(), true);
iv1.setImageBitmap(bmp);
iv2.setImageBitmap(bmp);
iv1.setLeft(0);
iv1.setTop(0);
iv2.setLeft(btn1.getWidth());
iv2.setTop(0);
iv1.setScaleType(ImageView.ScaleType.CENTER);
iv2.setScaleType(ImageView.ScaleType.CENTER);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(btn1.getHeight(), btn1.getWidth());
fl.addView(iv1);
fl.addView(iv2);
I'd expect two squares next to each other but i only get one and not even in the right place. I originally tried setX/setY but that didn't work either. My xml file consists of a FrameLayout (papa) with lots of LinearLayouts and other misc views inside.
edit: this is the xml file
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/papa"
android:orientation="vertical" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/game"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ProgressBar
android:layout_width="match_parent"
android:layout_height="20dp"
android:id="#+id/healthBar"
android:progressDrawable="#drawable/healthbar_high"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminate="false" />
<ProgressBar
android:layout_width="match_parent"
android:layout_height="10dp"
android:id="#+id/manaBar"
android:progressDrawable="#drawable/manabar"
style="?android:attr/progressBarStyleHorizontal"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2">
<ImageButton
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2">
<ImageButton
android:id="#+id/btn5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2">
<ImageButton
android:id="#+id/btn9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2">
<ImageButton
android:id="#+id/btn13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
<ImageButton
android:id="#+id/btn16"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="hit"/>
</LinearLayout>
<ProgressBar
android:layout_width="match_parent"
android:layout_height="6dp"
android:id="#+id/experienceBar"
android:progressDrawable="#drawable/levelbar"
style="?android:attr/progressBarStyleHorizontal"
/>
<!-- Ability Buttons -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/ability0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="abilityCast"
android:clickable="false"
android:text="0" />
<Button
android:id="#+id/ability1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="abilityCast"
android:clickable="false"
android:text="1" />
<Button
android:id="#+id/ability2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="abilityCast"
android:clickable="false"
android:text="2" />
<Button
android:id="#+id/ability3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:padding="0dp"
android:onClick="abilityCast"
android:clickable="false"
android:text="SUPER" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/gold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/gold"
android:textSize="20sp"/>
<TextView
android:id="#+id/attack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/attack"
android:textSize="20sp"/>
<TextView
android:id="#+id/defence"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/defence"
android:textSize="20sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/level"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/level"
android:textSize="20sp"/>
<TextView
android:id="#+id/weapon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="20sp"/>
<TextView
android:id="#+id/armor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="20sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Related
I'm using a TableLayout containing a row of ImageButtons and a row of TextViews.
The desired outcome is all the images aligned to center, columns distributed evenly, and the texts aligned just below the images. See example below:
What happens right now is that one of the images always exceeds the page boundaries. See image below:
Here is the XML code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:gravity="center"
android:orientation="horizontal">
<TableLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:stretchColumns="*">
<TableRow android:weightSum="1">
<ImageView
android:id="#+id/imageViewUrgent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/greyexclamation_trans"
android:tooltipText=""
android:layout_marginHorizontal="5dp"
android:layout_weight="0.25"/>
<ImageButton
android:id="#+id/imageButtonRead"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/profile"
android:tooltipText=""
android:layout_marginHorizontal="5dp"
android:hapticFeedbackEnabled="true"
android:background="?android:selectableItemBackground"
android:layout_weight="0.25"/>
<ImageButton
android:id="#+id/imageButtonReply"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_marginHorizontal="5dp"
android:src="#drawable/ic_baseline_reply_24"
android:background="?android:selectableItemBackground"
android:tooltipText=""
android:layout_weight="0.25" />
<ImageButton
android:id="#+id/imageButtonForward"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_marginHorizontal="5dp"
android:src="#drawable/ic_baseline_forward_to_inbox_24"
android:background="?android:selectableItemBackground"
android:tooltipText=""
android:layout_weight="0.25"/>
</TableRow>
<TableRow android:layout_weight="1">
<TextView
android:id="#+id/textViewUrgent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
android:text="text1"
android:layout_marginHorizontal="5dp"
android:layout_weight="0.2"/>
<TextView
android:id="#+id/textViewRead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
android:text="text2"
android:layout_marginHorizontal="5dp"
android:layout_weight="0.2"/>
<TextView
android:id="#+id/textViewReply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
android:text="text3"
android:layout_marginHorizontal="5dp"
android:layout_weight="0.2"/>
<TextView
android:id="#+id/textViewForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
android:text="text4"
android:layout_marginHorizontal="5dp"
android:layout_weight="0.2"/>
</TableRow>
</TableLayout>
</LinearLayout>
As you can see, I've used android:stretchColumns="*" for the table and android:adjustViewBounds="true" for each of the images.
I've also set an external LinearLayout with weightSum=1, gravity="center" and the TableLayout layout_weight=0.8 so that the table is centered and takes 80% of the page width.
I have then tried both setting weightSum=1 for the TableRow and each image and text as layout_weight=0.25, and setting no weightSum at all for the TableRow and each image and text as layout_weight=0.2 (considering the 0.8 for the entire table).
All of which gave the same result, the leftmost image always disappearing to the left and the texts not being aligned with the images.
Any help will be appreciated!
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:weightSum="1"
android:orientation="vertical"
android:layout_height="match_parent">
<TableLayout
android:layout_width="match_parent"
android:layout_weight=".8"
android:layout_height="0dp">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageViewUrgent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_seeding_rect"
android:tooltipText="" />
<ImageButton
android:id="#+id/imageButtonRead"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginHorizontal="5dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="?android:selectableItemBackground"
android:hapticFeedbackEnabled="true"
android:scaleType="fitCenter"
android:src="#drawable/ic_seeding_rect"
android:tooltipText="" />
<ImageButton
android:id="#+id/imageButtonReply"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginHorizontal="5dp"
android:layout_weight="1"
android:background="?android:selectableItemBackground"
android:scaleType="fitCenter"
android:src="#drawable/ic_seeding_rect"
android:tooltipText="" />
<ImageButton
android:id="#+id/imageButtonForward"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginHorizontal="5dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="?android:selectableItemBackground"
android:scaleType="fitCenter"
android:src="#drawable/ic_seeding_rect"
android:tooltipText="" />
</TableRow>
<TableRow>
<TextView
android:id="#+id/textViewUrgent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginHorizontal="5dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="text1"
android:textSize="12dp" />
<TextView
android:id="#+id/textViewUrgent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginHorizontal="5dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="text1"
android:textSize="12dp" />
<TextView
android:id="#+id/textViewUrgent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginHorizontal="5dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="text1"
android:textSize="12dp" />
<TextView
android:id="#+id/textViewUrgent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginHorizontal="5dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="text1"
android:textSize="12dp" />
</TableRow>
</TableLayout>
<TextView
android:layout_width="match_parent"
android:layout_weight=".2"
android:gravity="center"
android:text="Remaining 20 %"
android:background="#android:color/holo_red_dark"
android:layout_height="0dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Solved it with a little cheating,
Two LinearLayouts (one for each row) proved much more effective and easily understandable.
I've defined each LinearLayout with weightSum="1" and with a layout_width="match_parent" - taking up the entire page width.
Each image or text got layout_weight="0.2" (for a total of 80% of page width, leaving 20% for margins as desired).
Here is the working code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:gravity="center">
<ImageView
android:id="#+id/imageViewUrgent"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/greyexclamation_trans"
android:layout_marginHorizontal="5dp"
android:layout_weight="0.2"/>
<ImageButton
android:id="#+id/imageButtonRead"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/profile"
android:layout_marginHorizontal="5dp"
android:hapticFeedbackEnabled="true"
android:background="?android:selectableItemBackground"
android:layout_weight="0.2"/>
<ImageButton
android:id="#+id/imageButtonReply"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_marginHorizontal="5dp"
android:src="#drawable/ic_baseline_reply_24"
android:background="?android:selectableItemBackground"
android:layout_weight="0.2" />
<ImageButton
android:id="#+id/imageButtonForward"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_marginHorizontal="5dp"
android:src="#drawable/ic_baseline_forward_to_inbox_24"
android:background="?android:selectableItemBackground"
android:layout_weight="0.2"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:gravity="center"
android:layoutDirection="rtl"
android:textAlignment="center">
<TextView
android:id="#+id/textViewUrgent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAlignment="center"
android:textSize="12dp"
android:text="text1"
android:layout_weight="0.2"/>
<TextView
android:id="#+id/textViewRead"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAlignment="center"
android:textSize="12dp"
android:text="text2"
android:layout_weight="0.2"/>
<TextView
android:id="#+id/textViewReply"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAlignment="center"
android:textSize="12dp"
android:text="text3"
android:layout_weight="0.2"/>
<TextView
android:id="#+id/textViewForward"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAlignment="center"
android:textSize="12dp"
android:text="text4"
android:layout_weight="0.2"/>
</LinearLayout>
Thanks End User for helping to spot some of the problems with the TableLayout.
I am trying to figure how I can properly layout an edit text in between two views so that It will take up the whole width nicely in all screen sizes.
Here is my xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:src="#drawable/country_india"/>
<EditText
android:layout_width="250dp"
android:layout_height="wrap_content"
android:hint="Leave a comment"
android:layout_gravity="bottom"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"/>
</LinearLayout>
Here is what it looks like:
Hope you guys can help!
Try this :-
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:src="#drawable/country_india"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:contentDescription="#string/app_name" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:hint="Leave a comment" />
<ImageButton
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"
android:contentDescription="#string/app_name" />
</LinearLayout>
Use this below code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Leave a comment"
android:layout_weight="3"
/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
Add android:layout_weight="1" to editText
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:src="#drawable/country_india"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:contentDescription="#string/app_name" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:hint="Leave a comment" />
<ImageButton
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"
android:contentDescription="#string/app_name" />
</LinearLayout>
you should be using android:layout_weight="1" instead of fixing the width if you'd like to fit the EditText to fit in.
<LinearLayout
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_width="50dp"
android:src="#drawable/country_india"/>
<EditText
android:hint="Leave a comment"
android:layout_gravity="bottom"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_width="0dp"/>
<ImageButton
android:background="#color/white"
android:layout_gravity="bottom"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:src="#drawable/icon_pencil_2_small"/>
</LinearLayout>
I would do it this way if I were you. Populate the weight and you're good to go.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:weightSum="1.5">
<ImageView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:src="#drawable/country_india"
android:layout_weight="0.25"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Leave a comment"
android:layout_gravity="bottom"
android:layout_weight="1"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="50dp"
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"
android:layout_weight="0.25"/>
</LinearLayout>
Try to make your Edittext layout_weight="1"in the middle of 2 ImageView (or something):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/address_item_image_view"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center"
android:layout_margin="5dp"
android:src="#drawable/com_facebook_tooltip_black_background"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:hint="This is an edit text"
android:layout_weight="1"/>
<ImageView
android:id="#+id/address_item_arrow_image_view"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="center"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/messenger_bubble_large_blue"/>
</LinearLayout>
I made ImageButton menu design in the hopes that its size can adjust the screen:
but after I test using with smartphone 3-inch 320x480
, 4-inch 480x800, 5-inch 720x1280, view ImageButton is mess.
I've tried using TableLayout, LinearLayout, GridLayout,
and FrameLayout, but the result is the same.
Thank you in advance.This picture my trial results
This my XML code :
<RelativeLayout 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:background="#drawable/bg"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linear1">
<ImageView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:src="#drawable/title"
android:contentDescription="title"/>
</LinearLayout>
<ImageButton
android:id="#+id/imagebutton0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linear1"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="0"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton0"
android:layout_toLeftOf="#+id/imagebutton4"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="2"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton0"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="4"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton0"
android:layout_toRightOf="#+id/imagebutton4"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="3"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton4"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="1"
tools:ignore="contentDescription" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:id="#+id/linear2"
android:layout_below="#+id/imagebutton1">
<TextView
android:id="#+id/ib1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib1"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
<TextView
android:id="#+id/ib2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib2"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
<TextView
android:id="#+id/ib3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib3"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
<TextView
android:id="#+id/ib4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib4"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
</LinearLayout>
</RelativeLayout>
I created a scratch which will define layout with linear and weight
I hope it will help you out
Also attached code with screen shots
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>
I currently have 4 ImageButtons in a layout that takes only half of the screen height. I would like the ImageButtons to be placed evenly in the layout. Here is what I have:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
This works, since here is the result:
The issue is, 1: I would like to add text under each button and I am not sure how that is going to work and 2: the white spots to the right and left of the ImageButtons are active, as if they were parts of the button. Is there a better way to do this?
You can do something like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/section1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 1"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 2"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 3"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img4"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 4"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
Result
and for second part of question you should set click listener on entire relative layout. for example for tap on first cell :-
xml
android:id="#+id/section1"
JAVA
findviewbyid(R.id.section1).setOnClickListener(...)
Another (and better) alternative is to work with TableLayout:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn1"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn1"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn2"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn2"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 2"/>
</RelativeLayout>
</TableRow>
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn3"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn3"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 3"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn4"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn4"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 4"/>
</RelativeLayout>
</TableRow>
</TableLayout>
my Internal Linear Layout (with blue background) seems to have some margin at bottom with white space, do not know how to remove this.
The External Linear layout also have no padding or margin , from where this whitespace came
[![<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#E78F23">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:clickable="true"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:onClick="dashboard"
android:src="#drawable/menu"/>
<TextView
android:id="#+id/ticket_reciever_header_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="25sp"
android:textColor="#ffffff"
android:text="Mike Smith"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#20000000"
android:layout_alignParentBottom="true">
</RelativeLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="35%0FF"
android:gravity="center_vertical"
android:layout_marginTop="55dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="35dp"
android:textSize="40sp"
android:textColor="#color/background_material_dark"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/layer"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:orientation="horizontal"
android:background="#91A4AB"
android:weightSum="3">
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="55dp">
<TextView
android:id="#+id/product_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="AMG 020 ladies shirt"
android:layout_marginTop="6dp"
android:layout_marginLeft="12dp"
android:textSize="20sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/product_name"
android:text="Purple heather"
android:layout_marginLeft="12dp"
android:textSize="12sp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:clickable="true"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_alignParentRight="true"
android:src="#drawable/share_upper"/>
</RelativeLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/qr_code"
android:layout_marginTop="30dp"
android:layout_gravity="center"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#3E41B2"
>
<ImageButton
android:id="#+id/shedule"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/tecket_recieved_shedule"
android:layout_weight="1"
android:background="#00000000"/>
<ImageButton
android:id="#+id/location"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ticket_received_location"
android:background="#00000000"/>
<ImageButton
android:id="#+id/favourite"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/favourite"
android:layout_weight="1"
android:background="#00000000"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/share"
android:layout_weight="1"
android:background="#00000000"/>
</LinearLayout>
</LinearLayout>]
1]1
Just update your last Linear Layout Height . Set match_parent instead Hard-Coded 50dp .
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#3E41B2"
>
<ImageButton
android:id="#+id/shedule"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/tecket_recieved_shedule"
android:layout_weight="1"
android:background="#00000000"/>
<ImageButton
android:id="#+id/location"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ticket_received_location"
android:background="#00000000"/>
<ImageButton
android:id="#+id/favourite"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/favourite"
android:layout_weight="1"
android:background="#00000000"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/share"
android:layout_weight="1"
android:background="#00000000"/>
</LinearLayout>
try
android:layout_height="match_parent"
instead of
android:layout_height="50dp"
in your last LinearLayout.
hope this helps!
You have set the height of the layout as a fixed value (50dp). Change it so it takes all available space changing
android:layout_height="50dp"
for
android:layout_height="match_parent"
For future ui issues like this you can enable "Show layout bounds" in Developer Options. It will show the size of every view in the screen