Android action bar not placing buttons linearly - java

I have an activity where I am showing ActionBar. I have split mode enabled and on bottom bar i am showing 4 menu items. The icons are all sized 32 dp. However all the icons are not horizontally aligned.
The first two buttons are closer to each other. The third button takes half of action bar space and 4th button is relatively on right.
On pressed 3rd Button shows the space taken is much more.
What is this behavior and how to fix it?

Provided the images are all the same width, you have two options:
Use weightSum and layout_weight to set the icons to take up equal amounts of spacing.
Manually set the padding, like so:
<style name="AppTheme" parent="Theme.Sherlock">
<item name="actionButtonStyle">#style/MyActionButtonStyle</item>
<item name="android:actionButtonStyle">#style/MyActionButtonStyle</item>
</style>
<style name="MyActionButtonStyle" parent="Widget.Sherlock.ActionButton">
<item name="android:minWidth">32dip</item>
<item name="android:padding">0dip</item>
</style>

Make sure all the images are of same size.
If you are using custom view to inflate into actionbar, use LinearLayout and set LinearLayout's layoutWeightSum="4" and give layout_weight="1" to all it's child.
Edit : as per your comment, in top custom_layout.xml use the below layout. Also note android:layout_width="0dp" in the parentlayout
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/img" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/img" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/img" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/img" />
</LinearLayout>

Related

how to change color of the scrollview max stretch indicator

i m creating an application in which there is a horizontal scrollview when the user scrolls the he scrollview to max length then there comes an curve like structure which can be seen in the screenshot which indicates that you have reached the max length. How can i change the color of that curve as it is blue in this application which is not looking good
Try this
android:scrollbarThumbVertical="#FF94CC"
You can use android:colorEdgeEffect for change edge color of ScrollView, RecyclerView etc.
<style name="HorizontalScrollViewStyle">
<item name="android:colorEdgeEffect">#android:color/holo_green_dark</item>
</style>
Use this theme in your HorizontalScrollView :
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none"
android:theme="#style/HorizontalScrollViewStyle">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
......
</LinearLayout>
</HorizontalScrollView>
NOTE - android:colorEdgeEffect is only available for API 21 and above.

How do I change the background of a button in android?

This is how the button looks right now:
android:background= "#color/white" does not change anything.
Code:
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="Button"
android:background="#color/white"/>
Use app:backgroundTint="#FFFFFF"
If you want to use a selector, you will need to have android:background="#drawable/your_button_selector_id" as the button background for the selector to work.
Selector:
<selector xmlns:android="schemas.android.com/apk/res/android">
<item android:drawable="#color/white" android:state_selected="true" />
<item android:drawable="#color/black" android:state_selected="false" /> </selector>
Since you are using a color just use the app:backgroundTint attribute:
<Button
app:backgroundTint="#color/white"/>
If you just need rounded corners with a stroke, you don't need a drawable.
For it use:
<com.google.android.material.button.MaterialButton
app:cornerRadius="16dp"
app:backgroundTint="#color/white"
app:strokeColor="#color/black"
android:textColor="#color/black"
app:strokeWidth="2dp" />
Did you add value for white in your colors.xml?
if not open colors.xml and add
<color name="white">#FFFFFF</color>
Full Explanation here
https://stackoverflow.com/a/2749027/7174681

How to display an image in navigation drawer

I am trying to make my first hamburger menu with some images, but they are displayed in grey scale, not the real image. Here is a photo of how it looks:
And here is the code for the XML file:
<item
android:id="#+id/desp_mercedes"
android:icon="#drawable/mercedes"
android:title="Mercedes" />
<item
android:id="#+id/desp_audi"
android:icon="#drawable/audi"
android:title="Audi" />
<item
android:id="#+id/desp_bmw"
android:icon="#drawable/bmw"
android:title="BMW" />
I want to know how to display the original images. I have both SVG and PNG files for better quality.
In your nav_header_main.xml layout resource file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/nav_header"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorAccent"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:gravity="bottom"
android:orientation="vertical"
android:padding="16dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
//here you can add your image src
<ImageView
android:id="#+id/nav_header_imageView"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="#drawable/ic_imageview" />
<TextView
android:id="#+id/nav_header_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:text="Chike Mgbemena"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
You can maybe try this out: How do I customize the navigation drawer in Android Studios?
TL;DR: Create a ListView in your DrawerLayout with the appropriate implementation, Adapter, item.xml and such.
I found the way to display the original images, here is the fragment of code:
navigationView.setItemIconTintList(null);
"navigationView" is the name for my drawer, change it to yours on your MainActivity

Make only a part of ListView element change when clicked

I find it very difficult to explain my problem to a search engine, or to anyone for that matter. I'll do my best to explain it. I have a ListView and I made custom views for elements in the ListView. This is the XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="#dimen/list_item_height"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:singleLine="true"
android:ellipsize="marquee"
android:textColor="#color/black"
android:gravity="center"
android:background="#drawable/spinner_dropdown_style"/>
<View
android:id="#+id/divider"
android:layout_width="fill_parent"
android:layout_height="5dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/text1"
android:background="#drawable/shadow" />
</RelativeLayout>
And this is how the ListView looks like:
As you you can see, the divider is always grey but when ListView element is clicked, the divider turns blue. This is the problem. I only want the white part of the element to turn green and the grey divider to stay grey.
This is the spinner_dropdown_style (selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:drawable="#android:color/transparent" />
<item android:state_pressed="true"
android:drawable="#color/button_color_pressed" />
</selector>
How do I make it so that selector will only work on the white area and the grey divider stays grey even when element is clicked?
add android:divider="#layout/id of layout" this line in your list view
make another layout for
<View android:id="#+id/divider"
android:layout_width="fill_parent"
android:layout_height="5dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/text1"
android:background="#drawable/shadow" />
add remove element.
hope this will help out
add to your list view in xml:
android:drawSelectorOnTop="false"
android:cacheColorHint="#00000000"
The ListView has its own selector that it applies to selected items. You are just toggling the background of the TextView, not the entire selected item. To do that, you can try adding this to your listview:
android:drawSelectorOnTop="true"
android:listSelector="#color/button_color_pressed"

Android ListView row layout ignoring padding

I'm sure this is something simple that I am overlooking but I can't figure it out. I have a ListView using a custom adapter with a simple layout and my padding value seems to be ignored. Here's how I want the layout to be:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="#style/Widget.Layout.ComponentEntry" android:padding="#dimen/preferred_padding">
<include layout="#layout/component_entry_summary" />
</LinearLayout>
But the padding is ignored. If I use a nested LinearLayout then it works but the inner LinearLayout seems pointless. This works:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="#style/Widget.Layout.ComponentEntry">
<LinearLayout android:layout_height="match_parent" android:layout_width="match_parent" android:padding="#dimen/preferred_padding">
<include layout="#layout/component_entry_summary" />
</LinearLayout>
</LinearLayout>
The first layout works outside of a ListView so I'm stumped. For reference here is the style used (which also specifies a padding):
<style name="Widget">
<item name="android:textAppearance">#style/TextAppearance</item>
</style>
<style name="Widget.Layout">
<!-- Empty Style -->
</style>
<style name="Widget.Layout.ListViewItem">
<item name="android:background">#drawable/listview_item_background</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">match_parent</item>
<item name="android:padding">#dimen/preferred_padding</item>
</style>
<style name="Widget.Layout.ComponentEntry" parent="Widget.Layout.ListViewItem">
<item name="android:layout_height">#dimen/listview_item_height</item>
</style>
And the included layout:
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<ImageView android:id="#+id/iconImage"
android:layout_gravity="center_vertical"
android:layout_height="#dimen/icon_size"
android:layout_width="#dimen/icon_size"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<LinearLayout android:layout_gravity="center_vertical"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:paddingLeft="#dimen/preferred_padding"
android:orientation="vertical">
<TextView android:id="#+id/topText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingLeft="#dimen/preferred_padding"
android:singleLine="true"
android:text="#string/app_name"
android:textColor="#color/header_text_enabled"
android:textStyle="bold" />
<TextView android:id="#+id/bottomText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:paddingLeft="#dimen/preferred_padding"
android:singleLine="true"
android:text="#string/app_name"
android:textColor="#color/header_text_enabled" />
</LinearLayout>
</merge>
Here's how layout is inflated (I was originally supplying a null parent and thought that was the issue but it doesn't seem to be:
public View getView(int position, View view, ViewGroup parent) {
ViewHolder viewHolder;
if (view == null) {
view = _layoutInflater.inflate(_layoutResourceId, parent, false);
...
I ran into the same with issue,when I removed the code to set the background the padding worked.
Edit: Found out what is causing it, it is the padding line in the 9 patch images, I thought if you left it out of the drawing it would use the padding in the layout xml. But it actually then uses the stretchable area also as the drawable area.
If the padding lines are not included, Android uses the left and top lines to define this drawable area, effectively defining the padding.
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
Removing the background caused the padding on the outer LinearLayout to start working. Haven't dug into why yet but the problem is (partially) resolved at least.

Categories