Make LinearLayout in FrameLayout opaque - android

I cannot find a way how to make linearLayout opaque. It's always transparent no matter what I do.
The layout looks like this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<LinearLayout
android:orientation="vertical"
android:id="#+id/error_panel"
android:layout_width="match_parent"
android:background="#color/gray_background_dark"
android:layout_height="wrap_content">
<TextView
android:id="#+id/error_message"
android:text="#string/dummy_number"
android:gravity="center_vertical|left"
android:textColor="#color/red"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_height="wrap_content" />
</LinearLayout>
<!-- The content of this scroll view is seen underneath the errorPanel -->
<ScrollView
android:layout_height="match_parent"
android:layout_width="match_parent">
<!-- Content of ScrollView -->
</ScrollView>
</FrameLayout>
How can I make the LinearLayout opaque? Maybe instead of setting just color I could try to use a solid drawable..?
Background
I am using appcompat v7 theme <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
Things I tried
Override the theme's panelBackground from transparent to <item name="android:panelBackground">#android:color/black</item>
Set background as background=#FF000000 on LinearLayout.
Set alpha as alpha=1 on LinearLayout.
Set background as drawable android:background="#drawable/background_error_panel" where the drawable is:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FF181818"/>
</shape>
Edit 3/25/2015
Maybe the animations are the problem..? i use scale anims and in code:
public void toggle() {
panel.setText("Some text Some text Some text Some text Some text ");
Animation slideIn = AnimationUtils.loadAnimation(MyApplication.context, R.anim.slide_in);
Animation slideOut = AnimationUtils.loadAnimation(MyApplication.context, R.anim.slide_out);
if (layout.getVisibility() == View.GONE) {
layout.setVisibility(View.VISIBLE);
layout.startAnimation(slideIn);
layout.setAlpha(1);
} else {
layout.startAnimation(slideOut);
layout.setVisibility(View.GONE);
}
}

It is your ScrollView being transparent. As per the docs,
Child views are drawn in a stack, with the most recently added child on top.
So you need to load the ScrollView first to have it in the background.

Related

Ripple effect drawable is distorted when applied over 9patch background

I have a 9 patch drawable which I want to use as a background on a view. I want the view to show a ripple effect that follows the outline of a 9 patch when the view is clicked. Here's my activity, layout, and drawable code.
MainActivity.kt:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val click = findViewById<ConstraintLayout>(R.id.container)
click.setOnClickListener { Toast.makeText(this, "Clicked", Toast.LENGTH_SHORT).show() }
}
}
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.antonc.testapp.MainActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="8dp"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:paddingTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#drawable/tooltip_background"
android:backgroundTint="#2681d8"
tools:layout_editor_absoluteX="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello test test !!!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
tooltip_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#33000000">
<item android:drawable="#drawable/tooltip_left_top"/>
<item android:id="#android:id/mask" android:drawable="#drawable/tooltip_left_top"/>
</ripple>
tooltip_left_top.9.png:
But when I click on it, the ripple drawable is very distorted, as if it's stretched to the view size without observing the stretch rules of 9 patch. How should I configure the ripple to make it be the same as the background?:
Update: I have reworked the answer to refine the issue. The following has been edited to reflect the changes.
TL;DR Do not use android:backgroundTint for ripple backgrounds based on nine-patch drawables at least for API 28. Set the tint in code.
This issue has something to do with the background tint. I will explain how I came to this conclusion by referring to the following video.
I will refer to the bubbles as view1 through view4 from top to bottom. I changed from your nine-patch to better see the patches since your nine-patch was mostly black.
View1, when click, shows the appropriate ripple effect. It has a ripple background but no background tint.
View2 is what you are seeing with your background - it is just messed up. This view has a background tint set in XML.
The height of view3 has been forced to the height of view1 to see how the ripple looks. As you can see, the ripple looks right for the height. It is the non-ripple background image that is distorted.
View4 is the same as view2 except that it has the tint for RippleDrawable added programmatically. As you can see, this view looks and behaves as it should.
Bottom line? Don't set the background tint for a nine-patch in XML. Set it in code. Is this a bug? Maybe.
Here is the support code for the video above.
activity_main.xml
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF"
android:fillViewport="true"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#drawable/bubble_background"
android:clickable="true" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#drawable/bubble_background"
android:backgroundTint="#color/background_tint"
android:clickable="true" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#drawable/bubble_background"
android:backgroundTint="#color/background_tint"
android:clickable="true" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#drawable/bubble_background"
android:clickable="true" />
</LinearLayout>
</ScrollView>
bubble_background.xml
<ripple
android:color="#33000000">
<item android:drawable="#drawable/ninepatch_bubble">
</item>
</ripple>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private LinearLayout mLayout;
private ImageView mImageView1;
private ImageView mImageView2;
private ImageView mImageView3;
private ImageView mImageView4;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLayout = findViewById(R.id.layout);
mImageView1 = findViewById(R.id.imageView1);
mImageView2 = findViewById(R.id.imageView2);
mImageView3 = findViewById(R.id.imageView3);
mImageView4 = findViewById(R.id.imageView4);
int bgTint = getResources().getColor(R.color.background_tint);
RippleDrawable rippleDrawable =(RippleDrawable) mImageView4.getBackground();
rippleDrawable.getDrawable(0).setTint(bgTint);
mImageView4.setBackground(rippleDrawable);
mLayout.post(new Runnable() {
#Override
public void run() {
mImageView3.getLayoutParams().height = mImageView1.getMeasuredHeight();
mLayout.requestLayout();
}
});
}
}
colors.xml
These were added to colors.xml:
<color name="background_tint">#2681d8</color>
<color name="ripple_tint">#33000000</color>
ninepatch_bubble.9.png
Try to use ripple effect like this:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/White">
<item android:drawable="#drawable/tooltip_left_top" />
<item android:id="#android:id/mask">
<color android:color="#color/your_tooltip_color_code" />
</item>
</ripple>
Update here if it works.

Google search alike SearchView

I've would like set to grey color(icons and text) but now is showing as white color.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Titulo_ventana"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="end"
android:orientation="horizontal"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="#dimen/cardview_default_elevation">
<android.support.v7.widget.SearchView
android:id="#+id/mySearchview"
android:label="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:theme="#style/Base.Widget.AppCompat.SearchView">
</android.support.v7.widget.SearchView>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
I'd would like to reach something like this searchview within the toolbar and gray textcolor:
The left and right menu icons are optional.
The searchview is foldable by default, I don't mind if this feature should be changed.
The search view, that you want to achieve in fact is not a SearchView. It's a custom component. Here's the view tree that can be obtained using Hierarchy Viewer tool:
Here's the OverlaySearchPlateContainer:
As you can see from package name, it is shipped with Play Services, thus source code is not available.
Nevertheless, we can compare that tree with the tree of SearchView. Here's tree that can be obtained when ordinary SearchView is used:
Thus, you can see, that OverlaySearchPlateContainer is not a descendant of a SearchView, hence the UI you want to achieve cannot be accomplished using solely styles/themes.
I would recommend to not reinvent a wheel and to utilize 3rd party libraries, for example SearchBar-SearchView, where SearchView widget looks like this:
I have one solution its working fine in my application. You may try this.
EditText txtSearch = (EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
txtSearch.setHint(getResources().getString(R.string.search));
txtSearch.setHintTextColor(Color.GRAY);
txtSearch.setTextColor(Color.GRAY);
You can set the background of search view
<android.support.v7.widget.SearchView
android:id="#+id/searchViewContact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
app:searchIcon="#mipmap/icon_search"
app:closeIcon="#mipmap/icon_close"
android:background="#drawable/search_view_background"
android:layout_margin="5dp">
</android.support.v7.widget.SearchView>
search_view_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#dcdee1"/>
<stroke
android:color="#d7d3d3"
android:width="1dp"/>
<corners
android:radius="5dp"/>
</shape>
To change the text color, put this in your styles.xml:
<style name="MySearchView" parent="Base.Widget.AppCompat.SearchView">
<item name="android:editTextColor">#color/text_color</item>
<item name="android:textColorHint">#color/hint_color</item>
</style>
Replace #color/text_color and #color/hint_color to suit your needs.
And then change the SearchView theme attribute in your XML layout:
<android.support.v7.widget.SearchView
android:id="#+id/mySearchview"
android:label="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:theme="#style/MySearchView">
</android.support.v7.widget.SearchView>

How can I make the textAppearance of TextView inside custom layout added to AlertDialog match the Dialog's?

I have this custom layout because I want a ListView with TextView below it and I want to handle click on list items so dialog doesn't close. (AlertDialog will show its own message view above its ListView.)
<LinearLayout 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="14dp"
android:paddingEnd="10dp"
>
<ListView
android:id="#+id/optionList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
android:choiceMode="singleChoice"
android:divider="#null"
/>
<TextView
android:id="#+id/messageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:padding="5dp"
/>
</LinearLayout>
I made a fake setup where I put text in both the dialog's TextView and my layout's. Screenshot of the result.
I even tried putting style="?android:attr/textAppearanceMedium" in #id/messageView in my layout since alert_dialog.xml has it. It made the text larger than the dialog's message. And the color doesn't match, too light (as if it's the Activity's default color).
I even tried using the builder's LayoutInflater, which is what the documentation says to do.
val infl = builder.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
val view = infl.inflate(R.layout.dialog_report_profile, null)
builder.setView(view)
You can always put both style="?android:attr/textAppearanceMedium" AND android:color="#000" at your TextView.
Or, you can just add this to your res/styles.xml:
<style name="DialogMessageText" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#android:color/black</item>
</style>
and put this line to your TextView: style="#style/DialogMessageText"

Android TabLayout tabPaddingTop and tabPaddingBottom not being removed

Here is my tab layout XML
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_tab_layout_height"
android:background="#color/tab_background_primary"
app:tabGravity="fill"
app:tabIndicatorColor="#color/primary_white"
app:tabIndicatorHeight="3dp"
app:tabMinWidth="120dp"
app:tabMode="scrollable"
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingTop="1dp"
app:tabPaddingBottom="1dp"
/>
It is removing the horizontal padding in between tabs but not the tabPaddingTop and tabPaddingBottom.
How do I remove the top and bottom padding to make each tab match the tabLayout height?
Custom view for each tab
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/tab"
android:textColor="#color/primary_white"
android:textSize="14sp"
android:textStyle="bold"
android:gravity="fill"
android:fontFamily="#string/font_fontFamily_medium"/>
I also tried using a Linear Layout with Imagview and Textview as custom view
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:gravity="fill"
android:layout_height="match_parent">
<ImageView
android:id="#+id/tab_logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#mipmap/ic_settings_light"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/tab_title"
android:textColor="#color/primary_white"
android:textSize="14sp"
android:textStyle="bold"
android:gravity="center"
android:text="test"
android:fontFamily="#string/font_fontFamily_medium"/>
</LinearLayout>
And here is how I inflated the custom tab view (for custom view with textView)
TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabTwo.setText("CASH IN");
tabTwo.setBackgroundColor(Color.parseColor("#EC5A0B"));
tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.mipmap.ic_action_cash_light, 0, 0, 0);
tabLayout.getTabAt(1).setCustomView(tabTwo);
As you can see, I am trying to give different background color to each tab. But the padding at top and bottom is still there.
I think Android design library's TabLayout have default padding like what you can see here
The other recommendation that I can recommend to you is using Google IO's SlidingTabLayout (Don't forget to copy SlidingTabStrip too!)
The usage is simple, just include in your layout :
<com.myapp.ui.widget.SlidingTabLayout
android:id="#+id/main_view_pager_tab"
android:layout_width="match_parent"
android:layout_height="#dimen/tabs_height"
android:background="#color/white" />
and then in your activity set the viewpager and listener (if you want)
mainViewPagerTab.setViewPager(mainViewPager);
mainViewPagerTab.setOnPageChangeListener(onPageChangeListener);
This was the only solution
https://stackoverflow.com/a/37942842/5689605
Try the code, after adding your tabs to your tablayout.
final ViewGroup test = (ViewGroup)(tabs.getChildAt(0));//tabs is your Tablayout
int tabLen = test.getChildCount();
for (int i = 0; i < tabLen; i++) {
View v = test.getChildAt(i);
v.setPadding(0, 0, 0, 0);
}
I got the best solution for this issue, check the below code and this will helpful.
My tablayout XML is like this:
<RelativeLayout
android:layout_height="30dp"
android:background="#333333"
android:layout_width="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextAppearance="#style/MineCustomTabText"
style="#style/tab_bassr"
app:tabMode="scrollable"/>
</RelativeLayout>
the relative layout upon this will reduce the top and bottom margin
<style name="tab_bassr" parent="TextAppearance.Design.Tab">
<item name="android:layout_width">match_parent</item>
<item name="android:tabStripEnabled">false</item>
<item name="tabPaddingStart">5dp</item>
<item name="tabPaddingEnd">5dp</item>
</style>
<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
<item name="android:textSize">14sp</item>
</style>
The style file is for left and right padding and the text size.

Selector for layout inside DrawerLayout doesn't work

I have a view aligned to the bottom of a navigation drawer that is not in list.
activity_main.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/readscreen_bg">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/loading_layout"
android:visibility="invisible">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBar"
android:layout_centerInParent="true" />
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:id="#+id/navigation_drawer_content"
android:layout_width="#dimen/navigation_width"
android:layout_height="match_parent"
android:background="#color/navdrw_bg"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_gravity="start" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/navigation_support_item_height"
android:id="#+id/support_project"
android:focusableInTouchMode="true"
android:clickable="true"
android:focusable="true"
android:background="#drawable/support_project_selector"
android:layout_alignParentBottom="true">
<ImageView
android:layout_width="#dimen/navigation_item_icon_size"
android:layout_height="#dimen/navigation_item_icon_size"
android:id="#+id/navigation_icon"
android:layout_marginLeft="#dimen/navigation_item_icon_left_margin"
android:layout_marginRight="#dimen/navigation_item_icon_right_margin"
android:layout_centerVertical="true"
android:src="#drawable/ic_menu_support"
android:layout_alignParentLeft="true"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/navdrw_bg"
android:text="#string/navigation_support_project"
android:textSize="#dimen/navigation_item_text_size"
android:id="#+id/navigation_name"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_toRightOf="#+id/navigation_icon"/>
</RelativeLayout>
<ListView android:id="#+id/left_drawer"
android:layout_width="#dimen/navigation_width"
android:layout_height="match_parent"
android:layout_above="#+id/support_project"
android:layout_gravity="left"
android:dividerHeight="0dp"
android:divider="#null"/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
It is, with id support_project. The problem is selector for this layout doesn't work.
support_project_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selected -->
<item
android:drawable="#color/navdrw_support_block_bg_pressed"
android:state_focused="true"
android:state_selected="true"/>
<!-- Pressed -->
<item
android:drawable="#color/navdrw_support_block_bg_pressed"
android:state_focused="false"
android:state_selected="true"/>
<!-- When not selected -->
<item
android:drawable="#color/navdrw_support_block_bg"/>
</selector>
I was trying many variants and nothing helped. Selector does install color when view is not clicked but when it is clicked it doesn't change it's color.
But layout is clickable, I do receive click event and can process it. The problem is only with click/activate color.
Colors in selector for active and normal state are 100% completely different.
There are multiple aspects you are handling not so good, here.
First, your selector possible states:
You should have an item tag per state you want to customize and one different android:state value per item tag. So, remove your android:state_focused attributes from both states (selected and pressed).
On your pressed state, you are using android:state_selected="true" when you should be using android:state_pressed="true". This will make your selector work when the item is actually pressed, not only when it is selected.
Second, in order to affect the selector to your RelativeLayout, you have to set it clickable by adding android:clickable=true attribute in your xml layout. RelativeLayout is not clickable by default, unlike a Button, for example.
For last, add android:duplicateParentState="true" to your RelativeLayout children Views, ImageView and TextView. This attribute allows the children to have the same state as the parent. When your RelativeLayout is selected or pressed, that state will be replicated by its children.
And you are done. Your selector is working.

Categories

Resources