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.
Related
I have my views in a scroll view so that if the content is bigger than the screen size, the user can scroll down. I have noticed a weird thing.
The first time the content comes up, it doesn't scroll. However, when the user changes a setting and the content of the views which are inside the scroll view reloads it does become scrollable.
Why is this? Is it clear what I mean?
EDIT: This only happens on my Nexus 5X. But when I used a Samsung J10 it works right away.
My XML is a relative layout, with a child element of the scroll view, which contains other views.
Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.apps.reuven.egertandcohentravel.Activities.HomeActivity"
tools:showIn="#layout/activity_home">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="50dp"
android:id="#+id/progressBar"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:visibility="gone"
/>
<TextView
android:id="#+id/textViewLinkToOrder"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click here to book travel insurance."
android:textColor="#color/colorPrimary"
android:layout_centerHorizontal="true"
android:textSize="24sp"
android:gravity="center"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/buttons_linear_layout"
android:orientation="horizontal"
android:layout_below="#id/textViewLinkToOrder">
<Button
android:layout_width="200dp"
android:id="#+id/choose_country_button"
android:onClick="onChooseCountryButtonClick"
android:layout_height="wrap_content"
android:text="Choose country"
android:layout_marginLeft="5dp"
android:background="#color/colorPrimary"
android:layout_weight="1"
android:textColor="#ffff"
android:layout_marginRight="5dp"
android:layout_below="#id/textViewLinkToOrder"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="200dp"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:textColor="#fff"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:id="#+id/automatic_country_button"
android:layout_height="wrap_content"
android:text="My Location"
android:layout_below="#id/choose_country_button"
android:layout_centerHorizontal="true"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayoutAllDetails"
android:layout_below="#id/buttons_linear_layout"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="No country yet selected"
android:gravity="center"
android:id="#+id/textView_coumtry_name"
android:textColor="#000000"
android:textSize="30sp"
android:padding="5dp"
android:textStyle="bold"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/police"/>
<TextView
android:textSize="17sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Police"
android:textColor="#000000"
android:layout_gravity="center_vertical" />
<TextView
android:layout_marginLeft="10dp"
android:textSize="17sp"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/police_text_view"
android:text=""
android:textColor="#000000"
android:layout_gravity="center_vertical"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/police_phone_button"
android:layout_width="30dp"
android:layout_gravity="center_vertical"
android:layout_height="30dp"
android:src="#android:drawable/sym_action_call"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ambulance"/>
<TextView
android:textSize="17sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ambulance"
android:textColor="#000000"
android:layout_gravity="center_vertical" />
<TextView
android:layout_marginLeft="10dp"
android:textSize="17sp"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ambulance_text_view"
android:text=""
android:textColor="#000000"
android:layout_gravity="center_vertical"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
/>
<ImageView
android:layout_width="30dp"
android:layout_gravity="center_vertical"
android:layout_height="30dp"
android:src="#android:drawable/sym_action_call"
android:id="#+id/ambulance_phone_button"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/israel_consulate"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:textSize="17sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Israel Consulate"
android:textColor="#000000"
android:layout_gravity="center_vertical" />
<TextView
android:layout_marginLeft="10dp"
android:textSize="17sp"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/israel_consulate_text_view"
android:text=""
android:textColor="#000000"
android:layout_gravity="center_vertical"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
/>
<ImageView
android:layout_width="30dp"
android:layout_gravity="center_vertical"
android:layout_height="30dp"
android:src="#android:drawable/sym_action_call"
android:id="#+id/israel_phone_button"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/chabad"/>
<LinearLayout
android:layout_width="250dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:textSize="17sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Beit Chabad"
android:textColor="#000000"
android:layout_gravity="center_vertical" />
<TextView
android:layout_marginLeft="10dp"
android:textSize="17sp"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/chabad_address_text_view"
android:text="3 Blue Street, USA"
android:textColor="#000000"
android:layout_gravity="center_vertical"/>
<TextView
android:layout_marginLeft="10dp"
android:textSize="17sp"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/chabad_number_text_view"
android:text="+44 456 3245234"
android:textColor="#000000"
android:layout_gravity="center_vertical"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
/>
<ImageView
android:layout_width="30dp"
android:layout_gravity="center_vertical"
android:layout_height="30dp"
android:src="#android:drawable/sym_action_call"
android:id="#+id/chabad_phone_button"
/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>
Thanks very much, I can't figure this one out.
I also had the same problem and by adding a TableLayout inside ScrollView solved the problem for me. Then, add your content (RelativeLayout) inside TableLayout.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1">
<-- Your RelativeLayout goes here -->
</TableLayout>
</ScrollView>
Let me know if that solved the problem. Do not forget to add the attribute fillViewport=true to ScrollView so the TableLayout match it's parent's view width and height.
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>
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>
I have created this xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="11" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#color/tabs_color">
<Button
android:layout_gravity="start|center"
android:layout_height="30dp"
android:layout_width="30dp"
android:id="#+id/returnButton"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/top_menu_back_selector"/>
<TextView android:id="#+id/textView1"
android:background="#color/black"
android:layout_gravity="center|center"
android:layout_width="180dp"
android:layout_height="match_parent"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white">
</TextView>
</LinearLayout>
<ListView
android:id="#+id/listView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="9"
android:fillViewport="true" />
<FrameLayout
android:background="#color/tabs_color"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp"
android:orientation="horizontal">
<Button
android:layout_height="30dp"
android:layout_width="30dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:background="#drawable/menu_button_selector"
android:id="#+id/OptionsButton"
android:layout_gravity="start|center_vertical"/>
<Button
android:layout_height="30dp"
android:layout_width="30dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:background="#drawable/add_button_selector"
android:layout_gravity="end|center_vertical"
android:id="#+id/AddItemButton"/>
</FrameLayout>
</LinearLayout>
But as result i have textview left aligned just right behind button returnButton
So i get my textview position is like:
returnButtonTextView..................
and i want like:
returnButton......TextView............
And this is not works too:
((TextView) listname).setGravity(Gravity.CENTER);
What is wrong?
You should better use RelativeLayout rather than LinearLayout if you need more flexibility when creating layouts.
Replace
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#color/tabs_color">
<Button
android:layout_gravity="start|center"
android:layout_height="30dp"
android:layout_width="30dp"
android:id="#+id/returnButton"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/top_menu_back_selector" />
<TextView
android:id="#+id/textView1"
android:background="#color/black"
android:layout_gravity="center|center"
android:layout_width="180dp"
android:layout_height="match_parent"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</LinearLayout>
with
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#color/tabs_color">
<Button
android:layout_centerVertical="true"
android:layout_height="30dp"
android:layout_width="30dp"
android:id="#+id/returnButton"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/top_menu_back_selector" />
<TextView
android:id="#+id/textView1"
android:background="#color/black"
android:gravity="center"
android:layout_centerInParent="true"
android:layout_width="180dp"
android:layout_height="match_parent"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</RelativeLayout>
Try to change:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#color/tabs_color">
<Button
android:layout_gravity="start|center"
android:layout_height="30dp"
android:layout_width="30dp"
android:id="#+id/returnButton"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/top_menu_back_selector"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView android:id="#+id/textView1"
android:background="#color/black"
android:layout_gravity="center|center"
android:layout_width="180dp"
android:textAlignment="center"
android:layout_height="match_parent"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
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