Skip to main content

Posts

React material-ui [version1] TextField customize

React material-ui v0.x gives the opportunity to customize elements by overriding styles easily. When it comes to latest version v1, it becomes a bit difficult to do that similar as the earlier version. But they have given more options to customize elements by theming, overriding with classes and JSS. So you have to be a reactJs or Mui expert to understand those stuff with the documentation other than the earlier version. (This tutorial for react/ mui beginners to migrate from version 0.x) I will show you both version styling examples to do complete AtoZ customization to a TextField.
Recent posts

Customize StatusBar | Android Dev

Hide status bar // Hide Status Bar if ( Build . VERSION . SDK_INT < 16 ) { getWindow (). setFlags ( WindowManager . LayoutParams . FLAG_FULLSCREEN , WindowManager . LayoutParams . FLAG_FULLSCREEN ); } else { View decorView = getWindow (). getDecorView (); // Hide Status Bar. int uiOptions = View . SYSTEM_UI_FLAG_FULLSCREEN ; decorView . setSystemUiVisibility ( uiOptions ); } or // Hide status bar getWindow (). addFlags ( WindowManager . LayoutParams . FLAG_FULLSCREEN ); // Show status bar getWindow (). clearFlags ( WindowManager . LayoutParams . FLAG_FULLSCREEN ); Change status bar color programmatically if ( Build . VERSION . SDK_INT >= Build . VERSION_CODES . LOLLIPOP ) { Window window = getWindow (); window . addFlags ( WindowManager . LayoutParams . FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS ); window . setStatusBarColor ( Color . BLUE ); } or can set on value-21 <item name = ...

Customize ActionBar | Android Dev

How to change; Actionbar color? Statusbar color? Statusbar text color? **Set this style for the relevant activity <style name= "ThemeActionBar" parent= "ThemeOverlay.AppCompat.Light" > <!-- title text color --> <item name= "android:textColorPrimary" > @color/colorBlack </item> <!-- subtitle text color --> <item name= "android:textColorSecondary" > @color/colorBlack </item> <!-- action menu item text color --> <item name= "actionMenuTextColor" > @color/colorBlack </item> <!-- action menu item icon color - only applies to appcompat-v7 icons :( --> <item name= "colorControlNormal" > @color/colorBlack </item> <!-- enable actionbar --> <item name= "windowActionBar" > true </item> <item name= "windowNoTitle" > false </item> ...

Android fullscreen view

Hide action bar with style <style name= "AppTheme.NoActionBar" > <item name= "windowActionBar" > false </item> <item name= "windowNoTitle" > true </item> </style> Set this theme in manifest These lines will hide the status bar requestWindowFeature ( Window . FEATURE_NO_TITLE ); getWindow (). setFlags ( WindowManager . LayoutParams . FLAG_FULLSCREEN , WindowManager . LayoutParams . FLAG_FULLSCREEN ); Or View decorView = getWindow().getDecorView() ; int uiOptions = View. SYSTEM_UI_FLAG_FULLSCREEN ; decorView.setSystemUiVisibility(uiOptions) ;

Tab widget with swipe

Activity.java public class Activity extends AppCompatActivity { private TabLayout tabLayout ; private ViewPager viewPager ; @Override protected void onCreate (Bundle savedInstanceState) { super .onCreate(savedInstanceState) ; setContentView(R.layout. activity ) ; Toolbar toolbar = (Toolbar) findViewById(R.id. toolbar ) ; setSupportActionBar(toolbar) ; getSupportActionBar().setDisplayHomeAsUpEnabled( true ) ; getSupportActionBar().setDisplayShowHomeEnabled( true ) ; viewPager = (ViewPager) findViewById(R.id. viewpager ) ; setupViewPager( viewPager ) ; tabLayout = (TabLayout) findViewById(R.id. tabs ) ; tabLayout .setupWithViewPager( viewPager ) ; } private void setupViewPager (ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()) ; adapter.addFragment( new Fragment1() , "TODAY" ) ; adapter.addFrag...

Styling Tips

<item name= "android:windowBackground" > @color/colorBackground </item> (Background color set for all pages) ======Make scrolling view height 100%================= Make Scrollview inside a linearlayout. Set layout_height 0dp Set layout_weight 1 Set fillViewport true